/* Design tokens live in css/tokens.css, which loads first. */

.platform-icon-sprite {
    position: fixed;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Accessibility helpers */
/* !important 5 of 14. .sr-only has to remove an element from the visual layout
   no matter what a page rule says about its position; a screen-reader-only
   label that a layout rule drags back on screen is worse than no label. */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    background: var(--platform-teal);
    color: var(--surface);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform 0.18s ease;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--surface);
    outline-offset: 2px;
}

#app-root:focus {
    outline: none;
}

.map-dot:focus-visible {
    outline: 2px solid var(--platform-teal);
    outline-offset: 2px;
}

.auth-notice {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background: var(--accent-wash);
    border: 1px solid var(--line);
    color: var(--platform-ink, var(--ink));
    font-size: var(--fs-sm);
    line-height: 1.4;
}

body {
    min-width: 320px;
    background: var(--platform-canvas);
    background-image: none;
    color: var(--platform-text);
}

.bg-mesh {
    display: none;
}

.platform-shell {
    min-height: 100vh;
    min-height: 100svh;
}

/* The navigation rail. This used to be three stacked definitions: a dark navy
   original here, a second block of overrides further down, and a "light sidebar
   theme" near the lesson library that repainted the whole thing white. The last
   one won, so the first two were dead for every property it touched — the navy
   background, the white link text and two of the three box-shadows had not
   rendered in a long time. One definition now. */
.platform-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;
    display: flex;
    width: var(--sidebar-width);
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--space-5) var(--space-4) var(--space-4);
    color: var(--ink);
    background: var(--surface);
    border-right: 1px solid var(--line);
    /* No shadow at rest: on desktop this is a permanent column beside the
       content, not a raised surface. It only earns one below 900px, where it
       slides in over the page — see the sidebar-open rule in that media query. */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    margin-bottom: var(--space-4);
}

.sidebar-brand,
.mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.sidebar-brand-mark,
.mobile-brand span {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--radius);
    font-family: var(--font-heading, Georgia, serif);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1;
    color: var(--surface);
    background: var(--accent);
}

.sidebar-brand-name {
    font-family: var(--font-body, Arial, sans-serif);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: var(--ls-display);
    color: var(--ink);
}

.sidebar-close {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.sidebar-close svg,
.mobile-menu-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-nav {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: var(--space-1);
}

.sidebar-nav-group {
    margin-top: var(--space-3);
}


.sidebar-nav-label {
    margin: 0 var(--space-3) var(--space-2);
    color: var(--muted);
    font-family: var(--font-body, Arial, sans-serif);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}

.sidebar-link {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    gap: var(--space-3);
    margin: 2px 0;
    padding: var(--space-2) var(--space-3);
    overflow: hidden;
    color: var(--ink-soft);
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sidebar-link svg,
.sidebar-subscribe svg {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-link span,
.sidebar-subscribe span {
    min-width: 0;
    font-family: var(--font-body, Arial, sans-serif);
    font-size: var(--fs-sm);
    font-weight: 560;
    line-height: 1.25;
}

.sidebar-exam-link span {
    font-size: var(--fs-caption);
}

.sidebar-link:hover {
    color: var(--ink);
    background: var(--surface-sunken);
    transform: translateX(2px);
}

/* No shadow: a nav item is flat, and the accent fill already carries "current".
   The two it used to have — an inset navy stripe and a 20px drop — were an
   invisible border-drawn-as-shadow and pure decoration. */
.sidebar-link.active {
    color: var(--surface);
    background: var(--accent);
    border-color: transparent;
}

.sidebar-link:focus-visible,
.sidebar-subscribe:focus-visible,
.sidebar-user:focus-visible,
.sidebar-brand:focus-visible,
.mobile-menu-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 2px;
}

.sidebar-actions {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

/* The one premium affordance in the shell. Tone in the label and the border on
   the plain surface — the same rule .chip follows, for the same reason: a tint
   mixed against transparent cannot be contrast-checked as a fixed pair. */
.sidebar-subscribe {
    display: flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3);
    color: var(--warning);
    background: var(--surface);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.sidebar-subscribe:hover,
.sidebar-subscribe.active {
    color: var(--warning);
    background: var(--canvas);
}

.sidebar-admin-link {
    color: var(--accent);
}

.sidebar-admin-link[hidden] {
    display: none;
}

.sidebar-lang-switcher {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    margin-top: 2px;
    padding: 0;
    overflow: hidden;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* The selected language is marked by an underline. It was an inset box-shadow,
   which is a border drawn as a shadow; the transparent border on the resting
   state keeps the two from shifting by 2px as you switch. */
.sidebar-lang-switcher .lang-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    color: var(--muted);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease;
}

.sidebar-lang-switcher .lang-btn:last-child {
    border-right: 0;
}

.sidebar-lang-switcher .lang-btn.active {
    color: var(--accent);
    background: var(--accent-wash);
    border-bottom-color: var(--accent);
}

.sidebar-user {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    width: 100%;
    min-height: 54px;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.sidebar-user:hover {
    background: var(--canvas);
}

.sidebar-avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    color: var(--surface);
    background: var(--accent);
    border-radius: 50%;
    font-family: var(--font-body, Arial, sans-serif);
    font-size: var(--fs-caption);
    font-weight: 750;
}

.sidebar-user-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.sidebar-user-copy strong,
.sidebar-user-copy small {
    overflow: hidden;
    font-family: var(--font-body, Arial, sans-serif);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-copy strong {
    font-size: var(--fs-caption);
    font-weight: 650;
}

.sidebar-user-copy small {
    color: var(--muted);
    font-size: var(--fs-caption);
}

.sidebar-user-chevron {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.platform-workspace {
    min-height: 100vh;
    min-height: 100svh;
    margin-left: var(--platform-sidebar-width);
    background: var(--platform-canvas);
}

body.test-focus-mode .platform-sidebar,
body.test-focus-mode .sidebar-scrim,
body.test-focus-mode header.mobile-shell-bar {
    display: none;
}

/* Body's global overflow-x:hidden makes it a scroll container and breaks
   position:sticky. In the test (no sidebar) it's safe to restore normal flow
   so the document scrolls and the quiz top bar can stick. */
body.test-focus-mode {
    overflow: visible;
}

body.test-focus-mode .platform-workspace {
    margin-left: 0;
    padding-top: 0;
}

body.test-focus-mode .quiz-layout {
    width: min(100%, 1480px);
    margin: 0 auto;
    padding: var(--space-4) clamp(var(--space-3), 2vw, var(--space-5)) var(--space-6);
}


header.mobile-shell-bar {
    display: none;
}

#app-root {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

#app-root > .section-padding,
#app-root > .profile-section,
#app-root > .admin-shell,
#app-root > .subscribe-payment-shell,
#app-root > .auth-section,
#app-root > .history-section,
#app-root > .results-section {
    width: min(100%, 1240px);
    margin-inline: auto;
}

/* Width and padding are restated further down this file, in the block that
   renders; only the centring survived from here. */
.platform-home {
    margin: 0 auto;
}


.hero-illustration {
    display: block;
    width: 100%;
    height: auto;
    filter: none;
}


.platform-page-label {
    margin-bottom: var(--space-3);
    color: var(--platform-teal);
    font-family: var(--font-body, Arial, sans-serif);
    font-size: var(--fs-eyebrow);
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}

.platform-home-heading {
    max-width: 750px;
}

.platform-home-heading h1,
.platform-home-heading h2 {
    margin: 0;
    color: var(--platform-text);
    font-family: var(--font-heading, Georgia, serif);
    font-size: var(--fs-display-lg);
    font-weight: 700;
    line-height: var(--lh-display);
}

.platform-home-heading p {
    max-width: 650px;
    margin: var(--space-4) 0 0;
    color: var(--platform-muted);
    font-family: var(--font-body, Arial, sans-serif);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
}

/* Surface from .card .card--tight. The old background was --surface at 78%
   opacity, so the canvas showed through a card that is meant to be flat. */
.platform-summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.platform-summary-icon,
.platform-track-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--platform-teal);
    background: var(--canvas);
    border-radius: var(--radius);
}

.platform-summary-icon {
    width: 48px;
    height: 48px;
}

.platform-summary-icon svg,
.platform-track-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.platform-summary-copy {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--platform-muted);
    font-family: var(--font-body, Arial, sans-serif);
}

.platform-summary-copy span:first-child {
    flex-basis: 100%;
    font-size: var(--fs-caption);
    font-weight: 600;
}

.platform-summary-copy strong {
    color: var(--platform-text);
    font-size: var(--fs-md);
    font-weight: 750;
}

.platform-summary-separator {
    color: var(--platform-teal);
}

.platform-track-list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* Surface, hover, focus ring and pointer come from .card .card--action. Only the
   four-column layout is specific to a track card. */
.platform-track-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto 22px;
    min-height: 112px;
    align-items: center;
    gap: var(--space-4);
}

/* "Recommended first" was an inset 4px shadow pretending to be a border. */
.platform-track-card.featured {
    border-color: var(--accent);
    border-left-width: var(--rule);
}

.platform-track-icon {
    width: 58px;
    height: 58px;
}

.platform-track-copy {
    min-width: 0;
}

.platform-track-copy h3 {
    margin: 0 0 var(--space-1);
    color: var(--platform-text);
    font-family: var(--font-body, Arial, sans-serif);
    font-size: var(--fs-md);
    font-weight: 750;
    line-height: 1.2;
}

.platform-track-copy p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--platform-muted);
    font-family: var(--font-body, Arial, sans-serif);
    font-size: var(--fs-sm);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.platform-track-stats {
    display: grid;
    min-width: 122px;
    gap: var(--space-1);
    text-align: left;
    font-family: var(--font-body, Arial, sans-serif);
}

.platform-track-stats strong {
    color: var(--platform-text);
    font-size: var(--fs-sm);
    font-weight: 750;
}

.platform-track-stats span {
    color: var(--platform-muted);
    font-size: var(--fs-caption);
}

.platform-track-chevron {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}

.platform-track-card:hover .platform-track-chevron {
    transform: translateX(3px);
}

.platform-activity {
    margin-top: var(--space-6);
}

.platform-activity h2 {
    margin: 0;
    font-family: var(--font-body, Arial, sans-serif);
    font-size: var(--fs-base);
    font-weight: 750;
}

.platform-activity p {
    margin: var(--space-2) 0 0;
    color: var(--platform-muted);
    font-family: var(--font-body, Arial, sans-serif);
    font-size: var(--fs-sm);
}

.sidebar-scrim {
    display: none;
}

@media (max-width: 1120px) and (min-width: 901px) {
    /* --sidebar-width narrows here; see css/tokens.css. */
    .platform-sidebar {
        padding-inline: var(--space-4);
    }
}

@media (max-width: 900px) {
    .platform-sidebar {
        width: min(86vw, 340px);
        padding: var(--space-5) var(--space-4) var(--space-4);
        transform: translateX(-104%);
        transition: transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    body.sidebar-open {
        overflow: hidden;
    }

    /* Off-canvas, the rail really is raised over the page — the one state in
       which it earns a shadow. */
    body.sidebar-open .platform-sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-overlay);
    }

    .sidebar-close {
        display: inline-flex;
    }

    .sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 900;
        display: block;
        visibility: hidden;
        background: color-mix(in srgb, var(--ink) 58%, transparent);
        border: 0;
        opacity: 0;
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    body.sidebar-open .sidebar-scrim {
        visibility: visible;
        opacity: 1;
    }

    .platform-workspace {
        margin-left: 0;
        padding-top: var(--space-8);
    }

    header.mobile-shell-bar {
        position: fixed;
        inset: 0 0 auto;
        z-index: 800;
        display: flex;
        height: 64px;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--space-4);
        /* Was dark navy with white text, from back when the rail was navy too.
           It is the same piece of chrome as the sidebar and now looks it. */
        background: var(--surface);
        border: 0;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-raised);
    }

    .mobile-brand span {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: var(--fs-lg);
    }

    .mobile-brand strong {
        color: var(--ink);
        font-family: var(--font-body, Arial, sans-serif);
        font-size: var(--fs-base);
        font-weight: 700;
        letter-spacing: var(--ls-display);
    }

    .mobile-menu-button {
        display: inline-flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        color: var(--ink);
        background: var(--canvas);
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    /* The ≤900px padding for .platform-home is set with the other
       #app-root children further down this file, and beats this. */

    .platform-home-heading h1,
    .platform-home-heading h2 {
        font-size: var(--fs-display-lg);
    }
}

@media (max-width: 620px) {
    .platform-page-label {
        margin-bottom: var(--space-2);
    }

    .platform-home-heading p {
        margin-top: var(--space-3);
        font-size: var(--fs-sm);
    }

    .platform-summary {
        align-items: flex-start;
        margin-top: var(--space-5);
    }

    .platform-track-card {
        grid-template-columns: 48px minmax(0, 1fr) 18px;
        min-height: 98px;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .platform-track-icon {
        width: 48px;
        height: 48px;
    }

    .platform-track-icon svg {
        width: 22px;
        height: 22px;
    }

    .platform-track-copy h3 {
        font-size: var(--fs-base);
    }

    .platform-track-copy p {
        font-size: var(--fs-caption);
        -webkit-line-clamp: 1;
    }

    .platform-track-stats {
        grid-column: 2 / 3;
        min-width: 0;
        grid-template-columns: auto auto;
        justify-content: start;
        margin-top: -7px;
        gap: var(--space-2);
    }

    .platform-track-stats strong,
    .platform-track-stats span {
        font-size: var(--fs-caption);
    }

    .platform-track-chevron {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

/* !important 6 of 14. Same reason as the global reduced-motion reset in
   styles.css: these five carry transitions declared at class specificity in
   this file, and honouring the preference must not depend on winning a
   specificity race. */
@media (prefers-reduced-motion: reduce) {
    .platform-sidebar,
    .sidebar-scrim,
    .sidebar-link,
    .platform-track-card,
    .platform-track-chevron {
        transition: none !important;
    }
}

/* Unified Bluebook system --------------------------------------------------- */
/* Tokens for this layer live in css/tokens.css, which loads first. */

html {
    background: var(--platform-canvas);
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-body);
}

/* Form controls default to the UA's own colour and size — `buttontext` (pure
   black) at 13.3333px, neither of which is in the system. Any control that
   needs something else still sets its own. */
button,
input,
select,
textarea {
    color: inherit;
    font-size: inherit;
}

/* Headings had no base rule at all, so any heading a page rule did not cover
   fell through to the UA's em ladder — that is where the admin panel's
   18.72px h3 came from. Element selectors, so every class-based page rule
   still wins; this only fills the gaps. */
h1 { font-size: var(--fs-display-sm); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }
h5 { font-size: var(--fs-sm); }
h6 { font-size: var(--fs-caption); }

body {
    color: var(--platform-text);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* The display serif is for page and hero titles. These used to be scoped with
   `#app-root`, which put them at ID specificity: a page rule saying "this h2 is
   not a title, set it in the text face" could not win without !important, and
   eight rules across the app were doing exactly that. Element selectors instead,
   so any class-based rule beats them and the !important goes away. */
h3,
h4 {
    font-family: var(--font-body);
}

h1,
h2 {
    font-family: var(--font-heading);
    text-wrap: balance;
}

/* A second copy of the sidebar rules used to sit here — padding, background,
   radius, min-height and a box-shadow, all repeating or contradicting the
   definition above. Folded into it; the one value that was only here, the 46px
   nav row, went with it. */

#app-root > .section-padding,
#app-root > .profile-section,
#app-root > .admin-shell,
#app-root > .subscribe-payment-shell,
#app-root > .auth-section,
#app-root > .history-section,
#app-root > .results-section {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: clamp(var(--space-5), 3.2vw, var(--space-7)) clamp(var(--space-5), 4vw, var(--space-7)) var(--space-8);
}

.platform-home {
    width: min(100%, 1280px);
    padding: clamp(var(--space-5), 3.2vw, var(--space-7)) clamp(var(--space-5), 4vw, var(--space-7)) var(--space-8);
}

.platform-page-label {
    display: inline-flex;
    margin: 0 0 var(--space-2);
    color: var(--platform-teal);
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 750;
    line-height: var(--lh-tight);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}

.platform-home-heading h1,
.platform-home-heading h2,
.section-heading h2,
.profile-identity h1,
.subscribe-payment-hero h1,
.results-panel h2,
.auth-title {
    color: var(--platform-text);
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: var(--ls-display);
}

.subscribe-payment-hero h1 {
    max-width: 980px;
    margin: var(--space-4) 0 var(--space-3);
    font-size: var(--fs-display-lg);
    line-height: var(--lh-display);
}

.platform-home-heading h1,
.platform-home-heading h2 {
    max-width: 820px;
    font-size: var(--fs-display-lg);
    line-height: var(--lh-display);
}

.platform-home-heading p {
    max-width: 700px;
    margin-top: var(--space-4);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
}
.platform-track-list {
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.platform-track-copy h3,
.platform-track-stats,
.platform-summary-copy,
.platform-activity h2,
.platform-activity p {
    font-family: var(--font-body);
}

.platform-content-page {
    min-height: calc(100vh - 160px);
}

/* ── Unified page header: back row · title block · trailing action ── */
.platform-page-header,
.section-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
    padding-top: 0;
}

/* "← Назад" — its own row, top-left, compact & quiet. */
.platform-page-header > .btn-secondary:first-child,
.section-top > .btn-secondary:first-child {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    color: var(--platform-muted);
    font-size: var(--fs-sm);
}

.platform-page-header > .btn-secondary:first-child:hover,
.section-top > .btn-secondary:first-child:hover {
    color: var(--platform-teal);
}

/* Title block: eyebrow → title → subtitle, stacked, left aligned. */
.platform-page-header .section-heading,
.section-top .section-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    grid-column: 1;
}

.section-heading h2 {
    margin: 0;
    font-size: var(--fs-display);
    line-height: var(--lh-display);
}

.section-heading > p,
.section-heading-tight > p {
    margin: 0;
    max-width: 62ch;
    color: var(--platform-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    white-space: normal;
}

/* Trailing action (e.g. "Очистить историю") — bottom-right of the title row. */
.section-top > .btn-secondary.danger,
.section-top > .btn-primary:not(:first-child),
.platform-page-header > .btn-secondary:not(:first-child),
.platform-page-header > .btn-primary:not(:first-child) {
    grid-column: 2;
    justify-self: end;
    align-self: end;
}

/* The third and last of the three button layers. Everything it declared —
   height, padding, radius, family, size, weight, secondary border and fill,
   secondary hover — is what .btn in css/primitives.css already says, so the
   seven declarations were holding the primitive's own values in
   place against the two dead layers below it. The one real difference,
   .btn-secondary at --line rather than --line-strong, meant the app shipped
   two different secondary buttons depending on which class name a call site
   used; they are one now. */

.test-grid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--space-4);
}

