/* ============================================================
   EndlessPrep — public site design system
   (marketing pages, auth, exam shell shared tokens)
   ============================================================ */

:root {
    /* ---- EndlessPrep palette, from the 2026 mockups ----
       Near-black ink and a single deep teal on a soft gray ground. The names below are kept from
       the previous navy/teal system on purpose: every rule in this file and in the app already
       refers to them, so re-pointing the values re-skins the whole site at once, and a rule that
       asks for "the darkest ink" still gets it. */

    /* Ink — was navy. Near-black with a green-gray bias, the mockups' #0e1a20. */
    --navy-900: #0a141a;   /* deepest — dark panels, the claim band */
    --navy-800: #0e1a20;   /* primary ink — headings, dark surfaces, primary buttons */
    --navy-700: #25353f;   /* raised dark surface */
    --navy-600: #3a4a54;

    --teal-800: #0b5f58;
    --teal-700: #0f7c73;   /* primary teal — buttons, links, accents */
    --teal-600: #12938a;
    --teal-500: #17a89d;
    --teal-400: #7fd3c9;   /* light teal — on-dark accents, hover borders */
    --teal-100: #cfe9e5;
    --teal-50:  #e8f2f1;   /* teal tint background */

    /* Back-compat aliases: existing rules reference the old --blue-NNN and --sky-50 names. */
    --blue-600: var(--teal-700);
    --blue-500: var(--teal-600);
    --blue-400: var(--teal-400);
    --sky-50: var(--teal-50);

    /* Greys — was slate. Cooled slightly green to sit under the teal. */
    --slate-900: #0e1a20;
    --slate-800: #22323b;
    --slate-700: #35454e;
    --slate-600: #4b5a63;
    --slate-500: #6b7a84;
    --slate-400: #9aa8b3;
    /* 300 and 800 were in use in a dozen rules before they were ever defined, so those rules
       were quietly falling back to currentColor or to an inherited value: disabled arrows that
       did not look disabled, muted numbers that were not muted, borders in the text color. The
       300 is the value one of those rules carried as its own inline fallback. */
    --slate-300: #cbd5e1;
    --slate-200: #e3e9ec;  /* the one border color the mockups use */
    --slate-100: #eef2f4;
    --slate-50: #f2f5f6;   /* page surface */
    --white: #ffffff;

    /* The ground the page card sits on, and the states.
       Right and wrong must not be told in the brand color: teal already means "primary" and
       "selected", so a correct answer drawn in teal reads as the one you picked rather than the
       one that was right. These two stay a real green and a real red, tuned to the palette. */
    --ground: #e6eaec;
    --gold: #f59e0b;
    --green-500: #1a7f45;   /* the mockups' "ready" green */
    --red-500: #d9534f;     /* the mockups' "needs another pass" red */

    /* Added with the 2026 landing/dashboard mockups: a mint hero ground and an orange accent that
       does the "look here" work teal used to do, so teal can stay the color of the product. */
    --mint: #dff3ef;
    --mint-deep: #c4e9e2;
    --orange: #f4a83a;
    --orange-deep: #c97a10;
    --orange-ink: #7a4a05;
    --orange-tint: #fdebd0;
    --red-tint: #fdeceb;
    --green-tint: #e3f5ea;

    /* Display face for headings and big numbers; Figtree stays for everything else. */
    --font-display: 'Bricolage Grotesque', 'Figtree', 'Segoe UI', sans-serif;

    /* Shadows are much lighter here: the mockups separate with radius and tone, not depth. */
    --shadow-sm: 0 1px 2px rgba(14, 26, 32, .06);
    --shadow-md: 0 4px 16px -6px rgba(14, 26, 32, .14);
    --shadow-lg: 0 18px 40px -18px rgba(14, 26, 32, .28);

    --radius: 12px;        /* controls, inputs, small cards */
    --radius-lg: 20px;     /* cards and panels */
    --site-max: 1180px;
}

.site-root {
    font-family: 'Figtree', 'Segoe UI', sans-serif;
    color: var(--slate-900);
    background: var(--white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-container {
    width: 100%;
    max-width: var(--site-max);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ---------- Top navigation ---------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--slate-200);
}

.site-nav-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 68px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    color: var(--navy-800);
    text-decoration: none;
}

.site-brand-logo {
    /* The art carries the faint infinity mark above and below the letters, so the box is
       taller than the wordmark; 32px puts the caps where the old text wordmark sat. */
    height: 32px;
    width: auto;
    display: block;
}

/* The footer sits on navy-900, where the near-black half of the logo would vanish, so it
   takes the light variant — white letters, brighter teal. */
.footer-wordmark .site-brand-logo { height: 38px; }

.site-nav-menu {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Account actions (Sign in / Register, or Start a test + user) sit apart from the content links. */
.site-nav-account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 18px;
    border-left: 1px solid var(--slate-200);
}

/* Signed-in user chip */
.site-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    color: var(--navy-800);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    transition: background .15s;
}

.site-user:hover { background: var(--slate-100); }

.site-user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--teal-50);
    color: var(--teal-700);
}

.site-user-icon svg { width: 18px; height: 18px; }

.site-user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav-link {
    color: var(--slate-600);
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
    padding: 8px 14px;
    border-radius: 10px;
    transition: color .15s, background .15s;
}

.site-nav-link:hover {
    color: var(--navy-800);
    background: var(--slate-100);
}

/* Mobile menu toggle — hidden on desktop, revealed under the nav breakpoint below. */
.nav-toggle { display: none; }
.nav-burger { display: none; }

/* ---------- Buttons ---------- */
.btn-cta, .btn-ghost, .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: .98rem;
    padding: 11px 20px;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
}

.btn-cta {
    background: linear-gradient(135deg, var(--navy-800), var(--teal-700));
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(12, 156, 156, .55);
}

.btn-cta:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--navy-700), var(--teal-600));
    box-shadow: 0 12px 26px -8px rgba(12, 156, 156, .7);
}

.btn-outline {
    background: #fff;
    color: var(--navy-800);
    border-color: var(--slate-200);
}

.btn-outline:hover {
    border-color: var(--blue-400);
    background: var(--sky-50);
}

.btn-ghost {
    background: transparent;
    color: var(--navy-800);
}

.btn-ghost:hover {
    background: var(--slate-100);
}

/* A disabled button has to look disabled.

   Without this, .btn-cta keeps its full gradient and - worse - still lifts and brightens on
   :hover, so a control that cannot be clicked is the most inviting thing on the page. That is
   what made "Launch practice" look broken to a student without a pass rather than unavailable,
   and it applied equally to "I'm ready - start the test" before its circuit connects, to "Check"
   before a grid-in answer is typed, and to Next/Previous at the ends of a test.

   The greyed-out treatment matches .qb-link:disabled, which the practice page already used for
   the domain and skill links beside these buttons - the two disagreeing about the same permission
   is what made the page read as a bug. */
.btn-cta:disabled,
.btn-outline:disabled,
.btn-ghost:disabled {
    background: var(--slate-100);
    color: var(--slate-400);
    border-color: var(--slate-200);
    box-shadow: none;
    cursor: not-allowed;
}

/* Hover has to be beaten back explicitly: the rules above are no more specific than
   .btn-cta:hover, so without these a mouse would still lift and re-gradient a dead button. */
.btn-cta:disabled:hover,
.btn-outline:disabled:hover,
.btn-ghost:disabled:hover {
    background: var(--slate-100);
    color: var(--slate-400);
    border-color: var(--slate-200);
    box-shadow: none;
    transform: none;
}

.btn-lg {
    padding: 14px 26px;
    font-size: 1.05rem;
    border-radius: 14px;
}

.btn-block {
    width: 100%;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1000px 500px at 80% -10%, rgba(12, 156, 156, .16), transparent 60%),
        radial-gradient(800px 500px at 0% 0%, rgba(20, 57, 94, .10), transparent 55%),
        linear-gradient(180deg, #fff 0%, var(--slate-50) 100%);
    padding: 84px 0 72px;
    border-bottom: 1px solid var(--slate-200);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--blue-600);
    background: var(--sky-50);
    border: 1px solid var(--teal-100);
    padding: 6px 12px;
    border-radius: 999px;
}

.hero h1 {
    font-size: clamp(2.4rem, 4.6vw, 3.7rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    margin: 20px 0 18px;
    color: var(--navy-900);
}

.hero h1 .accent {
    background: linear-gradient(120deg, var(--teal-700), var(--teal-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-lead {
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--slate-600);
    max-width: 560px;
}

.hero-bullets {
    list-style: none;
    margin: 20px 0 4px;
    padding: 0;
    max-width: 560px;
    display: grid;
    gap: 11px;
}
.hero-bullets li {
    display: flex;
    align-items: baseline;
    gap: 11px;
    font-size: 1.06rem;
    line-height: 1.45;
    color: var(--slate-700);
    font-weight: 500;
}
.hero-bullets .check {
    color: var(--teal-600);
    font-weight: 800;
    flex: none;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.hero-note {
    margin-top: 16px;
    font-size: .9rem;
    color: var(--slate-500);
}

.hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 44px;
}

.hero-stat .num {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--navy-800);
    letter-spacing: -.02em;
}

.hero-stat .label {
    font-size: .85rem;
    color: var(--slate-500);
}

/* Hero preview card (fake problem) */
.hero-card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 22px;
    transform: rotate(.4deg);
}

.hero-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    color: var(--slate-500);
    border-bottom: 1px dashed var(--slate-200);
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.hero-chip {
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--sky-50);
    color: var(--blue-600);
}

.hero-card p {
    font-size: .98rem;
    line-height: 1.55;
    color: var(--slate-700);
}

.hero-choices {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.hero-choices li {
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .92rem;
    color: var(--slate-700);
    display: flex;
    gap: 10px;
}

.hero-choices li.correct {
    border-color: var(--green-500);
    background: #f0fdf4;
    color: #166534;
    font-weight: 600;
}

.hero-choices .key {
    font-weight: 700;
    color: var(--slate-500);
}

/* ---------- Sections ---------- */
.section {
    padding: 74px 0;
}

.section-alt {
    background: var(--slate-50);
    border-block: 1px solid var(--slate-200);
}

.section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 46px;
}

.section-head h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -.02em;
    color: var(--navy-900);
    margin: 8px 0 12px;
}

.section-head p {
    color: var(--slate-600);
    font-size: 1.08rem;
    line-height: 1.6;
}

.kicker {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue-600);
}

/* Feature grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature-card {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--teal-100);
}

.feature-ico {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: var(--sky-50);
    color: var(--blue-600);
    margin-bottom: 16px;
}

.feature-card h3 {
    font-size: 1.15rem;
    color: var(--navy-800);
    margin: 0 0 8px;
}

.feature-card p {
    color: var(--slate-600);
    line-height: 1.55;
    font-size: .98rem;
    margin: 0;
}

/* ---------- Insight / diagnostics ---------- */
.insight-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 52px;
    align-items: center;
}

.insight-copy h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    letter-spacing: -.02em;
    color: var(--navy-900);
    margin: 10px 0 14px;
}

.insight-copy > p {
    color: var(--slate-600);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 20px;
}

.insight-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 11px;
}

.insight-list li {
    position: relative;
    padding-left: 28px;
    color: var(--slate-700);
    line-height: 1.5;
}

.insight-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--teal-700);
    font-weight: 700;
}

.insight-soon {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .95rem;
    color: var(--slate-600);
    margin: 0;
    padding-top: 18px;
    border-top: 1px dashed var(--slate-200);
}

.soon-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--navy-900);
}

.diag-card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    transform: rotate(-.4deg);
}

.diag-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    color: var(--slate-500);
    border-bottom: 1px dashed var(--slate-200);
    padding-bottom: 12px;
    margin-bottom: 18px;
}

.diag-row {
    margin-bottom: 16px;
}

.diag-row:last-child {
    margin-bottom: 0;
}

.diag-head {
    display: flex;
    justify-content: space-between;
    font-size: .92rem;
    margin-bottom: 6px;
}

.diag-label {
    color: var(--navy-800);
    font-weight: 600;
}

.diag-pct {
    color: var(--slate-500);
    font-variant-numeric: tabular-nums;
}

.diag-track {
    height: 9px;
    border-radius: 999px;
    background: var(--slate-100);
    overflow: hidden;
}

.diag-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.diag-fill.strong { background: var(--teal-600); }
.diag-fill.mid    { background: var(--gold); }
.diag-fill.weak   { background: var(--red-500); }

/* Steps */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    counter-reset: step;
}

.step {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    padding: 26px;
    position: relative;
}

.step .step-n {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--navy-800);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    margin-bottom: 14px;
}

.step h3 { margin: 0 0 6px; color: var(--navy-800); font-size: 1.1rem; }
.step p { margin: 0; color: var(--slate-600); line-height: 1.5; }

/* CTA band */
.cta-band {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 52px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.cta-band h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 12px; letter-spacing: -.02em; }
.cta-band p { color: #c7d2e8; font-size: 1.1rem; margin: 0 auto 26px; max-width: 560px; }

/* ---------- Pricing ---------- */
.pricing-hero {
    padding: 64px 0 12px;
    text-align: center;
}

.pricing-hero h1 { font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -.03em; color: var(--navy-900); margin: 10px 0 12px; }
.pricing-hero p { color: var(--slate-600); font-size: 1.12rem; max-width: 620px; margin: 0 auto; }

.token-banner {
    max-width: 720px;
    margin: 34px auto 0;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
}

.token-banner .big { font-size: 2.4rem; font-weight: 800; color: var(--teal-700); letter-spacing: -.03em; flex: none; }
.token-banner .desc { color: var(--slate-600); line-height: 1.5; }
.token-banner .desc strong { color: var(--navy-800); }
.token-banner-features { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.token-banner-features li { display: flex; align-items: baseline; gap: 8px; }
.token-banner-features .check { color: var(--teal-500, #16a394); font-weight: 700; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 44px;
    align-items: stretch;
}

.plan {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--teal-400);
}

.plan.featured {
    border: 2px solid var(--teal-600);
    box-shadow: 0 24px 50px -20px rgba(12, 156, 156, .45), var(--shadow-md);
    transform: translateY(-10px) scale(1.03);
    background: linear-gradient(180deg, #ffffff 60%, var(--teal-50));
}

.plan.featured:hover {
    transform: translateY(-14px) scale(1.03);
    box-shadow: 0 30px 58px -18px rgba(12, 156, 156, .55), var(--shadow-md);
}

/* Bold gold "% off" flag in the top-right corner — the at-a-glance differentiator. */
.plan-discount-flag {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--gold);
    color: var(--navy-900);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    padding: 8px 11px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    box-shadow: var(--shadow-sm);
}
.plan-discount-flag span {
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.plan-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--navy-700), var(--teal-700));
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

.plan-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--navy-800);
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-name .dot { width: 12px; height: 12px; border-radius: 50%; }
.plan-basic .dot { background: var(--slate-400); }
.plan-gold .dot { background: var(--gold); }
.plan-platinum .dot { background: linear-gradient(135deg,#9aa7bd,#e6edf7); border:1px solid #cbd5e1; }

.plan-price { margin: 16px 0 2px; }
.plan-price .amount { font-size: 2.6rem; font-weight: 700; color: var(--navy-900); letter-spacing: -.03em; }
.plan-price .per { color: var(--slate-500); font-size: 1rem; }

/* Value line — quantifies the deal ("just $37.25 per practice test"). */
.plan-pertest { color: var(--teal-700); font-size: .95rem; font-weight: 600; margin: 0 0 10px; }
.plan-pertest strong { font-weight: 800; }

.plan-sub { color: var(--slate-600); min-height: 42px; }

/* Hero stat: the number of tests you get — the thing skimmers actually compare. */
.plan-tokens {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 16px;
}
.plan-tokens-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--teal-700);
    line-height: 1;
    letter-spacing: -.03em;
    flex: none;
}
.plan-tokens-label { font-size: .88rem; font-weight: 600; color: var(--slate-700); line-height: 1.25; }
.plan.featured .plan-tokens { background: var(--teal-600); border-color: var(--teal-600); }
.plan.featured .plan-tokens-num { color: #fff; }
.plan.featured .plan-tokens-label { color: rgba(255, 255, 255, .92); }

.plan-features {
    list-style: none;
    margin: 20px 0 24px;
    padding: 20px 0 0;
    border-top: 1px solid var(--slate-200);
    display: grid;
    gap: 12px;
    flex: 1;
}

.plan-features li {
    display: flex;
    gap: 10px;
    color: var(--slate-700);
    font-size: .97rem;
    line-height: 1.4;
}

.plan-features .check {
    color: var(--green-500);
    font-weight: 700;
    flex: none;
}

.pricing-note {
    text-align: center;
    color: var(--slate-500);
    font-size: .92rem;
    margin-top: 30px;
}

/* FAQ accordion */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    font-weight: 600;
    color: var(--navy-800);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--teal-700);
    line-height: 1;
    transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--teal-700); }
.faq-body { padding: 0 24px 20px; }
.faq-body p { margin: 0; color: var(--slate-600); line-height: 1.6; }

/* ---------- Auth pages ---------- */
.auth-wrap {
    min-height: calc(100vh - 68px);
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background:
        radial-gradient(700px 400px at 100% 0%, rgba(12,156,156,.10), transparent 60%),
        var(--slate-50);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 36px;
}

.auth-card h1 { font-size: 1.7rem; letter-spacing: -.02em; color: var(--navy-900); margin: 0 0 6px; }
.auth-card .auth-sub { color: var(--slate-600); margin-bottom: 24px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; color: var(--slate-700); margin-bottom: 6px; }

/* A field that cannot be typed in should not look like one that can. Used on the pricing editor,
   where an existing plan's id is fixed, and on the PE answer box once an answer is in. */
.input:disabled {
    background: var(--slate-100);
    color: var(--slate-500);
    cursor: not-allowed;
}

.input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--slate-200);
    border-radius: 11px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--slate-900);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.input:focus {
    outline: none;
    border-color: var(--teal-600);
    box-shadow: 0 0 0 4px rgba(12, 156, 156, .16);
}

/* Password field with show/hide toggle */
.password-field { position: relative; }
.password-field .input { padding-right: 46px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--slate-500);
    cursor: pointer;
    transition: color .15s, background .15s;
}
.password-toggle:hover { color: var(--navy-800); background: var(--slate-100); }
.password-toggle .pw-icon { width: 20px; height: 20px; }
.password-toggle .pw-hide { display: none; }
/* When revealed, swap the eye for the eye-off icon. */
.password-field.is-revealed .password-toggle .pw-show { display: none; }
.password-field.is-revealed .password-toggle .pw-hide { display: block; }

/* Password-strength meter */
.pw-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pw-strength-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.pw-strength-bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .2s ease, background .2s ease; }
.pw-strength-label { font-size: .8rem; font-weight: 600; min-width: 42px; color: var(--slate-500); }
.pw-strength[data-level="1"] .pw-strength-bar span { width: 25%; background: var(--red-500); }
.pw-strength[data-level="2"] .pw-strength-bar span { width: 50%; background: var(--gold); }
.pw-strength[data-level="3"] .pw-strength-bar span { width: 75%; background: var(--teal-500); }
.pw-strength[data-level="4"] .pw-strength-bar span { width: 100%; background: var(--teal-600); }
.pw-strength[data-level="1"] .pw-strength-label { color: var(--red-500); }
.pw-strength[data-level="2"] .pw-strength-label { color: #b7791f; }
.pw-strength[data-level="3"] .pw-strength-label,
.pw-strength[data-level="4"] .pw-strength-label { color: var(--teal-700); }

/* Google's button guidelines: white, its own four-color G, dark text, a light gray border. */
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; box-sizing: border-box; padding: 11px 16px;
    background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 10px;
    font-weight: 600; font-size: 1rem; text-decoration: none;
}
.btn-google:hover { background: #f8f9fa; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--slate-500); font-size: .85rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--slate-200); }

.auth-alt { text-align: center; margin-top: 18px; color: var(--slate-600); font-size: .95rem; }
.auth-alt a { color: var(--blue-600); text-decoration: none; font-weight: 600; }

.form-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 11px 14px;
    border-radius: 11px;
    font-size: .92rem;
    margin-bottom: 16px;
}

.form-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 11px 14px;
    border-radius: 11px;
    font-size: .92rem;
    margin-bottom: 16px;
}

/* ---------- Footer ---------- */
.site-footer {
    margin-top: auto;
    background: var(--navy-900);
    color: #aab6d0;
    padding: 44px 0 30px;
}

