/* PythonMastery — site-wide theme FAB.
 * Vertical, ghost-by-default, opaque on hover/focus. Single source of truth
 * for the theme switcher across academy, lessons, IDE, Tutorial Lab, 404.
 *
 * Theme tokens are read from CSS variables already defined on each page
 * (--bg-2, --line-2, --fg-3, --fg, --accent). On the IDE landing those
 * come from styles.css; on academy/lessons from academy-build.css.
 */

/* Published so anything sharing this edge lines up with the FAB — currently the
   floating feedback button in assets/feedback.css. Declared here, beside the
   real offset, so the two cannot drift apart when the FAB moves. */
:root {
    --pm-fab-right: 16px;
}

.pm-theme-fab {
    position: fixed;
    right: 16px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 100px;
    opacity: 0.35;
    transition: opacity 0.22s ease, background 0.22s ease, border-color 0.22s ease,
                box-shadow 0.22s ease, backdrop-filter 0.22s ease;
}
.pm-theme-fab:hover,
.pm-theme-fab:focus-within {
    opacity: 1;
    background: var(--bg-2, #1e293b);
    border-color: var(--line-2, rgba(248, 250, 252, 0.20));
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pm-theme-fab button {
    background: transparent;
    border: 0;
    padding: 7px;
    width: 32px;
    height: 32px;
    border-radius: 100px;
    cursor: pointer;
    color: var(--fg-3, #64748b);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    transition: color 0.12s, background 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pm-theme-fab button:hover { color: var(--fg, #f8fafc); }
.pm-theme-fab button.active {
    background: var(--accent, #38bdf8);
    color: white;
}

/* Moon / sun / eye rather than coloured circles: the symbols say what each
   theme IS, where three gradient dots only said "these are three options" and
   left the reader to work out which was which. They inherit currentColor, so the
   FAB's ghost-at-rest, bright-on-hover behaviour still applies unchanged. */
.pm-theme-fab button svg {
    width: 15px;
    height: 15px;
    display: block;
}
.pm-theme-fab button .label {
    /* Visually hidden — glyph + title attr carry the meaning. */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 520px) {
    :root {
        --pm-fab-right: 10px;
    }

    .pm-theme-fab {
        right: 10px;
        /* Static fallback (older browsers): ~88px lifts clear of the iOS Safari URL bar. */
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        /* Dynamic viewport units (dvh) shrink/grow with the visible viewport,
           so the FAB stays in the same visual spot whether the browser chrome
           is shown or hidden. Supported on Safari 15.4+, Chrome 108+, FF 101+. */
        bottom: calc(10dvh + env(safe-area-inset-bottom, 0px));
        opacity: 0.55;
    }
    /* Was 30px — smaller than the 32px desktop size, i.e. the buttons shrank
       exactly where a fingertip replaces a mouse pointer. 36px is the
       compromise: comfortably tappable, while a bigger column would cover more
       of a 280px reading measure, since the FAB floats over the text. */
    .pm-theme-fab button { width: 36px; height: 36px; padding: 10px; }
}

/* Very short viewports (landscape phones) — pull the FAB up off the bottom further
   so it doesn't overlap the on-screen keyboard / browser chrome sliver. */
@media (max-width: 520px) and (max-height: 480px) {
    .pm-theme-fab {
        bottom: calc(50dvh - 60px);  /* vertically centred on the right edge */
    }
}
@media (hover: none) {
    .pm-theme-fab { opacity: 0.65; }
}

/* ── Hide the legacy inline theme toggles on every page where this FAB ships.
   The selectors target markup in index.html (live IDE) and tutorial-lab.html.
   Specificity bumped with `html body` prefix because styles.css has mobile-only
   rules like `.grid-header .header-theme-toggles { display: flex !important }`
   that would otherwise win on small screens. */
html body .header-theme-toggles,
html body .landscape-theme-toggles,
html body .grid-header .header-theme-toggles,
html body .grid-header .landscape-theme-toggles,
html body .theme-toggles,
html body .header-theme-toggles .theme-toggle-btn,
html body .landscape-theme-toggles .theme-toggle-btn,
html body .theme-toggles .theme-btn {
    display: none !important;
    visibility: hidden !important;
}