.test-card {
    min-height: 206px;
}

.test-card h3 {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--platform-text);
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.test-card p {
    color: var(--platform-muted);
    font-size: var(--fs-sm);
}

.exam-cta {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top-color: var(--platform-border);
    color: var(--platform-teal);
    font-size: var(--fs-sm);
}

.profile-section.profile-dashboard,
.admin-shell {
    max-width: 1280px;
    gap: var(--space-4);
}

.profile-topbar {
    margin-bottom: var(--space-4);
}

.profile-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    padding: var(--space-5);
}

.profile-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

/* .btn .btn--danger in the markup: surface, danger label and border, danger
   fill on hover — which is exactly what the seven declarations here
   were spelling out by hand, at a 40px target instead of 44. */
.profile-logout-btn {
    flex: 0 0 auto;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-2);
    margin: 0;
}

.profile-identity h1 {
    font-size: var(--fs-display-sm);
    line-height: var(--lh-display);
}

.profile-dashboard .user-avatar {
    border-radius: var(--radius);
    background: var(--accent);
}

.profile-actions .btn-primary,
.profile-actions .btn-secondary,
.profile-stat-card,
.profile-edit-card,
.profile-panel,
.profile-history-panel {
    border-radius: var(--radius);
}

.profile-stat-grid {
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

.profile-stat-card {
    min-height: 132px;
    padding: var(--space-4);
}

.profile-stat-card .stat-value {
    color: var(--accent-hover);
    font-family: var(--font-body);
    font-size: var(--fs-2xl);
}

.profile-panel-head strong,
.admin-users-heading h2,
.admin-test-editor-card h2,
.admin-access-grant-card h3 {
    color: var(--platform-text);
    font-family: var(--font-body);
    font-weight: 700;
}


/* .card--action already marks a selected surface with an accent border and the
   wash; only the label colour is specific to the admin picker. */
.admin-category-item.active {
    color: var(--accent);
}

.admin-upload-layout {
    gap: var(--space-3);
}
/* Three blocks of !important form overrides used to sit here, the last of the
   three layers that styled every input in the app. The controls are .field
   in css/primitives.css now, and every <select> and <textarea> in the markup
   already carries .glass-input, so the bare element selectors are not needed
   either. */

.quiz-layout {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: var(--space-5) clamp(var(--space-4), 3vw, var(--space-6)) var(--space-7);
}

.option-btn {
    border-radius: var(--radius);
}


/* ── Subscription direction picker ── */
.subscribe-direction-picker {
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.subscribe-direction-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.subscribe-direction-head strong {
    color: var(--platform-text);
    font-size: var(--fs-lg);
    font-weight: 700;
}

/* .btn .btn--secondary in the markup. "Change" is a secondary action, and the
   accent it used to be tinted with was carrying no meaning the label does not.
   The primitive also gives it a 44px target, which it did not have. */
.subscribe-direction-change {
    flex: 0 0 auto;
}

.subscribe-direction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

/* .card .card--action in the markup. It had a 1.5px border (off the only two
   border weights the system has), a translateY lift on hover and a 3px ring
   drawn as a box-shadow for the selected state — the same defect as the map
   dot: an outline written as elevation. `active` is this page's name for the
   primitive's `is-selected` and carries the same two values. */
.subscribe-direction-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-7) var(--space-4) var(--space-4);
}

.subscribe-direction-card.active {
    border-color: var(--accent);
    background: var(--accent-wash);
}

.subscribe-direction-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--platform-teal);
    background: var(--accent-wash);
    border-radius: var(--radius);
}

.subscribe-direction-icon svg {
    width: 22px;
    height: 22px;
}

.subscribe-direction-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.subscribe-direction-copy strong {
    color: var(--platform-text);
    font-size: var(--fs-base);
    font-weight: 700;
}

.subscribe-direction-copy small {
    color: var(--platform-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

/* A radio in all but name, so WCAG 1.4.11 applies: --line-control, not --line. */
.subscribe-direction-mark {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--line-control);
    border-radius: 50%;
    transition: border-color 160ms ease, background 160ms ease;
}

.subscribe-direction-card.active .subscribe-direction-mark {
    border-color: var(--accent);
    background: var(--accent);
}

.subscribe-direction-card.active .subscribe-direction-mark::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid var(--surface);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.subscribe-direction-hint {
    margin: var(--space-3) 0 0;
    color: var(--platform-muted);
    font-size: var(--fs-sm);
}

/* Required-field marker on the payment form labels */
.required-star {
    color: var(--danger);
    font-weight: 700;
}

/* ── Subscribe page: "subscriptions paused" notice ── */
/* .card--roomy in the markup supplies the padding this used to force. */
.subscribe-closed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.subscribe-closed-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    font-size: var(--fs-xl);
    color: var(--platform-teal);
    background: var(--accent-wash);
    border-radius: 50%;
}

.subscribe-closed-card h3 {
    margin: 0;
    color: var(--platform-text);
    font-size: var(--fs-xl);
    font-weight: 700;
}

.subscribe-closed-card p {
    max-width: 46ch;
    margin: 0;
    color: var(--platform-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
}

/* ── Admin payments: subscription availability toggle ── */
.admin-subscription-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.admin-subscription-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.admin-subscription-head h3 {
    margin: 0;
    color: var(--platform-text);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.admin-subscription-head p {
    margin: 0;
    color: var(--platform-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

/* Current-state badge */
.admin-subscription-state {
    align-self: flex-start;
}

/* .chip-dot in primitives.css carries the status light. */

.admin-subscription-state.is-open {
    border-color: var(--success);
    color: var(--success);
}

.admin-subscription-state.is-closed {
    border-color: var(--danger);
    color: var(--danger);
}

/* Two instant-action buttons (enable / disable) */
.admin-subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.admin-sub-btn {
    flex: 0 0 auto;
}

/* Tone in the label and the border on a plain fill — the .chip rule. Both
   values here were color-mix against transparent, and the label said --danger
   while the border and fill said --warning. */
.admin-sub-btn.admin-sub-off {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--surface);
}

/* The button matching the current state is disabled and shown as "selected".
   That was a 3px box-shadow ring in two weights — a border drawn as elevation,
   the same defect as the map dot and the direction card. It is a fill now,
   which is how the pair already worked on the "on" side: the enable button is
   .btn-primary, so being the current state already made it solid. */
.admin-sub-btn.admin-sub-off.is-active {
    color: var(--surface);
    background: var(--danger);
}

.admin-sub-btn:disabled {
    opacity: 1;
    cursor: default;
}

.admin-subscription-status {
    min-height: 1.2rem;
    font-size: var(--fs-sm);
    color: var(--platform-muted);
}

.admin-subscription-status.success {
    color: var(--success);
}

.admin-subscription-status.error {
    color: var(--danger);
}

/* Card details + price form, in the same card shell as the availability toggle */
.admin-payment-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-3) var(--space-3);
}

.admin-payment-details-grid .input-shell.full {
    grid-column: 1 / -1;
}

.admin-payment-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    color: var(--platform-muted);
    font-size: var(--fs-sm);
}

.admin-payment-preview strong {
    color: var(--platform-text);
    font-size: var(--fs-base);
    font-weight: 700;
}

/* ── Admin panel: section menu cards ── */
.admin-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* Surface, hover and focus ring from .card .card--action. */
.admin-menu-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.admin-menu-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    color: var(--platform-teal);
    background: var(--accent-wash);
    border-radius: var(--radius);
}

.admin-menu-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-menu-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.admin-menu-copy strong {
    color: var(--platform-text);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.admin-menu-copy small {
    color: var(--platform-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.admin-menu-chevron {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--platform-muted);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

footer {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: var(--space-6) clamp(var(--space-5), 4.5vw, var(--space-8)) var(--space-6);
    border-top-color: var(--platform-border);
}

/* ── Footer integrated with the platform design ── */
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.footer-logo-mark {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1;
    color: var(--surface);
    background: var(--accent);
}

.footer-wordmark {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: var(--ls-display);
    color: var(--platform-text);
    -webkit-text-fill-color: currentColor;
    background: none;
}

.footer-tagline {
    color: var(--platform-muted);
    font-size: var(--fs-sm);
}

.footer-contact-info h4,
.footer-links h4 {
    margin: 0 0 var(--space-1);
    color: var(--platform-text);
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}

.footer-link,
/* Footer links sat at 26px tall. They are stacked with their own gap, so a 44px
   target costs no layout — it just makes the row you are aiming at the row you
   hit. */
.footer-link-item {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--platform-muted);
    font-size: var(--fs-sm);
}

.footer-link-item:hover {
    color: var(--platform-teal);
}

.footer-bottom,
.footer-bottom span {
    color: var(--platform-muted);
    font-size: var(--fs-sm);
}

/* ── Admin panel: header spacing ── */
.admin-menu-head {
    margin-bottom: var(--space-1);
}

.admin-section-topbar {
    margin-bottom: var(--space-3);
}

.admin-upload-layout-single {
    grid-template-columns: 1fr;
}

/* ── Admin: test management cards (no overflow) ── */
.admin-manage-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-3);
}

.admin-manage-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
}

.admin-manage-item .item-info {
    gap: var(--space-1);
}

.admin-item-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.admin-item-actions .admin-visibility-badge {
    margin-right: auto;
}

.admin-item-actions .admin-edit-test-btn {
    min-height: 38px;
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
}

@media (max-width: 980px) {
    .platform-page-header,
    .section-top,
    .profile-hero {
        grid-template-columns: 1fr;
    }

    .section-top > .btn-secondary.danger,
    .platform-page-header > .btn-secondary:not(:first-child),
    .platform-page-header > .btn-primary:not(:first-child) {
        grid-column: 1;
        justify-self: start;
    }


    .platform-page-header > .btn-secondary,
    .section-top > .btn-secondary {
        width: max-content;
    }
}

/* ── Admin: refined test list and inline editor ── */
.admin-test-manager {
    display: grid;
    gap: var(--space-4);
}

.admin-manage-section {
    margin: 0;
}

.admin-manage-heading {
    margin: 0 2px var(--space-2);
}

.admin-manage-exam-title {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--platform-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 750;
    letter-spacing: var(--ls-label);
}

.admin-manage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

/* Surface from .card .card--flush; the row inside carries the padding. Three
   shadows at 2/8, 8/24 and 10/30px marked rest, hover and expanded — the border
   carries all three now. */
.admin-manage-item {
    display: block;
    overflow: hidden;
    transition: border-color 160ms ease;
}

.admin-manage-item:hover,
.admin-manage-item.is-expanded {
    border-color: var(--line-strong);
}

.admin-manage-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    min-height: 74px;
    padding: var(--space-3) var(--space-3);
}

.admin-test-expand {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--surface-sunken);
    color: var(--muted);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.admin-test-expand:hover,
.admin-test-expand:focus-visible {
    background: var(--accent-wash);
    color: var(--accent-hover);
}

.admin-test-expand:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: 2px;
}

.admin-test-expand svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform 180ms ease;
}

.admin-manage-item.is-expanded .admin-test-expand svg {
    transform: rotate(180deg);
}

.admin-manage-item .item-info {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.admin-manage-item .item-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    color: var(--platform-text);
    font-size: var(--fs-sm);
    font-weight: 750;
    line-height: 1.3;
}

.admin-manage-item .item-count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    color: var(--muted);
    font-size: var(--fs-caption);
    line-height: 1.35;
}

.admin-manage-item .item-count i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--line-strong);
}

/* Shape and size from .chip. */

.admin-test-kind {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-duration-badge {
    color: var(--muted);
}

.admin-duration-badge svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.admin-item-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-1);
}

/* .btn .btn--quiet .btn--sm in the markup; only the icon sizing below is
   particular to it. */
.admin-row-action {
    gap: var(--space-1);
}

.admin-row-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

/* `outline: none` used to sit in this rule. Paired with :focus-visible that
   removes the focus ring, which is the one thing a keyboard user has. The
   hover styling stays; the ring comes from .btn:focus-visible. */
.admin-row-action:hover,
.admin-row-action:focus-visible {
    background: var(--surface-sunken);
    color: var(--accent-hover);
}

.admin-row-action.admin-delete-test-btn:hover,
.admin-row-action.admin-delete-test-btn:focus-visible {
    background: var(--canvas);
    color: var(--danger);
}

.admin-manage-item #admin-test-editor {
    border-top: 1px solid var(--surface-sunken);
}

.admin-test-editor-card {
    gap: var(--space-4);
    margin: 0;
}

.admin-settings-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--accent);
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.admin-settings-label svg,
.admin-settings-save svg,
.admin-question-editor-drawer > summary svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.admin-editor-settings {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(190px, 0.9fr) minmax(120px, 0.55fr) 108px auto;
    gap: var(--space-3);
    align-items: end;
}

