/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-mqnf7ke6xx] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-mqnf7ke6xx] {
    flex: 1;
}

.sidebar[b-mqnf7ke6xx] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-mqnf7ke6xx] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-mqnf7ke6xx]  a, .top-row[b-mqnf7ke6xx]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-mqnf7ke6xx]  a:hover, .top-row[b-mqnf7ke6xx]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-mqnf7ke6xx]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-mqnf7ke6xx] {
        justify-content: space-between;
    }

    .top-row[b-mqnf7ke6xx]  a, .top-row[b-mqnf7ke6xx]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-mqnf7ke6xx] {
        flex-direction: row;
    }

    .sidebar[b-mqnf7ke6xx] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-mqnf7ke6xx] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-mqnf7ke6xx]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-mqnf7ke6xx], article[b-mqnf7ke6xx] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-mqnf7ke6xx] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-mqnf7ke6xx] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-m7u8dpg8vy] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-m7u8dpg8vy] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-m7u8dpg8vy] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-m7u8dpg8vy] {
    font-size: 1.1rem;
}

.bi[b-m7u8dpg8vy] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-m7u8dpg8vy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-m7u8dpg8vy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-m7u8dpg8vy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-m7u8dpg8vy] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-m7u8dpg8vy] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-m7u8dpg8vy] {
        padding-bottom: 1rem;
    }

    .nav-item[b-m7u8dpg8vy]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-m7u8dpg8vy]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-m7u8dpg8vy]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-m7u8dpg8vy] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-m7u8dpg8vy] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-m7u8dpg8vy] {
        display: none;
    }

    .nav-scrollable[b-m7u8dpg8vy] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Immersive home hero — a full-bleed starfield with the Milky Way
   filling the page, a figure-8 three-body animation at the top, and a
   pointer that leads the eye down to the CTA. */

.home-hero[b-uf8e7ahbt6] {
    position: relative;
    /* Reach outside the .content padding for a true full-bleed backdrop. */
    margin: -1.1rem -1.5rem 0;
    /* Fill the entire viewport — there's no content below the hero now,
       so stretching to 100vh avoids a seam between the starfield and
       the page background on taller screens. */
    min-height: 100vh;
    display: flex;
    /* Stack the "Rainmaker Software™ presents" header above the
       vignetted hero box. Column direction + centered cross-axis keeps
       both children horizontally centered; justify-content: center
       vertically centers the whole group on the starfield. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate; /* keep the canvas behind hero content only */
}

.home-starfield[b-uf8e7ahbt6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    /* The canvas paints its own deep-space background. */
    background: #030308;
}

.home-hero-inner[b-uf8e7ahbt6] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 720px;
    /* Subtle vignette so text stays legible over the starfield without
       occluding it. */
    background: radial-gradient(ellipse at center,
        rgba(3, 3, 8, 0.55) 0%,
        rgba(3, 3, 8, 0.25) 55%,
        rgba(3, 3, 8, 0) 100%);
}

.home-threebody-wrap[b-uf8e7ahbt6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.25rem;
    color: rgba(0, 200, 255, 0.55);
}

.home-threebody[b-uf8e7ahbt6] {
    width: 320px;
    height: 150px;
    max-width: 80vw;
    display: block;
    /* No chrome — the animation floats on the starfield. */
    background: transparent;
}

.home-title[b-uf8e7ahbt6] {
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 300;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
}

.home-lede[b-uf8e7ahbt6] {
    color: rgba(200, 220, 255, 0.78);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 1.75rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

/* Concept C "sunlit-edge" button language (see
   wwwroot/design/button-concepts/README.md and the .kl-nav-btn / .sb
   rules in app.css). The home CTA is the largest instance of the same
   button vocabulary that runs through the lesson chrome — same firm
   capsule with `border-radius: 4px`, same layered inner-highlight +
   outer drop-shadow stack, same warm radial that bleeds in from past
   the right edge on hover. Scaled up: bigger padding and a slightly
   warmer baseline alpha so it reads as the page's primary action
   without changing its language. */
.home-cta[b-uf8e7ahbt6] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-block;
    padding: 12px 26px;
    color: #e6f7ff;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-decoration: none;
    border: 0;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(130,225,255,0.10) 0%, rgba(90,200,250,0.04) 100%);
    box-shadow:
        inset 0 1px 0 rgba(220,245,255,0.08),
        inset 0 0 0 1px rgba(160,230,250,0.14),
        0 1px 2px rgba(0,0,0,0.55),
        0 2px 10px rgba(0,0,0,0.45);
    transition: color 160ms ease, box-shadow 220ms ease;
}
.home-cta[b-uf8e7ahbt6]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(circle at 110% 50%,
        rgba(255, 240, 210, 0.32) 0%,
        rgba(255, 230, 195, 0.18) 18%,
        rgba(255, 225, 185, 0.08) 38%,
        rgba(255, 220, 175, 0)    62%);
    opacity: 0;
    transition: opacity 280ms ease;
}

