/* ══════════════════════════════════════════════════════════════════════
   DESKTOP STUDY RAIL
   A quiet dock in the right gutter that puts every study tool one click
   away. Its solid surface and compact corners match .forge-topnav.

   Shared by every page via templates/_study_rail.html — pair this
   stylesheet with that include, never one without the other.

   Desktop only, and deliberately so: the rail lives in the empty space
   beside the centred content column, which only exists on a wide screen.
   Below the gates it stays display:none and each page's own nav remains
   the access path — the rail is never the only way to reach a tool.

   The markup is a <div role="navigation">, not a <nav>, on purpose:
   several pages style the bare `nav` element as their full-width top bar
   and run document.querySelector('nav') scroll handlers against it, both
   of which would capture a <nav> dropped in here.
   ══════════════════════════════════════════════════════════════════════ */
.study-rail {
    display: none;
}

/* Group headings exist for the sidebar variant below; the icon dock never
   shows them. */
.study-rail-heading {
    display: none;
}

/* min-width  — the 920px content column plus the rail needs the gutter.
   min-height — 11 items must fit between the nav and the viewport floor;
                shorter windows (or heavy browser zoom) drop the rail
                rather than tuck it under the nav or clip it.
   hover      — a real pointer, so tablets keep the dropdown. */
@media (min-width: 1200px) and (min-height: 600px) and (hover: hover) {
    .study-rail {
        --rail-accent: #5b50e8;
        --rail-ink: #2a2550;
        --rail-muted: #5f6280;
        position: fixed;
        top: 76px;
        right: 28px;   /* clears a classic (non-overlay) scrollbar */
        bottom: 16px;
        /* Hug the icons rather than stretching the surface down the whole window:
           top/bottom bound the band the dock may occupy, fit-content sizes it to
           its items, and the auto block margins centre it inside that band — so
           it never rides up under the nav or past the viewport floor. */
        height: fit-content;
        /* fit-content alone only SIZED the dock; with top/bottom set and
           margin-block:auto it just centred, so once the items outgrew the band
           it rode up under the nav instead of stopping. Cap it to the band and
           let it scroll. Measured before this: 12 items = 541px against a
           510px band at the 600px minimum height, i.e. 1px of slack. */
        max-height: calc(100vh - 92px);   /* top:76 + bottom:16 */
        overflow-y: auto;
        overscroll-behavior: contain;
        margin-block: auto;
        z-index: 1004;   /* above tool pages (1003), below the nav (1005) */
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: center;
        /* Keep the first link reachable when the dock needs to scroll. */
        justify-content: flex-start;
        padding: 7px;
        border: 1px solid rgba(91, 80, 232, .16);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(29, 24, 92, .06);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .study-rail-btn {
        position: relative;
        display: flex;
        width: 44px;
        height: 44px;
        flex: none;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: var(--rail-muted);
        text-decoration: none;
        transition:
            background .15s ease,
            color .15s ease,
            transform .14s cubic-bezier(.34, 1.45, .64, 1);
    }

    .study-rail-btn:hover {
        background: rgba(91, 80, 232, .1);
        color: var(--rail-accent);
    }

    .study-rail-btn:active {
        transform: scale(.92);
    }

    .study-rail-btn:focus-visible {
        outline: 3px solid #5b50e8;
        outline-offset: 2px;
    }

    .study-rail-btn.is-active {
        background: #eceafa;
        color: #4338ca;
        box-shadow: none;
    }

    .study-rail-btn svg {
        width: 19px;
        height: 19px;
        flex: none;
    }

    .study-rail-sep {
        width: 22px;
        height: 1px;
        flex: none;
        margin: 4px 0;
        background: rgba(91, 80, 232, .16);
    }

    /* The tool name, revealed on hover/focus to the left of the dock. It is a
       real element rather than a ::after so it names the link for assistive
       tech, and it is opacity-hidden rather than display:none so it stays in
       the accessibility tree while invisible. */
    .study-rail-label {
        position: absolute;
        top: 50%;
        right: calc(100% + 10px);
        padding: 6px 11px;
        border-radius: 10px;
        opacity: 0;
        background: rgba(23, 20, 66, .94);
        box-shadow: 0 2px 6px rgba(29, 24, 92, .12);
        color: #fff;
        font: 600 .78rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
        white-space: nowrap;
        pointer-events: none;
        transform: translate(5px, -50%);
        transition: opacity .15s ease, transform .15s ease;
    }

    .study-rail-btn:hover .study-rail-label,
    .study-rail-btn:focus-visible .study-rail-label {
        opacity: 1;
        transform: translate(0, -50%);
    }

    /* Dark mode — mirrors the dark .forge-topnav surface. */
    [data-dark] .study-rail {
        --rail-accent: #9d94ff;
        --rail-ink: #ece9ff;
        --rail-muted: #B4B4BD;
        border-color: rgba(157, 148, 255, .24);
        background: #111113;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    }

    [data-dark] .study-rail-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--rail-accent);
    }

    [data-dark] .study-rail-btn:focus-visible {
        outline-color: #b9b2ff;
    }

    [data-dark] .study-rail-btn.is-active {
        background: rgba(157, 148, 255, .14);
        color: #b9b2ff;
        box-shadow: none;
    }

    [data-dark] .study-rail-sep {
        background: rgba(157, 148, 255, .2);
    }

    [data-dark] .study-rail-label {
        background: rgba(255, 255, 255, 0.18);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .24);
        color: #1D1D21;
    }

    @media (prefers-reduced-motion: reduce) {
        .study-rail-btn,
        .study-rail-label {
            transition-duration: .01ms;
        }

        .study-rail-btn:active {
            transform: none;
        }
    }
}