.site-footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.site-footer .site-brand { color: #fff; }
.site-footer-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.site-footer-col h4 { color: #fff; font-size: .95rem; margin: 0 0 10px; }
.site-footer-col a { display: block; color: #aab6d0; text-decoration: none; font-size: .92rem; padding: 4px 0; }
.site-footer-col a:hover { color: #fff; }
.site-footer-bottom { margin-top: 30px; padding-top: 18px; border-top: 1px solid #1c2b52; font-size: .85rem; color: #7f8db0; }
.tm-notice-footer { margin: 6px 0 0; }

/* ---------- Dashboard ---------- */
.dash { padding: 40px 0 80px; background: var(--slate-50); min-height: calc(100vh - 68px); }
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.dash-head h1 { font-size: 2rem; letter-spacing: -.02em; color: var(--navy-900); margin: 0; }
.dash-sub { color: var(--slate-500); margin: 4px 0 0; }
.dash-cards { display: grid; grid-template-columns: 360px 1fr; gap: 22px; margin-bottom: 34px; }
.dash-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); min-width: 0; }
/* The full-width generate button is long — let it wrap instead of forcing the card wider than the viewport. */
.dash-token .btn-lg { white-space: normal; }
.dash-card h3 { margin: 0 0 14px; color: var(--navy-800); }
.dash-token { text-align: center; }
.dash-token-num { font-size: 3.4rem; font-weight: 700; color: var(--blue-600); line-height: 1; letter-spacing: -.03em; }
.dash-token-label { color: var(--slate-500); margin: 6px 0 18px; }
.dash-plan { margin-top: 14px; font-size: .9rem; color: var(--slate-500); }
.dash-muted { color: var(--slate-500); line-height: 1.5; }
.dash-stat-row { display: flex; gap: 30px; }
.dash-stat-num { font-size: 1.9rem; font-weight: 700; color: var(--navy-800); }
.dash-stat-lbl { font-size: .85rem; color: var(--slate-500); }
.dash-section-title { font-size: 1.3rem; color: var(--navy-800); margin: 0 0 16px; }
.dash-empty { background: #fff; border: 1px dashed var(--slate-200); border-radius: var(--radius); padding: 34px; text-align: center; color: var(--slate-500); }
.dash-table { display: grid; gap: 10px; }
.dash-row { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 16px 20px; }
.dash-row-main { flex: 1; }
.dash-row-title { font-weight: 600; color: var(--navy-800); }
.dash-row-meta { font-size: .85rem; color: var(--slate-500); }
.badge-score { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.badge-progress { background: var(--sky-50); color: var(--blue-600); border: 1px solid var(--teal-100); padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; }

/* Dashboard — banners */
.dash-banner { border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; font-weight: 500; }
.dash-banner-ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* Something the student has to do before part of the site opens up — amber rather than red,
   because nothing has gone wrong. */
.dash-banner-todo { background: #fffbeb; color: #854d0e; border: 1px solid #fde68a; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dash-banner-todo .dash-banner-text { flex: 1 1 320px; font-weight: 500; }
.dash-banner-todo .dash-banner-text span { display: block; font-weight: 400; font-size: 0.92rem; margin-top: 3px; opacity: 0.85; }
.dash-banner-todo form { margin: 0; }
.dash-banner-todo button { background: #854d0e; color: #fff; border: 0; border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; }
.dash-banner-todo button:hover { background: #6b3d09; }

/* Dashboard — admin strip */
.dash-admin {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: linear-gradient(135deg, var(--navy-800), var(--teal-800));
    color: #fff; border-radius: var(--radius); padding: 18px 22px; margin-bottom: 26px;
    text-decoration: none; box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s;
}
.dash-admin:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dash-admin-title { font-weight: 700; }
.dash-admin-sub { font-size: .88rem; color: #cfe6e6; margin-top: 2px; }
.dash-admin-cta { font-weight: 700; white-space: nowrap; }

/* Dashboard — stat grid */
.dash-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 30px; }
.dash-stat-num { font-size: 1.9rem; font-weight: 700; color: var(--navy-800); line-height: 1; }
.dash-stat-lbl { font-size: .85rem; color: var(--slate-500); margin-top: 4px; }

/* Dashboard — knowledge-area strengths */
.dash-areas { margin-bottom: 34px; }
.dash-areas-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.dash-areas-head h3 { margin: 0; color: var(--navy-800); }
.dash-areas-note { font-size: .85rem; color: var(--slate-500); }
.dash-areas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 40px; }
.diag-count { color: var(--slate-400); font-weight: 500; }
.dash-areas-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--slate-200); font-size: .82rem; color: var(--slate-600); }
.dash-areas-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.dash-areas-legend .dot-strong { background: var(--teal-600); }
.dash-areas-legend .dot-mid { background: var(--gold); }
.dash-areas-legend .dot-weak { background: var(--red-500); }

/* Dashboard — score-over-time chart */
.dash-trend { margin-bottom: 34px; }
.trend-svg { width: 100%; height: auto; display: block; margin-top: 10px; }
.trend-svg text { font-family: inherit; }
.trend-grid { stroke: var(--slate-200); stroke-width: 1; }
.trend-tick { fill: var(--slate-500); font-size: 12px; }
.trend-area { fill: var(--teal-600); fill-opacity: .12; }
.trend-line { fill: none; stroke: var(--teal-600); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-dot { fill: var(--teal-600); stroke: #fff; stroke-width: 2; transition: r .12s ease; }
.trend-dot:hover { r: 7; }
.trend-endlabel { fill: var(--navy-800); font-size: 14px; font-weight: 700; }

/* Dashboard — token packs */
.pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 12px; }
.pack {
    position: relative; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
    padding: 24px 20px; box-shadow: var(--shadow-sm); text-align: center;
    display: flex; flex-direction: column; align-items: center;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pack:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal-400); }
.pack-featured {
    border: 2px solid var(--teal-600);
    box-shadow: 0 20px 44px -20px rgba(12, 156, 156, .5), var(--shadow-md);
    transform: translateY(-6px) scale(1.04);
    background: linear-gradient(180deg, #ffffff 55%, var(--teal-50));
}
.pack-featured:hover { transform: translateY(-9px) scale(1.04); box-shadow: 0 26px 50px -18px rgba(12, 156, 156, .58), var(--shadow-md); }
.pack-featured .pack-qty { color: var(--teal-600); }
.pack-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--navy-700), var(--teal-700)); color: #fff;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 999px; white-space: nowrap;
    box-shadow: var(--shadow-sm);
}
/* Bold gold discount flag — the subscriber's per-purchase saving, at a glance. */
.pack-discount-flag {
    position: absolute; top: 12px; right: 12px;
    background: var(--gold); color: var(--navy-900);
    font-size: .72rem; font-weight: 800; letter-spacing: .02em;
    padding: 4px 8px; border-radius: 8px; line-height: 1;
    box-shadow: var(--shadow-sm);
}
.pack-qty { font-size: 2.8rem; font-weight: 800; color: var(--blue-600); line-height: 1; letter-spacing: -.03em; }
.pack-qty-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); margin-top: 2px; }
.pack-price { font-size: 1.6rem; font-weight: 800; color: var(--navy-800); margin-top: 14px; letter-spacing: -.02em; }
.pack-was { font-size: .78rem; color: var(--slate-500); margin-top: 4px; }
.pack-was s { color: var(--slate-400, #9aa7bd); }
.pack-save { font-size: .82rem; font-weight: 600; color: #166534; background: #f0fdf4; border-radius: 999px; padding: 3px 12px; margin-top: 8px; }
.pack-save strong { font-weight: 800; }
.pack-save-empty { background: none; color: transparent; }
.pack-blurb { font-size: .88rem; color: var(--slate-600); line-height: 1.45; margin: 12px 0 18px; flex: 1; }
.pack-note { font-size: .85rem; color: var(--slate-500); margin: 0 0 34px; }
.pack-plan-note { font-size: .9rem; color: var(--slate-600); margin: -6px 0 18px; }
.pack-plan-note strong { color: var(--navy-800); }

/* ---- Admin pricing editor ---- */
.admin-pricing-hint { font-size: .9rem; color: var(--slate-600); margin: -6px 0 16px; }
.admin-pricing-list { display: grid; gap: 16px; margin-bottom: 16px; }
.admin-pricing-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; }
.admin-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 12px; }
.admin-pricing-card .field { margin: 0; }
.admin-pricing-card .field label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); margin-bottom: 4px; }
.admin-pricing-flags { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.admin-check { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--navy-800); cursor: pointer; }
.admin-check input { width: 16px; height: 16px; }
.admin-pricing-save { margin: 26px 0 40px; }

/* Non-featured "Buy" buttons are muted gray so the best-value pack stands out. */
.pack-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 600;
    font-size: .98rem;
    padding: 11px 20px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid var(--slate-200);
    background: var(--slate-100);
    color: var(--slate-700);
    transition: background .15s, color .15s, border-color .15s;
}
.pack-buy:hover { background: var(--slate-200); color: var(--navy-800); }

/* Free-sample highlight card */
.dash-sample {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--teal-50), #fff 70%);
    border: 1px solid var(--teal-100);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin-bottom: 26px;
}
.dash-sample-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-700); margin-bottom: 6px; }
.dash-sample-body h3 { margin: 0 0 6px; color: var(--navy-900); font-size: 1.25rem; }
.dash-sample-body p { margin: 0; color: var(--slate-600); line-height: 1.55; max-width: 560px; }
.dash-sample .btn-cta { white-space: nowrap; }

/* Account settings */
.dash-account { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: start; }
.dash-account-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.dash-account-card h3 { margin: 0 0 14px; color: var(--navy-800); font-size: 1.05rem; }

.dash-row-count { color: var(--slate-400); font-weight: 500; font-size: .85rem; }

/* Admin gate (template browser, unauthorized) */
.admin-gate { min-height: 70vh; display: grid; place-items: center; padding: 60px 24px; background: var(--slate-50); }
.admin-gate-card { max-width: 460px; text-align: center; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 40px 34px; }
.admin-gate-badge { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-700); background: var(--teal-50); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.admin-gate-card h1 { font-size: 1.7rem; color: var(--navy-900); margin: 0 0 12px; letter-spacing: -.02em; }
.admin-gate-card p { color: var(--slate-600); line-height: 1.6; margin: 0 0 24px; }

/* Problem diagram (simple inline SVG figure above the prompt) */
.exam-diagram { max-width: 300px; margin: 4px 0 18px; color: var(--navy-700); }
.exam-diagram svg { width: 100%; height: auto; display: block; }
/* Photo/raster figures get a little more room and a soft frame. */
.exam-figure { max-width: 480px; }
.exam-figure img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--slate-200); border-radius: 10px;
    background: #fff;
}

/* Problem text with its figure alongside it (figure on the right, wraps below when narrow).
   Placing the figure beside the text keeps tall/portrait images from pushing the prompt down. */
.problem-body { display: flex; gap: 24px; align-items: flex-start; }
.problem-body > .exam-prompt,
.problem-body > .prompt { flex: 1 1 auto; min-width: 0; }
.problem-body > .exam-diagram,
.problem-body > .exam-figure { flex: 0 0 auto; margin: 0; }
@media (max-width: 760px) {
    .problem-body { flex-direction: column; }
    .problem-body > .exam-diagram,
    .problem-body > .exam-figure { margin-top: 6px; }
}

/* ---- Admin: problem images ---- */
.img-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 6px 0 10px; }
.img-search { max-width: 380px; flex: 1 1 260px; }
.img-scope { display: flex; gap: 8px; flex-wrap: wrap; }
.img-chip {
    border: 1px solid var(--slate-200); background: #fff; color: var(--slate-700);
    font-size: .85rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer;
    transition: all .15s ease;
}
.img-chip:hover { border-color: var(--teal-400); }
.img-chip.on { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.img-count { font-size: .85rem; color: var(--slate-500); margin: 0 0 14px; }
.img-list { display: grid; gap: 12px; margin-bottom: 40px; }
.img-row {
    display: flex; gap: 16px; align-items: flex-start;
    background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 14px 16px;
}
.img-thumb {
    flex: none; width: 92px; height: 92px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--slate-200); background: var(--slate-50);
    display: flex; align-items: center; justify-content: center;
}
.img-thumb img { width: 100%; height: 100%; object-fit: contain; }
.img-thumb-empty { font-size: .72rem; color: var(--slate-400); text-align: center; }
.img-main { flex: 1; min-width: 0; }
.img-title { font-weight: 700; color: var(--navy-800); display: flex; align-items: center; gap: 8px; }
.img-badge { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-800); background: var(--teal-50); border: 1px solid var(--teal-100); padding: 2px 7px; border-radius: 999px; }
.img-sub { font-size: .82rem; color: var(--slate-500); margin: 2px 0 10px; }
.img-sub code, .dash-sub code { background: var(--slate-100); border-radius: 5px; padding: 1px 5px; font-size: .9em; }
.img-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Compact controls — smaller text and padding so option labels aren't clipped. */
.img-controls .input { height: auto; padding: 8px 12px; font-size: .9rem; line-height: 1.3; }
.img-controls select.input { max-width: 360px; flex: 1 1 260px; }
.img-caption { max-width: 220px; flex: 1 1 160px; }
.img-save { padding: 8px 18px; }
.img-saved { color: #166534; font-weight: 700; font-size: .85rem; }

/* ---------- Exam interface ---------- */
.exam-shell { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 68px); background: var(--slate-50); }
.exam-sidebar { background: #fff; border-right: 1px solid var(--slate-200); padding: 22px 18px; position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; }
.exam-sidebar h3 { font-size: .95rem; color: var(--navy-800); margin: 0 0 4px; }
.exam-timer-box { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
.exam-timer-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); }
.exam-timer { font-size: 1.15rem; font-weight: 700; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.exam-discipline { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-700); margin-bottom: 12px; }
.dash-exam-pick { display: flex; flex-direction: column; gap: 4px; text-align: left; margin: 0 0 12px; }
.dash-exam-pick > span { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-500); }
.dash-exam-pick select { width: 100%; padding: 8px 10px; border: 1px solid var(--slate-300, #cbd5e1); border-radius: 8px; font-size: .9rem; background: #fff; }
.exam-progress-label { font-size: .82rem; color: var(--slate-500); margin-bottom: 14px; }
.exam-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .85rem; color: var(--slate-700); cursor: pointer; user-select: none; }
.exam-filter input { width: 16px; height: 16px; accent-color: var(--teal-600); cursor: pointer; }
.exam-filter-empty { font-size: .85rem; color: var(--slate-600); line-height: 1.5; background: var(--slate-50); border: 1px dashed var(--slate-200); border-radius: 10px; padding: 14px; }

/* Finish / submit confirmation */
.exam-finish-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(10, 31, 61, .5); display: grid; place-items: center; padding: 24px; }
.exam-finish { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 32px; max-width: 480px; width: 100%; }
.exam-finish h3 { margin: 0 0 12px; font-size: 1.4rem; color: var(--navy-900); }
.exam-finish p { color: var(--slate-600); line-height: 1.6; margin: 0 0 12px; }
.exam-finish-warn { color: var(--red-500); font-weight: 600; }
.exam-finish-note { font-size: .9rem; color: var(--slate-500); }
.exam-finish-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.exam-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.exam-grid button { position: relative; aspect-ratio: 1; border: 1px solid var(--slate-200); background: #fff; border-radius: 8px; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--slate-600); cursor: pointer; transition: all .12s; }
.exam-grid button.flagged::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px #fff; }
.exam-grid button:hover { border-color: var(--blue-400); }
.exam-grid button.answered { background: var(--sky-50); border-color: var(--teal-100); color: var(--teal-700); }
.exam-grid button.current { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.exam-grid button.correct { background: #dcfce7; border-color: #86efac; color: #166534; }
.exam-grid button.incorrect { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.exam-side-actions { margin-top: 20px; display: grid; gap: 10px; }

.exam-main { padding: 26px 34px 60px; max-width: 900px; }
.exam-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.exam-qmeta { color: var(--slate-500); font-size: .9rem; }
.exam-qmeta .sec { color: var(--blue-600); font-weight: 600; }
.exam-qcard { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 30px; }
.exam-qnum { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); }
.exam-flag { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--slate-500); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all .15s; }
.exam-flag:hover { border-color: var(--gold); color: var(--navy-800); }
.exam-flag .exam-flag-icon { color: var(--slate-400); transition: color .15s; }
.exam-flag.on { background: #fdf6e3; border-color: var(--gold); color: #92670a; }
.exam-flag.on .exam-flag-icon { color: var(--gold); }
.exam-prompt { font-size: 1.12rem; line-height: 1.7; color: var(--slate-900); margin: 10px 0 4px; }
.exam-prompt .prompt-block { margin: 12px 0; overflow-x: auto; }
.exam-note { font-size: .9rem; color: var(--slate-500); font-style: italic; margin-top: 8px; }

.exam-choices { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.exam-choice { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--slate-200); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all .12s; background: #fff; font-size: 1rem; }
.exam-choice:hover { border-color: var(--blue-400); background: var(--sky-50); }
.exam-choice.selected { border-color: var(--teal-600); background: var(--sky-50); box-shadow: 0 0 0 3px rgba(12,156,156,.14); }
.exam-choice .key { width: 30px; height: 30px; border-radius: 8px; background: var(--slate-100); display: grid; place-items: center; font-weight: 700; color: var(--slate-600); flex: none; }
.exam-choice.selected .key { background: var(--blue-600); color: #fff; }
.exam-choice.correct { border-color: var(--green-500); background: #f0fdf4; }
.exam-choice.correct .key { background: var(--green-500); color: #fff; }
.exam-choice.incorrect { border-color: var(--red-500); background: #fef2f2; }
.exam-choice.incorrect .key { background: var(--red-500); color: #fff; }

.exam-numeric { margin-top: 22px; }
.exam-numeric label { display: block; font-weight: 600; color: var(--slate-700); margin-bottom: 8px; }
.exam-numeric-row { display: flex; align-items: center; gap: 12px; max-width: 420px; }
.exam-numeric-row .input { flex: 1; font-size: 1.15rem; }
.exam-numeric-unit { font-weight: 600; color: var(--slate-600); font-size: 1.05rem; }
.exam-numeric-hint { font-size: .85rem; color: var(--slate-500); margin-top: 8px; }

.exam-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 12px; }

.exam-feedback { margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-weight: 500; }
.exam-feedback.ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.exam-feedback.bad { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

/* Solution (review mode) */
.exam-solution { margin-top: 22px; border-top: 1px solid var(--slate-200); padding-top: 20px; }
.exam-solution h4 { color: var(--navy-800); margin: 0 0 12px; }
.exam-solution .final { font-weight: 700; color: var(--navy-800); margin-bottom: 12px; }
.exam-solution ol { padding-left: 20px; display: grid; gap: 14px; }
.exam-solution li { line-height: 1.6; color: var(--slate-700); }
.exam-handbook-refs { margin-top: 16px; font-size: .92rem; }
.exam-handbook-refs button { background: none; border: none; color: var(--blue-600); cursor: pointer; text-decoration: underline; font-family: inherit; padding: 2px 0; }

/* Results summary */
.exam-results { max-width: 760px; margin: 30px auto; }
.exam-results-hero { background: linear-gradient(135deg, var(--navy-800), var(--navy-900)); color: #fff; border-radius: var(--radius-lg); padding: 40px; text-align: center; box-shadow: var(--shadow-lg); }
.exam-results-score { font-size: 4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.exam-results-sub { color: #c7d2e8; margin-top: 8px; }
.exam-results-breakdown { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); margin-top: 22px; padding: 8px 24px; }
.exam-breakdown-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--slate-100); }
.exam-breakdown-row:last-child { border-bottom: none; }
.exam-breakdown-row .name { flex: 1; color: var(--slate-700); }
.exam-breakdown-bar { width: 160px; height: 8px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.exam-breakdown-bar span { display: block; height: 100%; background: var(--blue-500); }
.exam-breakdown-row .val { width: 64px; text-align: right; font-weight: 600; color: var(--navy-800); font-variant-numeric: tabular-nums; }

/* Sample-test upsell (shown on the results screen after the free sample) */
.exam-upsell { margin-top: 22px; background: linear-gradient(135deg, var(--teal-50), #fff 70%); border: 1px solid var(--teal-100); border-radius: var(--radius-lg); padding: 28px 30px; text-align: center; }
.exam-upsell-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-700); }
.exam-upsell h3 { margin: 8px 0 10px; color: var(--navy-900); font-size: 1.5rem; letter-spacing: -.02em; }
.exam-upsell p { color: var(--slate-600); line-height: 1.6; max-width: 560px; margin: 0 auto 20px; }
.exam-upsell-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Handbook slide-out (exam) */
.hb-tab { position: fixed; right: 0; top: 40%; z-index: 40; background: var(--navy-800); color: #fff; border: none; border-radius: 10px 0 0 10px; padding: 14px 10px; writing-mode: vertical-rl; transform: rotate(180deg); cursor: pointer; font-family: inherit; font-weight: 600; letter-spacing: .04em; box-shadow: var(--shadow-md); }
.hb-panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(52vw, 820px); background: #fff; border-left: 1px solid var(--slate-200); box-shadow: -20px 0 50px -20px rgba(15,30,61,.4); transform: translateX(100%); transition: transform .25s ease; z-index: 60; display: flex; flex-direction: column; }
.hb-panel.open { transform: translateX(0); }
.hb-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--slate-200); }
.hb-panel-head h3 { margin: 0; font-size: 1rem; color: var(--navy-800); }
.hb-panel-head .sub { font-size: .8rem; color: var(--slate-500); }
.hb-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--slate-500); }
.hb-frame { flex: 1; border: none; width: 100%; }
.hb-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 18px; border-top: 1px solid var(--slate-200); font-size: .78rem; color: var(--slate-500); }
.hb-link { background: none; border: none; padding: 0; font: inherit; color: var(--slate-500); text-decoration: underline; cursor: pointer; }
.hb-link:hover { color: var(--navy-800); }

/* Shown in place of the viewer until the examinee loads their own handbook copy. */
.hb-empty { flex: 1; overflow-y: auto; padding: 28px 24px; max-width: 60ch; }
.hb-empty h4 { margin: 0 0 12px; font-size: 1.05rem; color: var(--navy-800); }
.hb-empty p { margin: 0 0 14px; font-size: .9rem; line-height: 1.6; color: var(--slate-600, #475569); }
.hb-empty-note { font-size: .8rem !important; color: var(--slate-500); }
.hb-load { display: inline-block; margin: 6px 0 14px; cursor: pointer; }
.hb-load input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hb-load .btn-cta { display: inline-block; }
.hb-load:focus-within .btn-cta { outline: 2px solid var(--navy-800); outline-offset: 2px; }
.hb-error { color: #b91c1c; font-size: .85rem !important; }

@media (max-width: 900px) {
    .exam-shell { grid-template-columns: 1fr; }
    .exam-sidebar { position: static; height: auto; }
    .dash-cards { grid-template-columns: 1fr; }
    .dash-head { flex-direction: column; gap: 12px; }
    .dash-areas-grid { grid-template-columns: 1fr; }
    .pack-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .pack-grid { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hero-card { display: none; }
    .insight-grid { grid-template-columns: 1fr; gap: 32px; }
    .feature-grid, .steps, .pricing-grid { grid-template-columns: 1fr; }
    .site-nav-links .hide-sm { display: none; }
    .plan.featured { transform: none; }
}

/* ---------- Collapsed mobile navigation (hamburger) ---------- */
@media (max-width: 820px) {
    .site-nav-inner { position: relative; }

    .nav-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-left: auto;
        cursor: pointer;
        border-radius: 10px;
    }
    .nav-burger:hover { background: var(--slate-100); }
    .nav-burger span {
        display: block;
        width: 22px;
        height: 2px;
        margin: 0 auto;
        background: var(--navy-800);
        border-radius: 2px;
        transition: transform .2s ease, opacity .2s ease;
    }

    /* The whole menu collapses into a dropdown panel under the bar, hidden until toggled.
       Named through .site-nav on purpose: the pill nav further down this file restates
       .site-nav-menu with display: flex, and at equal weight the later rule won - the panel
       was open on every phone and the burger did nothing but turn into an X. */
    .site-nav .site-nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 12px 16px 16px;
        background: #fff;
        border-bottom: 1px solid var(--slate-200);
        box-shadow: var(--shadow-md);
        display: none;
    }
    .site-nav .nav-toggle:checked ~ .site-nav-menu { display: flex; }

    /* Five pills do not fit across a phone; they wrap, and the capsule squares off to hold two rows. */
    .site-nav-menu .pill-nav { flex-wrap: wrap; justify-content: center; max-width: 100%; border-radius: 22px; }
    .site-nav-menu .app-nav-right { justify-content: center; }

    .site-nav-links,
    .site-nav-account {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    /* Account actions drop below the content links, separated by a top rule instead of a side one. */
    .site-nav-account {
        padding-left: 0;
        margin-top: 6px;
        padding-top: 10px;
        border-left: none;
        border-top: 1px solid var(--slate-200);
    }

    /* Every item is visible inside the dropdown (including the desktop-hidden ones). */
    .site-nav-links .hide-sm { display: block; }
    .site-nav-menu .site-nav-link { padding: 12px 14px; border-radius: 10px; }
    .site-nav-menu .btn-cta { margin-top: 4px; justify-content: center; text-align: center; }
    .site-user { padding: 10px 12px; }

    /* Morph the burger into an X while the menu is open. */
    .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ===========================================================================
   SAT / PSAT exam area — the rules screen, the timed test, the break, and the
   score report. The test runs in its own full-height shell with no site
   navigation, so these styles do not lean on the marketing page layout.
   =========================================================================== */

.sat-shell {
    min-height: 100vh;
    background: var(--slate-50);
    color: var(--slate-900);
}

/* The trademark notice (TrademarkNotice.razor) closes every screen in the shell. On the rules,
   break and summary screens it is a line at the foot of the page. On the timed and review
   screens, which own the viewport, the shell becomes a column exactly one screen tall and the
   exam gives up a line to it, so the notice sits under the Back/Next bar instead of below the
   fold - where reaching it would scroll the clock away. */
.tm-notice-exam {
    margin: 0;
    padding: 20px 24px 28px;
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
    color: var(--slate-500);
}

.sat-shell:has(> .sat-exam) {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Behind the same :has as the column, so a browser without it keeps the exam at 100vh and
   only loses the notice below the fold. */
.sat-shell:has(> .sat-exam) > .sat-exam {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.sat-shell:has(> .sat-exam) > .tm-notice-exam {
    flex: none;
    padding: 5px 16px 6px;
    font-size: 11px;
    background: var(--white);
    border-top: 1px solid var(--slate-100);
}

.sat-centered {
    max-width: 640px;
    margin: 0 auto;
    padding: 96px 24px;
    text-align: center;
}

/* A test that is not there: its message, then the way on. */
.sat-gone p { color: var(--slate-600); line-height: 1.6; margin: 0 0 24px; }
.sat-gone .sat-gone-alt { margin-top: 18px; }

/* ---------------------------- rules screen ---------------------------- */

.sat-rules {
    max-width: 1040px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}

.sat-rules-head { max-width: 680px; margin-bottom: 36px; }

.sat-rules-kicker {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal-700);
    margin-bottom: 10px;
}

.sat-rules h1 {
    font-size: 2.4rem;
    color: var(--navy-800);
    letter-spacing: -.02em;
    margin: 0 0 12px;
}

.sat-rules-lead { color: var(--slate-600); line-height: 1.65; font-size: 1.05rem; margin: 0; }
.sat-rules-lead a { color: var(--teal-700); }

.sat-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
    gap: 20px;
    margin-bottom: 28px;
}

.sat-rule-card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
}

/* A colored left rail is the whole visual difference between "bring these"
   and "leave these behind", so it carries meaning rather than decoration. */
.sat-rule-yes { border-left: 4px solid var(--teal-600); }
.sat-rule-no { border-left: 4px solid var(--red-500); }

.sat-rule-card h2 { font-size: 1.15rem; color: var(--navy-800); margin: 0 0 4px; }
.sat-rule-note { color: var(--slate-500); font-size: .88rem; margin: 0 0 14px; }

.sat-rule-card ul { margin: 0; padding-left: 18px; }
.sat-rule-card li { color: var(--slate-700); line-height: 1.55; margin-bottom: 8px; font-size: .95rem; }

.sat-rule-diff, .sat-rule-shape {
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin-bottom: 20px;
}

.sat-rule-diff h2, .sat-rule-shape h2 { font-size: 1.1rem; color: var(--navy-800); margin: 0 0 12px; }
.sat-rule-diff ul { margin: 0; padding-left: 18px; }
.sat-rule-diff li { color: var(--slate-700); line-height: 1.6; margin-bottom: 8px; }

.sat-rule-shape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

.sat-rule-shape-n { font-size: 1.5rem; font-weight: 700; color: var(--teal-700); }
.sat-rule-shape-l { color: var(--slate-600); font-size: .9rem; line-height: 1.45; }

.sat-rules-go { text-align: center; padding: 32px 0 12px; }
.sat-rules-go-note { color: var(--slate-500); font-size: .9rem; margin: 12px 0 0; }

.sat-rules-src { color: var(--slate-500); font-size: .82rem; text-align: center; line-height: 1.8; }
.sat-rules-src a { color: var(--teal-700); }

/* ---------------------------- the exam ---------------------------- */

/* The exam owns the viewport exactly: the clock and the navigation stay put, and only the
   question itself scrolls. A header that scrolls away takes the clock with it. */
.sat-exam {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--white);
    overflow: hidden;
}

.sat-exam-top {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--slate-200);
    background: var(--white);
}

.sat-exam-where { display: flex; flex-direction: column; line-height: 1.3; }
.sat-exam-where strong { color: var(--navy-800); font-size: 1rem; }
.sat-exam-where span { color: var(--slate-500); font-size: .85rem; }

.sat-clock { display: flex; align-items: center; gap: 12px; }

.sat-clock-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--navy-800);
    font-variant-numeric: tabular-nums;   /* so the digits do not jitter as they tick */
    letter-spacing: .01em;
}

.sat-clock-low .sat-clock-value { color: var(--red-500); }

.sat-clock-btn, .sat-tool {
    border: 1.5px solid var(--slate-200);
    background: var(--white);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--slate-700);
    cursor: pointer;
}

.sat-clock-btn:hover, .sat-tool:hover { border-color: var(--teal-400); color: var(--teal-700); }

.sat-exam-body { flex: 1; overflow-y: auto; padding: 32px 24px 24px; }

.sat-question { max-width: 760px; margin: 0 auto; }

.sat-question-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--slate-200);
}

.sat-question-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--navy-800);
    color: var(--white);
    font-weight: 700;
    font-size: .95rem;
}