/* No `transform: translateY(...)` on hover — the chrome stays put.
   Movement reads as jitter on a row of controls; for the CTA we keep
   the same rule for consistency with the rest of the button language.
   The sunlit-edge wash plus a touch more shadow depth carry the hover. */
.home-cta:hover[b-uf8e7ahbt6],
.home-cta:focus-visible[b-uf8e7ahbt6] {
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 0 0 1px rgba(160,230,250,0.28),
        0 1px 2px rgba(0,0,0,0.55),
        0 3px 14px rgba(0,0,0,0.50);
    outline: none;
}
.home-cta:hover[b-uf8e7ahbt6]::before,
.home-cta:focus-visible[b-uf8e7ahbt6]::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .home-cta[b-uf8e7ahbt6]::before { transition: none; }
}

/* Feature cards removed — the home page now ends at the hero so the
   starfield reads as the entire landing experience, with the CTA as
   the only call to action. */

/* "Rainmaker Software™ / presents" — a quiet studio-opening header
   that sits ABOVE the vignetted hero box (as a sibling of
   `.home-hero-inner`, not a child), so it reads on the bare
   starfield with only its own text-shadow for legibility. Kept
   faint so it doesn't compete with the "Orbital Mechanics" title,
   but interactive (and brighter) on hover. */
.home-presents[b-uf8e7ahbt6] {
    /* Stack the brand lockup on top and "presents" centered below. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35em;
    margin: 0 0 1.25rem;
    padding: 0 1rem;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.3;
    letter-spacing: 0.3px;
    /* Own stacking context so this sits ABOVE the absolutely-positioned
       `.home-starfield` canvas (`z-index: 0`). Without this the canvas
       paints over the wordmark text — the glyph still shows because its
       `drop-shadow` filter makes its own stacking context, but the plain
       `<span>` loses the paint order and renders invisibly. */
    position: relative;
    z-index: 1;
    color: rgba(200, 220, 255, 0.6);
    /* Heavier shadow than the in-box copy because there's no vignette
       behind this line — the starfield shows through directly. */
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.95),
                 0 0 4px rgba(0, 0, 0, 0.8);
}

.home-presents-link[b-uf8e7ahbt6] {
    /* Horizontal lockup: mark sits to the left of the wordmark on the
       same baseline, the way a logotype pairs a glyph with text. Row
       flex with centered cross-axis keeps the mark vertically aligned
       with the middle of the wordmark regardless of its em sizing. */
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    color: rgba(180, 220, 255, 0.8);
    text-decoration: none;
    border-radius: 4px;
    padding: 2px 4px;
    transition: color 0.2s, text-shadow 0.2s;
}

.home-presents-link:hover[b-uf8e7ahbt6],
.home-presents-link:focus-visible[b-uf8e7ahbt6] {
    color: #e6f7ff;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.45);
    outline: none;
}

.home-presents-logo[b-uf8e7ahbt6] {
    /* Sized relative to the wordmark's em so the mark scales with the
       text and the two always read as one lockup. 2.6em gives the mark
       meaningfully more visual weight than a cap-height glyph would —
       it reads as the primary logomark of the lockup, with the
       wordmark trailing it as a signature. */
    width: 2.6em;
    height: 2.6em;
    flex: none;
    /* Nudge the mark upward so, at this larger size, its optical
       center sits a touch above the wordmark's x-height rather than
       centered on it — lets the eye/raindrop drop toward the text
       instead of floating beside it. */
    transform: translateY(-0.15em);
    /* Brand colors (warm-orange orbit ring / violet almond pupil / cyan
       raindrop — the three-body "rain-is-blue" palette) are baked into
       the referenced SVG itself, not applied here. The mark is now an
       external `<img>` pointing at `wwwroot/img/rainmaker-software-logo.svg`
       (see `DESIGN.md` for the palette rationale), so swapping palettes
       is a single-file change over there. We no longer tint via
       `currentColor`, so the only hover affordance here is the glow. */
    transition: filter 0.2s;
    /* Soft glow so the mark holds up against the starfield without
       the vignette helping it. */
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.9));
}