.admin-editor-settings .input-shell {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.admin-editor-settings .input-shell > label {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-eyebrow);
    font-weight: 750;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.admin-editor-settings .glass-input {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-3);
    border-radius: 10px;
    font-size: var(--fs-caption);
    font-weight: 620;
}

.admin-duration-input {
    position: relative;
}

.admin-duration-input input {
    padding-right: var(--space-7);
}

.admin-duration-input span {
    position: absolute;
    top: 50%;
    right: 12px;
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 700;
    pointer-events: none;
    transform: translateY(-50%);
}

.admin-setting-toggles {
    display: grid;
    gap: var(--space-1);
}

.admin-toggle-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--line-control);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 750;
    cursor: pointer;
}

.admin-toggle-card:has(input:checked) {
    border-color: var(--line);
    background: var(--canvas);
    color: var(--accent);
}

.admin-toggle-card input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
}

.admin-settings-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: 10px;
    white-space: nowrap;
}

.admin-editor-settings + .admin-log:empty {
    display: none;
}

/* .card .card--flush in the markup; the 11px was the last one in the file. */
.admin-question-editor-drawer {
    overflow: hidden;
}

.admin-question-editor-drawer > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 45px;
    padding: var(--space-2) var(--space-3);
    color: var(--accent);
    font-size: var(--fs-caption);
    font-weight: 750;
    cursor: pointer;
    list-style: none;
    transition: background 150ms ease;
}

.admin-question-editor-drawer > summary::-webkit-details-marker,
.admin-question-editor > summary::-webkit-details-marker {
    display: none;
}

.admin-question-editor-drawer > summary:hover {
    background: var(--canvas);
}

.admin-question-editor-drawer > summary small {
    display: grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--accent-wash);
    color: var(--accent);
    font-size: var(--fs-caption);
}

.admin-question-editor-list {
    max-height: min(720px, 72vh);
    padding: var(--space-3);
    border-top: 1px solid var(--surface-sunken);
    background: var(--canvas);
}



.admin-question-editor summary {
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
}

.admin-question-editor-body {
    gap: var(--space-3);
    padding: 2px var(--space-3) var(--space-3);
}

/* .card in the markup, at row padding. */
.admin-language-editor {
    padding: var(--space-3);
}

.admin-language-editor h4 {
    margin: 0;
    color: var(--accent);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-label);
}

.admin-language-editor > label,
.admin-correct-answer > label {
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 700;
}

@media (max-width: 1120px) {
    .admin-editor-settings {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .admin-title-setting { grid-column: span 3; }
    .admin-section-setting { grid-column: span 3; }
    .admin-duration-setting { grid-column: span 2; }
    .admin-setting-toggles { grid-column: span 2; }
    .admin-settings-save { grid-column: span 2; }
}

@media (max-width: 760px) {
    .admin-manage-row {
        grid-template-columns: 34px minmax(0, 1fr);
        padding: var(--space-3);
    }

    .admin-item-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .admin-editor-settings {
        grid-template-columns: 1fr 1fr;
    }

    .admin-title-setting,
    .admin-section-setting {
        grid-column: 1 / -1;
    }

    .admin-duration-setting,
    .admin-setting-toggles,
    .admin-settings-save {
        grid-column: auto;
    }

    .admin-settings-save {
        grid-column: 1 / -1;
        width: 100%;
    }

    .admin-question-editor-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .admin-test-kind,
    .admin-row-action span {
        display: none;
    }

    .admin-row-action {
        padding-inline: var(--space-2);
    }

    .admin-test-editor-card {
        padding-inline: var(--space-3);
    }

    .admin-editor-settings {
        grid-template-columns: 1fr;
    }

    .admin-duration-setting,
    .admin-setting-toggles,
    .admin-settings-save {
        grid-column: 1;
    }
}

@media (max-width: 900px) {
    /* --sidebar-width collapses to 0 here; see css/tokens.css. */
    #app-root > .section-padding,
    #app-root > .profile-section,
    #app-root > .admin-shell,
    #app-root > .subscribe-payment-shell,
    #app-root > .auth-section,
    #app-root > .history-section,
    #app-root > .results-section,
    .platform-home {
        padding: var(--space-6) var(--space-4) var(--space-7);
    }
}

@media (max-width: 620px) {
    .platform-home-heading h1,
    .platform-home-heading h2,
    .section-heading h2 {
        font-size: var(--fs-display);
    }

    .test-grid,
    .profile-stat-grid {
        grid-template-columns: 1fr;
    }

    .test-card {
        min-height: 190px;
    }


    footer {
        padding-inline: var(--space-4);
    }
}

/* The "light sidebar theme" that used to live here repainted every sidebar
   surface a second time, 300 lines away from the definition it was overriding.
   It was the layer that actually rendered, so the two above it were dead. Its
   values are now the sidebar's only values — see .platform-sidebar at the top
   of this file. */

/* Home · editorial lesson library. Its palette lives in css/tokens.css. */
.lesson-library {
    color: var(--library-ink);
}

/* Surface, border, radius and padding come from .card .card--roomy .card--rule.
   What is left here is the two-column layout, which is the only thing about this
   hero that is not shared with every other surface. */
.lambda-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .75fr);
    align-items: stretch;
    gap: clamp(var(--space-6), 4vw, var(--space-7));
}

.lambda-intro-copy {
    min-width: 0;
}

.lambda-intro-label,
.complex-topics-label {
    display: inline-block;
    color: var(--library-red);
    font: 700 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.lambda-intro h1 {
    max-width: 780px;
    margin: var(--space-4) 0 0;
    color: var(--library-ink);
    font: 700 var(--fs-display-sm)/1.04 var(--font-heading);
    letter-spacing: var(--ls-display);
}

.lambda-intro-copy > p {
    max-width: 720px;
    margin: var(--space-5) 0 0;
    color: var(--muted);
    font: 400 var(--fs-md)/1.72 var(--font-body);
}

.lambda-intro-points {
    display: grid;
    gap: 0;
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--library-line);
}

.lambda-intro-points li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    min-height: 48px;
    color: var(--ink-soft);
    font: 600 var(--fs-sm)/1.35 var(--font-body);
    border-bottom: 1px solid var(--library-line);
}

.lambda-intro-points span {
    color: var(--library-blue);
    font: 700 var(--fs-caption)/1 var(--font-body);
    letter-spacing: var(--ls-label);
}

/* .btn .btn--primary carries the shape, colour, hover and focus ring. The hero's
   call to action was the last dark-ink button in the app; it is the same accent
   as every other primary action now. */
.lambda-practice-link {
    margin-top: var(--space-5);
    text-decoration: none;
}


.lambda-intro-illustration {
    display: grid;
    min-width: 0;
    align-self: center;
    place-items: center;
}

.lambda-intro-illustration .hero-illustration {
    width: 100%;
    max-width: 560px;
}


.complex-topics {
    margin-top: clamp(var(--space-8), 9vw, var(--space-section));
}

.complex-topics-heading {
    display: grid;
    grid-template-columns: minmax(240px, .32fr) minmax(0, 1fr);
    gap: clamp(var(--space-5), 5vw, var(--space-7));
    align-items: start;
    margin-bottom: var(--space-6);
    border-bottom: var(--rule) solid var(--accent);
}

.complex-topics-brand {
    min-width: 0;
}

.complex-topics-label {
    color: var(--library-red);
    font: 800 var(--fs-lg)/1.08 var(--font-heading);
    letter-spacing: var(--ls-display);
    text-transform: none;
}

.library-shelf-mark {
    display: block;
    width: min(100%, 260px);
    height: auto;
    margin-top: var(--space-5);
    overflow: visible;
}

.library-mark-outline,
.library-mark-detail {
    fill: none;
    stroke: var(--library-ink);
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.library-mark-outline {
    stroke-width: 3;
}

.library-mark-roof {
    stroke: var(--accent);
    stroke-width: 4;
}

.library-mark-detail {
    stroke: var(--line-strong);
    stroke-width: 1.5;
}

.library-book {
    transform-origin: center bottom;
    transition: transform 180ms ease;
}

.complex-topics-brand:hover .library-book:nth-of-type(3n + 1) {
    transform: translateY(-3px);
}

.complex-topics-brand:hover .library-book:nth-of-type(3n + 2) {
    transform: translateY(-1px);
}

.library-book-blue {
    fill: var(--accent);
}

.library-book-red {
    fill: var(--ink-soft);
}

.library-book-ink {
    fill: var(--library-ink);
}

.library-book-paper {
    fill: var(--library-paper);
    stroke: var(--line-strong);
    stroke-width: 1;
}

.complex-topics-heading h2 {
    margin: 0;
    color: var(--library-ink);
    font: 700 var(--fs-display)/1 var(--font-heading);
    letter-spacing: var(--ls-display);
}

.complex-topics-heading p {
    max-width: 740px;
    margin: var(--space-4) 0 0;
    color: var(--muted);
    font: 400 var(--fs-base)/1.65 var(--font-body);
}

.subject-list {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

/* Surface from .card in css/primitives.css. The 12px/30px shadow went with it:
   a flat accordion sits on its border. */

.subject-accordion > summary {
    display: grid;
    grid-template-columns: 76px minmax(240px, 1fr) auto 44px;
    gap: var(--space-5);
    align-items: center;
    min-height: 138px;
    padding: var(--space-5) var(--space-5);
    list-style: none;
    cursor: pointer;
    user-select: none;
    border-left: var(--rule) solid var(--accent);
}

.subject-geometry > summary {
    border-left-color: var(--library-red);
}

.subject-accordion > summary::-webkit-details-marker {
    display: none;
}

.subject-accordion[open] > summary {
    border-bottom: 1px solid var(--line);
}

.subject-symbol {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    color: var(--surface);
    background: var(--library-blue);
    font: 750 var(--fs-lg)/1 var(--font-heading);
    letter-spacing: var(--ls-display);
}

.subject-symbol-geometry {
    color: var(--library-ink);
    background: var(--line);
    font-size: var(--fs-xl);
}

.subject-summary-copy {
    display: grid;
    gap: var(--space-1);
}

.subject-summary-copy > span {
    color: var(--library-red);
    font: 750 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.subject-summary-copy strong {
    color: var(--library-ink);
    font: 700 var(--fs-display-sm)/1 var(--font-heading);
    letter-spacing: var(--ls-display);
}

.subject-summary-copy small {
    color: var(--muted);
    font: 450 var(--fs-caption)/1.5 var(--font-body);
}

/* Shape, size and fill from .chip. --library-paper resolved to --surface, so
   this chip was white on a white card. */

.subject-toggle {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
}

.subject-toggle::before,
.subject-toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1.5px;
    content: "";
    background: var(--library-ink);
    transform: translate(-50%, -50%);
    transition: transform 150ms ease;
}

.subject-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.subject-accordion[open] > summary .subject-toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.subject-content {
    padding: clamp(var(--space-3), 2.2vw, var(--space-5));
    background: var(--surface-sunken);
}

.subject-content > .topic-list {
    margin-top: 0;
}

.geometry-subject-content {
    background: var(--surface-sunken);
}

.geometry-program-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: var(--space-5);
    align-items: center;
    margin-bottom: var(--space-4);
}

.geometry-program-intro > div:first-child > span {
    color: var(--library-red);
    font: 700 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.geometry-program-intro h3 {
    margin: var(--space-2) 0 var(--space-3);
    color: var(--library-ink);
    font: 700 var(--fs-2xl)/1.08 var(--font-heading);
    letter-spacing: var(--ls-display);
}

.geometry-program-intro p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font: 400 var(--fs-sm)/1.65 var(--font-body);
}

.geometry-program-mark {
    display: grid;
    min-height: 132px;
    place-items: center;
    border-left: 1px solid var(--library-line);
}

.geometry-program-mark svg {
    width: min(100%, 180px);
    fill: none;
    stroke: var(--dia-4);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.geometry-program-mark .geometry-mark-point {
    fill: var(--surface);
    stroke: var(--dia-1);
    stroke-width: 2;
}


.geometry-topic-list {
    margin-bottom: var(--space-5);
}


.triangle-visual {
    margin: var(--space-4) 0;
}

.triangle-visual > svg,
.triangle-atlas-grid svg {
    display: block;
    width: 100%;
    height: auto;
    /* The cells of a .card--grid sit on a --line background with 1px gaps, so
       an unpainted cell lets the divider colour show through the whole figure.
       Every other hairline grid set this; this one was the omission. */
    background: var(--surface);
}

.triangle-atlas-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.triangle-panel-back {
    fill: var(--surface);
    stroke: var(--line);
}

.triangle-main,
.triangle-guide,
.triangle-circle,
.triangle-right-mark,
.triangle-midpoint-marks path,
.euler-axis,
.nine-point-circle,
.nine-euler-segment,
.nine-radius-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.triangle-main {
    stroke: var(--library-ink);
    stroke-width: 2.6;
}

.triangle-guide {
    stroke: var(--dia-4);
    stroke-width: 1.65;
}

.triangle-guide-dashed {
    stroke-dasharray: 6 6;
}

.triangle-circle {
    stroke: var(--dia-6);
    stroke-width: 1.7;
}

.triangle-circle-wide {
    stroke-dasharray: 5 4;
}

.triangle-right-mark {
    stroke: var(--muted);
    stroke-width: 1.5;
}

.triangle-point {
    stroke: var(--surface);
    stroke-width: 2;
}

.triangle-point-primary { fill: var(--dia-1); }
.triangle-point-secondary { fill: var(--dia-4); }
.triangle-point-neutral { fill: var(--muted); }
.triangle-point-nine { fill: var(--dia-7); }

.triangle-label,
.triangle-labels,
.triangle-panel-title,
.triangle-panel-note,
.centroid-area-labels,
.euler-ratio-labels,
.nine-point-legend {
    fill: var(--library-ink);
    font-family: var(--font-body);
}

.triangle-label,
.triangle-labels {
    font-size: var(--fig-fs-md);
    font-weight: 750;
}

.triangle-panel-title {
    fill: var(--dia-4);
    font-size: var(--fig-fs-sm);
    font-weight: 750;
    letter-spacing: var(--ls-label);
}

.triangle-panel-note {
    fill: var(--muted);
    font-size: var(--fig-fs-sm);
    font-weight: 600;
}

.triangle-visual figcaption {
    padding: var(--space-3) var(--space-4);
    color: var(--muted);
    background: var(--surface);
    border-top: 1px solid var(--library-line);
    font: 500 var(--fs-caption)/1.55 var(--font-body);
}

.centroid-area-visual,
.euler-line-visual,
.nine-point-visual {
    max-width: 780px;
}

.centroid-sectors path:nth-child(odd) {
    fill: var(--canvas);
}

.centroid-sectors path:nth-child(even) {
    fill: var(--dia-4-wash);
}

.triangle-midpoint-marks path {
    stroke: var(--muted);
    stroke-width: 1.5;
}

.centroid-area-labels {
    fill: var(--muted);
    font-size: var(--fig-fs-sm);
    font-weight: 700;
}

.euler-axis {
    stroke: var(--dia-4);
    stroke-width: 3;
}

.euler-ratio-labels {
    fill: var(--dia-4);
    font-size: var(--fig-fs-sm);
    font-weight: 700;
}

.nine-point-circle {
    stroke: var(--dia-7);
    stroke-width: 3;
}

.nine-euler-segment {
    stroke: var(--muted);
    stroke-width: 1.8;
    stroke-dasharray: 4 4;
}

.nine-radius-line {
    stroke: var(--dia-2);
    stroke-width: 1.8;
}

.nine-measure-labels {
    fill: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fig-fs-sm);
    font-weight: 750;
}

.nine-measure-labels text:last-child {
    fill: var(--dia-7);
}

.nine-side-midpoints circle {
    fill: var(--dia-1);
    stroke: var(--surface);
    stroke-width: 1.5;
}

.nine-altitude-feet rect {
    fill: var(--dia-4);
    stroke: var(--surface);
    stroke-width: 1.5;
}

.nine-vertex-midpoints path {
    fill: var(--dia-3);
    stroke: var(--surface);
    stroke-width: 1.2;
}

.nine-point-legend {
    fill: var(--muted);
    font-size: var(--fig-fs-sm);
    font-weight: 700;
}

.nine-point-legend circle { fill: var(--dia-1); }
.nine-point-legend rect { fill: var(--dia-4); }
.nine-point-legend path { fill: var(--dia-3); }

.cevians-visual {
    max-width: 780px;
}

.cevian-side-points circle {
    fill: var(--dia-4);
    stroke: var(--surface);
    stroke-width: 2;
}

.cevian-ratio-notes {
    fill: var(--dia-4);
    font-family: var(--font-body);
    font-size: var(--fig-fs-sm);
    font-weight: 700;
}

.cevian-line-a { stroke: var(--dia-4); }
.cevian-line-b { stroke: var(--dia-6); }
.cevian-line-c { stroke: var(--dia-2); }

.menelaus-cut {
    fill: none;
    stroke: var(--dia-4);
    stroke-linecap: round;
    stroke-width: 2.5;
}

.cevian-extension {
    stroke: var(--muted);
}

.mass-badges rect {
    fill: var(--surface);
    stroke: var(--line-strong);
    stroke-width: 1.2;
}

.mass-badges .mass-badge-total {
    fill: var(--surface-sunken);
    stroke: var(--dia-6);
}

.mass-badges text {
    fill: var(--library-ink);
    font-family: var(--font-body);
    font-size: var(--fig-fs-sm);
    font-weight: 750;
    text-anchor: middle;
}

.mass-side-labels {
    font-size: var(--fig-fs-sm);
}

.circle-topic-intro > div {
    border-color: var(--line-strong);
}

.circle-visual {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
}

.circle-topic-accordion .formula-list .katex {
    font-size: .96em;
}

.circle-topic-accordion .math-statement .katex-display {
    font-size: clamp(.72em, 1.8vw, 1em);
}

.circle-visual-ring,
.circle-visual-radius,
.circle-visual-chord,
.circle-visual-arc,
.circle-visual-tangent,
.circle-right-mark,
.circle-angle-mark,
.circle-quadrilateral,
.circle-diagonal {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.circle-visual-ring {
    fill: color-mix(in srgb, var(--dia-6) 3.5%, transparent);
    stroke: var(--dia-6);
    stroke-width: 2.5;
}

.circle-visual-sector {
    fill: color-mix(in srgb, var(--dia-4) 10%, transparent);
    stroke: none;
}

.circle-visual-radius {
    stroke: var(--line-strong);
    stroke-width: 1.8;
}

.circle-visual-chord {
    stroke: var(--ink-soft);
    stroke-width: 2.3;
}

.circle-visual-chord-focus {
    stroke: var(--dia-4);
    stroke-width: 4;
}

.circle-visual-arc-focus {
    stroke: var(--dia-4);
    stroke-width: 5;
}

.circle-angle-mark {
    stroke-width: 2.4;
}

.circle-angle-mark-central,
.circle-angle-mark-tangent {
    stroke: var(--dia-4);
}

.circle-angle-mark-inscribed {
    stroke: var(--dia-2);
}

.circle-note-labels {
    fill: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fig-fs);
    font-weight: 750;
}

.circle-note-labels text:first-child {
    fill: var(--dia-4);
}

.circle-visual-tangent {
    stroke: var(--dia-2);
    stroke-width: 3;
}

.circle-right-mark {
    stroke: var(--muted);
    stroke-width: 1.6;
}

.circle-touch-points circle {
    fill: var(--dia-4);
    stroke: var(--surface);
    stroke-width: 2;
}

.circle-quadrilateral-fill {
    fill: color-mix(in srgb, var(--dia-6) 6.5%, transparent);
    stroke: none;
}

.circle-quadrilateral {
    stroke: var(--ink-soft);
    stroke-width: 3;
}

.circle-diagonal {
    stroke-width: 2.5;
}

.circle-diagonal-one {
    stroke: var(--dia-4);
}

.circle-diagonal-two {
    stroke: var(--dia-2);
    stroke-dasharray: 7 5;
}

.ptolemy-note-labels text:last-child {
    fill: var(--dia-6);
    font-size: var(--fig-fs);
}

.circle-method-steps li > span {
    color: var(--muted);
    border-color: var(--line-strong);
}

.power-topic-intro > div {
    border-color: var(--line-strong);
}

.power-topic-accordion .subtopic-accordion {
    min-width: 0;
}

.power-topic-accordion .subtopic-list {
    grid-template-columns: minmax(0, 1fr);
}

.power-visual {
    max-width: 860px;
}

/* auto-fit rather than a fixed three: at 285px per cell the labels were
   10.4px, and this way the count follows the space available. */
.power-atlas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.power-atlas-grid svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--surface);
}