.sat-mark {
    border: none;
    background: none;
    color: var(--slate-500);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.sat-mark:hover { background: var(--slate-100); }
.sat-mark.on { color: var(--gold); }

.sat-prompt { font-size: 1.05rem; line-height: 1.7; color: var(--slate-900); margin-bottom: 24px; }
.sat-question-broken { color: var(--red-500); }

.sat-choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.sat-choice {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--slate-200);
    border-radius: 10px;
    background: var(--white);
    overflow: hidden;
}

.sat-choice:hover { border-color: var(--teal-400); }
.sat-choice.chosen { border-color: var(--teal-700); background: var(--teal-50); }

/* A crossed-out choice stays readable: it is a note to self, not a deletion. */
.sat-choice.struck .sat-choice-body { text-decoration: line-through; opacity: .45; }

.sat-choice-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    color: inherit;
}

.sat-choice-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 1.5px solid var(--slate-200);
    border-radius: 50%;
    font-weight: 700;
    font-size: .9rem;
    color: var(--slate-600);
}

.sat-choice.chosen .sat-choice-key { background: var(--teal-700); border-color: var(--teal-700); color: var(--white); }

.sat-choice-strike {
    flex: none;
    width: 44px;
    border: none;
    border-left: 1px solid var(--slate-200);
    background: var(--slate-50);
    color: var(--slate-500);
    font-size: 1rem;
    cursor: pointer;
}

.sat-choice-strike:hover { background: var(--slate-100); color: var(--navy-800); }

/* grid-in */
.sat-grid-in { margin-top: 8px; }
.sat-grid-in label { display: block; font-weight: 600; color: var(--slate-700); margin-bottom: 8px; }

.sat-grid-box {
    width: 200px;
    padding: 12px 14px;
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--slate-200);
    border-radius: 10px;
}

.sat-grid-box:focus { outline: 2px solid var(--teal-600); outline-offset: 1px; border-color: var(--teal-600); }
.sat-grid-help { color: var(--slate-500); font-size: .87rem; margin: 10px 0 0; max-width: 460px; line-height: 1.5; }

/* bottom bar */
.sat-exam-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--slate-200);
    background: var(--white);
    flex: none;
}

.sat-nav-btn {
    border: 1.5px solid var(--slate-200);
    background: var(--white);
    border-radius: 999px;
    padding: 10px 26px;
    font-weight: 600;
    color: var(--slate-700);
    cursor: pointer;
}

.sat-nav-btn:disabled { opacity: .4; cursor: default; }
.sat-nav-btn:not(:disabled):hover { border-color: var(--teal-400); }

.sat-nav-primary { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.sat-nav-primary:hover { background: var(--navy-700); border-color: var(--navy-700); }

.sat-palette-btn {
    border: none;
    background: var(--slate-100);
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
    color: var(--navy-800);
    cursor: pointer;
}

.sat-palette-btn:hover { background: var(--slate-200); }

/* paused */
.sat-paused { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; gap: 8px; }
.sat-paused h2 { font-size: 2rem; color: var(--navy-800); margin: 0; }
.sat-paused p { color: var(--slate-600); max-width: 460px; line-height: 1.6; margin: 0 0 16px; }

/* overlays */
.sat-palette-scrim, .sat-directions {
    position: fixed;
    inset: 0;
    background: rgba(10, 31, 61, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 50;
}

.sat-palette, .sat-finish, .sat-directions-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    box-shadow: var(--shadow-lg);
    max-width: 520px;
    width: 100%;
}

.sat-palette h2, .sat-finish h2, .sat-directions-card h2 { font-size: 1.2rem; color: var(--navy-800); margin: 0 0 14px; }
.sat-directions-card p { color: var(--slate-700); line-height: 1.65; margin: 0 0 12px; }

.sat-palette-key { display: flex; gap: 18px; font-size: .82rem; color: var(--slate-500); margin-bottom: 16px; }
.sat-palette-key i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.k-current { background: var(--navy-800); }
.k-answered { background: var(--teal-600); }
.k-marked { background: var(--gold); }

.sat-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin-bottom: 20px; }

.sat-palette-cell {
    aspect-ratio: 1;
    border: 1.5px solid var(--slate-200);
    border-radius: 8px;
    background: var(--white);
    font-weight: 600;
    color: var(--slate-600);
    cursor: pointer;
}

.sat-palette-cell.answered { background: var(--teal-50); border-color: var(--teal-400); color: var(--teal-800); }
.sat-palette-cell.marked { border-color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); }
.sat-palette-cell.current { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }

.sat-finish-warn { color: var(--red-500); font-weight: 600; }
.sat-finish-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }

/* ---------------------------- break ---------------------------- */

.sat-break h1 { font-size: 4rem; color: var(--navy-800); font-variant-numeric: tabular-nums; margin: 8px 0 16px; }
.sat-break-kicker { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
.sat-break p { color: var(--slate-600); line-height: 1.65; }
.sat-break-note { font-size: .9rem; color: var(--slate-500); }
.sat-break-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ---------------------------- score report ---------------------------- */

.sat-review { max-width: 1140px; margin: 0 auto; padding: 40px 24px 80px; }

.sat-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.sat-review-head h1 { font-size: 2.2rem; color: var(--navy-800); margin: 6px 0 6px; letter-spacing: -.02em; }
.sat-review-sub { color: var(--slate-500); margin: 0; }

.sat-score-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 32px; }

.sat-score-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.sat-score-n { font-size: 2rem; font-weight: 700; color: var(--navy-800); }
.sat-score-n span { font-size: 1.1rem; color: var(--slate-400); font-weight: 600; }
.sat-score-l { color: var(--slate-600); font-size: .92rem; margin-bottom: 12px; }
.sat-score-bar { height: 6px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.sat-score-bar span { display: block; height: 100%; background: var(--teal-600); }

.sat-domain-scores { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 32px; }
.sat-domain-scores h2 { font-size: 1.1rem; color: var(--navy-800); margin: 0 0 16px; }
.sat-domain-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 14px; margin-bottom: 10px; }
.sat-domain-name { color: var(--slate-700); font-size: .93rem; }
.sat-domain-bar { height: 8px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.sat-domain-bar span { display: block; height: 100%; background: var(--teal-600); }
.sat-domain-val { color: var(--slate-500); font-size: .88rem; font-variant-numeric: tabular-nums; }

.sat-review-filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sat-review-filters h2 { font-size: 1.2rem; color: var(--navy-800); margin: 0; }
.sat-check { display: inline-flex; align-items: center; gap: 8px; color: var(--slate-600); font-size: .92rem; cursor: pointer; }

.sat-review-module { font-size: .95rem; color: var(--slate-500); margin: 26px 0 10px; font-weight: 600; }
.sat-review-band { color: var(--teal-700); font-weight: 600; }

.sat-rq { border: 1px solid var(--slate-200); border-radius: 10px; background: var(--white); margin-bottom: 8px; overflow: hidden; }
.sat-rq.right { border-left: 4px solid var(--green-500); }
.sat-rq.wrong { border-left: 4px solid var(--red-500); }
.sat-rq.blank { border-left: 4px solid var(--slate-400); }

.sat-rq-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: none; background: none; cursor: pointer; text-align: left; }
.sat-rq-n { font-weight: 700; color: var(--navy-800); min-width: 28px; font-variant-numeric: tabular-nums; }
.sat-rq-verdict { font-weight: 600; font-size: .92rem; }
.sat-rq.right .sat-rq-verdict { color: #15803d; }
.sat-rq.wrong .sat-rq-verdict { color: #b91c1c; }
.sat-rq.blank .sat-rq-verdict { color: var(--slate-500); }
.sat-rq-meta { color: var(--slate-500); font-size: .85rem; margin-left: auto; }
.sat-rq-open { color: var(--teal-700); font-size: .85rem; font-weight: 600; }

.sat-rq-body { padding: 4px 20px 22px; border-top: 1px solid var(--slate-100); }
.sat-rq-broken { color: var(--red-500); }
.sat-rq-choices { margin-top: 14px; }
.sat-rq-choices .sat-choice { padding: 12px 16px; align-items: center; gap: 14px; }
.sat-rq-choices .sat-choice.correct { border-color: var(--green-500); background: #f0fdf4; }
.sat-rq-choices .sat-choice.chosen { background: var(--teal-50); }
.sat-rq-tag { margin-left: auto; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sat-rq-tag.correct { color: #15803d; }
.sat-rq-tag.yours { color: var(--teal-700); }

.sat-rq-grid { display: flex; gap: 32px; margin: 16px 0; flex-wrap: wrap; }
.sat-rq-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); }
.sat-rq-value { font-size: 1.2rem; font-weight: 700; color: var(--navy-800); }

.sat-rq-solution { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--slate-200); }
.sat-rq-solution h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); margin: 0 0 12px; }
.sat-rq-solution ol { margin: 0; padding-left: 20px; }
.sat-rq-solution li { color: var(--slate-700); line-height: 1.7; margin-bottom: 10px; }

/* ---------------------------- start screen ---------------------------- */

.sat-start { max-width: 760px; }
.sat-start-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 14px 18px; margin-bottom: 22px; }
.sat-start-form { margin-top: 8px; }
.sat-start-field { border: none; padding: 0; margin: 0 0 26px; }
.sat-start-field legend { font-weight: 700; color: var(--navy-800); margin-bottom: 12px; padding: 0; }
.sat-start-options { display: grid; gap: 12px; }

.sat-start-option { display: flex; align-items: flex-start; gap: 14px; border: 1.5px solid var(--slate-200); border-radius: 12px; padding: 16px 18px; cursor: pointer; background: var(--white); }
.sat-start-option:hover { border-color: var(--teal-400); }
.sat-start-option:has(input:checked) { border-color: var(--teal-700); background: var(--teal-50); }
.sat-start-option input { margin-top: 3px; }
.sat-start-option-body { display: flex; flex-direction: column; gap: 3px; }
.sat-start-option-body strong { color: var(--navy-800); }
.sat-start-option-body span { color: var(--slate-600); font-size: .92rem; line-height: 1.5; }

.sat-start-go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* The two lengths of a mini test, inside its option. Dimmed rather than hidden while the full
   test is chosen, so the option shows what it offers before it is picked. */
.sat-start-option-body .sat-start-mini { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 10px; }
.sat-start-mini-field { display: flex; align-items: center; gap: 10px; color: var(--navy-800); font-size: .92rem; font-weight: 600; }
.sat-start-mini .input { width: 84px; padding: 8px 10px; }
.sat-start-option:not(:has(input[name="size"]:checked)) .sat-start-mini { opacity: .55; }
.sat-start-form:has(input[name="size"][value="mini"]:checked) .sat-start-full-only { display: none; }
.sat-start-tokens { color: var(--slate-500); font-size: .92rem; }

.sat-start-resume { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--slate-200); }
.sat-start-resume h3 { font-size: 1.05rem; color: var(--navy-800); margin: 0 0 14px; }
.sat-start-resume-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border: 1px solid var(--slate-200); border-radius: 10px; margin-bottom: 10px; text-decoration: none; background: var(--white); }
.sat-start-resume-row:hover { border-color: var(--teal-400); }
.sat-start-resume-name { font-weight: 600; color: var(--navy-800); }
.sat-start-resume-meta { color: var(--slate-500); font-size: .88rem; }
.sat-start-resume-go { margin-left: auto; color: var(--teal-700); font-weight: 600; }

@media (max-width: 700px) {
    .sat-exam-top { flex-wrap: wrap; }
    .sat-clock-value { font-size: 1.5rem; }
    .sat-exam-bottom { padding: 12px 16px; }
    .sat-nav-btn { padding: 10px 18px; }
    .sat-review-head { flex-direction: column; }
    .sat-domain-row { grid-template-columns: 1fr auto; }
    .sat-domain-bar { display: none; }
}

/* ===========================================================================
   Storefront built around the pricing and marketing strategy: the regeneration
   demo on the landing page, the three-offer pricing page, and the schools page.
   =========================================================================== */

/* ---------------------------------------------------------------- brand */