.home-presents-link:hover .home-presents-logo[b-uf8e7ahbt6],
.home-presents-link:focus-visible .home-presents-logo[b-uf8e7ahbt6] {
    /* Brighter drop-shadow on hover/focus to signal interactivity
       without disturbing the baked-in brand colors. */
    filter: drop-shadow(0 0 8px rgba(127, 192, 168, 0.55));
}

.home-presents-name[b-uf8e7ahbt6] {
    /* Syne Mono — the brand wordmark typeface. Monospace fallback keeps
       the character shapes close if Google Fonts is unreachable. A small
       negative tracking value tightens the lockup. Explicit bright color
       so the wordmark reads clearly against the starfield without relying
       on the default `<a>` color from `app.css`. */
    color: rgba(230, 240, 255, 0.95);
    font-family: "Syne Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: 1.15em;
}

.home-presents-wordmark[b-uf8e7ahbt6] {
    /* Wraps name + TM so they render on the same line under the big
       mark (the link itself is a column flex). Inherits color from
       `.home-presents-name` via the span's own rule; TM reads as a
       superscript via `vertical-align: super` which works here because
       this wrapper is an inline element (not a flex item). */
    display: inline-block;
    white-space: nowrap;
    /* Same explicit color as the name — guarantees the TM is readable
       even if the global `a` rule tries to pull the link dark. */
    color: rgba(230, 240, 255, 0.95);
}

.home-presents-tm[b-uf8e7ahbt6] {
    /* Literal "TM" letters (not the ™ codepoint, which stacks vertically
       in Syne Mono). Rendered as a small superscript next to the
       wordmark via `vertical-align: super`. Set in Syne Mono — same as
       the wordmark — so the whole lockup reads as one typographic
       unit rather than a system-font superscript glued onto a
       monospace wordmark. */
    font-family: "Syne Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.55em;
    vertical-align: super;
    line-height: 1;
    opacity: 0.8;
    margin-left: 0.15em;
    letter-spacing: 0;
}

.home-presents-verb[b-uf8e7ahbt6] {
    /* "presents" sits on its own line under the brand lockup, centered
       by the parent's `align-items: center`. Italic + lighter weight
       reads as the studio-opening verb tying wordmark → title. */
    font-weight: 300;
    font-style: italic;
    font-size: 0.95em;
    opacity: 0.85;
}

@media (max-width: 480px) {
    .home-presents[b-uf8e7ahbt6] {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-dive-veil[b-uf8e7ahbt6],
    .home-hero-inner[b-uf8e7ahbt6] { transition: none !important; }
}

/* Dive-in transition: a full-viewport fixed veil that rapidly fills
   the screen with deep-space + a warm galactic-core glow at its
   center. Going fully opaque at its peak hides the navigation flash
   between "/" and "/discover" so the camera motion reads as one
   continuous dive rather than two disjoint animations. */
.home-dive-veil[b-uf8e7ahbt6] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255, 235, 200, 0.70) 0%,
            rgba(180, 150, 180, 0.55) 18%,
            rgba(40, 40, 70, 0.92) 55%,
            rgba(3, 3, 8, 1.0) 100%);
    transition: opacity 0.28s cubic-bezier(0.55, 0.0, 0.85, 0.55);
    will-change: opacity;
}

.home-hero.is-diving .home-dive-veil[b-uf8e7ahbt6] {
    opacity: 1;
}

.home-hero.is-diving .home-hero-inner[b-uf8e7ahbt6] {
    opacity: 0;
    transform: scale(1.14);
    transition: opacity 0.22s ease-in, transform 0.32s ease-in;
}

.home-hero-inner[b-uf8e7ahbt6] {
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
}
/* /Components/Pages/Lessons/LessonIndex.razor.rz.scp.css */
/* Discover (lesson index) — continues the deep-space aesthetic from
   the home hero. The opening starfield animation picks up where the
   home page's "dive" left off: we're inside the Milky Way, closer to
   our solar system now, with its presence hinted at in the periphery
   (a warm glow and faint orbit arcs) rather than shown outright. */