.power-panel > rect {
    fill: var(--surface);
    stroke: var(--line);
    stroke-width: 1.2;
}

.power-circle,
.power-line,
.power-tangent,
.power-radius,
.power-right-mark,
.radical-centers-line,
.radical-common-chord,
.radical-center-connector-set path,
.radical-axis-set path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.power-circle {
    fill: color-mix(in srgb, var(--dia-5) 3.5%, transparent);
    stroke: var(--dia-5);
    stroke-width: 2.5;
}

.power-line {
    stroke: var(--ink-soft);
    stroke-width: 2.3;
}

.power-tangent {
    stroke: var(--dia-4);
    stroke-width: 3;
}

.power-radius {
    stroke: var(--line-strong);
    stroke-width: 1.8;
    stroke-dasharray: 5 4;
}

.power-right-mark {
    stroke: var(--muted);
    stroke-width: 1.6;
}

.power-point-set circle {
    fill: var(--dia-4);
    stroke: var(--surface);
    stroke-width: 2;
}

.power-point-set .power-point-focus {
    fill: var(--dia-5);
}

.power-point-set .power-center-point {
    fill: var(--dia-6);
}

.power-labels,
.power-panel-title,
.power-panel-formula,
.radical-note-labels {
    fill: var(--library-ink);
    font-family: var(--font-body);
}

.power-labels {
    font-size: var(--fig-fs);
    font-weight: 750;
}

.power-panel-title {
    fill: var(--dia-5);
    font-size: var(--fig-fs-sm);
    font-weight: 750;
}

.power-panel-formula {
    fill: var(--muted);
    font-size: var(--fig-fs-sm);
    font-weight: 700;
}

.radical-centers-line {
    stroke: var(--line-strong);
    stroke-width: 1.8;
    stroke-dasharray: 7 6;
}

.radical-circle-one {
    stroke: var(--dia-6);
}

.radical-circle-two {
    stroke: var(--dia-5);
}

.radical-common-chord,
.radical-axis-set path {
    stroke: var(--dia-4);
    stroke-width: 3.2;
}

.radical-right-mark {
    stroke: var(--muted);
}

.radical-axis-labels,
.radical-center-labels {
    font-size: var(--fig-fs-md);
}

.radical-note-labels {
    fill: var(--dia-5);
    font-size: var(--fig-fs);
    font-weight: 750;
}

.radical-center-circle-one {
    stroke: var(--dia-6);
}

.radical-center-circle-two {
    stroke: var(--dia-5);
}

.radical-center-circle-three {
    stroke: var(--dia-2);
}

.radical-center-connector-set path {
    stroke: var(--line-strong);
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
}

.radical-axis-set path:nth-child(2) {
    stroke: var(--dia-6);
}

.radical-axis-set path:nth-child(3) {
    stroke: var(--dia-2);
}

.power-method-steps li > span {
    color: var(--muted);
    border-color: var(--line-strong);
}

.stereo-topic-intro > div {
    border-color: var(--line-strong);
}

.polyhedra-topic-intro > div {
    border-color: var(--line-strong);
}

.stereo-topic-accordion .subtopic-list,
.polyhedra-topic-accordion .subtopic-list {
    grid-template-columns: minmax(0, 1fr);
}

.stereo-visual,
.polyhedra-visual {
    width: 100%;
    max-width: 860px;
    margin-inline: auto;
}

.stereo-plane,
.stereo-plane-grid,
.stereo-height,
.stereo-slant,
.stereo-projection,
.stereo-cross-line,
.stereo-right-mark,
.stereo-angle,
.dihedral-face,
.dihedral-edge,
.dihedral-normal,
.dihedral-angle,
.skew-support-plane,
.skew-line,
.skew-common {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stereo-plane {
    fill: color-mix(in srgb, var(--dia-6) 8%, transparent);
    stroke: var(--dia-6);
    stroke-width: 2.5;
}

.stereo-plane-grid {
    fill: none;
    stroke: var(--line);
    stroke-width: 1.2;
    stroke-dasharray: 5 6;
}

.stereo-height {
    fill: none;
    stroke: var(--dia-4);
    stroke-width: 3.2;
}

.stereo-slant {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 3;
}

.stereo-projection {
    fill: none;
    stroke: var(--dia-6);
    stroke-width: 3.4;
    stroke-dasharray: 8 6;
}

.stereo-cross-line {
    fill: none;
    stroke: var(--dia-2);
    stroke-width: 2.6;
}

.stereo-right-mark {
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.8;
}

.stereo-angle {
    fill: none;
    stroke: var(--dia-4);
    stroke-width: 2.4;
}

.stereo-points circle {
    fill: var(--dia-4);
    stroke: var(--surface);
    stroke-width: 2;
}

.stereo-labels,
.stereo-legend {
    fill: var(--library-ink);
    font-family: var(--font-body);
    font-size: var(--fig-fs-md);
    font-weight: 750;
}

.stereo-legend {
    fill: var(--muted);
    font-size: var(--fig-fs);
    font-weight: 650;
}

.dihedral-face {
    stroke-width: 2.2;
}

.dihedral-face-one {
    fill: color-mix(in srgb, var(--dia-6) 12%, transparent);
    stroke: var(--dia-6);
}

.dihedral-face-two {
    fill: color-mix(in srgb, var(--dia-4) 10%, transparent);
    stroke: var(--dia-4);
}

.dihedral-edge {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 4.2;
}

.dihedral-normal {
    fill: none;
    stroke-width: 3.2;
}

.dihedral-normal-one { stroke: var(--dia-6); }
.dihedral-normal-two { stroke: var(--dia-4); }

.dihedral-angle {
    fill: none;
    stroke: var(--dia-2);
    stroke-width: 3;
}

.skew-support-plane {
    stroke-width: 2;
}

.skew-plane-one {
    fill: color-mix(in srgb, var(--dia-6) 7%, transparent);
    stroke: var(--dia-6);
}

.skew-plane-two {
    fill: color-mix(in srgb, var(--dia-2) 7%, transparent);
    stroke: var(--dia-2);
}

.skew-line {
    fill: none;
    stroke-width: 3.5;
}

.skew-line-one { stroke: var(--dia-6); }
.skew-line-two { stroke: var(--dia-2); }

.skew-common {
    fill: none;
    stroke: var(--dia-4);
    stroke-width: 4;
}

.stereo-method-steps li > span {
    color: var(--muted);
    border-color: var(--line-strong);
}

.poly-face,
.poly-edge,
.poly-hidden,
.poly-section,
.poly-trace,
.parallel-section,
.poly-height-measure {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.poly-face {
    stroke: var(--line-strong);
    stroke-width: 1.4;
}

.poly-face-back { fill: color-mix(in srgb, var(--dia-6) 5.5%, transparent); }
.poly-face-side { fill: color-mix(in srgb, var(--dia-2) 6%, transparent); }
.poly-face-front { fill: color-mix(in srgb, var(--dia-4) 4.5%, transparent); }

.poly-edge {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 2.5;
}

.poly-hidden {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 1.6;
    stroke-dasharray: 7 6;
}

.poly-section-fill {
    fill: color-mix(in srgb, var(--dia-7) 22%, transparent);
    stroke: none;
}

.poly-section {
    fill: none;
    stroke: var(--dia-2);
    stroke-width: 4;
}

.poly-points circle,
.poly-trace-point {
    fill: var(--dia-4);
    stroke: var(--surface);
    stroke-width: 2;
}

.poly-labels {
    fill: var(--library-ink);
    font-family: var(--font-body);
    font-size: var(--fig-fs-md);
    font-weight: 750;
}

.poly-visual-grid {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--canvas);
}

.poly-visual-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Two, not three: at three the 480-unit viewBox rendered 265px wide and its
   labels came out at 8.3px. */
.poly-visual-grid--steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.poly-visual-card {
    min-width: 0;
}

.poly-visual-card h5 {
    margin: 0;
    padding: var(--space-3);
    color: var(--warning);
    border-bottom: 1px solid var(--line);
    font: 800 var(--fs-eyebrow)/1.3 var(--font-body);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.poly-visual-card svg {
    display: block;
    width: 100%;
    height: auto;
}

.poly-visual-card > p {
    min-height: 44px;
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-2);
    color: var(--muted);
    border-top: 1px solid var(--surface-sunken);
    font-size: var(--fs-caption);
    line-height: 1.45;
    text-align: center;
}

.pyramid-face {
    stroke: var(--line-strong);
    stroke-width: 1.25;
}

.pyramid-face-left { fill: color-mix(in srgb, var(--dia-6) 7%, transparent); }
.pyramid-face-right { fill: color-mix(in srgb, var(--dia-2) 7.5%, transparent); }

.pyramid-height,
.pyramid-apothem,
.pyramid-lateral-edge,
.poly-construction {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pyramid-height {
    stroke: var(--dia-6);
    stroke-width: 3.2;
    stroke-dasharray: 8 5;
}

.pyramid-apothem {
    stroke: var(--dia-2);
    stroke-width: 3.8;
}

.pyramid-lateral-edge {
    stroke: var(--dia-4);
    stroke-width: 3.5;
}

.pyramid-perp-symbol {
    fill: var(--dia-6);
    font-size: var(--fig-fs-lg);
    font-weight: 850;
}

.pyramid-anatomy-visual > svg {
    max-height: 460px;
}

.pyramid-legend,
.parallel-ratio-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--library-line);
    border-top: 1px solid var(--library-line);
}

.pyramid-legend span,
.parallel-ratio-legend span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    color: var(--muted);
    background: var(--surface);
    font-size: var(--fs-caption);
    line-height: 1.4;
    text-align: center;
}

.pyramid-legend i {
    width: 24px;
    height: 0;
    flex: 0 0 auto;
    border-top: 3px solid;
}

.pyramid-legend .legend-height { border-color: var(--muted); border-top-style: dashed; }
.pyramid-legend .legend-apothem { border-color: var(--warning); }
.pyramid-legend .legend-edge { border-color: var(--danger); }

.parallel-ratio-legend .ratio-symbol {
    display: inline-block;
    width: auto;
    flex: 0 0 auto;
    color: var(--ink-soft);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--fs-sm);
    font-style: italic;
    white-space: nowrap;
}

/* The last translucent surface in the application: a 72% white that let the
   canvas through, so the figure sat on a colour nobody had chosen. */
.pyramid-example-visual {
    max-width: 620px;
    margin: var(--space-3) auto;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
}

.pyramid-example-visual svg {
    display: block;
    width: 100%;
    height: auto;
}

.pyramid-example-visual figcaption {
    padding: var(--space-2) var(--space-3);
    color: var(--muted);
    border-top: 1px solid var(--line);
    font-size: var(--fs-caption);
    line-height: 1.45;
    text-align: center;
}