.brand-wordmark {
    /* .site-brand is a flex row with a 10px gap for the old logo-plus-text pairing;
       the two halves of a wordmark must sit flush against each other. */
    gap: 0;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--navy-800);
    text-decoration: none;
    white-space: nowrap;
}

.brand-wordmark .tp { color: var(--teal-600); }

.hero-narrow .site-container { max-width: 780px; }
.hero-narrow h1 { max-width: 15ch; }

/* ------------------------------------------------- price strip (landing) */

.price-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: stretch;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto 20px;
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 26px 24px 24px;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.price-card.featured { border-color: var(--teal-600); box-shadow: var(--shadow-md); }

.price-flag {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--teal-700);
    color: var(--white);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.price-name { font-weight: 600; color: var(--slate-600); margin-bottom: 6px; }
.price-amount { font-size: 2.4rem; font-weight: 700; color: var(--navy-800); letter-spacing: -.02em; }
.price-note { font-size: .82rem; color: var(--slate-500); margin-bottom: 12px; }
.price-tagline { color: var(--slate-600); font-size: .93rem; line-height: 1.55; margin: 0 0 18px; flex: 1; }

.price-card .btn-block { margin-top: auto; }

.price-strip-note {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    color: var(--slate-600);
    line-height: 1.65;
    font-size: .95rem;
}

.price-strip-note a { color: var(--teal-700); font-weight: 600; }

.link-arrow { color: var(--teal-700); font-weight: 600; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* ------------------------------------------------- FAQ (own classes: the
   global .faq is a details/summary accordion and this is plain prose) */

.faq-wrap { max-width: 820px; }
.sat-faq { display: grid; gap: 18px; }

.sat-faq-item {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
}

.sat-faq-item h3 { font-size: 1.05rem; color: var(--navy-800); margin: 0 0 8px; }
.sat-faq-item p { color: var(--slate-600); line-height: 1.65; margin: 0; }

.pricing-preview-note {
    text-align: center;
    color: var(--slate-400);
    font-size: .82rem;
    padding: 0 24px 40px;
    margin: 0;
}

/* ------------------------------------------------- schools page */

.pilot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
    gap: 22px;
}

.pilot-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    box-shadow: var(--shadow-sm);
}

.pilot-give { border-top: 4px solid var(--teal-600); }
.pilot-ask { border-top: 4px solid var(--navy-700); }

.pilot-card h3 { font-size: 1.2rem; color: var(--navy-800); margin: 0 0 14px; }
.pilot-card ul { margin: 0; padding-left: 20px; }
.pilot-card li { color: var(--slate-700); line-height: 1.6; margin-bottom: 10px; }

.pilot-honest {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--slate-200);
    color: var(--slate-600);
    font-style: italic;
    line-height: 1.6;
}

/* ------------------------------------------------- register */

.auth-promise {
    margin: 16px 0 0;
    text-align: center;
    color: var(--slate-500);
    font-size: .85rem;
    line-height: 1.5;
}

/* ===========================================================================
   Custom practice: the topic picker, and the practice run itself. The run
   reuses the exam shell (.sat-exam and friends) because the question, the
   choices and the navigation are the same furniture — what differs is that
   there is no clock and the solution appears as soon as the question is done.
   =========================================================================== */

.practice-start { max-width: 900px; }

.pick-section { margin-bottom: 34px; }

.pick-section-title {
    font-size: 1.3rem;
    color: var(--navy-800);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--slate-200);
}

.pick-group { margin-bottom: 22px; }

.pick-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.pick-group-name {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--slate-500);
}

.pick-all {
    border: none;
    background: none;
    color: var(--teal-700);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

.pick-all:hover { text-decoration: underline; }

.pick-skills {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.pick-skill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    border: 1.5px solid var(--slate-200);
    border-radius: 10px;
    background: var(--white);
    padding: 12px 14px;
    cursor: pointer;
    color: var(--slate-700);
    font-size: .95rem;
    transition: border-color .12s, background .12s;
}

.pick-skill:hover:not(:disabled) { border-color: var(--teal-400); }

.pick-skill.on {
    border-color: var(--teal-700);
    background: var(--teal-50);
    color: var(--navy-800);
    font-weight: 600;
}

/* A topic with nothing behind it at this difficulty stays visible but unusable,
   so the list does not reshuffle when the difficulty changes. */
.pick-skill.empty { opacity: .4; cursor: not-allowed; }

.pick-skill-name { line-height: 1.35; }

.pick-skill-tick {
    flex: none;
    font-weight: 700;
    color: var(--teal-700);
}

.pick-options {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    padding: 24px 0 10px;
    border-top: 1px solid var(--slate-200);
}

.pick-option-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--slate-500);
    margin-bottom: 10px;
}

.pick-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.pick-chip {
    border: 1.5px solid var(--slate-200);
    background: var(--white);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    color: var(--slate-600);
    cursor: pointer;
}

.pick-chip:hover { border-color: var(--teal-400); }
.pick-chip.on { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }

/* The start bar follows the reader down the list, because the topics are long
   enough that the button would otherwise be far from the last choice made. */
.practice-bar {
    position: sticky;
    bottom: 0;
    background: var(--white);
    border-top: 1px solid var(--slate-200);
    box-shadow: 0 -8px 24px -18px rgba(15, 30, 61, .4);
    padding: 14px 0;
    z-index: 20;
}

.practice-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.practice-bar-summary { display: flex; flex-direction: column; line-height: 1.35; }
.practice-bar-count { font-weight: 700; color: var(--navy-800); }
.practice-bar-pool { font-size: .85rem; color: var(--slate-500); }
.practice-bar-empty { color: var(--slate-500); }
/* Why a draw did not produce a question. Deliberately not an error colour: nothing went wrong,
   nothing was spent, and the next one is a few seconds or one answer away. */
.draw-note { font-size: .85rem; color: var(--slate-600); max-width: 52ch; margin-top: 4px; }
.practice-bar-actions { display: flex; align-items: center; gap: 12px; }

.recent-list { display: grid; gap: 10px; }

.recent-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: var(--white);
    text-decoration: none;
}

.recent-row:hover { border-color: var(--teal-400); }
.recent-topics { font-weight: 600; color: var(--navy-800); }
.recent-meta { color: var(--slate-500); font-size: .88rem; }
.recent-go { margin-left: auto; color: var(--teal-700); font-weight: 600; }

/* ---------------------------- the run ---------------------------- */

.practice-score { text-align: center; }
.practice-score-n { font-size: 1.5rem; font-weight: 700; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.practice-score-n span { font-size: 1rem; color: var(--slate-400); }
.practice-score-l { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); }

.practice-verdict { font-weight: 700; font-size: .92rem; }
.practice-verdict.right { color: #15803d; }
.practice-verdict.wrong { color: #b91c1c; }
.practice-verdict.shown { color: var(--slate-500); }
.practice-hint { color: var(--slate-400); font-size: .88rem; }

/* An answered question keeps its choices on screen, marked up, so the solution
   below can refer to them. */
.sat-choice.correct { border-color: var(--green-500); background: #f0fdf4; }
.sat-choice.wrong-pick { border-color: var(--red-500); background: #fef2f2; }
.sat-choice-main:disabled { cursor: default; }

/* The verdict tag sits beside the choice, not stretched up its edge — .sat-choice
   stretches its children, which pins an unaligned child to the top. */
.practice .sat-choice .sat-rq-tag { align-self: center; padding-right: 16px; }

.practice-reveal {
    margin-top: 22px;
    border: 1.5px dashed var(--slate-200);
    background: none;
    border-radius: 10px;
    padding: 12px 20px;
    color: var(--slate-500);
    font-weight: 600;
    cursor: pointer;
}

.practice-reveal:hover { border-color: var(--teal-400); color: var(--teal-700); }

.practice-submit { margin-left: 12px; }

.practice-grid-done { display: flex; gap: 28px; flex-wrap: wrap; align-items: baseline; }
.practice-grid-yours { font-size: 1.4rem; font-weight: 700; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.practice-grid-right { color: var(--slate-600); }

.practice-solution {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px dashed var(--slate-200);
}

.practice-solution h4 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--slate-500);
    margin: 0 0 12px;
}

.practice-solution ol { margin: 0; padding-left: 20px; }
.practice-solution li { color: var(--slate-700); line-height: 1.7; margin-bottom: 10px; }

.practice-progress { color: var(--slate-500); font-size: .92rem; }

.practice-end-actions { display: flex; gap: 10px; align-items: center; }

.practice-summary { display: grid; gap: 8px; margin: 6px 0 4px; }

.practice-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--slate-100);
}

.practice-summary-name { color: var(--slate-700); }
.practice-summary-val { color: var(--navy-800); font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
    .pick-skills { grid-template-columns: 1fr; }
    .pick-options { gap: 24px; }
    .practice-bar-inner { flex-direction: column; align-items: stretch; }
    .practice-bar-actions { justify-content: stretch; }
    .practice-score { display: none; }
}

/* ===========================================================================
   Student dashboard, to the 2026 mockup: greeting and test on the left, the
   SAT/PSAT switch on the right; latest score beside the next-test card; then
   readiness by domain beside custom practice. Everything on it is real data —
   there is no scaled score, no countdown and no goal until those exist.
   =========================================================================== */

.sd { padding: 36px 0 60px; }

/* ===========================================================================
   2026 mockups, second batch: the page as a card on a gray ground, the ∞
   brand mark with a Bricolage Grotesque wordmark, the pill nav, the
   pricing-led landing page, and the dashboard with pacing, difficulty,
   weakest skills and the pass / no-pass split.
   =========================================================================== */

/* ------------------------------------------------------------- page shell */

/* The mockups drew the page as a card because that's how a screenshot at one
   width looks, not because the live site should be capped and floated on a
   gray ground. .site-root stays full-width (see its base rule above); only
   .site-container's inner max-width keeps long lines readable. */

@media (min-width: 900px) {
    .site-container { padding-inline: 48px; }
}

/* ------------------------------------------------------------------- nav */

.site-nav { background: var(--white); border-bottom: 1px solid var(--slate-200); }
.site-nav-inner { display: flex; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.site-nav-menu { margin-left: auto; display: flex; align-items: center; gap: 16px; }

.site-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy-800); }

.pill-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--slate-50);
    border-radius: 999px;
    padding: 6px;
    font-size: 14px;
    font-weight: 500;
}

.pill-item { padding: 8px 14px; border-radius: 999px; color: var(--navy-800); text-decoration: none; white-space: nowrap; }
.pill-item.on { background: var(--white); font-weight: 600; box-shadow: 0 1px 2px rgba(14, 26, 32, .08); }
.pill-dark { background: var(--navy-800); color: var(--white); padding: 9px 16px; font-weight: 600; }
.pill-dark:hover { background: var(--navy-700); }

.pill-nav-app .pill-item { color: var(--slate-500); font-weight: 600; }
.pill-nav-app .pill-item.on { color: var(--navy-800); }

.app-nav { flex: 1; justify-content: space-between; margin-left: 28px; }
.app-nav-right { display: flex; align-items: center; gap: 14px; }

.pass-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--orange-tint);
    color: var(--orange-ink);
    border-radius: 999px;
    padding: 7px 12px 7px 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
.pass-badge svg { color: var(--orange); }

/* The signed-in header is the tightest row on the site: brand, four pills, this badge, the exam
   toggle and the avatar, all on one line. Between the width where the pill nav moves into the
   study rail (1200px) and the width where the right-hand group is allowed to wrap (960px) there
   is no give, and on a 1024px laptop the row was already a couple of dozen pixels wider than the
   window - a horizontal scrollbar under every signed-in page. The exam badge on the wordmark is
   half again as wide as the plain one, so it would have made that band worse rather than found it.

   The expiry date is the cheapest thing in the row to give up: the badge still says the pass is
   held, and when it runs out is on the dashboard and at the top of /me. Dropping its tail buys
   ~90px, which covers the badged wordmark and the overflow that was there before it.

   Hidden by default and shown again at the one breakpoint the site has, which is the same 1200px
   that moves the pills out of the header - the two are the same question asked twice, so they are
   answered in the same query. Written as min-width rather than a max-width partner because an
   adjacent min/max pair disagrees with itself at a fractional viewport width; the note on that
   query has the story, and StudyRailTests holds the stylesheet to it. */
.pass-badge-until { display: none; font-weight: 600; color: #a06a12; }

.tests-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--slate-50);
    color: var(--slate-700);
    border-radius: 999px;
    padding: 5px 5px 5px 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.tests-chip-buy { background: var(--navy-800); color: var(--white); padding: 6px 12px; border-radius: 999px; font-weight: 800; text-decoration: none; }

.exam-toggle { display: flex; background: var(--slate-50); border-radius: 999px; padding: 4px; }
.exam-toggle-btn { border: none; background: none; border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 700; color: var(--slate-500); cursor: pointer; font-family: inherit; }
.exam-toggle-btn.on { background: var(--navy-800); color: var(--white); }

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--navy-800);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    flex: none;
}

/* ---------------------------------------------------------- landing (lp-) */

.lp-hero { position: relative; background: var(--mint); padding: 64px 0 120px; overflow: hidden; }

.lp-blob { position: absolute; border-radius: 50%; background: var(--mint-deep); pointer-events: none; }
.lp-blob-a { right: -120px; top: -160px; width: 520px; height: 520px; }
.lp-blob-b { left: -80px; bottom: -40px; width: 260px; height: 260px; }
.lp-dots {
    position: absolute; left: 52%; top: 40px; width: 120px; height: 120px; pointer-events: none;
    background-image: radial-gradient(var(--teal-700) 1.6px, transparent 1.6px);
    background-size: 14px 14px; opacity: .35;
}
.lp-ring { position: absolute; right: 80px; bottom: 70px; width: 70px; height: 70px; border: 5px solid var(--orange); border-radius: 50%; transform: rotate(-20deg); opacity: .9; pointer-events: none; }

.lp-hero-inner { position: relative; text-align: center; }

.lp-promise {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--white); padding: 8px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--teal-700);
    box-shadow: 0 2px 8px rgba(14, 26, 32, .06); margin-bottom: 24px;
}
.lp-promise-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

.lp-h1 {
    font: 800 clamp(2.4rem, 5.2vw, 66px)/1 var(--font-display);
    letter-spacing: -.035em; margin: 0 auto 18px; max-width: 760px;
    text-wrap: balance; color: var(--navy-800);
}

/* The highlighter under "SAT & PSAT": a bar behind the words, inside its own stacking context. */
.lp-hl { position: relative; display: inline-block; color: var(--teal-700); isolation: isolate; }
/* A registered-mark symbol inside a display headline, where a full-size ® would be a letter. */
.lp-h1 sup.tm { font-size: .4em; vertical-align: .8em; line-height: 0; margin-left: 1px; }
.lp-hl-bar { position: absolute; left: 0; right: 0; bottom: 2px; height: 10px; background: var(--orange); border-radius: 4px; z-index: -1; opacity: .7; }

.lp-sub { font-size: 18px; color: #3c4a53; margin: 0; }

.lp-offers {
    display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 18px;
    margin-top: -70px; align-items: end; position: relative;
}

.lp-card { background: var(--white); border-radius: 22px; padding: 28px; box-shadow: 0 20px 50px -20px rgba(14, 26, 32, .25); position: relative; }
.lp-card-free { transform: rotate(-1.5deg); }
.lp-card-test { transform: rotate(1.5deg); }
.lp-card-pass { background: var(--navy-800); color: var(--white); border-radius: 24px; padding: 34px 30px; box-shadow: 0 30px 60px -20px rgba(14, 26, 32, .5); overflow: hidden; }
.lp-card-glow { position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: var(--teal-700); opacity: .5; pointer-events: none; }
.lp-card-pass > * { position: relative; }

.lp-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.lp-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.lp-icon-mint { background: var(--mint); color: var(--teal-700); }
.lp-icon-dark { background: rgba(255, 255, 255, .12); color: var(--teal-400); margin-bottom: 14px; }
.lp-icon-orange { background: var(--orange-tint); color: var(--orange-deep); margin-bottom: 14px; }

.lp-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--teal-700); background: var(--mint); padding: 5px 9px; border-radius: 999px; }
.lp-tag-orange { position: absolute; top: 18px; right: 20px; background: var(--orange); color: var(--navy-800); font-weight: 800; padding: 6px 10px; transform: rotate(3deg); }

.lp-card-name { font: 700 18px/1.2 var(--font-display); margin-bottom: 8px; }
.lp-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.lp-amount { font: 800 48px/1 var(--font-display); letter-spacing: -.04em; }
.lp-amount-xl { font-size: 60px; }
.lp-per { font-size: 13px; color: var(--slate-500); }
.lp-per-light { color: var(--teal-400); font-weight: 600; }
.lp-card-tagline { font-size: 14px; color: var(--slate-500); line-height: 1.5; margin: 0 0 20px; }
.lp-card-pass .lp-card-tagline { color: rgba(255, 255, 255, .65); margin-bottom: 22px; }

.lp-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; font-weight: 500; }
.lp-features li { display: flex; gap: 9px; }
.lp-features .tick { color: var(--teal-700); font-weight: 800; }
.lp-features-orange { gap: 10px; }
.lp-features-orange .tick { color: var(--orange); }

.lp-cta { display: block; margin-top: 24px; border-radius: 14px; padding: 14px; text-align: center; font-weight: 700; font-size: 14px; text-decoration: none; }
.lp-cta-teal { background: var(--teal-700); color: var(--white); }
.lp-cta-teal:hover { background: var(--teal-600); }
.lp-cta-orange { margin-top: 26px; background: var(--orange); color: var(--navy-800); font-weight: 800; font-size: 15px; padding: 15px; }
.lp-cta-orange:hover { background: #f6b555; }
.lp-cta-outline { border: 2px solid var(--navy-800); color: var(--navy-800); padding: 13px; }
.lp-cta-outline:hover { background: var(--slate-50); }

.lp-founding { text-align: center; font-size: 13px; color: var(--slate-500); margin: 28px 48px 0; line-height: 1.5; }

.lp-faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; padding-top: 72px; padding-bottom: 64px; }
.lp-faq-side { position: sticky; top: 16px; }
.lp-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--orange-deep); margin-bottom: 12px; }
.lp-h2 { font: 800 clamp(2rem, 3.5vw, 44px)/1.02 var(--font-display); letter-spacing: -.035em; margin: 0 0 16px; color: var(--navy-800); }
.lp-faq-sub { font-size: 15px; color: var(--slate-500); line-height: 1.55; margin: 0 0 24px; }

.lp-lead { background: var(--navy-800); color: var(--white); border-radius: 20px; padding: 24px; position: relative; overflow: hidden; }
.lp-lead-glow { position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; background: var(--teal-700); opacity: .6; pointer-events: none; }
.lp-lead-q { display: block; font-size: 12px; font-weight: 700; color: var(--teal-400); letter-spacing: .08em; margin-bottom: 8px; position: relative; }
.lp-lead-a { font: 700 22px/1.2 var(--font-display); letter-spacing: -.02em; position: relative; margin: 0; }