.discover-hero[b-19tc461nlb] {
    position: relative;
    margin: -1.1rem -1.5rem 0;
    /* Shrunk so the entire discover page (hero + symbol grid) fits
       within 100vh — no vertical scrollbar appears. */
    min-height: 32vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

.discover-starfield[b-19tc461nlb] {
    /* Fixed to the viewport so the Milky Way starfield becomes the
       backdrop of the *entire* discover page, not just the hero. The
       grid-wrap below is transparent, so the live canvas shows through
       behind the law symbols too. */
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    background: #030308;
    pointer-events: none;
}

/* Arrival veil — the exact same gradient as .home-dive-veil. It
   mounts opaque, and the discover-hero JS clears `.is-arriving` once
   the starfield has painted at least one frame. The CSS fade-out
   bridges the dead zone between the home page being torn down and
   the discover canvas coming alive, so the dive no longer feels
   interrupted by a blank moment. */
.discover-arrival-veil[b-19tc461nlb] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255, 235, 200, 0.70) 0%,
            rgba(180, 150, 180, 0.55) 18%,
            rgba(40, 40, 70, 0.92) 55%,
            rgba(3, 3, 8, 1.0) 100%);
    transition: opacity 0.28s cubic-bezier(0.25, 0.6, 0.35, 1);
}
.discover-arrival-veil.is-arriving[b-19tc461nlb] {
    opacity: 1;
    transition: none;
    /* Promote to its own compositor layer only while it's actually visible
       and animating. Leaving `will-change: opacity` on permanently kept the
       veil as a separate layer that the browser had to re-blend on every
       starfield frame, even after the fade completed. */
    will-change: opacity;
}

.discover-hero-inner[b-19tc461nlb] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1.75rem 1.5rem 1.25rem;
    max-width: 760px;
    /* No background — the hero text sits directly on the Milky Way
       starfield. Contrast is carried by the text color alone. */
    background: transparent;
    /* Fades in right as we arrive — matches the handoff from the
       home dive so there's no dead air. Kept short so the arrival
       never feels sluggish. */
    opacity: 0;
    animation: discover-fade-in-b-19tc461nlb 0.35s ease-out 0s forwards;
}

@keyframes discover-fade-in-b-19tc461nlb {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Title and lede share one uniform, solid warm-gold color — each
   letter renders with the same flat color (no gradient fills, no
   per-letter shadow glow), so the type reads as a single cohesive
   mark against the cool-blue/dark Milky Way backdrop. */
.discover-title[b-19tc461nlb] {
    color: #f4d58a;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 300;
    letter-spacing: 0.5px;
    margin: 0 0 0.6rem;
}

.discover-lede[b-19tc461nlb] {
    color: #f4d58a;
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────── */
/* Law card grid                                                   */
/* ─────────────────────────────────────────────────────────────── */

/* The grid wrap sits over the live Milky Way starfield canvas. A
   single very dark elliptical pool engulfs the whole law grid so the
   symbols sit on deep black rather than on the Milky Way band behind
   them. No diagonal band, no nebula tints — just the dark ellipse
   fading back into the starfield at the rim. */
.discover-grid-wrap[b-19tc461nlb] {
    position: relative;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
    background: radial-gradient(ellipse 70% 95% at 50% 50%,
        rgba(0, 0, 0, 0.96) 0%,
        rgba(0, 0, 0, 0.92) 45%,
        rgba(0, 0, 0, 0.70) 70%,
        rgba(0, 0, 0, 0.30) 88%,
        rgba(0, 0, 0, 0) 100%);
    background-repeat: no-repeat;
}

.discover-grid[b-19tc461nlb] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem 1rem;
    padding: 1rem 0 1.5rem;
    margin: 0 auto;
    max-width: 1100px;
    /* Stagger in right after the hero — short delay keeps the whole
       arrival feeling prompt rather than drawn-out. */
    opacity: 0;
    animation: discover-fade-in-b-19tc461nlb 0.35s ease-out 0.12s forwards;
}

/* On narrower viewports, drop to 2 columns × 5 rows (still no
   horizontal jitter, still fits in one viewport on most phones
   because the cards have no heavy chrome). */
@media (max-width: 820px) {
    .discover-grid[b-19tc461nlb] { grid-template-columns: repeat(2, 1fr); }
}

.discover-cell[b-19tc461nlb] {
    display: flex;
}

/* Each card rests on the deep-black grid pool — no per-card chrome at
   rest, just the symbol on the dark band. Hover lights the symbol
   itself (a contained warm bloom on `.ds-svg`); the card background
   does not change, so there's exactly one hover affordance and it
   never reaches the card edges. */
.discover-card[b-19tc461nlb] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0.9rem 0.6rem 0.8rem;
    background:
        radial-gradient(ellipse 70% 58% at 50% 42%,
            rgba(3, 3, 8, 0.95) 0%,
            rgba(3, 3, 8, 0.82) 45%,
            rgba(3, 3, 8, 0.35) 72%,
            rgba(3, 3, 8, 0) 92%);
    border: none;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.18s ease-out;
}