.pyramid-value-labels {
    font-size: var(--fig-fs);
}

.poly-construction {
    stroke: var(--dia-4);
    stroke-width: 2.1;
    stroke-dasharray: 7 5;
}

.poly-trace-points circle {
    fill: var(--dia-6);
    stroke: var(--surface);
    stroke-width: 2;
}

.poly-trace {
    fill: none;
    stroke: var(--dia-4);
    stroke-width: 2.2;
    stroke-dasharray: 7 5;
}

.parallel-section {
    stroke-width: 3;
}


.parallel-section-medium {
    fill: color-mix(in srgb, var(--dia-7) 24%, transparent);
    stroke: var(--dia-4);
}


.poly-height-measure {
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.7;
}

.polyhedra-method-steps li > span {
    color: var(--warning);
    border-color: var(--line-strong);
}

.stereo-topic-accordion .math-statement .katex-display,
.polyhedra-topic-accordion .math-statement .katex-display {
    font-size: clamp(.74em, 1.8vw, 1em);
}

.similarity-topic-intro > div {
    border-color: var(--line-strong);
}

.similarity-visual {
    max-width: 820px;
}

.similarity-triangle-fill {
    stroke: none;
}

.similarity-triangle-fill-a {
    fill: var(--surface-sunken);
}

.similarity-triangle-fill-b {
    fill: var(--dia-4-wash);
}

.similarity-side,
.similarity-angle,
.homothety-axis,
.homothety-circle,
.homothety-ray,
.spiral-triangle,
.spiral-segment,
.spiral-motion {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.similarity-side {
    stroke-width: 4;
}

.similarity-side-one { stroke: var(--dia-4); }
.similarity-side-two { stroke: var(--dia-6); }
.similarity-side-three { stroke: var(--dia-2); }

.similarity-angle {
    stroke-width: 2.3;
}

.similarity-angle-one { stroke: var(--dia-4); }
.similarity-angle-two { stroke: var(--dia-6); }

.similarity-correspondence-labels,
.homothety-note-labels,
.spiral-note-labels {
    fill: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fig-fs-sm);
    font-weight: 750;
}

.homothety-axis {
    stroke: var(--line-strong);
    stroke-dasharray: 6 6;
    stroke-width: 1.6;
}

.homothety-circle {
    fill: color-mix(in srgb, var(--dia-6) 8%, transparent);
    stroke-width: 3;
}

.homothety-circle-large { stroke: var(--dia-6); }
.homothety-circle-small { stroke: var(--dia-4); }

.homothety-ray {
    stroke-width: 1.8;
}

.homothety-ray-external {
    stroke: var(--dia-2);
}

.homothety-ray-internal {
    stroke: var(--dia-4);
    stroke-dasharray: 7 5;
}

.homothety-labels text:nth-child(3) { fill: var(--dia-4); }
.homothety-labels text:nth-child(4) { fill: var(--dia-7); }

.spiral-triangle-source {
    fill: color-mix(in srgb, var(--dia-6) 8%, transparent);
    stroke: var(--dia-6);
    stroke-width: 1.7;
}

.spiral-triangle-image {
    fill: color-mix(in srgb, var(--dia-4) 10%, transparent);
    stroke: var(--dia-4);
    stroke-width: 1.7;
}

.spiral-segment {
    stroke-width: 5;
}

.spiral-segment-source { stroke: var(--dia-6); }
.spiral-segment-image { stroke: var(--dia-4); }

.spiral-motion {
    stroke: var(--dia-2);
    stroke-dasharray: 5 5;
    stroke-width: 2;
}

.spiral-angle-source { stroke: var(--dia-6); }
.spiral-angle-image { stroke: var(--dia-4); }

.similarity-method-steps li > span {
    color: var(--warning);
    border-color: var(--line-strong);
}

.area-topic-intro > div {
    border-color: var(--line-strong);
}

.coordinate-topic-intro > div {
    border-color: var(--line-strong);
}

.area-visual,
.coordinate-visual {
    width: 100%;
    max-width: 840px;
    margin-inline: auto;
}

.geometry-figure-line,
.geometry-guide-line,
.geometry-right-mark,
.area-angle-mark,
.area-incircle,
.area-circumcircle,
.area-chord-focus,
.coordinate-axis,
.coordinate-figure,
.coordinate-guide,
.coordinate-radius,
.coordinate-tangent,
.coordinate-circle,
.vector-line,
.projection-bracket {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.geometry-figure-line {
    stroke: var(--ink-soft);
    stroke-width: 3;
}

.geometry-guide-line {
    stroke: var(--dia-2);
    stroke-width: 1.8;
}

.geometry-guide-dashed,
.coordinate-guide-dashed {
    stroke-dasharray: 6 6;
}

.geometry-right-mark {
    stroke: var(--muted);
    stroke-width: 1.6;
}

.geometry-point-set circle {
    fill: var(--dia-4);
    stroke: var(--surface);
    stroke-width: 2;
}

.geometry-point-set .geometry-point-secondary {
    fill: var(--dia-6);
}

.geometry-labels,
.geometry-note-labels,
.coordinate-labels,
.coordinate-panel-title {
    fill: var(--library-ink);
    font-family: var(--font-body);
}

.geometry-labels,
.coordinate-labels {
    font-size: var(--fig-fs);
    font-weight: 750;
}

.geometry-note-labels {
    fill: var(--dia-2);
    font-size: var(--fig-fs);
    font-weight: 750;
}

.geometry-note-labels text:first-child {
    fill: var(--dia-2);
    font-size: var(--fig-fs);
}


.area-triangle-fill {
    fill: color-mix(in srgb, var(--dia-6) 7.5%, transparent);
    stroke: none;
}


.area-angle-mark {
    stroke: var(--dia-4);
    stroke-width: 2.4;
}

.area-angle-mark-secondary {
    stroke: var(--dia-6);
}

.area-incircle {
    fill: color-mix(in srgb, var(--dia-2) 3.5%, transparent);
    stroke: var(--dia-2);
    stroke-width: 2.3;
}

.area-circumcircle {
    fill: color-mix(in srgb, var(--dia-6) 2.5%, transparent);
    stroke: var(--dia-6);
    stroke-width: 2.4;
}

.area-chord-focus {
    stroke: var(--dia-4);
    stroke-width: 4;
}

.radius-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radius-methods-grid svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--surface);
}

.radius-panel {
    fill: var(--surface);
    stroke: var(--line);
    stroke-width: 1.2;
}

.radius-panel-title,
.geometry-panel-formula {
    fill: var(--library-ink);
    font-family: var(--font-body);
    text-anchor: middle;
}

.radius-panel-title {
    font-size: var(--fig-fs);
    font-weight: 800;
}

.geometry-panel-formula {
    fill: var(--dia-2);
    font-size: var(--fig-fs);
    font-weight: 750;
}

.radius-vertex-guide {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 1.2;
}

.geometry-angle-note {
    fill: var(--dia-4);
}

.geometry-formula-note {
    fill: var(--dia-2);
}

.area-visual figcaption,
.coordinate-visual figcaption {
    text-wrap: pretty;
}

.area-piece {
    stroke: none;
}

.area-piece-one { fill: color-mix(in srgb, var(--dia-6) 11%, transparent); }
.area-piece-two { fill: color-mix(in srgb, var(--dia-2) 12%, transparent); }
.area-piece-three { fill: color-mix(in srgb, var(--dia-4) 10%, transparent); }

.area-method-steps li > span {
    color: var(--warning);
    border-color: var(--line-strong);
}

.coordinate-panel {
    fill: var(--surface);
    stroke: var(--line);
    stroke-width: 1.2;
}

.coordinate-panel-title {
    fill: var(--dia-6);
    font-size: var(--fig-fs-sm);
    font-weight: 750;
}

.coordinate-panel-title-bad {
    fill: var(--dia-4);
}

.coordinate-axis {
    stroke: var(--line-strong);
    stroke-width: 1.5;
}

.coordinate-axis-arrow {
    fill: var(--line-strong);
}

.coordinate-figure {
    stroke-width: 3;
}

.coordinate-figure-good {
    fill: color-mix(in srgb, var(--dia-6) 8%, transparent);
    stroke: var(--dia-6);
}

.coordinate-figure-bad {
    fill: color-mix(in srgb, var(--dia-4) 6%, transparent);
    stroke: var(--dia-4);
}

.coordinate-guide {
    fill: none;
    stroke: var(--dia-2);
    stroke-width: 1.7;
}

.coordinate-circle {
    fill: color-mix(in srgb, var(--dia-6) 4.5%, transparent);
    stroke: var(--dia-6);
    stroke-width: 2.7;
}

.coordinate-radius {
    stroke: var(--dia-2);
    stroke-width: 2.5;
}

.coordinate-tangent {
    stroke: var(--dia-4);
    stroke-width: 3.2;
}

.vector-line {
    stroke-width: 4;
}

.vector-u { stroke: var(--dia-6); }
.vector-v { stroke: var(--dia-4); }
.vector-arrow { stroke: none; }
.vector-u-arrow { fill: var(--dia-6); }
.vector-v-arrow { fill: var(--dia-4); }

.projection-bracket {
    stroke: var(--dia-2);
    stroke-width: 1.8;
}

.coordinate-method-steps li > span {
    color: var(--muted);
    border-color: var(--line-strong);
}

.area-topic-accordion .math-statement .katex-display,
.coordinate-topic-accordion .math-statement .katex-display {
    font-size: clamp(.72em, 1.75vw, 1em);
}

.topic-list {
    display: grid;
    gap: var(--space-3);
}

.topic-list > .topic-derivative {
    order: 9;
}

.topic-list > .topic-integral {
    order: 10;
}

@media (min-width: 1180px) {
    .lambda-intro,
    .subject-list {
        margin-inline: -36px;
    }
}

.topic-accordion > summary,
.subtopic-accordion > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.topic-accordion > summary::-webkit-details-marker,
.subtopic-accordion > summary::-webkit-details-marker {
    display: none;
}

.topic-accordion > summary {
    display: grid;
    grid-template-columns: 62px minmax(220px, 1fr) auto 44px;
    align-items: center;
    gap: var(--space-4);
    min-height: 108px;
    padding: var(--space-4) var(--space-5);
    border-left: var(--rule) solid var(--accent);
}

.topic-accordion[open] > summary {
    border-bottom: 1px solid var(--library-line);
}

.topic-number {
    color: var(--library-blue);
    font: 750 var(--fs-base)/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-label);
}

.topic-summary-copy {
    display: grid;
    gap: var(--space-1);
}

.topic-summary-copy strong {
    color: var(--library-ink);
    font: 700 var(--fs-xl)/1.12 var(--font-body);
    letter-spacing: var(--ls-display);
}

.topic-summary-copy small,
.topic-summary-meta {
    color: var(--muted);
    font: 500 var(--fs-caption)/1.4 var(--font-body);
}

.accordion-toggle,
.subtopic-accordion summary i {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-control);
    border-radius: 50%;
}

.accordion-toggle::before,
.accordion-toggle::after,
.subtopic-accordion summary i::before,
.subtopic-accordion summary i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    content: "";
    background: var(--library-ink);
    transform: translate(-50%, -50%);
    transition: transform 150ms ease;
}

.accordion-toggle::after,
.subtopic-accordion summary i::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.topic-accordion[open] > summary .accordion-toggle::after,
.subtopic-accordion[open] > summary i::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.topic-content {
    padding: clamp(var(--space-5), 3.5vw, var(--space-6));
    background: var(--surface-sunken);
}

.topic-introduction {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .38fr);
    gap: var(--space-5);
    align-items: center;
    margin-bottom: var(--space-4);
}

.topic-introduction p {
    margin: 0;
    color: var(--muted);
    font: 400 var(--fs-sm)/1.65 var(--font-body);
}

.topic-introduction > div {
    display: grid;
    gap: var(--space-2);
    padding-left: var(--space-5);
    border-left: 1px solid var(--library-line);
}

.topic-introduction > div > span,
.math-statement > span,
.definition-grid > div > span,
.worked-example > span {
    color: var(--library-red);
    font: 750 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.topic-introduction strong {
    color: var(--library-ink);
    font-size: var(--fs-md);
}

.subtopic-list {
    display: grid;
    gap: var(--space-2);
}

.subtopic-accordion > summary {
    display: grid;
    grid-template-columns: 38px minmax(210px, 1fr) minmax(180px, auto) 34px;
    align-items: center;
    gap: var(--space-4);
    min-height: 68px;
    padding: var(--space-3) var(--space-4);
}

.subtopic-accordion[open] > summary {
    background: var(--library-ink);
}

.subtopic-accordion summary > span {
    color: var(--library-blue);
    font: 750 var(--fs-caption)/1 var(--font-body);
}

.subtopic-accordion summary strong {
    color: var(--library-ink);
    font: 700 var(--fs-sm)/1.35 var(--font-body);
}

.subtopic-accordion summary small {
    color: var(--muted);
    font: 450 var(--fs-caption)/1.3 var(--font-body);
    text-align: right;
}

.subtopic-accordion[open] summary > span { color: var(--surface); }
.subtopic-accordion[open] summary strong { color: var(--surface); }
.subtopic-accordion[open] summary small { color: var(--surface); }
/* --muted on the open row's --ink background is 2.0:1; --line-control is the
   token that clears 1.4.11 for a control edge. */
.subtopic-accordion[open] summary i { border-color: var(--line-control); }
.subtopic-accordion[open] summary i::before,
.subtopic-accordion[open] summary i::after { background: var(--surface); }

.subtopic-body {
    padding: clamp(var(--space-5), 3.5vw, var(--space-6));
    border-top: 1px solid var(--library-line);
}

.subtopic-body > p {
    max-width: 940px;
    margin: 0;
    color: var(--accent-hover);
    font: 400 var(--fs-sm)/1.72 var(--font-body);
}

.subtopic-body > p + * {
    margin-top: var(--space-5);
}

/* Panel, padding and leading rule come from .math-statement in primitives.css. */
.math-statement {
    color: var(--library-ink);
}

.math-statement > span {
    display: block;
    margin-bottom: var(--space-3);
}

.math-statement strong {
    display: block;
    min-width: 0;
    font-size: var(--fs-md);
    text-align: center;
}

.math-statement .katex-display,
.definition-grid .katex-display {
    margin: .45em 0;
}

.lesson-library .katex-display {
    overflow: visible;
}

.subtopic-body aside {
    margin-top: var(--space-4);
    padding: var(--space-4);
    color: var(--accent-hover);
    font: 400 var(--fs-caption)/1.6 var(--font-body);
    background: var(--surface-sunken);
    border-left: var(--rule) solid var(--accent);
    border-radius: var(--radius);
}

.definition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.definition-grid strong {
    display: block;
    margin-top: var(--space-3);
    color: var(--library-ink);
    font-size: var(--fs-base);
}

.formula-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.formula-list > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    min-height: 78px;
    padding: var(--space-4) var(--space-4);
    border-right: 1px solid var(--library-line);
    border-bottom: 1px solid var(--library-line);
}

.formula-list > div:nth-child(2n) { border-right: 0; }
.formula-list > div:nth-last-child(-n + 2) { border-bottom: 0; }
.formula-list > div > span { color: var(--muted); font: 650 var(--fs-caption)/1.3 var(--font-body); }
.formula-list strong { min-width: 0; color: var(--library-ink); font-size: var(--fs-sm); }

.property-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.property-strip > span {
    display: grid;
    min-height: 62px;
    place-items: center;
    padding: var(--space-4);
    color: var(--surface);
    font-size: var(--fs-sm);
    text-align: center;
    background: var(--library-blue);
}

.property-strip .katex {
    color: inherit;
}

/* Typed as p.formula-note rather than left at .formula-note with !important.
   It sits inside .worked-example ol, which sets a colour at the same
   specificity; the element selector is the one extra point that lets a note
   read as a note instead of inheriting the list's emphasis colour. */