.lp-faq-list { display: grid; gap: 12px; }
.lp-q { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 22px 24px; border-radius: 18px; background: var(--slate-50); }
.lp-q-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--white); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(14, 26, 32, .06); }
.lp-q h3 { font: 700 21px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0 0 6px; color: var(--navy-800); }
.lp-q p { font-size: 15px; line-height: 1.55; color: #3c4a53; margin: 0; }

.lp-preview-note { text-align: center; color: var(--slate-400); font-size: .8rem; padding: 0 24px 40px; margin: 0; }

/* -------------------------------------------------------- dashboard (db-) */

.db { background: var(--slate-50); padding-bottom: 48px; }

.db-hero { position: relative; background: var(--mint); padding: 40px 0 96px; overflow: hidden; }
.db-hero-inner { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.db-greet { font-size: 14px; font-weight: 600; color: var(--teal-700); margin-bottom: 8px; }
.db-h1 { font: 800 clamp(1.9rem, 3.4vw, 44px)/1 var(--font-display); letter-spacing: -.035em; margin: 0 0 12px; color: var(--navy-800); }
.db-sub { font-size: 15px; color: #3c4a53; }

.db-date {
    flex: none; display: flex; align-items: center; gap: 10px;
    background: var(--white); border: 1.5px solid var(--teal-400); border-radius: 999px;
    padding: 8px 8px 8px 16px; font-size: 13px; font-weight: 600; color: #3c4a53;
}
.db-date-empty { border-style: dashed; border-color: #9fcfc7; }
.db-date-text strong { color: var(--navy-800); }
.db-date-input { border: 1px solid var(--slate-200); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; color: var(--navy-800); background: var(--white); }
.db-date-btn { border: none; background: var(--navy-800); color: var(--white); padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }

.db-row { display: grid; gap: 16px; position: relative; }
.db-row-1 { grid-template-columns: 1fr 1.25fr 1fr; margin-top: -56px; }
.db-row-2 { grid-template-columns: 1.25fr 1fr; margin-top: 16px; }

.db-card {
    background: var(--white); border-radius: 20px; padding: 24px 26px;
    border: 1px solid var(--slate-200); box-shadow: 0 16px 40px -24px rgba(14, 26, 32, .25);
    position: relative; overflow: hidden;
}
.db-dark { background: var(--navy-800); color: var(--white); border: none; box-shadow: 0 16px 40px -24px rgba(14, 26, 32, .5); display: flex; flex-direction: column; justify-content: space-between; }

.db-glow { position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: var(--teal-700); opacity: .45; pointer-events: none; }
.db-glow-mint { right: -30px; top: auto; bottom: -40px; width: 130px; height: 130px; background: var(--mint-deep); opacity: 1; }
.db-glow-orange { right: -30px; top: auto; bottom: -40px; width: 130px; height: 130px; background: #f8d9a6; opacity: 1; }

.db-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--slate-500); margin-bottom: 10px; }
.db-kicker-light { color: var(--teal-400); margin-bottom: 12px; }

.db-next-body, .db-next-actions { position: relative; }
.db-next-h { font: 800 26px/1.1 var(--font-display); letter-spacing: -.03em; margin: 0 0 8px; }
.db-next p { font-size: 13px; color: rgba(255, 255, 255, .65); line-height: 1.5; margin: 0; }
.db-next-actions { margin-top: 20px; display: grid; gap: 8px; }
.db-next-progress { position: relative; height: 8px; margin-top: 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.db-next-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--teal-400); transition: width .3s ease; }

.db-btn-orange {
    display: flex; justify-content: center; align-items: center; width: 100%;
    border: none; background: var(--orange); color: var(--navy-800);
    border-radius: 12px; padding: 14px; font-weight: 800; font-size: 14px;
    text-decoration: none; cursor: pointer; font-family: inherit;
}
.db-btn-orange:hover { background: #f6b555; }
.db-btn-split { justify-content: space-between; padding: 13px; }

.db-next-note { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: var(--orange); font-weight: 700; margin-top: 2px; }
.db-next-note.muted { color: rgba(255, 255, 255, .65); font-weight: 600; }

.db-pass-offer { display: block; border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 12px; padding: 12px 13px; color: var(--white); text-decoration: none; }
.db-pass-offer:hover { border-color: rgba(255, 255, 255, .5); }
.db-pass-offer-row { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; }
.db-pass-offer-row > span:first-child { display: flex; align-items: center; gap: 6px; }
.db-pass-offer-sub { display: block; font-size: 12px; color: rgba(255, 255, 255, .65); margin-top: 4px; line-height: 1.4; }

.db-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.db-link { font-size: 12px; font-weight: 800; color: var(--teal-700); text-decoration: none; white-space: nowrap; }
.db-link:hover { text-decoration: underline; }
.db-link.right { text-align: right; }
.db-note { font-size: 12px; color: var(--slate-500); font-weight: 600; }
.db-note.bad { color: var(--red-500); font-weight: 700; }
.db-note-foot { margin: 12px 0 0; line-height: 1.4; font-weight: 500; }

.db-score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.db-score-n { font: 800 58px/1 var(--font-display); letter-spacing: -.04em; }
.db-score-of { font: 600 22px/1 var(--font-display); color: var(--slate-500); }
.db-delta { margin-left: 6px; font-size: 13px; font-weight: 800; padding: 5px 9px; border-radius: 999px; }
.db-delta.up { background: var(--green-tint); color: var(--green-500); }
.db-delta.down { background: var(--red-tint); color: var(--red-500); }

.db-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.db-section { background: var(--slate-50); border-radius: 12px; padding: 12px 14px; }
.db-section-name { font-size: 12px; color: var(--slate-500); font-weight: 600; }
.db-section-n { font: 800 22px/1.1 var(--font-display); margin-top: 4px; }
.db-section-n span { font-size: 14px; color: var(--slate-500); font-weight: 600; }
.db-section-note { font-size: 12px; font-weight: 700; margin-top: 4px; }
.db-section-note.good { color: var(--green-500); }
.db-section-note.bad { color: #c2410c; }

.db-trend { display: flex; gap: 8px; align-items: flex-end; height: 70px; }
.db-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; text-decoration: none; }
.db-trend-val { font-size: 11px; font-weight: 700; color: var(--slate-500); }
.db-trend-bar { width: 100%; background: var(--mint-deep); border-radius: 6px; }
.db-trend-date { font-size: 11px; color: var(--slate-500); }
.db-trend-col.latest .db-trend-val, .db-trend-col.latest .db-trend-date { color: var(--teal-700); font-weight: 800; }
.db-trend-col.latest .db-trend-bar { background: var(--teal-700); }

.db-empty-lead { font: 700 20px/1.25 var(--font-display); color: var(--navy-800); margin: 6px 0 8px; }
.db-empty-sub { font-size: 14px; color: var(--slate-500); line-height: 1.5; margin: 0; }

.db-skills { display: flex; flex-direction: column; }
.db-skill-list { display: grid; gap: 8px; flex: 1; align-content: start; }
.db-skill { display: flex; justify-content: space-between; align-items: center; background: var(--slate-50); border-radius: 12px; padding: 11px 14px; gap: 10px; }
.db-skill-name { font-weight: 700; font-size: 14px; }
.db-skill-n { font-size: 12px; font-weight: 700; }
.db-skill-n.bad { color: #c2410c; }
.db-skill-n.warn { color: var(--orange-deep); }
.db-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--slate-400); white-space: nowrap; }

.db-h3 { font: 700 18px/1 var(--font-display); margin: 0; color: var(--navy-800); }
.db-legend { display: flex; gap: 12px; font-size: 11px; font-weight: 700; color: var(--slate-500); flex-wrap: wrap; }
.db-legend span { display: flex; align-items: center; gap: 5px; }
.db-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.db-legend i.ready { background: var(--green-500); }
.db-legend i.almost { background: var(--orange); }
.db-legend i.again { background: var(--red-500); }

.db-ready-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 10px; }
.db-ready-cols .db-kicker { font-size: 11px; margin-bottom: 8px; }
.db-domain { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--slate-200); }
.db-domain-name { font-size: 14px; font-weight: 600; }
.db-domain-name span { color: var(--slate-500); font-weight: 500; font-size: 12px; margin-left: 4px; }
.db-domain-track { grid-column: 1 / 3; height: 8px; border-radius: 4px; background: var(--slate-100); }
.db-domain-fill { height: 100%; border-radius: 4px; }
.db-domain-fill.ready { background: var(--green-500); }
.db-domain-fill.almost { background: var(--orange); }
.db-domain-fill.again { background: var(--red-500); }

.db-col { display: grid; gap: 16px; grid-template-rows: auto 1fr; }

.db-pace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; margin-top: 8px; }
.db-pace { background: var(--slate-50); border-radius: 10px; padding: 10px 12px; }
.db-pace.ran-out { background: var(--red-tint); }
.db-pace-l { color: var(--slate-500); font-weight: 600; }
.db-pace-v { font-weight: 800; font-size: 15px; margin-top: 2px; }
.db-pace-v span { color: var(--slate-500); font-weight: 600; font-size: 12px; }
.db-pace.ran-out .db-pace-v { color: #b3261e; }
.db-difficulty { display: flex; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--slate-200); font-size: 12px; font-weight: 600; color: var(--slate-500); flex-wrap: wrap; }
.db-difficulty .good { color: var(--green-500); }
.db-difficulty .warn { color: var(--orange-deep); }
.db-difficulty .bad { color: var(--red-500); }

.db-practice { background: var(--mint); border: none; box-shadow: none; }
.db-practice-sell { background: var(--orange-tint); border: none; box-shadow: none; }
.db-practice-sell p { font-size: 14px; color: #3c4a53; line-height: 1.5; margin: 0 0 14px; position: relative; }
.db-practice-sell .db-h3 { display: flex; align-items: center; gap: 8px; }
.db-practice-sell .db-card-head, .db-practice .db-card-head { position: relative; }
.db-pill-teal { background: var(--teal-700); color: var(--white); font-size: 12px; font-weight: 800; padding: 7px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.db-pill-dark { background: var(--navy-800); color: var(--white); font-size: 13px; font-weight: 800; padding: 10px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.db-tag-white { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--orange-ink); background: var(--white); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.db-sell-row { display: flex; gap: 10px; align-items: center; position: relative; flex-wrap: wrap; }
.db-sell-note { font-size: 12px; color: var(--orange-ink); font-weight: 700; }
.db-practice-list { display: grid; gap: 6px; font-size: 13px; position: relative; }
.db-practice-row { display: flex; justify-content: space-between; gap: 10px; background: var(--white); border-radius: 10px; padding: 9px 12px; text-decoration: none; color: var(--navy-800); font-weight: 600; }
.db-practice-meta { color: var(--slate-500); white-space: nowrap; }

.db-tests { margin-top: 16px; padding: 0; }
.db-tests-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px 14px; gap: 12px; flex-wrap: wrap; }
.db-tests-empty { padding: 0 26px 22px; }
.db-tr { display: grid; grid-template-columns: 130px 90px 120px 130px 1fr 110px; padding: 14px 26px; font-size: 14px; font-weight: 600; align-items: center; border-bottom: 1px solid var(--slate-100); gap: 8px; }
.db-tr:last-child { border-bottom: none; }
.db-th { padding: 8px 26px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--slate-500); border-top: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200); background: #fafcfc; }
.db-tr .muted { color: var(--slate-500); font-weight: 500; }
.db-tr .good { color: var(--green-500); }

.db-section-title { font: 800 1.15rem/1 var(--font-display); letter-spacing: -.02em; color: var(--navy-800); margin: 30px 0 12px; }
.db-admin { display: grid; gap: 8px; }
.db-signout { margin-top: 26px; }
.practice-wall { max-width: 720px; margin: 20px auto; }

@media (max-width: 960px) {
    .app-nav { margin-left: 0; }
    .app-nav-right { flex-wrap: wrap; }
    .lp-offers { grid-template-columns: 1fr; margin-top: -40px; }
    .lp-card-free, .lp-card-test { transform: none; }
    .lp-faq { grid-template-columns: 1fr; }
    .lp-faq-side { position: static; }
    .db-row-1, .db-row-2 { grid-template-columns: 1fr; }
    .db-hero-inner { flex-direction: column; align-items: flex-start; }
    .db-date { flex-wrap: wrap; }
    .db-tr { grid-template-columns: 1fr 1fr; }
    .db-th { display: none; }
    .db-ready-cols { grid-template-columns: 1fr; }
}

/* ---------------------------- versions of a question on the score report ---------------------------- */

/* The navigator: which version is showing, arrows to step, and the way to add one. Fixed size,
   however many versions there are — a dropdown scrolls where a row of tabs would wrap. */
.sat-versions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0 14px; margin-bottom: 16px; border-bottom: 1px solid var(--slate-100); }
.sat-version-nav { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--slate-200); background: var(--white); border-radius: 999px; padding: 3px 6px 3px 4px; }
.sat-version-step { width: 28px; height: 28px; border-radius: 50%; border: none; background: none; color: var(--navy-800); font-size: 1.2rem; line-height: 1; cursor: pointer; font-family: inherit; }
.sat-version-step:hover { background: var(--slate-100); }
.sat-version-step:disabled { color: var(--slate-300); cursor: default; background: none; }
.sat-version-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--slate-300); flex: none; }
.sat-version-dot.right { background: var(--green-500); }
.sat-version-dot.wrong { background: var(--red-500); }
.sat-version-select { border: none; background: none; font-size: .9rem; font-weight: 700; font-family: inherit; color: var(--navy-800); padding: 4px 2px; cursor: pointer; max-width: 260px; }
.sat-version-select:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; border-radius: 6px; }
.sat-versions-tally { font-size: .84rem; font-weight: 700; color: var(--slate-500); font-variant-numeric: tabular-nums; }

.sat-version-add { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--teal-700); background: var(--mint); color: var(--teal-800); border-radius: 999px; padding: 9px 14px; font-size: .85rem; font-weight: 700; line-height: 1; font-family: inherit; cursor: pointer; text-decoration: none; }
.sat-version-add:hover { background: var(--teal-700); border-style: solid; color: var(--white); }
.sat-version-add:disabled { opacity: .45; cursor: default; }
.sat-version-add:disabled:hover { background: var(--mint); border-style: dashed; color: var(--teal-800); }
.sat-version-add.locked { border-style: solid; border-color: var(--orange); background: var(--orange-tint); color: var(--orange-ink); }
.sat-version-add.locked:hover { background: var(--orange); color: var(--white); }

.sat-versions-note { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--teal-700); }
.sat-versions-none { font-size: .85rem; color: var(--slate-500); }

/* One version, shown in place of the original. */
.sat-version-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sat-version-title { font-weight: 700; color: var(--navy-800); }
.sat-fu-choices .sat-choice { background: var(--white); }
.sat-fu-choices .sat-choice .sat-rq-tag { align-self: center; padding-right: 16px; }

/* Once the allowance is used up: the pass, in one line. */
.sat-fu-wall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 22px;
    background: var(--orange-tint);
    border: 1.5px solid var(--orange);
    border-radius: 14px;
    padding: 16px 20px;
}
.sat-fu-wall p { margin: 0; color: var(--orange-ink); line-height: 1.55; max-width: 520px; }

/* ---------------------------- score report: tabs and results ---------------------------- */


.sat-score-note { margin-top: 10px; font-size: .82rem; font-weight: 700; }
.sat-score-note.up { color: var(--teal-700); }
.sat-score-note.down { color: var(--orange-deep); }
.sat-review-head h1 { font-size: 3rem; }
.sat-review-scale { font-size: 1.3rem; color: var(--slate-400); font-weight: 600; letter-spacing: 0; }

/* The "?" beside an estimated score, and what it says on hover or focus. */
.score-hint { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; }
.score-hint-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--slate-300);
    background: var(--slate-100);
    color: var(--slate-600);
    font: 700 .82rem/1 "Figtree", system-ui, sans-serif;
    letter-spacing: 0;
    cursor: help;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.score-hint-btn:hover, .score-hint-btn:focus-visible { border-color: var(--teal-700); background: var(--mint); color: var(--teal-800); outline: none; }
/* Fixed to the viewport and placed by app.js on hover, so a card's overflow can never clip it. */
.score-hint-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 300px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--navy-800);
    color: var(--white);
    font: 500 .84rem/1.5 "Figtree", system-ui, sans-serif;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: normal;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}
.score-hint-tip::before { content: ""; position: absolute; top: -6px; left: var(--arrow-left, 8px); border: 6px solid transparent; border-top: none; border-bottom-color: var(--navy-800); }
.score-hint:hover .score-hint-tip, .score-hint-btn:focus-visible + .score-hint-tip { opacity: 1; visibility: visible; }

.sat-results-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-bottom: 20px; align-items: start; }
.sat-results-col { display: grid; gap: 16px; }
.sat-result-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: var(--shadow-sm); }
.sat-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sat-result-head h2 { font-size: 1.1rem; color: var(--navy-800); margin: 0; }
.sat-result-meta { font-size: .84rem; color: var(--slate-500); font-weight: 600; }
.sat-result-key { display: flex; gap: 12px; flex-wrap: wrap; font-size: .76rem; color: var(--slate-500); font-weight: 600; }
.sat-result-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.sat-result-key .ready, .sat-domain-bar .ready { background: var(--green-500); }
.sat-result-key .almost, .sat-domain-bar .almost { background: var(--orange); }
.sat-result-key .again, .sat-domain-bar .again { background: var(--red-500); }
.sat-result-sub { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-500); margin: 18px 0 10px; }
.sat-result-sub:first-of-type { margin-top: 4px; }
.sat-result-empty, .sat-result-foot { color: var(--slate-500); font-size: .9rem; line-height: 1.5; margin: 0; }
.sat-result-foot { margin-top: 12px; }

.sat-pace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sat-pace { background: var(--slate-50); border-radius: 10px; padding: 10px 12px; font-size: .82rem; }
.sat-pace.ran-out { background: var(--red-tint); }
.sat-pace-l { color: var(--slate-500); font-weight: 600; }
.sat-pace-v { font-weight: 800; font-size: 1.05rem; color: var(--navy-800); margin-top: 2px; font-variant-numeric: tabular-nums; }
.sat-pace-v span { color: var(--slate-500); font-weight: 600; font-size: .8rem; }
.sat-pace.ran-out .sat-pace-v { color: #b3261e; }
.sat-difficulty { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--slate-200); font-size: .85rem; font-weight: 600; color: var(--slate-500); }
.sat-difficulty .good { color: var(--green-500); }
.sat-difficulty .warn { color: var(--orange-deep); }
.sat-difficulty .bad { color: var(--red-500); }

.sat-skill-list { display: grid; gap: 8px; }
.sat-skill { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--slate-50); border-radius: 12px; padding: 11px 14px; }
.sat-skill-name { font-weight: 700; font-size: .95rem; color: var(--navy-800); }
.sat-skill-n { font-size: .8rem; font-weight: 700; margin-top: 2px; }
.sat-skill-n.bad { color: #c2410c; }
.sat-skill-n.warn { color: var(--orange-deep); }
.sat-skill-link { font-weight: 700; font-size: .88rem; color: var(--teal-700); text-decoration: none; white-space: nowrap; }
.sat-skill-link:hover { text-decoration: underline; }

.sat-results-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--navy-800); border-radius: var(--radius-lg); padding: 22px 26px; }
.sat-results-cta div { color: #c9d3e4; line-height: 1.5; max-width: 560px; }
.sat-results-cta strong { display: block; color: var(--white); font-size: 1.15rem; margin-bottom: 4px; }

/* ---------------------------- score report: questions ---------------------------- */

.sat-qs-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 16px 16px 12px; }
.sat-qs-side .sat-check { margin-bottom: 10px; }
.sat-qs-key { display: flex; gap: 10px; flex-wrap: wrap; font-size: .74rem; color: var(--slate-500); font-weight: 600; margin-bottom: 6px; }
.sat-qs-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; box-sizing: border-box; }
.sat-qs-key .right { background: var(--green-tint); border: 1.5px solid var(--green-500); }
.sat-qs-key .wrong { background: var(--red-tint); border: 1.5px solid var(--red-500); }
.sat-qs-key .blank { background: var(--slate-100); border: 1.5px solid var(--slate-300); }
.sat-qs-module h3 { display: flex; justify-content: space-between; gap: 8px; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); margin: 14px 0 8px; }
.sat-qs-module h3 span { text-transform: none; letter-spacing: 0; color: var(--teal-700); font-weight: 600; }
.sat-qs-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.sat-qs-cell { position: relative; aspect-ratio: 1; padding: 0; border-radius: 7px; border: 1.5px solid var(--slate-200); background: var(--white); font-size: .8rem; font-weight: 700; color: var(--slate-700); cursor: pointer; font-variant-numeric: tabular-nums; }
.sat-qs-cell.right { background: var(--green-tint); border-color: var(--green-500); color: #15803d; }
.sat-qs-cell.wrong { background: var(--red-tint); border-color: var(--red-500); color: #b91c1c; }
.sat-qs-cell.blank { background: var(--slate-100); border-color: var(--slate-300); color: var(--slate-500); }
.sat-qs-cell.marked { box-shadow: inset 0 -3px 0 var(--gold); }
.sat-qs-cell.followed::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-700); }
.sat-qs-cell:hover { border-color: var(--navy-800); }
.sat-qs-cell.current { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.sat-qs-cell.current.followed::after { background: var(--orange); }

.sat-qs-empty { color: var(--slate-500); padding: 24px; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); }

.sat-rq.standalone { margin-bottom: 0; }
.sat-rq-head-static { cursor: default; }
.sat-rq-marked { font-size: .8rem; font-weight: 700; color: var(--orange-deep); }


@media (max-width: 860px) {
    .sat-results-grid { grid-template-columns: 1fr; }
    .sat-qs-grid { grid-template-columns: repeat(9, 1fr); }
}

/* ---------------------------- the finished test, in the test's own shell ---------------------------- */

/* Where the clock was: the score, small. */
.sat-review-score { display: flex; align-items: center; gap: 10px; }
.sat-review-score-n { font: 800 1.5rem/1 var(--font-display); color: var(--navy-800); letter-spacing: -.02em; }
.sat-review-score-n small { font-size: .95rem; color: var(--slate-400); font-weight: 600; letter-spacing: 0; }
.sat-review-score-sub { color: var(--slate-500); font-size: .88rem; font-weight: 600; }

.sat-review-shell .sat-exam-tools { display: flex; gap: 8px; }
.sat-tool-dark { display: inline-flex; align-items: center; background: var(--navy-800); border-color: var(--navy-800); color: var(--white); text-decoration: none; }
.sat-tool-dark:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); }

/* The palette on the left, the question where the test drew it. The body is the scroll container,
   so the palette sticks inside it. */
.sat-review-body { padding: 28px 24px 32px; }
.sat-review-cols { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; max-width: 1180px; margin: 0 auto; align-items: start; }
.sat-review-cols .sat-qs-side { position: sticky; top: 0; max-height: calc(100vh - 200px); }
.sat-review-question { max-width: 780px; }

/* The question loses its review-card chrome so it reads exactly as it did during the test:
   the dark number badge, the verdict in green or red, then the question itself. */