/* On hover/focus the hover affordance lives entirely on the symbol
   itself — a soft warm glow radiating outward from the law's figure
   via stacked drop-shadows on `.ds-svg` (rule below). There is no
   card-level wash anymore: no rectangular box, no circular halo
   that could be clipped at the card boundary. The light starts at
   the symbol and dies out well inside the card, so the effect reads
   as the law gently lighting up rather than the whole tile glowing. */
.discover-card:not(.is-disabled):hover[b-19tc461nlb],
.discover-card:not(.is-disabled):focus-visible[b-19tc461nlb] {
    outline: none;
}
/* Keyboard-only focus still gets a visible ring for accessibility,
   in addition to the lit symbol. */
.discover-card:not(.is-disabled):focus-visible[b-19tc461nlb] {
    outline: 1px solid rgba(180, 220, 255, 0.6);
    outline-offset: 2px;
}
.discover-card:not(.is-disabled):hover .ds-svg[b-19tc461nlb],
.discover-card:not(.is-disabled):focus-visible .ds-svg[b-19tc461nlb] {
    /* Stacked warm drop-shadows: the inner one hugs the symbol's
       silhouette (the "lit" look), the outer one is a soft cream
       bloom that radiates a short distance past the figure. The
       furthest stop fades to zero alpha well inside the card edges,
       so the glow is genuinely contained within the figure. */
    filter:
        drop-shadow(0 0 4px  rgba(255, 235, 195, 0.55))
        drop-shadow(0 0 12px rgba(255, 225, 175, 0.30))
        brightness(1.12);
}
/* Title glow on hover — the only hover signal besides the lit
   SVG. Layered text-shadows: a tight 2px halo hugs each glyph
   for crisp legibility, and a softer 6px bloom adds warmth
   without smearing. No background bloom or cone — the glyph
   glow alone carries the hover. */
.discover-card:not(.is-disabled):hover .discover-card-title[b-19tc461nlb],
.discover-card:not(.is-disabled):focus-visible .discover-card-title[b-19tc461nlb] {
    color: rgba(255, 248, 230, 1);
    text-shadow:
        0 0 2px rgba(255, 235, 195, 0.85),
        0 0 6px rgba(255, 220, 170, 0.45);
}

/* Symbol + title remain on a normal stacking context. */
.discover-symbol[b-19tc461nlb],
.discover-card-title[b-19tc461nlb],
.discover-soon[b-19tc461nlb] {
    position: relative;
}

.ds-svg[b-19tc461nlb] {
    transition: filter 0.18s ease-out;
}

.discover-card.is-disabled[b-19tc461nlb] {
    opacity: 0.6;
    cursor: default;
    background:
        radial-gradient(ellipse 70% 58% at 50% 42%,
            rgba(3, 3, 8, 0.80) 0%,
            rgba(3, 3, 8, 0.55) 45%,
            rgba(3, 3, 8, 0.20) 72%,
            rgba(3, 3, 8, 0) 92%);
}

/* The SVG symbol is the focus of each card; the title is a quiet
   caption beneath it. */