p.formula-note {
    margin: var(--space-2) 0 0;
    color: var(--muted);
    font-size: var(--fs-caption);
}

.worked-example {
    margin-top: var(--space-4);
}

.worked-example h4 {
    margin: var(--space-3) 0 0;
    color: var(--library-ink);
    font: 700 var(--fs-base)/1.5 var(--font-body);
}

.worked-example ol {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding-left: var(--space-5);
    color: var(--accent-hover);
    font: 400 var(--fs-sm)/1.58 var(--font-body);
}

.worked-example > b {
    display: block;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    color: var(--library-blue);
    font: 750 var(--fs-sm)/1.4 var(--font-body);
    border-top: 1px solid var(--library-line);
}

.rational-examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.rational-examples .worked-example {
    margin-top: 0;
}

.method-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: var(--space-4) 0 0;
    color: var(--surface);
    list-style: none;
}

.method-steps li {
    padding: var(--space-4);
    color: var(--muted);
    font: 400 var(--fs-caption)/1.52 var(--font-body);
    background: var(--surface);
}

.method-steps li > span {
    display: block;
    margin-bottom: var(--space-4);
    color: var(--library-red);
    font: 750 var(--fs-caption)/1 var(--font-body);
}

.trig-method-lead {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
    margin-top: var(--space-4);
    padding: var(--space-5) var(--space-5);
    color: var(--surface);
    background: var(--library-ink);
    border-left: var(--rule) solid var(--accent);
}