.sat-review-question .sat-rq.standalone { border: none; background: transparent; border-radius: 0; }
.sat-review-question .sat-rq.standalone .sat-rq-head-static { padding: 0 0 14px; margin-bottom: 20px; }
.sat-review-question .sat-rq.standalone .sat-rq-body { padding: 0; border-top: none; }
.sat-review-question .sat-rq-verdict { font-size: 1rem; }
.sat-review-question .sat-rq.right .sat-rq-verdict { color: var(--green-500); }
.sat-review-question .sat-rq.wrong .sat-rq-verdict { color: var(--red-500); }

.sat-palette-static, .sat-palette-static:hover { cursor: default; }

/* The score summary as a modal over the review. */
.sat-results-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px 32px 32px; box-shadow: var(--shadow-lg); width: min(1120px, 96vw); max-height: 92vh; overflow-y: auto; }
.sat-results-card .sat-review-head { margin-bottom: 22px; }

@media (max-width: 860px) {
    .sat-review-cols { grid-template-columns: 1fr; }
    .sat-review-cols .sat-qs-side { position: static; max-height: none; }
    .sat-review-score { display: none; }
}

/* ---------------------------- checkout ---------------------------- */
.checkout-card { max-width: 480px; }
.checkout-card .lp-kicker { display: block; margin-bottom: 6px; }
.checkout-price { font: 800 2.4rem/1 var(--font-display); color: var(--navy-800); letter-spacing: -.03em; margin: 6px 0 16px; }
.checkout-price span { font: 600 .95rem/1 inherit; color: var(--slate-500); letter-spacing: 0; margin-left: 8px; }
.checkout-features { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.checkout-features li { display: flex; gap: 10px; align-items: flex-start; color: var(--slate-700); line-height: 1.45; }
.checkout-features .tick { color: var(--teal-700); font-weight: 800; flex: none; }
.checkout-preview { margin: 14px 0 0; font-size: .85rem; color: var(--slate-500); line-height: 1.5; text-align: center; }

/* ---------------------------- practice picker: the record on the side, stats on the chips ---------------------------- */

.practice-start-wide { max-width: 1180px; }
.pick-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.pick-side { position: sticky; top: 88px; }
.pick-side-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); }
.pick-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pick-side-head h3 { font-size: 1.05rem; color: var(--navy-800); margin: 0; }
.pick-side-meta { font-size: .8rem; color: var(--slate-500); font-weight: 600; }
.pick-side-empty, .pick-side-foot { color: var(--slate-500); font-size: .88rem; line-height: 1.5; margin: 0; }
.pick-side-foot { margin-top: 12px; }
.pick-side-group { margin-top: 14px; }
.pick-side-label { display: flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 6px; }
.pick-side-label i { width: 8px; height: 8px; border-radius: 50%; }
.pick-side-label .again { background: var(--red-500); }
.pick-side-label .ready { background: var(--green-500); }

/* A topic row: name, a bar colored by how it is going, and the count. Clicking selects it. */
.pick-side-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 46px; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1.5px solid transparent; border-radius: 10px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--slate-700); }
.pick-side-row:hover { background: var(--slate-50); }
.pick-side-row.on { border-color: var(--teal-700); background: var(--teal-50); color: var(--navy-800); }
.pick-side-name { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-side-bar { height: 6px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.pick-side-bar span { display: block; height: 100%; }
.pick-side-bar .ready { background: var(--green-500); }
.pick-side-bar .almost { background: var(--orange); }
.pick-side-bar .again { background: var(--red-500); }
.pick-side-n { font-size: .78rem; font-weight: 700; color: var(--slate-500); text-align: right; font-variant-numeric: tabular-nums; }
.pick-side-btn { margin-top: 8px; width: 100%; border: none; background: var(--navy-800); color: var(--white); border-radius: 999px; padding: 10px 14px; font-weight: 700; font-size: .88rem; cursor: pointer; font-family: inherit; }
.pick-side-btn:hover { background: var(--navy-700); }

/* On the chips: the count so far, colored the same way, so the list reads without a legend. */
.pick-skill-end { display: flex; align-items: center; gap: 8px; flex: none; }
.pick-skill-stat { font-size: .76rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pick-skill-stat.ready { background: var(--green-tint); color: #15803d; }
.pick-skill-stat.almost { background: var(--orange-tint); color: var(--orange-ink); }
.pick-skill-stat.again { background: var(--red-tint); color: #b91c1c; }
.pick-group-stat { font-size: .76rem; font-weight: 700; margin-left: 8px; letter-spacing: 0; text-transform: none; }
.pick-group-stat.ready { color: #15803d; }
.pick-group-stat.almost { color: var(--orange-deep); }
.pick-group-stat.again { color: #b91c1c; }

@media (max-width: 960px) {
    .pick-layout { grid-template-columns: 1fr; }
    .pick-side { position: static; }
}

/* ---------------------------- practice: another like this ---------------------------- */
.practice-like { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.practice-like-btn { border: none; background: var(--teal-700); color: var(--white); border-radius: 999px; padding: 12px 22px; font-size: .95rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.practice-like-btn:hover { background: var(--teal-800); }
.practice-like-btn:disabled { opacity: .5; cursor: default; }
.practice-like-note { color: var(--slate-500); font-size: .9rem; }

/* ===========================================================================
   The student app as pages, each with one job: Home (what next), Practice
   (drills by domain and skill), Tests (start one, see them all), Progress
   (score, trend, every skill), Account. Shared furniture first.
   =========================================================================== */

/* ---- /sat/upgrade: what the pass changes ---- */

.up-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--orange-tint);
    border: none;
}

.up-amount { font: 800 2.6rem/1 var(--font-display); letter-spacing: -.04em; color: var(--navy-800); }
.up-amount-note { font-size: .9rem; color: var(--orange-ink); font-weight: 600; margin-top: 6px; }

.up-founding {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    margin-top: 6px;
}

.up-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.up-where { font-size: .82rem; color: var(--orange-ink); font-weight: 600; }

.up-list { display: flex; flex-direction: column; gap: 14px; }
.up-row-h { font: 800 1.02rem/1.3 var(--font-display); color: var(--navy-800); margin: 0 0 12px; }

/* Two columns so "now" and "with the pass" are read against each other rather than in sequence -
   the comparison is the argument. One column below, where side-by-side would be two narrow
   measures and the pairing is carried by the labels instead. */
.up-row-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.up-row-cols p { margin: 6px 0 0; font-size: .91rem; line-height: 1.55; color: var(--slate-600); }
.up-now p { color: var(--slate-500); }

.up-tag {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate-400);
}

.up-tag-on { color: var(--teal-700); }

.up-then {
    border-left: 2px solid var(--mint-deep);
    padding-left: 16px;
}

.up-keeps { display: flex; flex-direction: column; gap: 16px; }
.up-keep { display: flex; gap: 12px; align-items: flex-start; }
.up-keep strong { color: var(--navy-800); font-size: .95rem; }
.up-keep p { margin: 4px 0 0; font-size: .9rem; line-height: 1.55; color: var(--slate-600); }

.up-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.up-foot strong { color: var(--navy-800); }

@media (max-width: 720px) {
    .up-row-cols { grid-template-columns: 1fr; }
    .up-then { border-left: none; padding-left: 0; }
    .up-buy { align-items: flex-start; }
}

/* ---- The signed-in shell: left rail beside the page ----

   Named "study-" and not "app-" on purpose: app.css already has an .app-shell, used by the two
   template reviewer pages, and it is loaded globally. The first cut of this called itself
   .app-shell and the two quietly merged - this shell inherited a 32px padding it never asked
   for, and the reviewer pages inherited a 224px first column.

   Width is fluid with a cap rather than a bigger fixed number. A fixed 1400 would give a
   1366-wide laptop a horizontal scrollbar, which is worse than the crowding it set out to fix.
   So: the rail takes its 224px, the page takes what is left up to the 1180 it has always had,
   and the pair is centred with a cap. A 1366 screen ends up with about 1100 for content - still
   clear of the 960 where the dashboard grid folds to one column - and a large monitor gets the
   full 1180 unchanged.

   --site-max is deliberately untouched: it is shared with the landing and legal pages, and
   stretching those would pull long-form prose to a measure nobody wants to read. */
/* Mobile-first: no rail, page full width - which is exactly the layout that shipped before any
   of this. The rail is switched on by the single breakpoint below. */
.study-shell { display: grid; grid-template-columns: 1fr; }
.study-rail { display: none; }

/* min-width: 0 is load-bearing. A grid item defaults to min-content width, so one wide table or
   a long unbroken string inside a page would otherwise push the whole column past the viewport
   and take the rail off-screen with it. */
.study-shell-main { min-width: 0; }

.study-rail {
    position: sticky;
    top: 68px;                      /* the header's height, as .exam-sidebar already assumes */
    align-self: start;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    padding: 28px 14px 40px;
    border-right: 1px solid var(--slate-200);
}

.study-rail-nav { display: flex; flex-direction: column; gap: 26px; }
.study-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.study-rail-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--slate-600);
    font-size: .94rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s, color .12s;
}

.study-rail-link svg { width: 18px; height: 18px; flex: none; color: var(--slate-400); }
.study-rail-link:hover { background: var(--slate-100); color: var(--navy-800); }
.study-rail-link:hover svg { color: var(--teal-700); }

/* The current page. A filled pill rather than a text-colour change, so "where am I" survives a
   glance from across the room - which is the whole reason for having a rail. */
.study-rail-link.on {
    background: var(--mint);
    color: var(--teal-800);
}

.study-rail-link.on svg { color: var(--teal-700); }

/* The one item in the rail that is selling something, so it is the one item that does not look
   like the others: amber on amber rather than grey on white, and the amber is the same one the
   pass is already sold in on the practice page and the dashboard.

   It is not a .btn-cta. A rail full of navigation with one button in it reads as a mistake, and
   the point is to be the brightest link rather than a different kind of control. */
.study-rail-upgrade {
    background: var(--orange-tint);
    color: var(--orange-ink);
    margin-top: 10px;
}

.study-rail-upgrade svg { color: var(--orange-deep); }

.study-rail-upgrade:hover {
    background: var(--orange);
    color: #3a2402;
}

.study-rail-upgrade:hover svg { color: #3a2402; }

/* On its own page it stays amber rather than turning mint like the rest - it is still the
   thing being sold, and going grey-green there would read as "done". */
.study-rail-upgrade.on {
    background: var(--orange);
    color: #3a2402;
}

.study-rail-upgrade.on svg { color: #3a2402; }

.study-rail-h {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate-400);
    margin: 0 0 8px 12px;
}

.study-rail-sub { list-style: none; margin: 2px 0 0; padding: 0 0 0 41px; }

.study-rail-sublink {
    display: block;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--slate-500);
    font-size: .88rem;
    text-decoration: none;
}

.study-rail-sublink:hover { background: var(--slate-100); color: var(--navy-800); }
.study-rail-sublink.on { color: var(--teal-800); font-weight: 600; }

/* One breakpoint, and it turns everything on at once.

   Written as a single min-width rather than a min/max pair on purpose. An adjacent pair -
   min-width: 1200 here and max-width: 1199 there - leaves a gap the moment the viewport width is
   fractional, which is not hypothetical: measured at an emulated 1199, BOTH queries missed and
   the page showed the rail and the header pills together. One query cannot disagree with itself.

   1200 is derived, not picked. Below it the rail's 224px would leave the page under the 960 that
   its own grids fold at, so a reader would get a rail AND single-column cards - the worst of both
   arrangements. At 1200 the page still has 976, and by 1404 it is back to the full 1180 it has
   always had.

   The rail also replaces the header's pill nav rather than doubling it. :has() rather than a flag
   passed down through the layouts, because PublicLayout renders before AppLayout and cannot know
   whether a rail is coming. */
@media (min-width: 1200px) {
    .study-shell {
        grid-template-columns: 224px minmax(0, 1fr);
        max-width: calc(224px + var(--site-max));
        margin-inline: auto;
    }

    .study-rail { display: block; }
    .site-root:has(.study-shell) .pill-nav-app { display: none; }

    /* Width enough for the whole header, so the pass badge gets its expiry date back. Here rather
       than beside .pass-badge because this is the width at which the header stops being crowded,
       and that is decided in one place. */
    .pass-badge-until { display: inline; }
}

.app-page { max-width: 1180px; margin: 0 auto; padding: 36px 24px 64px; }
.app-page-narrow { max-width: 960px; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.app-h1 { font: 800 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--font-display); letter-spacing: -.03em; color: var(--navy-800); margin: 0 0 8px; }
.app-sub { color: var(--slate-600); margin: 0; max-width: 620px; line-height: 1.55; }
.app-h2 { font: 800 1.15rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--navy-800); margin: 34px 0 14px; }
.app-note { color: var(--slate-500); font-size: .88rem; margin: -6px 0 16px; line-height: 1.6; }
.app-empty { color: var(--slate-500); }

/* The section switch: Reading and Writing / Math. */
.seg-toggle { display: inline-flex; gap: 4px; background: var(--slate-100); border-radius: 999px; padding: 4px; }
.seg { border: none; background: none; border-radius: 999px; padding: 10px 20px; font-size: .95rem; font-weight: 700; color: var(--slate-600); cursor: pointer; font-family: inherit; }
.seg:hover { color: var(--navy-800); }
.seg.on { background: var(--white); color: var(--navy-800); box-shadow: var(--shadow-sm); }

/* An accuracy as a percent pill, colored by readiness. */
.acc-pill { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-pill small { font-size: .72rem; font-weight: 600; }
.acc-pill.ready { background: var(--green-tint); color: #15803d; }
.acc-pill.almost { background: var(--orange-tint); color: var(--orange-ink); }
.acc-pill.again { background: var(--red-tint); color: #b91c1c; }
.acc-pill.muted { background: var(--slate-100); color: var(--slate-500); }
.acc-key { display: inline-flex; gap: 10px; align-items: center; }
.acc-key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.acc-key .ready { background: var(--green-500); }
.acc-key .almost { background: var(--orange); }
.acc-key .again { background: var(--red-500); }

/* ---------------------------------------------------------------- Home */
/* One loud thing, then quiet ones. The dark card is the full width of the page because on any
   given day there is exactly one thing to do next; the numbers under it are a glance rather than
   a panel; and the two ways to spend ten minutes sit side by side at the same weight, because a
   drill is what a student has time for on a weeknight and a test is not. */
.hm-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.hm-greet { margin: 0; font-size: 1rem; color: var(--slate-600); }
.hm-greet strong { color: var(--navy-800); font-weight: 800; }

.hm-date { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--slate-200); border-radius: 12px; padding: 8px 10px 8px 14px; color: var(--teal-700); box-shadow: var(--shadow-sm); }
.hm-date-text { font-size: .85rem; color: var(--slate-600); white-space: nowrap; }
.hm-date-text strong { color: var(--navy-800); }
.hm-date-input { border: none; background: var(--slate-100); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: .82rem; color: var(--navy-800); }
.hm-date-btn { border: none; background: var(--navy-800); color: var(--white); border-radius: 8px; padding: 7px 12px; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.hm-date-btn:hover { background: var(--teal-800); }

/* The hero. Text on the left, the one action on the right, so the button lands in the same place
   whatever the card is saying. */
.hm-hero {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 40px;
    background: var(--navy-800); color: var(--white);
    border-radius: 18px; padding: 30px 34px; margin-bottom: 20px;
    box-shadow: 0 16px 40px -24px rgba(14, 26, 32, .5);
}
.hm-hero-body, .hm-hero-actions { position: relative; }
.hm-hero-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--teal-400); margin-bottom: 10px; }
.hm-hero-h { font: 800 34px/1.1 var(--font-display); letter-spacing: -.03em; margin: 0 0 8px; }
.hm-hero-sub { font-size: 14px; color: rgba(255, 255, 255, .72); line-height: 1.5; margin: 0; }
.hm-hero-progress { position: relative; height: 8px; margin-top: 20px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.hm-hero-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--teal-400); transition: width .3s ease; }
.hm-hero-meter { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.hm-hero-meter strong { color: var(--white); font-weight: 800; }
.hm-hero-actions { display: grid; gap: 10px; }
.hm-hero-alt { display: block; text-align: center; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .72); text-decoration: none; }
.hm-hero-alt:hover { color: var(--white); text-decoration: underline; }
.hm-hero-alt.muted { font-weight: 600; text-decoration: none; }

/* Four numbers, four cards. Separate tiles rather than a panel of pairs: each one is a single
   fact and none of them is more important than the others. */
.hm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.hm-tile { display: flex; flex-direction: column; gap: 5px; background: var(--white); border: 1px solid var(--slate-200); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
.hm-tile-l { font-size: 12px; font-weight: 600; color: var(--slate-500); }
.hm-tile-v { font: 800 2rem/1 var(--font-display); letter-spacing: -.03em; color: var(--navy-800); display: inline-flex; align-items: center; gap: 8px; }
.hm-tile-v small { font-size: 1rem; color: var(--slate-400); font-weight: 600; letter-spacing: 0; }
.hm-tile-v.muted { color: var(--slate-300); }
.hm-tile-s { font-size: 12px; color: var(--slate-500); }

.hm-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; align-items: start; }

.hm-practice { display: flex; flex-direction: column; }
.hm-practice-h { font: 800 26px/1.1 var(--font-display); letter-spacing: -.03em; margin: 0 0 8px; color: var(--navy-800); }
.hm-practice-p { font-size: 13.5px; color: var(--slate-600); line-height: 1.5; margin: 0 0 18px; max-width: 46ch; }
.hm-practice-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-practice-pair.one { grid-template-columns: 1fr; }
.hm-practice-note { display: inline-flex; font-size: 13px; color: var(--teal-700); font-weight: 700; text-decoration: none; margin-top: 16px; }
.hm-practice-note:hover { text-decoration: underline; }
.hm-practice-note.muted { color: var(--slate-500); font-weight: 600; }

.hm-btn-solid, .hm-btn-ghost {
    display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box;
    border-radius: 12px; padding: 14px; font: inherit; font-weight: 800; font-size: 14px;
    text-decoration: none; cursor: pointer; text-align: center;
}
.hm-btn-solid { border: 1.5px solid var(--teal-700); background: var(--teal-700); color: var(--white); }
.hm-btn-solid:hover { background: var(--teal-800); border-color: var(--teal-800); }
.hm-btn-ghost { border: 1.5px solid var(--slate-200); background: var(--white); color: var(--navy-800); }
.hm-btn-ghost:hover { border-color: var(--teal-400); }

.hm-chips-head { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--slate-200); font-size: 12.5px; color: var(--slate-500); }
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hm-chip { display: inline-flex; align-items: center; border: 1px solid var(--mint-deep); background: var(--mint); color: var(--teal-800); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none; }
.hm-chip:hover { border-color: var(--teal-400); }
.hm-chip-all { background: var(--white); border-color: var(--slate-200); color: var(--slate-600); }

/* Where you are: the one card that is not about doing something, so it is the one that is tinted. */
.hm-where { display: flex; flex-direction: column; background: var(--mint); border-color: var(--mint-deep); }
.hm-where .db-kicker { color: var(--teal-700); }
.hm-where-h { font: 800 24px/1.15 var(--font-display); letter-spacing: -.03em; margin: 0 0 14px; color: var(--navy-800); }
.hm-where-p { font-size: 13.5px; color: var(--slate-600); line-height: 1.5; margin: 0 0 14px; }
/* minmax(0,1fr) and min-width:0 together: without both, a long topic name refuses to shrink
   and the row pushes its badge off the side of the card on a phone. */
.hm-topics { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hm-topic { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; background: var(--white); border: 1px solid var(--mint-deep); border-radius: 12px; padding: 12px 14px; }
.hm-topic-name { font-size: .92rem; font-weight: 700; color: var(--navy-800); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-topic-badge { flex: none; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 800; }
.hm-topic-badge.again { background: var(--orange-tint); color: #8a5a10; }
.hm-topic-badge.almost { background: var(--mint); color: var(--teal-800); }
.hm-topic-badge.ready { background: var(--slate-100); color: var(--slate-600); }
.hm-btn-dark { margin-top: auto; display: flex; justify-content: center; align-items: center; background: var(--navy-800); color: var(--white); border-radius: 12px; padding: 14px; font-weight: 800; font-size: 14px; text-decoration: none; }
.hm-btn-dark:hover { background: var(--teal-800); }

/* What is already behind them. A strip rather than a card: it is a way back to work that is
   finished, which is worth one line and no more. */
.hm-strip { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--slate-200); border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow-sm); }
.hm-strip-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--mint); color: var(--teal-800); display: inline-flex; align-items: center; justify-content: center; }
.hm-strip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-strip-body strong { color: var(--navy-800); font-size: .95rem; }
.hm-strip-body span { color: var(--slate-600); font-size: .86rem; }
.hm-strip-go { margin-left: auto; flex: none; border: 1px solid var(--slate-200); border-radius: 10px; padding: 10px 14px; color: var(--navy-800); font-size: .85rem; font-weight: 800; text-decoration: none; }
.hm-strip-go:hover { border-color: var(--teal-400); }

/* The hero button column and the four tiles are the first things to give: a 240px column and a
   quarter-width tile both stop working well before the phone breakpoint. */
@media (max-width: 1100px) {
    .hm-hero { grid-template-columns: 1fr; gap: 24px; }
    .hm-tiles { grid-template-columns: repeat(2, 1fr); }
    .hm-cols { grid-template-columns: 1fr; }
}

/* Two practice buttons side by side turn into three lines of wrapped text on a phone. */
@media (max-width: 560px) {
    .hm-practice-pair { grid-template-columns: 1fr; }
    .hm-hero { padding: 24px 22px; }
    .hm-hero-h { font-size: 27px; }

    /* The strip is icon, sentence and button on one line, which at this width squeezes the
       sentence into a column one word wide. The button takes a row of its own instead. */
    .hm-strip { flex-wrap: wrap; }
    .hm-strip-body { flex: 1 1 60%; }
    .hm-strip-go { flex: 1 1 100%; margin-left: 0; text-align: center; }
}

/* Kept for the admin account panel, which shows one user numbers in the same shape. */
.hm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.hm-stat { display: flex; flex-direction: column; gap: 4px; }
.hm-stat-l { font-size: 12px; font-weight: 600; color: var(--slate-500); }
.hm-stat-v { font: 800 1.9rem/1 var(--font-display); letter-spacing: -.03em; color: var(--navy-800); display: inline-flex; align-items: center; gap: 8px; }
.hm-stat-v small { font-size: 1rem; color: var(--slate-400); font-weight: 600; letter-spacing: 0; }
.hm-stat-v.muted { color: var(--slate-300); }
.hm-stat-s { font-size: 12px; color: var(--slate-500); }

/* ------------------------------------------------------------ Practice */
.qb-wall { margin-bottom: 26px; }
.qb-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 24px; background: var(--white); border: 1px solid var(--slate-200); border-radius: 16px; padding: 22px 26px; box-shadow: var(--shadow-sm); }
.qb-hero-icon { width: 64px; height: 64px; border-radius: 14px; background: var(--mint); color: var(--teal-800); display: inline-flex; align-items: center; justify-content: center; }
.qb-hero-body h3 { font: 800 1.15rem/1.2 var(--font-display); color: var(--navy-800); margin: 0 0 4px; }
.qb-hero-body p { margin: 0; color: var(--slate-600); }
.qb-acc { display: flex; align-items: center; gap: 10px; }
.qb-acc-label { font-size: .88rem; color: var(--slate-500); font-weight: 600; }
.qb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.qb-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; }
.qb-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--slate-100); }
.qb-card-head h3 { font: 800 1.1rem/1.2 var(--font-display); color: var(--navy-800); margin: 0 0 4px; }
.qb-share { color: var(--slate-500); font-size: .88rem; margin: 0 0 8px; }
.qb-inline { display: inline; }
.qb-link { border: none; background: none; padding: 0; color: var(--teal-700); font: 600 .95rem/1.4 inherit; font-family: inherit; cursor: pointer; text-align: left; }
.qb-link:hover:not(:disabled) { text-decoration: underline; }
.qb-link:disabled { color: var(--slate-400); cursor: not-allowed; }
.qb-card-body { padding: 14px 22px 18px; }
.qb-sub { color: var(--slate-500); font-size: .85rem; margin: 0 0 8px; }
.qb-skill { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--slate-100); }
.qb-skill:first-of-type { border-top: none; }
.qb-foot { margin: 26px 0 0; color: var(--slate-600); }
.qb-foot a { color: var(--teal-700); font-weight: 700; text-decoration: none; }
.qb-foot a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Tests */
.ts-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
.ts-how-list { margin: 12px 0 0; padding-left: 18px; color: var(--slate-700); line-height: 1.6; display: grid; gap: 6px; font-size: .93rem; }
.ts-how-list strong { color: var(--navy-800); }
.ts-table-card { padding: 0; overflow: hidden; }