.discover-symbol[b-19tc461nlb] {
    width: 100%;
    max-width: 140px;
    margin-bottom: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.discover-symbol .ds-svg[b-19tc461nlb] {
    width: 100%;
    height: auto;
    display: block;
}

.discover-card-title[b-19tc461nlb] {
    color: rgba(230, 245, 255, 0.92);
    font-size: 0.92rem;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-align: center;
    transition: color 0.18s ease-out, text-shadow 0.18s ease-out;
}

.discover-soon[b-19tc461nlb] {
    display: block;
    margin-top: 0.35rem;
    color: rgba(96, 125, 139, 0.85);
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .discover-hero-inner[b-19tc461nlb],
    .discover-grid[b-19tc461nlb] {
        animation: none;
        opacity: 1;
    }
    .discover-card[b-19tc461nlb] { transition: none; }
    .discover-card[b-19tc461nlb]::before { transition: none; }
    .ds-svg[b-19tc461nlb] { transition: none; }
}
/* /Components/Shared/Breadcrumb.razor.rz.scp.css */
/*
    Discrete breadcrumb bar — top-left corner, fully transparent background.
    Follows the dim-text alpha convention from STYLE_GUIDE.md: the bar
    recedes into whatever is behind it and doesn't compete with lesson content.

    pointer-events are kept ON so the links are clickable, but the bar itself
    carries no visible background or border so it feels invisible until the
    user notices it.
*/

.breadcrumb[b-z7a9b8cdzl] {
    position: fixed;
    top: 12px;
    left: 14px;
    z-index: 900;                        /* below VersionBadge (1000) but above canvas */
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1;
    font-family: system-ui, sans-serif;
    user-select: none;
}

.breadcrumb-logo[b-z7a9b8cdzl] {
    height: 18px;
    width: auto;
    display: block;
    opacity: 0.55;
    transition: opacity 0.15s;
    filter: brightness(0.9);
}

.breadcrumb-home:hover .breadcrumb-logo[b-z7a9b8cdzl],
.breadcrumb-home:focus-visible .breadcrumb-logo[b-z7a9b8cdzl] {
    opacity: 0.9;
}

.breadcrumb-home:focus-visible[b-z7a9b8cdzl] {
    outline: 1px solid rgba(0, 204, 255, 0.5);
    outline-offset: 2px;
    border-radius: 2px;
}

.breadcrumb-sep[b-z7a9b8cdzl] {
    color: rgba(180, 210, 255, 0.25);
    font-weight: 300;
    pointer-events: none;
}

.breadcrumb-link[b-z7a9b8cdzl] {
    color: rgba(180, 210, 255, 0.45);
    text-decoration: none;
    transition: color 0.12s;
    letter-spacing: 0.02em;
}

.breadcrumb-link:hover[b-z7a9b8cdzl],
.breadcrumb-link:focus-visible[b-z7a9b8cdzl] {
    color: rgba(180, 210, 255, 0.85);
    text-decoration: none;
}

.breadcrumb-link:focus-visible[b-z7a9b8cdzl] {
    outline: 1px solid rgba(0, 204, 255, 0.5);
    outline-offset: 2px;
    border-radius: 2px;
}

.breadcrumb-current[b-z7a9b8cdzl] {
    color: rgba(180, 210, 255, 0.30);
    letter-spacing: 0.02em;
    pointer-events: none;
}
/* /Components/Shared/DetailLevelToggle.razor.rz.scp.css */
/* Pinned to the bottom-right corner, opposite of the VersionBadge. Dim by
   default so it doesn't compete with lesson content; slightly brighter on
   hover / focus for discoverability. The tier-specific tints below give
   each of the three states (full / mid / low) its own colour so a click
   produces an immediately visible change at the periphery. */
.detail-toggle[b-ogb4pn88x2] {
    position: fixed;
    bottom: 6px;
    right: 8px;
    z-index: 1000;
    font-family: monospace;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(180, 210, 255, 0.55);
    background: transparent;
    border: 1px solid rgba(180, 210, 255, 0.18);
    border-radius: 3px;
    padding: 3px 6px;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    /* Safe against OS-level font scaling on phones. */
    min-height: 24px;
}

.detail-toggle:hover[b-ogb4pn88x2],
.detail-toggle:focus-visible[b-ogb4pn88x2] {
    outline: none;
    /* Colours layered onto the tier tint via the rules below. */
    filter: brightness(1.25);
}

/* Full detail — neutral cool-blue, matches the rest of the chrome. */
.detail-toggle-high[b-ogb4pn88x2] {
    color: rgba(180, 210, 255, 0.7);
    border-color: rgba(180, 210, 255, 0.28);
    background: rgba(180, 210, 255, 0.04);
}

/* Mid detail — warm amber, picking up the same family as the
   `pb-solar` button. Reads as "things have been turned down a notch"
   without being alarming. */
.detail-toggle-med[b-ogb4pn88x2] {
    color: rgba(255, 200, 90, 0.78);
    border-color: rgba(255, 200, 90, 0.36);
    background: rgba(255, 200, 90, 0.05);
}

/* Low detail — cyan, the site's primary accent. Strongest tint so the
   most aggressive reduction is the most clearly signalled. */
.detail-toggle-low[b-ogb4pn88x2] {
    color: rgba(0, 204, 255, 0.78);
    border-color: rgba(0, 204, 255, 0.4);
    background: rgba(0, 204, 255, 0.06);
}
/* /Components/Shared/VersionBadge.razor.rz.scp.css */
.version-badge[b-zfmzred3d7] {
    position: fixed;
    bottom: 6px;
    left: 8px;
    z-index: 1000;
    font-family: monospace;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(180, 210, 255, 0.28);
    pointer-events: none;
    user-select: none;
}