.trig-method-lead > span {
    /* An eyebrow on the dark callout panel: ochre only reaches 2.9:1 there. */
    color: var(--line-strong);
    font: 750 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.trig-method-lead strong {
    display: block;
    font: 700 var(--fs-base)/1.35 var(--font-body);
}

.trig-method-lead p {
    max-width: 820px;
    margin: var(--space-2) 0 0;
    color: var(--surface);
    font: 400 var(--fs-caption)/1.55 var(--font-body);
}

.trig-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.trig-method-card {
    position: relative;
    min-width: 0;
}

.trig-method-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.trig-method-card-top > span {
    color: var(--accent);
    font: 800 var(--fs-caption)/1 var(--font-body);
    letter-spacing: var(--ls-label);
}

.trig-method-card-top > small {
    color: var(--muted);
    font: 600 var(--fs-caption)/1.35 var(--font-body);
    text-align: right;
}

.trig-method-card h4 {
    margin: var(--space-4) 0 0;
    color: var(--library-ink);
    font: 700 var(--fs-md)/1.25 var(--font-body);
    letter-spacing: var(--ls-display);
}

.trig-method-card > p {
    min-height: 3.3em;
    margin: var(--space-2) 0 0;
    color: var(--muted);
    font: 400 var(--fs-caption)/1.62 var(--font-body);
}

.trig-method-signal {
    display: grid;
    min-height: 82px;
    place-items: center;
    margin-top: var(--space-4);
    padding: var(--space-4);
    color: var(--library-ink);
    text-align: center;
    background: var(--surface-sunken);
    border-left: var(--rule) solid var(--accent);
    border-radius: var(--radius);
}

.trig-method-signal .katex-display {
    margin: .25em 0;
    overflow: visible;
}

.trig-method-action {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    color: var(--muted);
    font: 650 var(--fs-caption)/1.5 var(--font-body);
    border-top: 1px solid var(--library-line);
}

.trig-method-examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.trig-method-example {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    margin-top: 0;
}

.trig-method-example > b {
    margin-top: auto;
}

@media (max-width: 760px) {
    .radius-methods-grid {
        grid-template-columns: 1fr;
    }

    .trig-method-lead {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .trig-method-grid,
    .trig-method-examples {
        grid-template-columns: 1fr;
    }

    .trig-method-card > p {
        min-height: 0;
    }
}

@media (max-width: 520px) {
    .trig-method-lead,
    .trig-method-card {
        padding: var(--space-4);
    }

    .trig-method-card-top {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-2);
    }

    .trig-method-card-top > small {
        text-align: left;
    }

    .trig-method-signal {
        min-height: 0;
        padding: var(--space-3) var(--space-2);
        font-size: var(--fs-sm);
    }
}

.inverse-graph-atlas,
.inverse-triangle-atlas {
    margin: var(--space-5) 0;
}

.inverse-graph-atlas svg,
.inverse-triangle-atlas svg {
    display: block;
    width: 100%;
    height: auto;
}

.inverse-graph-atlas figcaption,
.inverse-triangle-atlas figcaption {
    max-width: 820px;
    margin: var(--space-2) auto 0;
    color: var(--muted);
    font: 500 var(--fs-caption)/1.5 var(--font-body);
    text-align: center;
}

.inverse-graph-panels rect,
.inverse-triangle-panels rect {
    fill: var(--library-paper);
    stroke: var(--line);
}

.inverse-graph-axes path {
    fill: none;
    stroke: var(--library-ink);
    stroke-linecap: round;
    stroke-width: 1.5;
}

.inverse-graph-guides path {
    fill: none;
    stroke: var(--line-strong);
    stroke-dasharray: 5 5;
    stroke-width: 1.2;
}

.inverse-curve {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.inverse-curve-blue { stroke: var(--dia-1); }
.inverse-curve-red { stroke: var(--dia-4); }
.inverse-curve-green { stroke: var(--dia-3); }

.inverse-graph-labels,
.inverse-triangle-headings,
.inverse-triangle-labels {
    fill: var(--library-ink);
    font: 700 var(--fig-fs)/1 var(--font-body);
}

.inverse-graph-labels text:nth-child(n + 4) {
    fill: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 600;
}

.inverse-triangle-shapes path {
    fill: color-mix(in srgb, var(--dia-1) 8%, transparent);
    stroke: var(--library-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.inverse-triangle-headings {
    fill: var(--dia-1);
    font-size: var(--fig-fs-md);
}

.inverse-triangle-labels {
    fill: var(--muted);
    font-size: var(--fig-fs);
    font-weight: 650;
}

.inverse-branch-grid strong {
    font: 650 var(--fs-sm)/1.55 var(--font-body);
}

.inverse-example-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.inverse-example-grid .worked-example {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    margin-top: 0;
}

.inverse-example-grid .worked-example > b {
    margin-top: auto;
}

.inverse-example-wide {
    grid-column: 1 / -1;
}

@media (max-width: 760px) {
    .inverse-example-grid {
        grid-template-columns: 1fr;
    }

    .inverse-example-wide {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .inverse-graph-atlas,
    .inverse-triangle-atlas {
        padding: var(--space-2);
        overflow: hidden;
    }
}

.derivative-rate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

/* .card--inverse: the edge matches the fill, so it is box sizing rather than
   a border treatment — see the primitive. */
.derivative-rate-grid > div:nth-child(3) {
    color: var(--surface);
    background: var(--ink);
    border-color: transparent;
}

.derivative-rate-grid > div > span {
    display: block;
    color: var(--muted);
    font: 750 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.derivative-rate-grid > div:nth-child(3) > span {
    color: var(--surface);
}

.derivative-rate-grid > div > strong {
    display: block;
    margin-top: var(--space-4);
    color: inherit;
    font-size: var(--fs-base);
    text-align: center;
}

.derivative-visual {
    margin: var(--space-5) 0;
}

.derivative-visual svg {
    display: block;
    width: 100%;
    height: auto;
}

.derivative-visual figcaption {
    max-width: 800px;
    margin: var(--space-2) auto 0;
    color: var(--muted);
    font: 500 var(--fs-caption)/1.5 var(--font-body);
    text-align: center;
}

.derivative-visual-grid path {
    fill: none;
    stroke: var(--surface-sunken);
    stroke-width: 1;
}

.derivative-visual-axes path {
    fill: none;
    stroke: var(--library-ink);
    stroke-linecap: round;
    stroke-width: 1.7;
}

.derivative-curve,
.derivative-secant,
.derivative-tangent,
.derivative-increments {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.derivative-curve {
    stroke: var(--dia-1);
    stroke-width: 4;
}

.derivative-secant {
    stroke: var(--dia-4);
    stroke-dasharray: 8 6;
    stroke-width: 2.6;
}

.derivative-tangent {
    stroke: var(--dia-3);
    stroke-width: 3.2;
}

.derivative-increments {
    stroke: var(--muted);
    stroke-dasharray: 5 5;
    stroke-width: 1.6;
}

.derivative-points circle {
    fill: var(--surface);
    stroke: var(--dia-4);
    stroke-width: 3;
}

.derivative-visual-labels {
    fill: var(--muted);
    font: 700 var(--fig-fs)/1 var(--font-body);
}

.derivative-formula-list strong,
.derivative-error-grid strong {
    font: 650 var(--fs-sm)/1.55 var(--font-body);
}

.derivative-sign-chart {
    margin: var(--space-4) 0 0;
}

.derivative-sign-chart > div {
    display: grid;
    grid-template-columns: 105px repeat(5, minmax(0, 1fr));
    min-height: 48px;
    border-bottom: 1px solid var(--library-line);
}

.derivative-sign-chart > div:last-child {
    border-bottom: 0;
}

.derivative-sign-chart > div > span,
.derivative-sign-chart > div > b {
    display: grid;
    min-width: 0;
    place-items: center;
    padding: var(--space-2) var(--space-3);
    border-right: 1px solid var(--library-line);
}

.derivative-sign-chart > div > b:last-child {
    border-right: 0;
}

.derivative-sign-chart > div > span {
    color: var(--surface);
    font: 700 var(--fs-caption)/1.2 var(--font-body);
    background: var(--library-ink);
}

.derivative-sign-chart > div > b {
    color: var(--muted);
    font: 650 var(--fs-caption)/1.2 var(--font-body);
    background: var(--surface);
}

.derivative-sign-chart .positive {
    color: var(--library-blue);
    font-size: var(--fs-base);
}

.derivative-sign-chart .negative {
    color: var(--library-red);
    font-size: var(--fs-base);
}

@media (max-width: 760px) {
    .derivative-rate-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .derivative-visual {
        padding: var(--space-2);
    }

    .derivative-sign-chart > div {
        grid-template-columns: 58px repeat(5, minmax(0, 1fr));
    }

    .derivative-sign-chart > div > span,
    .derivative-sign-chart > div > b {
        padding: var(--space-2) 2px;
        font-size: var(--fs-caption);
    }
}

.word-problem-relations strong {
    overflow-wrap: anywhere;
}

.word-problem-checks strong {
    font: 650 var(--fs-sm)/1.55 var(--font-body);
}

.word-motion-chart {
    margin-top: var(--space-4);
}

.word-motion-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.word-chart-grid path {
    fill: none;
    stroke: var(--line);
    stroke-width: 1;
}

.word-chart-axes path {
    fill: none;
    stroke: var(--library-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.word-chart-labels,
.word-chart-notes {
    fill: var(--muted);
    font: 600 var(--fig-fs)/1 var(--font-body);
}

.word-chart-notes {
    fill: var(--library-ink);
    font-weight: 700;
}

.word-chart-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.word-chart-line-blue { stroke: var(--dia-1); }
.word-chart-line-red { stroke: var(--dia-4); }
.word-chart-blue-text { fill: var(--dia-1); }
.word-chart-red-text { fill: var(--dia-4); }

.word-chart-meeting {
    fill: var(--surface);
    stroke: var(--library-ink);
    stroke-width: 3;
}

.work-diagram,
.work-area-figure {
    margin-top: var(--space-4);
}

.work-diagram svg,
.work-area-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

.work-ground {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 2;
}

.work-block {
    fill: var(--surface-sunken);
    stroke: var(--library-ink);
    stroke-width: 2;
}

.work-arrow,
.work-arrow-head,
.work-angle,
.work-chart-axis,
.work-force-line,
.work-guide-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.work-arrow,
.work-arrow-head {
    stroke-width: 3;
}

.work-arrow-blue { stroke: var(--dia-1); }
.work-arrow-red { stroke: var(--dia-4); }

.work-angle {
    stroke: var(--library-ink);
    stroke-width: 1.5;
}

.work-diagram-label,
.work-diagram-note,
.work-area-caption {
    fill: var(--library-ink);
    font: 650 var(--fig-fs-md)/1 var(--font-body);
}

.work-diagram-note {
    fill: var(--muted);
    font-size: var(--fig-fs);
}

.work-blue-label { fill: var(--dia-1); }
.work-red-label { fill: var(--dia-4); }

.work-area-fill {
    fill: color-mix(in srgb, var(--dia-1) 18%, transparent);
}

.work-chart-axis {
    stroke: var(--library-ink);
    stroke-width: 1.7;
}

.work-force-line {
    stroke: var(--dia-1);
    stroke-width: 4;
}

.work-guide-line {
    stroke: var(--line-strong);
    stroke-dasharray: 5 6;
    stroke-width: 1.5;
}

.work-area-caption {
    fill: var(--library-ink);
    font-size: var(--fig-fs-md);
    font-weight: 750;
}

.work-meaning-grid strong,
.work-check-grid strong {
    font: 650 var(--fs-sm)/1.55 var(--font-body);
}

.work-formula-list strong {
    overflow-wrap: anywhere;
}

/* The template is table-then-plot. When the grid holds two plots instead,
   the first one lands in the column sized for a value table: a 520-unit
   viewBox at 208px renders its labels at 6px. Two plots get a column each. */
.function-visual-grid:has(.function-plot + .function-plot) {
    grid-template-columns: minmax(0, 1fr);
}

.function-visual-grid {
    display: grid;
    grid-template-columns: minmax(150px, .24fr) minmax(0, 1fr);
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.function-value-table,
.function-plot {
    min-width: 0;
    margin: 0;
}

.function-value-table {
    display: flex;
    flex-direction: column;
}

.function-value-table > span {
    color: var(--library-red);
    font: 750 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.function-value-table > strong {
    margin-top: var(--space-3);
    color: var(--library-ink);
    font-size: var(--fs-base);
}

.function-value-table table {
    width: 100%;
    margin-top: var(--space-4);
    border-spacing: 0;
    border-collapse: collapse;
    color: var(--accent-hover);
    font: 600 var(--fs-caption)/1.3 var(--font-body);
    text-align: center;
}

.function-value-table th,
.function-value-table td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--library-line);
}

.function-value-table th {
    color: var(--library-ink);
    background: var(--surface-sunken);
}

.function-plot svg {
    display: block;
    width: 100%;
    height: auto;
}

.function-plot figcaption {
    margin-top: var(--space-2);
    color: var(--muted);
    font: 500 var(--fs-caption)/1.45 var(--font-body);
    text-align: center;
}

.function-plot-grid path {
    fill: none;
    stroke: var(--surface-sunken);
    stroke-width: 1;
}

.function-plot-axes path {
    fill: none;
    stroke: var(--library-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.function-plot-labels,
.function-curve-label {
    fill: var(--muted);
    font: 650 var(--fig-fs)/1 var(--font-body);
}

.function-curve {
    fill: none;
    stroke: var(--dia-1);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.function-curve-secondary {
    stroke: var(--dia-4);
}

.function-points circle {
    fill: var(--surface);
    stroke: var(--dia-1);
    stroke-width: 3;
}

.function-curve-label {
    fill: var(--dia-1);
    font-size: var(--fig-fs-md);
    font-weight: 750;
}

.function-curve-label-secondary {
    fill: var(--dia-4);
}

.function-inverse-line {
    fill: none;
    stroke: var(--muted);
    stroke-dasharray: 7 7;
    stroke-width: 1.7;
}

.function-pair-guides path {
    fill: none;
    stroke: var(--line-strong);
    stroke-dasharray: 4 5;
    stroke-width: 1.4;
}

.function-pair-points circle {
    fill: var(--surface);
    stroke-width: 3;
}

.function-pair-primary { stroke: var(--dia-1); }
.function-pair-secondary { stroke: var(--dia-4); }

.function-inverse-plot {
    max-width: 780px;
    margin-top: var(--space-4);
}

.function-concept-plot,
.function-transform-plot {
    margin-top: var(--space-4);
}

.function-concept-panels rect {
    fill: var(--library-paper);
    stroke: var(--line);
}

.function-mini-axes path {
    fill: none;
    stroke: var(--library-ink);
    stroke-linecap: round;
    stroke-width: 1.5;
}

.function-mini-guides path {
    fill: none;
    stroke: var(--line-strong);
    stroke-dasharray: 5 5;
    stroke-width: 1.2;
}

.function-periodic-curve {
    stroke: var(--dia-3);
}

.function-panel-labels,
.function-symmetry-labels,
.function-transform-labels,
.function-legend {
    fill: var(--library-ink);
    font: 700 var(--fig-fs)/1 var(--font-body);
}

.function-symmetry-labels,
.function-transform-labels {
    fill: var(--muted);
    font-size: var(--fig-fs-sm);
    font-weight: 600;
}

.function-transform-grid path {
    fill: none;
    stroke: var(--surface-sunken);
    stroke-width: 1;
}

.function-transform-midline {
    fill: none;
    stroke: var(--line-strong);
    stroke-dasharray: 5 6;
    stroke-width: 1.3;
}

.function-base-curve,
.function-transformed-curve {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.function-base-curve {
    stroke: var(--dia-1);
    stroke-dasharray: 7 6;
    stroke-width: 2.4;
}

.function-transformed-curve {
    stroke: var(--dia-4);
    stroke-width: 3.8;
}

.function-legend {
    font-size: var(--fig-fs-sm);
    font-weight: 650;
}

.function-definition-grid strong,
.function-property-grid strong,
.function-method-list strong,
.function-class-list strong,
.function-transform-list strong {
    font: 650 var(--fs-sm)/1.55 var(--font-body);
}

.function-parameter-steps {
    margin-bottom: var(--space-4);
}

.library-practice-heading {
    margin-top: clamp(var(--space-8), 9vw, var(--space-section));
    scroll-margin-top: 20px;
}

/* G10 · bodies of revolution */
.solid-topic-intro > div {
    padding: var(--space-4) var(--space-5);
    background: var(--ink-soft);
    border-left: 0;
}

.solid-topic-intro > div > span {
    color: var(--surface);
}

.solid-topic-intro strong {
    color: var(--surface);
}

.solid-formula-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solid-formula-list > div {
    grid-template-columns: 1fr;
    align-content: center;
    gap: var(--space-2);
    border-right: 1px solid var(--library-line);
    border-bottom: 0;
}

.solid-formula-list > div:nth-child(2n) {
    border-right: 1px solid var(--library-line);
}

.solid-formula-list > div:last-child {
    border-right: 0;
}

.solid-formula-list strong {
    font-size: var(--fs-base);
}

.solid-property-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* One accent, not two: --accent-hover is a hover state, not a second fill. */
.solid-property-strip > span {
    background: var(--accent);
}

.solid-distance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solid-worked-example {
    position: relative;
    background: var(--surface);
}

/* An unlabelled ornamental ring used to sit in the corner here, drawn as
   `box-shadow: inset 0 0 0 7px var(--ink)`. It marked nothing, and a 7px inset
   ring is a border written as elevation — the pattern this redesign has been
   removing everywhere else. It was invisible to the audit because the audit
   walks elements, not pseudo-elements. */
.solid-worked-example::after {
    display: none;
}

.solid-visual {
    overflow: hidden;
    max-width: 880px;
    border-top: var(--rule) solid var(--accent);
}

.solid-visual-grid,
.sphere-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solid-visual svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--surface);
}

.solid-panel-back {
    fill: var(--canvas);
    stroke: var(--line);
}

.solid-main,
.solid-face,
.solid-hidden,
.solid-axis,
.solid-accent,
.solid-section,
.solid-dimension,
.solid-right-mark,
.sphere-body,
.sphere-equator,
.sphere-plane,
.sphere-cut,
.sphere-triangle,
.inscribed-sphere,
.inscribed-sphere-equator,
.inscribed-circle {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.solid-main,
.solid-face {
    stroke: var(--ink-soft);
    stroke-width: 2.25;
}

.solid-face-front {
    stroke-width: 2.7;
}

.solid-hidden {
    stroke: var(--line-strong);
    stroke-width: 1.45;
    stroke-dasharray: 5 5;
}

.solid-axis {
    stroke: var(--muted);
    stroke-width: 1.35;
    stroke-dasharray: 6 5;
}

.solid-accent {
    stroke: var(--dia-4);
    stroke-width: 2.2;
}

.solid-section {
    fill: color-mix(in srgb, var(--dia-6-wash) 62%, transparent);
    stroke: var(--dia-6);
    stroke-width: 2;
}

.solid-dimension {
    stroke: var(--dia-4);
    stroke-width: 1.3;
}

.solid-panel-title,
.solid-label,
.solid-labels,
.sphere-legend {
    fill: var(--ink-soft);
    font-family: var(--font-body);
}

.solid-panel-title {
    fill: var(--dia-4);
    font-size: var(--fig-fs-sm);
    font-weight: 800;
    letter-spacing: var(--ls-label);
}

.solid-label,
.solid-labels {
    font-size: var(--fig-fs);
    font-weight: 750;
}

.sphere-body {
    stroke: var(--dia-6);
    stroke-width: 2.3;
}

.sphere-equator {
    stroke: var(--line-strong);
    stroke-width: 1.25;
    stroke-dasharray: 6 5;
}

.sphere-plane {
    fill: color-mix(in srgb, var(--dia-6-wash) 58%, transparent);
    stroke: var(--line-strong);
    stroke-width: 1.4;
}

.sphere-cut {
    fill: color-mix(in srgb, var(--dia-4) 12%, transparent);
    stroke: var(--dia-4);
    stroke-width: 2.5;
}

.sphere-triangle {
    fill: color-mix(in srgb, var(--dia-6-wash) 38%, transparent);
    stroke: var(--dia-6);
    stroke-width: 2.4;
}

.sphere-section-visual .solid-labels {
    font-size: var(--fig-fs-md);
}

.solid-right-mark {
    stroke: var(--muted);
    stroke-width: 1.5;
}

.solid-point {
    stroke: var(--surface);
    stroke-width: 2;
}

.solid-point-main { fill: var(--dia-6); }
.solid-point-secondary { fill: var(--dia-4); }
.solid-point-neutral { fill: var(--muted); }

.sphere-legend {
    font-size: var(--fig-fs-md);
    font-weight: 650;
    text-anchor: middle;
}

.sphere-legend text:last-child {
    fill: var(--dia-4);
    font-size: var(--fig-fs-lg);
    font-weight: 800;
}

.inscribed-sphere {
    fill: color-mix(in srgb, var(--dia-6-wash) 50%, transparent);
    stroke: var(--dia-4);
    stroke-width: 2.25;
}

.inscribed-sphere-equator {
    stroke: var(--dia-4);
    stroke-width: 1.25;
    stroke-dasharray: 5 4;
}

.inscribed-circle {
    fill: color-mix(in srgb, var(--surface) 76%, transparent);
    stroke: var(--dia-4);
    stroke-width: 2.25;
}

/* G11 · advanced combinations of solids */

.combination-topic-accordion > summary {
    background: var(--surface);
}


.combination-topic-intro {
    position: relative;
    color: var(--library-ink);
}

.combination-topic-intro::after {
    content: '';
    position: absolute;
    width: 210px;
    height: 210px;
    right: -78px;
    top: -92px;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
    border-radius: 50%;
    box-shadow: none;
    pointer-events: none;
}

.combination-topic-intro > p,
.combination-topic-intro > div { position: relative; z-index: 1; }
.combination-topic-intro > p { color: var(--muted); }
.combination-topic-intro > div { border-left-color: var(--library-line); }
.combination-topic-intro > div > span { color: var(--library-red); }
.combination-topic-intro strong { color: var(--library-ink); }

.combination-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: var(--space-5) 0;
}

.combination-rule-grid > div {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-height: 145px;
    padding: var(--space-5);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.combination-rule-grid > div:nth-child(2n) { border-right: 0; }

.combination-rule-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }

.combination-rule-grid span {
    color: var(--danger);
    font-size: var(--fs-eyebrow);
    font-weight: 850;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.combination-rule-grid strong {
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.6;
}


.combination-method-steps li::before { background: var(--danger); }


.combination-worked-example {
    background: var(--surface);
}

.combination-worked-example + .combination-worked-example { margin-top: var(--space-4); }

.combination-visual {
    border-color: var(--line);
    background: var(--surface-sunken);
}


.combination-visual svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--surface);
}

.combination-panel { fill: var(--surface); stroke: var(--line); }


.combination-panel-title { fill: var(--dia-6); font-family: var(--font-body); }

.combination-panel-title {
    fill: var(--dia-4);
    font-size: var(--fig-fs-sm);
    font-weight: 850;
    letter-spacing: var(--ls-label);
}


.combination-symbol-key {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: var(--space-5) 0;
}

.combination-symbol-key > div {
    display: grid;
    grid-template-columns: minmax(42px, auto) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-height: 76px;
    padding: var(--space-3) var(--space-4);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.combination-symbol-key > div:nth-child(3n) { border-right: 0; }
.combination-symbol-key > div:nth-last-child(-n + 3) { border-bottom: 0; }
.combination-symbol-key > div > span { color: var(--danger); font-size: var(--fs-base); }
.combination-symbol-key > div > strong { color: var(--muted); font: 700 var(--fs-caption)/1.4 var(--font-body); }

.combination-formula-sheet {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: var(--space-5) 0;
}

.combination-formula-sheet--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.combination-formula-sheet article {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 132px;
    padding: var(--space-4) var(--space-5);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.combination-formula-sheet:not(.combination-formula-sheet--three) article:nth-child(2n),
.combination-formula-sheet--three article:nth-child(3n) { border-right: 0; }

.combination-formula-sheet:not(.combination-formula-sheet--three) article:nth-last-child(-n + 2),
.combination-formula-sheet--three article:nth-last-child(-n + 3) { border-bottom: 0; }

.combination-formula-sheet article > span {
    color: var(--danger);
    font: 850 var(--fs-eyebrow)/1.3 var(--font-body);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.combination-display-math {
    min-width: 0;
    margin-top: var(--space-3);
    color: var(--ink-soft);
    font-size: var(--fs-base);
}

.combination-display-math .katex-display {
    margin: .3em 0;
    overflow: visible;
    text-align: left;
}

.combination-model-grid,
.combination-model-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.combination-model-grid svg,
.combination-model-section-grid svg,
.combination-problem-visual svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--surface);
}

.combination-problem-visual {
    margin: var(--space-4) 0 var(--space-5);
}

.combination-problem-visual figcaption {
    padding: var(--space-3) var(--space-4);
    color: var(--muted);
    font: 650 var(--fs-caption)/1.52 var(--font-body);
    border-top: 1px solid var(--line);
}

.comb-3d-edge,
.comb-3d-hidden,
.comb-3d-inner,
.comb-3d-equator,
.comb-3d-radius,
.comb-outer-circle,
.comb-outer-sphere,
.comb-section-edge,
.comb-section-axis,
.comb-section-circle,
.comb-section-radius,
.comb-section-inner,
.comb-right-angle,
.comb-dimension {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.comb-3d-face {
    fill: color-mix(in srgb, var(--dia-6-wash) 34%, transparent);
    stroke: none;
}

.comb-3d-face--soft { fill: color-mix(in srgb, var(--dia-2-wash) 30%, transparent); }
.comb-3d-edge { stroke: var(--dia-6); stroke-width: 2.35; }
.comb-3d-hidden { stroke: var(--line-strong); stroke-width: 1.45; stroke-dasharray: 6 5; }
.comb-3d-inner { stroke: var(--dia-6); stroke-width: 2.15; }
.comb-3d-sphere { fill: color-mix(in srgb, var(--dia-6-wash) 53%, transparent); stroke: var(--dia-4); stroke-width: 2.35; }
.comb-outer-sphere { fill: color-mix(in srgb, var(--dia-6-wash) 22%, transparent); stroke: var(--dia-6); stroke-width: 2.2; }
.comb-3d-equator { stroke: var(--dia-4); stroke-width: 1.45; stroke-dasharray: 6 4; }
.comb-3d-radius { stroke: var(--dia-4); stroke-width: 2.1; }
.comb-3d-contact { fill: var(--dia-4); stroke: var(--surface); stroke-width: 1.5; }

.comb-3d-label,
.comb-section-labels {
    fill: var(--dia-6);
    font-family: var(--font-body);
    font-size: var(--fig-fs);
    font-weight: 800;
}

.comb-section-fill { fill: color-mix(in srgb, var(--dia-6-wash) 32%, transparent); }
.comb-section-edge { stroke: var(--dia-6); stroke-width: 2.45; }
.comb-section-axis { stroke: var(--line-strong); stroke-width: 1.35; stroke-dasharray: 6 5; }
.comb-section-circle { fill: color-mix(in srgb, var(--dia-6-wash) 52%, transparent); stroke: var(--dia-4); stroke-width: 2.45; }
.comb-outer-circle { fill: color-mix(in srgb, var(--dia-6-wash) 13%, transparent); stroke: var(--dia-6); stroke-width: 2.2; }
.comb-section-inner { fill: color-mix(in srgb, var(--dia-6-wash) 44%, transparent); stroke: var(--dia-6); stroke-width: 2.2; }
.comb-section-radius { stroke: var(--dia-4); stroke-width: 2.25; }
.comb-right-angle { stroke: var(--dia-4); stroke-width: 1.55; }
.comb-dimension { stroke: var(--muted); stroke-width: 1.25; }
.comb-section-point { fill: var(--dia-6); stroke: var(--surface); stroke-width: 1.4; }
.comb-section-point--accent { fill: var(--dia-4); }

.combination-worked-example .combination-problem-visual {
    margin-inline: -2px;
}

.combination-worked-example > h4 + .combination-problem-visual {
    margin-top: var(--space-4);
}

@media (max-width: 980px) {
    .lambda-intro { grid-template-columns: minmax(0, 1fr) minmax(310px, .65fr); gap: var(--space-6); }

    .subject-accordion > summary { grid-template-columns: 64px minmax(200px, 1fr) 44px; }
    .subject-summary-meta { display: none; }
    .topic-accordion > summary { grid-template-columns: 48px minmax(200px, 1fr) 44px; }
    .topic-summary-meta { display: none; }
    .formula-list { grid-template-columns: 1fr; }
    .formula-list > div,
    .formula-list > div:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--library-line); }
    .formula-list > div:last-child { border-bottom: 0; }
    .method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rational-examples { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .lambda-intro { grid-template-columns: 1fr; padding: var(--space-5); }

    .complex-topics-heading { grid-template-columns: 1fr; gap: var(--space-5); }
    .library-shelf-mark { width: min(72vw, 240px); margin-top: var(--space-4); }
    .geometry-program-intro { grid-template-columns: 1fr; }
    .geometry-program-mark { min-height: 110px; border-top: 1px solid color-mix(in srgb, var(--surface) 18%, transparent); border-left: 0; }
    .triangle-atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solid-visual-grid,
    .sphere-section-grid { grid-template-columns: 1fr; }
    .combination-rule-grid { grid-template-columns: 1fr; }
    .combination-model-grid,
    .combination-model-section-grid,
    .combination-formula-sheet,
    .combination-formula-sheet--three { grid-template-columns: 1fr; }
    .combination-symbol-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .combination-symbol-key > div,
    .combination-symbol-key > div:nth-child(3n),
    .combination-symbol-key > div:nth-last-child(-n + 3) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .combination-symbol-key > div:nth-child(2n) { border-right: 0; }
    .combination-symbol-key > div:nth-last-child(-n + 2) { border-bottom: 0; }
    .combination-formula-sheet article,
    .combination-formula-sheet:not(.combination-formula-sheet--three) article:nth-child(2n),
    .combination-formula-sheet--three article:nth-child(3n),
    .combination-formula-sheet:not(.combination-formula-sheet--three) article:nth-last-child(-n + 2),
    .combination-formula-sheet--three article:nth-last-child(-n + 3) { border-right: 0; border-bottom: 1px solid var(--line); }
    .combination-formula-sheet article:last-child { border-bottom: 0; }
    .combination-rule-grid > div,
    .combination-rule-grid > div:nth-child(2n),
    .combination-rule-grid > div:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--line); }
    .combination-rule-grid > div:last-child { border-bottom: 0; }
    .power-atlas-grid { grid-template-columns: 1fr; }

    .topic-introduction { grid-template-columns: 1fr; }
    .topic-introduction > div { padding: var(--space-4) 0 0; border-top: 1px solid var(--library-line); border-left: 0; }
    .solid-topic-intro > div { padding: var(--space-4); border-top: 0; }
    .combination-topic-intro > div { padding: var(--space-4) 0 0; border-top: 1px solid var(--library-line); border-left: 0; }
    .subtopic-accordion > summary { grid-template-columns: 30px minmax(0, 1fr) 34px; }
    .subtopic-accordion summary small { display: none; }
    .definition-grid,
    .property-strip { grid-template-columns: 1fr; }
    .function-visual-grid { grid-template-columns: 1fr; }
    .function-value-table table { max-width: 360px; }
    .poly-visual-grid--two,
    .poly-visual-grid--steps { grid-template-columns: 1fr; }
    .poly-visual-card svg { max-height: 390px; }
    .pyramid-legend,
    .parallel-ratio-legend { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .lambda-intro { margin-inline: -5px; padding: var(--space-4); }
    .lambda-intro h1 { font-size: var(--fs-2xl); }
    .lambda-practice-link { width: 100%; }

    .complex-topics { padding-top: var(--space-8); }
    .complex-topics-label { font-size: var(--fs-md); }
    .library-shelf-mark { width: min(78vw, 220px); }
    .complex-topics-heading h2 { font-size: var(--fs-2xl); }
    .subject-list { gap: var(--space-3); }
    .subject-accordion > summary { grid-template-columns: 46px minmax(0, 1fr) 36px; gap: var(--space-3); min-height: 112px; padding: var(--space-4) var(--space-3); }
    .subject-symbol { width: 44px; height: 44px; font-size: var(--fs-base); }
    .subject-symbol-geometry { font-size: var(--fs-lg); }
    .subject-summary-copy strong { font-size: var(--fs-xl); }
    .subject-summary-copy small { font-size: var(--fs-caption); }
    .subject-toggle { width: 34px; height: 34px; }
    .subject-content { padding: var(--space-2); }
    .geometry-program-intro { gap: var(--space-4); padding: var(--space-5) var(--space-4); }
    .geometry-program-mark { display: none; }

    .triangle-atlas-grid { grid-template-columns: 1fr; }
    .triangle-visual figcaption { padding: var(--space-3) var(--space-3); }
    .topic-accordion > summary { grid-template-columns: 35px minmax(0, 1fr) 36px; gap: var(--space-2); min-height: 92px; padding: var(--space-3) var(--space-3); }
    .topic-summary-copy strong { font-size: var(--fs-lg); }
    .topic-content { padding: var(--space-3); }
    .topic-introduction { padding: var(--space-4); }
    .subtopic-accordion > summary { padding: var(--space-3); }
    .subtopic-body { padding: var(--space-4) var(--space-4); }
    .formula-list > div { grid-template-columns: 1fr; gap: var(--space-2); }
    .method-steps { grid-template-columns: 1fr; }
    .math-statement { padding: var(--space-4) var(--space-4); }
    .power-topic-accordion .math-statement .katex-display { font-size: .72em; }
    .stereo-topic-accordion .math-statement .katex-display,
    .polyhedra-topic-accordion .math-statement .katex-display { font-size: .68em; }
    .stereo-legend,
    .poly-labels { font-size: var(--fig-fs-sm); }
    .poly-visual-grid { padding: var(--space-2); }
    .poly-visual-card h5 { font-size: var(--fs-caption); }
    .section-steps-visual .poly-visual-card svg { max-height: none; }
    .pyramid-example-visual { margin-inline: -4px; }
    .combination-symbol-key { grid-template-columns: 1fr; }
    .combination-symbol-key > div,
    .combination-symbol-key > div:nth-child(2n),
    .combination-symbol-key > div:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--line); }
    .combination-symbol-key > div:last-child { border-bottom: 0; }
    .combination-formula-sheet article { min-height: 112px; padding: var(--space-4) var(--space-4); }
    .combination-display-math { font-size: var(--fs-sm); }
    .combination-problem-visual { margin-inline: -5px; }
}

@media (prefers-reduced-motion: reduce) {
    .subject-toggle::after,
    .accordion-toggle::after,
    .subtopic-accordion summary i::after { transition: none; }
}

/* Professional system refinements ---------------------------------------- */
.result-title,
.section-heading h2,
.auth-title,
.subscribe-payment-hero h1,
.lambda-intro h1,
.complex-topics-heading h2 {
    text-wrap: balance;
}

.result-subtitle,
.section-heading > p,
.lambda-intro-copy > p,
.complex-topics-heading p {
    text-wrap: pretty;
}

.results-panel {
    margin-top: var(--space-5);
    padding: var(--space-6);
}

/* .card .card--sunken in the markup. */

.results-panel .stat-box .val {
    color: var(--platform-text);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}

.results-panel .stat-box.is-success .val {
    color: var(--success);
}

.results-panel .stat-box.is-danger .val {
    color: var(--danger);
}

.results-panel .stat-box.stat-time .val {
    color: var(--accent);
}


input[type="file"].glass-input {
    padding: var(--space-2);
    color: var(--platform-muted);
}

input[type="file"].glass-input::file-selector-button {
    min-height: 36px;
    margin-right: var(--space-3);
    padding: 0 var(--space-3);
    color: var(--surface);
    font: 600 var(--fs-sm)/1 var(--font-body);
    background: var(--accent);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

input[type="file"].glass-input::file-selector-button:hover {
    background: var(--accent-hover);
}

@media (max-width: 760px) {


    .stats-summary {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Страница прохождения теста — компактный HUD.
   Вся навигация (выход · экзамен · номера вопросов · счётчик · таймер)
   живёт в одной плотной строке сверху, ниже остаётся только вопрос.
   Разметку строит getViewHTML('quiz'), карту — renderQuestionMap().
   ═══════════════════════════════════════════════════════════════════════ */

.quiz-hud-view {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    background: var(--platform-canvas);
}

/* ── Верхняя строка ── */
.quiz-hud {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 54px;
    padding: 0 clamp(var(--space-3), 2vw, var(--space-5));
    background: var(--platform-surface);
    border-bottom: 1px solid var(--platform-border);
    /* The one raised surface in the application: it detaches from the page as
       you scroll the quiz. It used to inherit this from a bare `header` rule
       left over from a deleted site header. */
    box-shadow: var(--shadow-raised);
}

/* .btn .btn--secondary .btn--sm in the markup. Only the flex behaviour inside
   the HUD row is left here. */
.quiz-hud-exit {
    flex: 0 0 auto;
}

.quiz-hud-exam {
    flex: 0 0 auto;
    max-width: 200px;
    color: var(--platform-text);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quiz-hud-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    background: var(--platform-border);
}

/* Карта вопросов прямо в строке — один плоский ряд номеров со шкалой под ним.
   Номера (26px) + отступ (3px) + шкала (5px) = 34px: ровно столько же занимал
   ряд с вертикальными отступами, поэтому строка остаётся высотой 54px. */
.quiz-hud-mapwrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.quiz-hud-map {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

/* Пунктирная дорожка — весь тест, рамка — видимый кусок ряда. */
.quiz-hud-scale {
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px);
}

.quiz-hud-scale[hidden] {
    display: none;
}

.quiz-hud-scale > i {
    position: absolute;
    top: -1px;
    height: 7px;
    border: 1px solid var(--platform-teal);
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    transition: left 0.12s linear, width 0.12s linear;
}

.quiz-hud-map::-webkit-scrollbar {
    display: none;
}

/* The one target in the application below 44px, and deliberately so. A test has
   up to 35 questions; at 44px each the map would be 1 676px wide, wider than the
   viewport, and the HUD would be half again as tall. 26px with a 4px gap puts
   30px between centres, which satisfies WCAG 2.5.8 (24px minimum, AA); 44px is
   2.5.5 Enhanced, which is AAA. Every other control in the app meets 44.
   Verified by scripts/redesign-a11y.mjs. */
.quiz-hud-map .map-dot {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0;
    background: var(--platform-surface);
    border: 1px solid var(--platform-border);
    border-radius: var(--radius);
    color: var(--platform-muted);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.quiz-hud-map .map-dot:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.quiz-hud-map .map-dot.answered {
    background: var(--accent-wash);
    border-color: var(--line-strong);
    color: var(--accent-hover);
}

/* "Current" is position, not a warning. Ochre here was the only ochre on the
   quiz screen and read as a caution state.
   An accent fill, which is how the app says "you are here" everywhere else —
   see .sidebar-link.active. It used to be a 1px border plus an inset 1px
   shadow faking a 2px one; that was the last non-elevation shadow in the app,
   and filling the dot marks position more plainly than a heavier edge. */
.quiz-hud-map .map-dot.current {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface);
    font-weight: 800;
}

.quiz-hud-map .map-dot.correct {
    background: var(--accent-wash);
    border-color: var(--line-strong);
    color: var(--success);
}

.quiz-hud-map .map-dot.wrong {
    background: var(--surface-sunken);
    border-color: var(--line-strong);
    color: var(--danger);
}

/* Счётчик стоит вплотную к ряду номеров, поэтому отделён линией, а текущий
   номер набран крупно и тёмным — иначе «2 / 35» читается как ещё один номер. */
.quiz-hud-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    padding-left: var(--space-5);
    border-left: 1px solid var(--platform-border);
    color: var(--platform-muted);
    font-size: var(--fs-caption);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quiz-hud-count strong {
    color: var(--platform-text);
    font-size: var(--fs-md);
    font-weight: 750;
    line-height: 1;
}

.quiz-hud-timer {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.quiz-hud-timer::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
}

.quiz-hud-timer strong {
    color: var(--platform-text);
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Содержимое вопроса ── */
.quiz-stage {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: var(--space-6);
}

.quiz-stage .nc-shared-context {
    margin: 0 0 var(--space-4);
}

.quiz-stage .question-block {
    margin-bottom: var(--space-5);
}

.quiz-stage .question-text {
    margin: 0;
    color: var(--platform-text);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 650;
    line-height: 1.42;
    text-wrap: pretty;
}

.quiz-stage .question-text .katex {
    font-size: 1.02em;
}

.quiz-stage .options-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

/* An answer option is an interactive surface, so it is .card .card--action in
   the markup: surface, border, radius, hover, focus ring and selected state all
   come from the primitive. What is left here is the row layout. */
.quiz-stage .option-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-base);
}

.quiz-stage .option-btn .opt-idx {
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    background: var(--surface-sunken);
    color: var(--platform-muted);
    font-size: var(--fs-sm);
    font-weight: 750;
}

/* `selected` is this page's name for the primitive's `is-selected`, and carries
   the same two values. No inset ring: that was a border drawn as a shadow. */
.quiz-stage .option-btn.selected {
    border-color: var(--accent);
    background: var(--accent-wash);
}

.quiz-stage .option-btn.selected .opt-idx {
    background: var(--accent);
    color: var(--surface);
}

.quiz-stage .quiz-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-5);
}

.quiz-stage .quiz-actions .btn-primary,
.quiz-stage .quiz-actions .btn-secondary {
    min-height: 46px;
    padding: 0 var(--space-5);
}

.quiz-stage .quiz-loading {
    grid-column: 1 / -1;
    color: var(--platform-muted);
}

/* ── Рисунок в вопросе ──
   Узкий («портретный») чертёж встаёт рядом с условием: положенный снизу,
   он съедал бы целый экран высоты. Широкий остаётся под текстом.
   Клик по рисунку открывает его в натуральную величину — мелкие детали
   чертежа не читаются в уменьшенной врезке. */
.quiz-stage .question-media:empty {
    display: none;
}

.quiz-stage .question-block.has-media {
    display: grid;
    gap: var(--space-4);
}

.quiz-stage .question-block.media-portrait {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: var(--space-5);
    align-items: start;
}

/* .card .card--tight in the markup carries surface, border and radius; the
   six declarations that used to restate them here were fighting
   two .question-image-shell rules in styles.css, both now folded in. */
.quiz-stage .question-image-shell {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: var(--space-2);
}

.quiz-stage .question-image-trigger {
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: zoom-in;
}

.quiz-stage .question-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 42vh;
    border-radius: var(--radius);
    object-fit: contain;
}

.quiz-stage .question-block.media-portrait .question-image {
    max-width: 320px;
    max-height: 58vh;
}

.quiz-stage .question-image-hint {
    margin-top: var(--space-2);
    color: var(--platform-muted);
    font-size: var(--fs-caption);
    text-align: center;
}

/* Рисунок в натуральную величину */
body.is-zooming-image {
    overflow: hidden;
}

.question-zoom {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: clamp(var(--space-4), 4vw, var(--space-7));
    background: color-mix(in srgb, var(--ink) 78%, transparent);
    overflow: auto;
}

/* A real overlay: the zoomed figure floats above a scrim. One of the two
   surfaces in the app that genuinely has elevation. */
.question-zoom-frame {
    display: grid;
    place-items: center;
    max-width: 100%;
    padding: var(--space-3);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay);
}

.question-zoom-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.question-zoom-close {
    position: fixed;
    top: clamp(10px, 2vw, 22px);
    right: clamp(10px, 2vw, 22px);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--platform-surface);
    border: 1px solid var(--platform-border);
    border-radius: 50%;
    color: var(--platform-text);
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
}

.question-zoom-close:hover {
    background: var(--surface-sunken);
}

/* ── Национальный сертификат ── */
.quiz-stage .nc-multipart-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

/* Five !important declarations used to sit here, all restating the primitive
   over a .nc-part-card rule that had its own surface and a 22px drop shadow.
   The card is .card now and the shadow is gone, so none of them are needed. */

.quiz-stage .nc-part-badge {
    background: var(--platform-teal);
}

.quiz-stage .open-answer-container {
    grid-column: 1 / -1;
}

/* ── Узкие экраны ── */
@media (max-width: 860px) {
    .quiz-stage .question-block.media-portrait {
        grid-template-columns: minmax(0, 1fr);
    }

    .quiz-stage .question-block.media-portrait .question-image {
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    .quiz-hud-exam,
    .quiz-hud-sep,
    .quiz-hud-count {
        display: none;
    }

    /* Полная подпись кнопки выхода съедала строку так, что номерам оставалось
       меньше трёх цифр. На телефоне остаётся стрелка — смысл несёт aria-label. */
    .quiz-hud-exit-label {
        display: none;
    }

    .quiz-hud-exit {
        padding: 0 var(--space-2);
    }

    .quiz-stage .options-list,
    .quiz-stage .nc-multipart-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .quiz-stage .quiz-actions .btn-primary,
    .quiz-stage .quiz-actions .btn-secondary {
        flex: 1 1 0;
        padding: 0 var(--space-4);
    }
}