/**
 * Theme Toggle — the light/dark control in the page-nav breadcrumb.
 *
 * Rendered by renderThemeToggle() in common/js/page-nav.js in the right-hand
 * group of the breadcrumb bar, left of the switcher buttons, on the
 * 107live/live2 detail pages — which carry no main navigation and so had no
 * way to reach the site's theme switch. Spec: DESIGN.md §5 "Theme Toggle".
 *
 * Deliberately a separate namespace from navigation.css's own .theme-toggle:
 * that one is a 42px bordered control sized for the nav bar and built on
 * --nav-* variables, this one is a flat 26px glyph sized for the breadcrumb.
 * The pn- prefix means the two can never collide on a page that loads both.
 *
 * The sun/moon marks carry no color at all — only semantic pn-theme-* classes,
 * assigned below from --t7- tokens (the toolkit-link.css / report-list.css
 * pattern: presentation-attribute var() is unreliable across engines and
 * lint_tokens.py sees no literals).
 */

.pn-theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--t7-radius-md);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Flat at rest: the switcher chips beside it own the emphasis in this bar. */
.pn-theme-toggle:hover,
.pn-theme-toggle:focus-visible {
    background: var(--t7-hover);
}

.pn-theme-toggle:focus-visible {
    outline: 2px solid var(--t7-result-blue);
    outline-offset: 2px;
}

/* --- Marks --------------------------------------------------------------- */

/* Both glyphs are stacked and crossfaded, so the control never reflows and the
   rotation reads as one object turning over. Same idiom as the main nav. */
.pn-theme-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    stroke: var(--pn-theme-mark, var(--t7-text-secondary));
    transition: opacity 0.3s ease, transform 0.3s ease, stroke 0.2s ease;
}

.pn-theme-icon-light {
    opacity: 1;
    transform: rotate(0deg);
}

.pn-theme-icon-dark {
    opacity: 0;
    transform: rotate(90deg);
}

[data-theme="dark"] .pn-theme-icon-light {
    opacity: 0;
    transform: rotate(-90deg);
}

[data-theme="dark"] .pn-theme-icon-dark {
    opacity: 1;
    transform: rotate(0deg);
}

/* Hover resolves the glyph to the signal color, exactly as the toolkit link
   beside it does — the two controls in this bar read as one family. */
.pn-theme-toggle:hover,
.pn-theme-toggle:focus-visible {
    --pn-theme-mark: var(--t7-result-blue);
}

/* Dark-mode lift: result-blue has no [data-theme="dark"] variant and sits near
   2.8:1 on the dark card, under the 3:1 non-text floor. Lifted once here with
   color-mix over the token, as toolkit-link.css does for its own signal. */
[data-theme="dark"] .pn-theme-toggle:hover,
[data-theme="dark"] .pn-theme-toggle:focus-visible {
    --pn-theme-mark: color-mix(in srgb, var(--t7-result-blue) 70%, white);
}

@media (prefers-reduced-motion: reduce) {
    .pn-theme-toggle,
    .pn-theme-icon {
        transition: none;
    }
}