/* ══════════════════════════════════════════════════════════════════════
   LEFT SIDEBAR VARIANT — opt-in via body.rail-left (the /app workspace).
   Quizlet-style: the same tools as the dock, but a labeled rail pinned to
   the left with the content column centred in the space it leaves. Pages
   without the class keep the right-hand icon dock untouched.

   Gate is 1280px (not the dock's 1200): the sidebar's 256px footprint has
   to clear the 760px column's left gutter, including on the full-screen
   tool overlays whose columns it also offsets below.
   ══════════════════════════════════════════════════════════════════════ */
/* The rail scrolls in both variants once the tool list outgrows the window.
   A platform scrollbar is a grey slab through the surface, so: thin, tinted,
   and only inked while the pointer is over the rail. */
.study-rail { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.study-rail:hover, .study-rail:focus-within { scrollbar-color: rgba(91, 80, 232, .34) transparent; }
.study-rail::-webkit-scrollbar { width: 6px; }
.study-rail::-webkit-scrollbar-track { background: transparent; }
.study-rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.study-rail:hover::-webkit-scrollbar-thumb,
.study-rail:focus-within::-webkit-scrollbar-thumb { background: rgba(91, 80, 232, .34); }

@media (min-width: 1280px) and (min-height: 600px) and (hover: hover) {
    body.rail-left .study-rail {
        top: 76px;
        left: 22px;
        right: auto;
        bottom: 22px;
        width: 214px;
        height: auto;
        margin-block: 0;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        padding: 12px 10px;
        border-radius: 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.rail-left .study-rail-btn {
        width: auto;
        height: 44px;
        flex: none;
        justify-content: flex-start;
        gap: 11px;
        padding: 0 12px;
        border-radius: 12px;
        font: 600 .88rem/1.2 'Plus Jakarta Sans', system-ui, sans-serif;
    }

    body.rail-left .study-rail-btn svg {
        width: 18px;
        height: 18px;
    }

    /* The hover tooltip becomes the row's inline label. */
    body.rail-left .study-rail-label {
        position: static;
        opacity: 1;
        transform: none;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: inherit;
        font: inherit;
        pointer-events: auto;
        white-space: nowrap;
        /* A flex row so the plan chip keeps its width and the NAME is what
           gives way. Ellipsising the whole label clipped the chip instead,
           and "Cheat Sheet…" / "Concept Map…" is what the rail actually read
           (146px and 151px of content in a 139px box). */
        display: flex;
        align-items: center;
        gap: 4px;
        overflow: hidden;
    }

    body.rail-left .study-rail-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.rail-left .study-rail-pro { flex: none; margin-left: 0; }

    /* Only the two rows that carry a chip need the extra room, so buy it
       there rather than reflowing every row: the rail's 214px is measured
       against the 760px column's gutter and is not free to grow. */
    body.rail-left .study-rail-btn:has(.study-rail-pro) {
        gap: 8px;
        padding: 0 10px;
    }

    body.rail-left .study-rail-btn.is-active {
        box-shadow: none;
    }

    /* Headings replace the hairline separator in this mode. */
    body.rail-left .study-rail-sep { display: none; }
    body.rail-left .study-rail-heading {
        display: block;
        padding: 12px 12px 5px;
        font: 700 .66rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--rail-muted);
    }
    body.rail-left .study-rail-heading:first-child { padding-top: 4px; }

    /* The content column centres in the space the sidebar leaves — both the
       main app column and the full-screen tool overlays, so a tool page's
       content never slides under the rail. */
    body.rail-left .container {
        margin-left: calc(256px + (100vw - 256px - 760px) / 2);
        margin-right: 0;
    }
    body.rail-left .section-page { padding-left: 256px; }
}


/* The chip is an upsell, so it has no business showing to someone who has
   already bought the thing. Cheat sheets and concept maps are gated by
   app.py's paid_required — Student, Student Lite and Pro reach them; Free and
   a paid Teacher do not — and `has-paid-tools` is set from that same rule. */
body.has-paid-tools .study-rail-pro { display: none; }

/* Plan chip on rail labels */
.study-rail-pro {
    display: inline-block;
    margin-left: 6px;
    /* Sized to fit "Concept Map" beside it in the 214px rail. At the old
       .56rem/.08em/6px the chip alone took 60px of a 139px label and the
       ellipsis ate it, so the rail read "Cheat Sheet…" / "Concept Map…". */
    padding: 0 4px 1px;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(135deg, #5b50e8, #4338ca);
    border-radius: 999px;
    vertical-align: 1px;
}