/* ------------------------------------------------------------ Progress */
.pg-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg-domains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pg-domain-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pg-domain-head h3 { font: 800 1.05rem/1.2 var(--font-display); color: var(--navy-800); margin: 0 0 2px; }
.pg-share { color: var(--slate-500); font-size: .82rem; }
.pg-skills { display: grid; gap: 6px; }
.pg-skill { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto auto; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--slate-100); }
.pg-skill-name { font-size: .9rem; font-weight: 600; color: var(--slate-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-skill-bar { height: 6px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.pg-skill-bar span { display: block; height: 100%; }
.pg-skill-bar .ready { background: var(--green-500); }
.pg-skill-bar .almost { background: var(--orange); }
.pg-skill-bar .again { background: var(--red-500); }
.pg-skill-bar .muted { background: var(--slate-300); }
.pg-skill-drill { display: inline; }
.pg-skill-drill .db-link { border: none; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.pg-pace-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
    .hm-cols, .ts-grid, .pg-top, .pg-domains, .qb-grid { grid-template-columns: 1fr; }
    /* Four one-line numbers stay two-up on a phone: one per row is four screenfuls of
       scrolling for four short facts. */
    .hm-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
    .hm-tile { padding: 14px 16px; }
    .hm-tile-v { font-size: 1.6rem; }
    .qb-hero { grid-template-columns: auto minmax(0, 1fr); }
    .qb-hero form { grid-column: 1 / -1; }
    .pg-pace-grid { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------- account hub (/me) */

.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hub-card { display: flex; flex-direction: column; gap: 16px; }
.hub-card.on { border-color: var(--teal-400); }
.hub-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-card-head h3 { font: 800 1.15rem/1.2 var(--font-display); color: var(--navy-800); margin: 0; }
.hub-current { font-size: 12px; font-weight: 700; color: var(--teal-800); background: var(--mint); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.hub-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hub-stat { display: flex; flex-direction: column; gap: 4px; }
.hub-stat-l { font-size: 12px; font-weight: 600; color: var(--slate-500); }
.hub-stat-v { font: 800 1.7rem/1 var(--font-display); letter-spacing: -.03em; color: var(--navy-800); }
.hub-stat-v small { font-size: .95rem; color: var(--slate-400); font-weight: 600; letter-spacing: 0; }
.hub-stat-v.muted { color: var(--slate-300); }
.hub-note { margin: 0; font-size: .88rem; color: var(--slate-700); }
.hub-note.muted { color: var(--slate-500); }
.hub-card form { margin-top: auto; }

.hub-rows { display: grid; gap: 12px; }
.hub-row { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--slate-200); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: border-color .12s; }
.hub-row:hover { border-color: var(--teal-400); }
.hub-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hub-row-body strong { color: var(--navy-800); font-size: 1rem; }
.hub-row-body span { color: var(--slate-600); font-size: .88rem; line-height: 1.45; }
.hub-row-go { margin-left: auto; color: var(--teal-700); font-weight: 800; }

@media (max-width: 720px) {
    .hub-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- admin accounts (/admin/users) */

.adm-search { display: flex; gap: 10px; margin-bottom: 20px; max-width: 560px; }
.adm-search .input { flex: 1; }
.adm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.adm-give { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.adm-give .input { flex: 1; }
.adm-qty { max-width: 80px; }
.adm-note { color: var(--slate-600); font-size: .88rem; line-height: 1.5; margin: 8px 0 0; }
.adm-reason { margin-top: 26px; border-color: var(--teal-400); }
.adm-danger { color: #b91c1c; border-color: #fca5a5; }
.adm-danger:hover { background: var(--red-tint); }
.adm-tr { grid-template-columns: repeat(4, minmax(0, 1fr)) 110px; }
.db-tr .bad { color: #b91c1c; font-weight: 600; }
.db-table button.db-link { border: none; background: none; cursor: pointer; font-family: inherit; font-size: inherit; }

/* Who has signed up: the headline counts, the list itself, and its paging. */
.adm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.adm-stat { display: flex; flex-direction: column; gap: 4px; }
.adm-stat strong { font-size: 2rem; line-height: 1.1; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.adm-stat .adm-note { margin: 0; }

.adm-listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.adm-listhead .adm-note { margin: 0; }

/* The address is the widest thing on the row and the one worth reading in full, so it takes the
   slack and wraps rather than being cut off. */
.adm-list-tr { grid-template-columns: 104px minmax(0, 1.7fr) minmax(0, 1fr) 96px 90px 96px 78px; }
.adm-list-email { overflow-wrap: anywhere; }

/* One account, opened: how they got here, their practice sets, and the pages they read. */
.adm-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 14px 0 0; font-size: .92rem; }
.adm-facts dt { font-size: 12px; font-weight: 600; color: var(--slate-500); padding-top: 2px; }
.adm-facts dd { margin: 0; font-weight: 600; color: var(--navy-800); overflow-wrap: anywhere; }
.adm-facts .muted { color: var(--slate-500); font-weight: 500; }
.adm-facts .good { color: var(--green-500); }
.hm-stat .adm-note { margin: 2px 0 0; font-size: .8rem; }
.adm-practice-tr { grid-template-columns: 110px minmax(0, 2fr) 80px 100px minmax(0, 1fr); }
.adm-topics { overflow-wrap: anywhere; font-weight: 500; }
.adm-visit-tr { grid-template-columns: 110px minmax(0, 2fr) minmax(0, 1fr) 130px; }

@media (max-width: 960px) {
    /* Back to the two-up stack every other table uses at this width; the rules above would
       otherwise win on order and squeeze five columns onto a phone. */
    .adm-practice-tr, .adm-visit-tr { grid-template-columns: 1fr 1fr; }
}

/* Editing a coupon's limits in place, at /admin/coupons: extend the date, raise the cap. */
.cp-edit { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--slate-100); }
.cp-edit label { display: flex; flex-direction: column; gap: 4px; }
.cp-edit label span { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--slate-500); text-transform: uppercase; }
.cp-edit input[type="date"] { width: 168px; }
/* Wide enough for the word "unlimited", which the placeholder is; at 108px it clipped to
   "unlimitec" and read as a typo. */
.cp-edit input[type="number"] { width: 132px; }
.cp-edit-note { flex: 1; min-width: 180px; }
.cp-edit .btn-cta { padding: 10px 20px; }

/* The postable link on each coupon, at /admin/coupons. */
.cp-link { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--slate-100); }
.cp-link .db-kicker { margin: 0; }
.cp-link code { font-size: .9rem; color: var(--navy-800); font-weight: 600; overflow-wrap: anywhere; }
.cp-link .muted { font-size: .82rem; color: var(--slate-500); }

/* The campaign landing page (/free/{code}), where a link from Reddit or a video lands. */
.cmp-card { text-align: center; }
.cmp-flag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--teal-700); background: var(--mint); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.cmp-terms { font-size: .82rem; color: var(--slate-500); line-height: 1.5; margin: 10px 0 0; }
.cmp-list { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--slate-200); text-align: left; display: grid; gap: 14px; }
.cmp-list li { display: flex; flex-direction: column; gap: 2px; }
.cmp-list strong { font-size: .92rem; color: var(--navy-800); }
.cmp-list span { font-size: .85rem; color: var(--slate-600); line-height: 1.45; }

/* Beta invitations (/admin/invites). */
.inv-emails { min-height: 96px; resize: vertical; font-family: inherit; }
.inv-controls { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.inv-controls .field { margin: 0; }
.inv-months { width: 110px; }
.inv-note { flex: 1; min-width: 200px; }
/* The last column holds Resend and Revoke side by side; at 132px they wrapped onto two lines. */
.inv-tr { grid-template-columns: 104px minmax(0, 1.5fr) 124px 88px minmax(0, 1fr) 156px; }
.inv-revoke { color: #b91c1c; margin-left: 14px; }

@media (max-width: 900px) {
    /* What is left is enough to find the person and act on them. */
    .inv-tr { grid-template-columns: 96px minmax(0, 1fr) 92px 120px; }
    .inv-tr > :nth-child(3), .inv-tr > :nth-child(5) { display: none; }
}

.adm-paging { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.adm-paging .adm-note { margin: 0; font-variant-numeric: tabular-nums; }
.adm-paging button:disabled { opacity: .4; cursor: default; }

@media (max-width: 900px) {
    /* Name, access and source are all readable on the account itself; below this width the row
       keeps only what is needed to pick the right person out of the list. A laptop at 1024 still
       gets the whole row, which is why this breakpoint is well under it. */
    .adm-list-tr { grid-template-columns: 96px minmax(0, 1fr) 92px 78px; }
    .adm-list-tr > :nth-child(3), .adm-list-tr > :nth-child(5), .adm-list-tr > :nth-child(6) { display: none; }
}

@media (max-width: 860px) {
    .adm-grid { grid-template-columns: 1fr; }
    .adm-stats { grid-template-columns: 1fr; }
}

/* What the account holds, on the home page: the first thing anyone checks, and it used to live
   only in the navigation chip. */


/* Where a question came from, on the admin's read-only view of somebody's test: the template and
   seed are what a complaint about a question actually needs. */
.adm-provenance { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 12px 16px; margin-bottom: 18px; background: var(--slate-100); border-radius: 12px; }
.adm-provenance > div { display: flex; flex-direction: column; gap: 2px; }
.adm-provenance-l { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--slate-500); text-transform: uppercase; }
.adm-provenance code { font-size: .85rem; color: var(--navy-800); font-weight: 600; }
.adm-provenance a { margin-left: auto; }

/* The one link under the password box on sign-in. */
.auth-forgot { display: inline-block; margin-top: 8px; font-size: .88rem; color: var(--teal-700); font-weight: 600; text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }
.acc-reset-link { display: block; margin: 12px auto 0; padding: 0; background: none; border: 0; font: inherit; font-size: .88rem; color: var(--teal-700); font-weight: 600; cursor: pointer; text-align: center; }
.acc-reset-link:hover { text-decoration: underline; }


/* ---------------------------------------------------- coming soon (/coming-soon) */
/* Its own dark world, sharing none of the site chrome: no nav, no footer links, nothing to click
   into, because the point is that there is nothing to click into yet. */

.cs {
    --cs-ink: #0e1a20;
    --cs-teal: #0f7c73;
    --cs-teal-2: #14958a;
    --cs-mint: #7fd3c9;
    --cs-amber: #f4a83a;

    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--cs-ink);
    color: #fff;
    font-family: 'Figtree', system-ui, sans-serif;
}

/* The shapes behind everything. Decorative only, and hidden from anything reading the page. */
.cs-glow {
    position: absolute; left: 50%; top: -340px; width: 900px; height: 900px;
    transform: translateX(-50%); border-radius: 50%;
    background: var(--cs-teal); opacity: .22; pointer-events: none;
}
.cs-dots {
    position: absolute; left: 80px; top: 120px; width: 120px; height: 120px; opacity: .25;
    background-image: radial-gradient(var(--cs-mint) 1.6px, transparent 1.6px);
    background-size: 14px 14px; pointer-events: none;
}
.cs-ring {
    position: absolute; right: 110px; bottom: 120px; width: 56px; height: 56px;
    border: 5px solid var(--cs-amber); border-radius: 50%;
    transform: rotate(-20deg); opacity: .9; pointer-events: none;
}
.cs-tri {
    position: absolute; left: 150px; bottom: 150px; width: 0; height: 0;
    border-left: 16px solid transparent; border-right: 16px solid transparent;
    border-bottom: 28px solid var(--cs-amber); transform: rotate(-14deg); pointer-events: none;
}

.cs-top {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 22px clamp(20px, 4vw, 48px);
}
.cs-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
/* The header carries the real wordmark image. 34px is the height the old round mark occupied, so
   the header line does not shift; the art holds the infinity above and below the letters, which
   puts the caps where the text wordmark sat. The .cs-mark/.cs-word pair it replaced is gone. */
.cs-logo { height: 34px; width: auto; display: block; }
.cs-kicker { font-size: 13px; font-weight: 700; color: var(--cs-mint); text-align: right; }

.cs-main {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; padding: 20px clamp(20px, 4vw, 48px) 60px;
}

.cs-card { position: relative; max-width: 860px; }

.cs-h1 {
    font: 800 clamp(40px, 8vw, 76px)/1 'Bricolage Grotesque', 'Figtree', sans-serif;
    letter-spacing: -.04em; margin: 0 0 18px; text-wrap: balance;
}
.cs-h1 span { color: var(--cs-amber); }

.cs-sub {
    font-size: clamp(16px, 2.2vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, .72);
    margin: 0 auto 30px; max-width: 520px; text-wrap: pretty;
}

.cs-count { display: flex; justify-content: center; gap: 14px; margin-bottom: 34px; flex-wrap: wrap; }
.cs-unit {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px; padding: 16px 22px; min-width: 96px;
}
.cs-n {
    font: 800 clamp(30px, 5vw, 40px)/1 'Bricolage Grotesque', 'Figtree', sans-serif;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.cs-l { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--cs-mint); margin-top: 6px; }

.cs-form {
    display: flex; gap: 8px; background: #fff; border-radius: 16px; padding: 6px;
    width: min(480px, 100%); margin: 0 auto;
    box-shadow: 0 30px 60px -30px rgba(15, 124, 115, .8);
}
.cs-input {
    flex: 1; min-width: 0; border: none; outline: none; background: none;
    padding: 12px 16px; font-size: 15px; font-family: inherit; color: var(--cs-ink);
}
.cs-input::placeholder { color: #9aa8b3; }
.cs-go {
    flex: none; border: none; cursor: pointer; background: var(--cs-amber); color: var(--cs-ink);
    border-radius: 12px; padding: 13px 22px; font: 800 14px/1 inherit; white-space: nowrap;
}
.cs-go:hover { filter: brightness(1.05); }

.cs-fine { font-size: 13px; color: rgba(255, 255, 255, .55); font-weight: 600; margin-top: 12px; }
.cs-err { font-size: 13px; color: #ffb4a8; font-weight: 600; margin-top: 12px; }
.cs-done {
    display: inline-block; background: rgba(127, 211, 201, .14); border: 1px solid rgba(127, 211, 201, .4);
    border-radius: 14px; padding: 16px 24px; font-weight: 700; color: var(--cs-mint);
}

.cs-foot {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding: 0 clamp(20px, 4vw, 48px) 26px;
    font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .45);
}
.tm-notice-cs { margin: 0; max-width: 620px; font-size: 12px; font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, .4); }
.cs-links { display: flex; gap: 20px; }
.cs-links a { color: inherit; text-decoration: none; }
.cs-links a:hover { color: rgba(255, 255, 255, .75); }

/* ---- Loopy ---- */
.cs-loopy { position: relative; width: 260px; height: 120px; margin: 0 auto -6px; }
.cs-loopy span { position: absolute; }
.cs-loop { width: 120px; height: 120px; border-radius: 50%; border: 24px solid var(--cs-teal); box-sizing: border-box; top: 0; }
.cs-loop-l { left: 20px; transform: rotate(-8deg); }
.cs-loop-r { left: 120px; border-color: var(--cs-teal-2); transform: rotate(8deg); }
.cs-waist { left: 116px; top: 22px; width: 28px; height: 78px; border-radius: 50%; background: var(--cs-teal); }
.cs-eye { top: 34px; width: 28px; height: 34px; border-radius: 50%; background: #fff; }
.cs-eye-l { left: 56px; }
.cs-eye-r { left: 158px; }
.cs-pupil { top: 50px; width: 12px; height: 15px; border-radius: 50%; background: var(--cs-ink); }
.cs-pupil-l { left: 67px; }
.cs-pupil-r { left: 169px; }
.cs-brow { top: 20px; width: 26px; height: 8px; border-radius: 4px; background: #fff; }
.cs-brow-l { left: 50px; transform: rotate(-14deg); }
.cs-brow-r { left: 184px; transform: rotate(14deg); }
.cs-smile { left: 118px; top: 88px; width: 24px; height: 14px; border-radius: 0 0 24px 24px; background: var(--cs-ink); }
.cs-arm { top: 70px; width: 16px; height: 52px; border-radius: 8px; }
.cs-arm-l { left: -4px; background: var(--cs-teal); transform: rotate(30deg); }
.cs-arm-r { left: 236px; background: var(--cs-teal-2); transform: rotate(-30deg); }
.cs-hand { top: 104px; width: 32px; height: 14px; border-radius: 8px; background: var(--cs-amber); }
.cs-hand-l { left: -14px; }
.cs-hand-r { left: 230px; }

/* The decorative shapes crowd a narrow screen, and Loopy is the one worth keeping. */
@media (max-width: 720px) {
    .cs-dots, .cs-ring, .cs-tri { display: none; }
    .cs-loopy { transform: scale(.78); margin-bottom: -18px; }
    .cs-form { flex-direction: column; }
    .cs-go { padding: 15px 22px; }
}

/* ------------------------------------------------- admin site switches (/admin/site) */
.site-state { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; margin: 12px 0 16px; }
.site-state strong { font-size: 1rem; color: var(--navy-800); }
.site-state span { font-size: .88rem; color: var(--slate-600); line-height: 1.5; }
.site-state.open { background: var(--mint); }
.site-state.closed { background: var(--orange-tint); }
.site-toggle { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--navy-800); cursor: pointer; }
.site-toggle input { width: 18px; height: 18px; cursor: pointer; }
.site-field { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--slate-100); }
.site-field label { font-size: .88rem; font-weight: 700; color: var(--navy-800); }
.site-tr { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }

/* The development-only delete panel. Marked out so it cannot be mistaken for a normal admin
   control while working; it never renders outside Development. */
.adm-danger-card { border: 1px solid #e5b4b4; background: #fdf6f6; }
.adm-danger-card .db-kicker { color: #a33; }

/* ---- Legal pages: privacy, terms, refunds ----
   Long-form prose, so a narrower measure than the marketing sections and more room between
   headings than between paragraphs, which is what makes a document like this skimmable. */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.18rem; color: var(--navy-800); margin: 34px 0 10px; }
.legal h3 { font-size: 1rem; color: var(--navy-800); margin: 20px 0 6px; }
.legal p, .legal li { color: var(--slate-600); line-height: 1.65; font-size: .95rem; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--teal-700); }
.legal strong { color: var(--navy-800); }
.legal code { font-size: .86em; background: var(--slate-100); padding: 1px 5px; border-radius: 4px; }

.legal-date {
    font-size: .82rem;
    color: var(--slate-500);
    border-bottom: 1px solid var(--slate-100);
    padding-bottom: 14px;
    margin-bottom: 22px;
}

/* A clause still waiting on a real answer. Marked so it cannot be published by accident
   unnoticed - see LAUNCH_CHECKLIST.md. */
.legal-todo {
    border-left: 3px solid var(--orange-tint, #f4a83a);
    padding-left: 12px;
}

.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .9rem; }
.legal-table th {
    text-align: left;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--slate-500);
    padding: 0 12px 7px 0;
    border-bottom: 1px solid var(--slate-100);
}
.legal-table td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--slate-100);
    color: var(--slate-600);
    vertical-align: top;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
    .legal-table thead { display: none; }
    .legal-table tr { border-bottom: 1px solid var(--slate-100); padding: 10px 0; }
    .legal-table td { border: none; padding: 2px 0; }
}

/* The delete panel on the account page. Marked out because it is the one control there that
   cannot be undone, and it should not look like the others. */
/* ---- The "are you sure?" dialog ----
   A native <dialog> opened with showModal(), which is what gives the focus trap, Escape, and
   focus returning to the button afterwards without any of it being written here. Only the
   appearance is. */
.confirm {
    max-width: 460px;
    width: calc(100vw - 32px);
    border: 1px solid var(--slate-200);
    border-radius: 16px;
    padding: 24px;
    background: #fff;
    color: var(--slate-700);
    box-shadow: 0 30px 60px -20px rgba(16, 32, 48, .35);
}

.confirm::backdrop {
    background: rgba(16, 32, 48, .45);
}

.confirm-title {
    margin: 0 0 12px;
    font-size: 1.15rem;
    color: var(--navy-800);
}

.confirm-body p { margin: 0 0 12px; font-size: .95rem; line-height: 1.6; }
.confirm-body p:last-child { margin-bottom: 0; }

/* What this account specifically gives up. Called out, because it is the line somebody would be
   sorry to have missed, not the generic warning above it. */
.confirm-forfeit {
    border-left: 3px solid #e5b4b4;
    background: #fdf6f6;
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    color: #a33;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Stacked on a phone. Plain column, not column-reverse: that would put the button that deletes
   the account at the top, under where a thumb already rests, and leave the safe one below it. */
@media (max-width: 460px) {
    .confirm-actions { flex-direction: column; }
    .confirm-actions button { width: 100%; }
}

.acc-danger { border: 1px solid #e5b4b4; background: #fdf6f6; }
.acc-danger .db-kicker { color: #a33; }
.acc-delete { max-width: 340px; margin-top: 10px; }

/* The school pilot form. It sits inside the dark CTA band at the foot of /sat/schools, which is the
   spot the page's two "ask about a pilot" buttons both point at - so the fields have to read on a
   dark ground rather than borrowing the white-card form styling used everywhere else. */
.pilot-ask { text-align: left; }
.pilot-ask h2 { text-align: center; }
.pilot-ask > p { text-align: center; }

.pilot-form {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pilot-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.pilot-field { display: flex; flex-direction: column; gap: 6px; }

.pilot-field > span {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #c7d2e8;
}

/* "optional" beside a label, so nobody stalls on a field they can skip. */
.pilot-field > span em {
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #8fa3c4;
}

.pilot-field input,
.pilot-field textarea {
    font: inherit;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    padding: 11px 13px;
    width: 100%;
}

.pilot-field textarea { resize: vertical; min-height: 96px; }
.pilot-field input::placeholder { color: #8fa3c4; }

.pilot-field input:focus,
.pilot-field textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .12);
}

.pilot-narrow { max-width: 320px; }

.pilot-form .btn-cta { align-self: flex-start; margin-top: 4px; }

.pilot-fine { color: #8fa3c4; font-size: .9rem; margin: 0; max-width: none; }
.pilot-fine a { color: #c7d2e8; }

.pilot-err {
    background: rgba(255, 138, 138, .12);
    border: 1px solid rgba(255, 138, 138, .4);
    border-radius: 10px;
    padding: 11px 14px;
    color: #ffd7d7;
    max-width: 720px;
    margin: 0 auto 4px;
    text-align: left;
}

.pilot-said { color: #c7d2e8; }

/* The honeypot. Off-screen rather than display:none, because some bots skip fields that are
   hidden the obvious way - and kept out of the tab order and the accessibility tree so no person
   ever meets it. */
.pilot-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 640px) {
    .pilot-form .btn-cta { align-self: stretch; text-align: center; }
}

/* Pilot enquiries on /admin/site. One card each rather than a table row: a message runs to a
   paragraph, and the thing being scanned for is which ones are still open. */
.enq-card { padding: 16px 18px; margin-bottom: 12px; }
.enq-open { border-left: 3px solid var(--navy-800); }
.enq-done { opacity: .62; }

.enq-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.enq-head strong { display: block; color: var(--navy-900); }
.enq-head .muted { font-size: .92rem; }

.enq-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: .92rem;
}

.enq-msg {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--slate-50, #f6f8fa);
    border-radius: 10px;
    color: var(--slate-600);
    line-height: 1.5;
    white-space: pre-wrap;
}

.enq-replied {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: .92rem;
    color: var(--slate-600);
    cursor: pointer;
}

/* ---------- Receipts ---------- */

/* The purchase list on /account. Four columns rather than the three the shared .db-table
   assumes, because the last one is the link to the receipt. */
.receipt-table .db-tr { grid-template-columns: 130px 1fr 100px 110px; }
.receipt-refund-tag { color: var(--slate-600); font-style: normal; font-size: .85rem; }

@media (max-width: 640px) {
    .receipt-table .db-tr { grid-template-columns: 1fr 1fr; row-gap: 2px; }
    .receipt-table .db-th { display: none; }
}

/* One receipt, on its own page, laid out to be printed. */
.receipt-page { max-width: 720px; }
.receipt-back { display: inline-block; margin-bottom: 18px; color: var(--slate-600); }

.receipt {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.receipt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--slate-200);
}

.receipt-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--navy-900);
}

.receipt-sub { color: var(--slate-600); font-size: .95rem; }

.receipt-no { text-align: right; }
.receipt-no span { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-600); }
.receipt-no strong { font-size: 1.1rem; color: var(--navy-900); }

.receipt-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    padding: 24px 0;
}

.receipt-meta span { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-600); margin-bottom: 3px; }
.receipt-meta strong { color: var(--navy-900); font-weight: 600; }

.receipt-lines { width: 100%; border-collapse: collapse; margin-top: 8px; }
.receipt-lines th {
    text-align: left;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate-600);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--slate-200);
}
.receipt-lines td { padding: 14px 0; color: var(--navy-800); }
.receipt-lines tfoot td {
    border-top: 1px solid var(--slate-200);
    font-weight: 700;
    color: var(--navy-900);
}
.receipt-amount { text-align: right; }

.receipt-refunded, .receipt-note, .receipt-foot {
    color: var(--slate-600);
    font-size: .92rem;
    line-height: 1.6;
}

.receipt-note { margin-top: 22px; }
.receipt-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--slate-200); }

/* Printed, the receipt is the whole document. Everything the browser would otherwise carry over -
   the site header and footer, the back link, the card's own border and shadow - comes off, because
   a receipt with a navigation bar across the top of it does not look like a receipt. */
@media print {
    .site-nav, .site-footer, .receipt-back { display: none !important; }

    body { background: #fff; }

    .app-page, .receipt-page { padding: 0; margin: 0; max-width: none; }

    .receipt {
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    .receipt-lines th, .receipt-lines tfoot td, .receipt-foot { border-color: #999; }
    a[href^="mailto:"] { text-decoration: none; color: inherit; }
}

/* ---------- Accessibility ---------- */

/* Present to a screen reader, absent from the page. Clipped rather than display:none, because
   display:none removes it from the accessibility tree too, which defeats the purpose. */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The answer group. A fieldset for the grouping and the hidden legend that names it; none of its
   own chrome, because the choices carry the design. */
.sat-choice-set { border: 0; padding: 0; margin: 0; min-width: 0; }

/* The choices are now real radios, hidden by .sr-only and driven through their labels. Hidden
   still means focusable, so the focus ring has to be put back on the label the eye can see -
   otherwise a keyboard user tabs into the group and nothing appears to happen. */
.sat-choice-input:focus-visible + .sat-choice-main {
    outline: 3px solid var(--teal-700);
    outline-offset: -3px;
}

.sat-choice-input:checked + .sat-choice-main { cursor: default; }

/* The question number is a heading now, so it needs the margins a heading brings taken back off. */
h2.sat-question-n { margin: 0; }

/* Focus moves to the question heading when the question changes. That is a landing spot rather
   than a control, so it gets a quiet ring instead of the full control treatment. */
.sat-question-n:focus { outline: none; }
.sat-question-n:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 3px; }
.sat-palette h2:focus, .sat-finish h2:focus, .sat-directions-card h2:focus { outline: none; }

/* Every control in the runner gets a visible ring. The default one disappears against the dark
   header and the navy palette cells. */
.sat-tool:focus-visible,
.sat-mark:focus-visible,
.sat-nav-btn:focus-visible,
.sat-palette-btn:focus-visible,
.sat-palette-cell:focus-visible,
.sat-choice-strike:focus-visible,
.sat-clock-btn:focus-visible {
    outline: 3px solid var(--teal-400);
    outline-offset: 2px;
}

/* The shortcut list in the directions dialog. */
.sat-keys-title {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--slate-500);
    margin: 22px 0 10px;
}

.sat-keys { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.sat-keys li { color: var(--slate-700); font-size: .95rem; }

.sat-keys kbd {
    display: inline-block;
    min-width: 22px;
    padding: 2px 6px;
    margin-right: 2px;
    border: 1px solid var(--slate-200);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--slate-50, #f6f8fa);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    color: var(--navy-800);
}

/* The extended-time setting on /account. */
.acc-time { max-width: 380px; margin-top: 12px; }
.acc-time-line { display: block; }
.acc-time-note { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--slate-200); }

/* ---------- Coupons ---------- */

/* The admin form. Two columns where the fields pair naturally, one where they do not. */
.cp-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.cp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cp-field { display: flex; flex-direction: column; gap: 5px; }
.cp-narrow { max-width: 260px; }

.cp-field > span {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--slate-600);
}

.cp-field > span em,
.cp-check em {
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--slate-500);
}

.cp-field > em { font-style: normal; font-size: .85rem; color: var(--slate-500); }

.cp-check { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--slate-700); }
.cp-check em { display: block; width: 100%; font-size: .85rem; }

/* One card per code. A dead code is dimmed rather than hidden - you still need to find it. */
.cp-card { padding: 16px 18px; margin-bottom: 12px; }
.cp-dead { opacity: .55; }

.cp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.cp-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 1.05rem; color: var(--navy-900); }

.cp-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--teal-50);
    color: var(--teal-800);
    font-size: .78rem;
    font-weight: 700;
}

.cp-state { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); }
.cp-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: .9rem; }
.cp-toggle { margin-top: 12px; }

/* The code box on checkout. Collapsed by default: most buyers do not have one, and an empty
   field in the middle of a purchase reads as a discount everybody else is getting. */
.checkout-coupon { margin: 18px 0 4px; }
.checkout-coupon summary { cursor: pointer; color: var(--slate-600); font-size: .92rem; }
.checkout-coupon summary::marker { color: var(--slate-400); }
.checkout-coupon form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

/* ---- "This isn't helpful" under a worked solution, and the admin page that reads it ---- */
.sol-fb { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.sol-fb-btn {
    background: none;
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    color: var(--slate-500);
    font: inherit;
    font-size: .82rem;
    padding: 4px 12px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.sol-fb-btn:hover { color: var(--navy-800); border-color: var(--slate-400); background: var(--slate-50); }
.sol-fb-thanks { color: var(--slate-500); }
.sol-fb-dialog p { color: var(--slate-600); line-height: 1.6; margin: 0 0 12px; font-size: .95rem; }
.sol-fb-box {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--slate-300);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}
.sol-fb-box:focus { outline: 2px solid var(--navy-800); outline-offset: 1px; }

.fb-item { display: grid; gap: 8px; }
.fb-item.resolved { opacity: .6; }
.fb-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.fb-head strong { color: var(--navy-800); }
.fb-tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: var(--slate-100); color: var(--slate-600); }
.fb-tag.right { background: #e6f6ec; color: #1f7a3f; }
.fb-tag.wrong { background: #fdecec; color: #b3261e; }
.fb-comment { margin: 0; padding: 12px 14px; background: var(--slate-50); border-left: 3px solid var(--slate-300); color: var(--slate-800); line-height: 1.6; white-space: pre-wrap; }
.fb-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; color: var(--slate-500); align-items: center; }
.fb-meta code { font-size: .8rem; }

/* ---- landing page: try one question ---- */
/* Sits below the prices. The card's height does not change when the question is answered, and the
   worked solution slides in over the page, so nothing on the page below it ever moves. */
.lp-try { padding: 8px 0 64px; }

.lp-try-card {
    background: var(--white);
    border-radius: 22px;
    padding: 26px 30px 22px;
    box-shadow: 0 20px 50px -20px rgba(14, 26, 32, .25);
    max-width: 720px;
    margin: 0 auto;
}

.lp-try-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.lp-try-head .lp-kicker { margin-bottom: 0; }
.lp-try-skill { font-size: 13px; color: var(--slate-500); text-align: right; }
.lp-try-card .sat-prompt { font-size: 1.06rem; margin-bottom: 18px; }

.lp-try-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--slate-200);
    /* Tall enough for the answered state, which carries a bordered button, so the row is the
       same height before and after and the page below the card never moves. */
    min-height: 51px;
}

.lp-try-hint { font-size: 14px; color: var(--slate-500); }
.lp-try-verdict { font-weight: 800; font-size: 15px; }
.lp-try-verdict.right { color: #15803d; }
.lp-try-verdict.wrong { color: var(--orange-deep); }

.lp-try-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--teal-700);
    text-decoration: underline;
    cursor: pointer;
}

.lp-try-again-btn {
    margin-left: auto;
    background: none;
    border: 1px solid var(--slate-300);
    border-radius: 999px;
    padding: 6px 15px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-800);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.lp-try-again-btn:hover { border-color: var(--teal-600); background: var(--teal-50); }

/* ---- the worked solution, slid out from the right ---- */
.lp-sol-scrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 31, 61, .45);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

.lp-sol-scrim.open { opacity: 1; pointer-events: auto; }

.lp-sol {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100%);
    background: var(--white);
    box-shadow: -18px 0 50px -20px rgba(14, 26, 32, .5);
    z-index: 71;
    display: flex;
    flex-direction: column;
    transform: translateX(101%);
    /* visibility, not just the transform: a panel pushed off-screen is still in the tab order and
       still read by a screen reader, so a keyboard user would tab into a solution nobody can see.
       Opening flips it at once; closing waits for the slide to finish, which is why the delay is
       on this rule and not on .open. Transitioning visibility itself does not work - it is a
       discrete property and holds the wrong value for the duration. */
    visibility: hidden;
    transition: transform .32s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .32s;
    will-change: transform;
}

.lp-sol.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .32s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}

.lp-sol-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 24px 14px;
    border-bottom: 1px solid var(--slate-200);
}

.lp-sol-top h2 { font: 800 1.15rem/1.35 var(--font-display); color: var(--navy-800); margin: 0; }
.lp-sol-top h2:focus { outline: none; }
.lp-sol-verdict.right { color: #15803d; }
.lp-sol-verdict.wrong { color: var(--orange-deep); }

.lp-sol-close {
    margin-left: auto;
    flex: none;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--slate-500);
    cursor: pointer;
    padding: 0 2px;
}

.lp-sol-close:hover { color: var(--navy-800); }

.lp-sol-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 24px; }
.lp-sol-question { font-size: .97rem; color: var(--slate-600); line-height: 1.6; margin-bottom: 16px; }

.lp-sol-answer {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    background: var(--teal-50);
    border-radius: 10px;
    margin-bottom: 22px;
}

/* The direct child only. This was `.lp-sol-answer span`, which also matched every span KaTeX
   renders math into - and KaTeX is spans all the way down - so the uppercasing meant for the word
   "ANSWER" was applied to the answer itself. It went unnoticed while the front page asked an age
   word problem, whose answer is a bare number; the first answer containing letters came out as
   Y = (X + 2)^2 - 1 directly above the lowercase choice the student had just clicked. */
.lp-sol-answer > span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); }
.lp-sol-answer strong { font-size: 1.1rem; color: var(--navy-800); }

.lp-sol-body h3 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--slate-500);
    margin: 0 0 12px;
}

.lp-sol-steps { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.lp-sol-steps li { color: var(--slate-700); line-height: 1.7; }

.lp-sol-foot {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 16px 24px;
    border-top: 1px solid var(--slate-200);
    background: var(--slate-50);
}

.lp-sol-note { font-size: 13px; color: var(--slate-500); }

@media (max-width: 640px) {
    .lp-try { padding-bottom: 44px; }
    .lp-try-card { padding: 20px 18px 18px; border-radius: 18px; }
    .lp-try-again-btn { margin-left: 0; }
    .lp-sol-top { padding: 18px 18px 12px; }
    .lp-sol-body { padding: 16px 18px 20px; }
    .lp-sol-foot { padding: 14px 18px; }
    /* The button already says it; on one phone-width line the note only wraps and clips. */
    .lp-sol-note { display: none; }
}

/* ---- generated figures (SatGraph) ---- */
/* Only the dev review tool styled these, in its own scoped sheet, so on every page a student
   actually sees — a test, its review, practice, a follow-up — the SVG was falling back to the
   browser's default sizing. The graph's axes and labels are drawn in currentColor, so the color
   here is what they inherit. */
.sat-figure {
    margin: 18px 0 0;
    color: #334155;
}

.sat-figure svg {
    width: 320px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* A figure inside a worked solution sits in a numbered list item, so it is indented with the
   prose rather than run out to the edge of the card. */
.prompt-figure { margin: 12px 0; }

:root { --figure-halo: #ffffff; }

/* A button whose form is on its way (see data-busy in app.js): a small ring before the label,
   drawn in the button's own text color so it works on every button style. */
button.is-busy { pointer-events: none; opacity: .85; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
button.is-busy::before {
    content: ""; width: 1em; height: 1em; flex: none; box-sizing: border-box;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: busy-spin .7s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    button.is-busy::before { animation-duration: 2.4s; }
}


/* Sharing progress with a parent or tutor: the student's panel on /account, and the reviewer's
   pages under /sat/students. */
.share-new { margin: 14px 0 6px; padding: 14px; border-radius: 12px; background: var(--mint); }
.share-new-l { display: block; font-size: .85rem; font-weight: 700; color: var(--teal-700); margin-bottom: 8px; }
.share-new-row { display: flex; gap: 10px; }
.share-new-row .input { flex: 1; min-width: 0; font-size: .85rem; }
.share-new .adm-note { margin: 8px 0 0; }
.share-list { margin-top: 14px; }
.share-tr { grid-template-columns: minmax(0, 1fr) 170px 110px; }
.share-email { display: block; font-size: .82rem; overflow-wrap: anywhere; }
.rv-skill-tr { grid-template-columns: minmax(0, 1fr) 140px 90px; }
.rv-test-tr { grid-template-columns: 120px 70px 110px minmax(0, 1fr); }
.rv-practice-tr { grid-template-columns: 120px minmax(0, 1fr) 200px; }
.rv-list-tr { grid-template-columns: minmax(0, 1.4fr) 110px 100px 100px 120px 100px; }
.rv-list-tr form { margin: 0; }
.rv-stop { border: none; background: none; cursor: pointer; font: inherit; color: var(--slate-500); }
.rv-stop:hover { color: #b91c1c; }

@media (max-width: 960px) {
    .share-tr, .rv-skill-tr, .rv-test-tr, .rv-practice-tr, .rv-list-tr { grid-template-columns: 1fr 1fr; }
    .share-new-row { flex-direction: column; }
}