/* ==========================================================================
   CaseBuddy design system, October 2026 redesign.
   Single source of truth for tokens and components. Values are taken from
   docs/design/2026-10-10-redesign/CaseBuddy.dc.html (inline styles and
   renderVals). Guide: docs/design/2026-10-10-redesign/IMPLEMENTATION-GUIDE.md

   Loading: shared-tokens.css, student-tokens.css and
   components/customer-product-surface.css?v=2026101001 @import this file, so any page
   that loads one of them already has it. Every page that loads shared-header.css
   links this file directly just before it (an @import there made the browser
   wait for shared-header.css before it could even request this file, on the
   path to first paint). Other pages link it directly too:
   <link rel="stylesheet" href="/cb-design.css?v=2026101001">

   Rules:
   - Every class is prefixed cbd-. Nothing here restyles an existing class.
   - Element defaults sit in @layer cbd-base, so any unlayered page rule
     beats them. Component classes are unlayered so a page's bare element
     rules (button {...}) cannot flatten them.
   - Area agents override locally. Do not edit this file from an area.
   - Mobile values apply below 768px. The board draws 1440 and 390 only.
   ========================================================================== */

/* Public Sans and Source Serif 4 (Google Fonts, OFL), self-hosted latin
   subset so the faces load from the same origin as every other asset. */
@font-face {
    font-family: 'Public Sans';
    src: url('lib/fonts/PublicSans-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'Public Sans';
    src: url('lib/fonts/PublicSans-Italic-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: fallback;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('lib/fonts/SourceSerif4-Variable.woff2') format('woff2');
    font-weight: 200 900;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('lib/fonts/SourceSerif4-Italic-Variable.woff2') format('woff2');
    font-weight: 200 900;
    font-style: italic;
    font-display: fallback;
}

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
    /* Brand palette (11) */
    --cbd-ink: #0E2535;          /* text, primary buttons, active fills */
    --cbd-ink-2: #1E4A68;        /* links hover, info */
    --cbd-deep: #091A28;         /* deepest navy, scrim base */
    --cbd-gold: #C9A84C;         /* current, focus, single accent */
    --cbd-gold-dark: #A8882E;    /* "New", "Best Value" text on white */
    --cbd-white: #FFFFFF;
    --cbd-wash: #EEF1F5;         /* panels, notes, search wells, tracks */
    --cbd-line: #D4DAE3;         /* every hairline */
    --cbd-muted: #5A6B7B;        /* secondary text */
    --cbd-correct: #25795A;
    --cbd-wrong: #C41E24;        /* wrong, error, destructive */

    /* Supporting values the board uses */
    --cbd-correct-bg: #EDF6F1;
    --cbd-wrong-bg: #FCEFEF;
    --cbd-hover: #F7F8FA;        /* row hover, selected mode card */
    --cbd-on-ink-muted: #C9D3DE; /* muted text on navy */
    --cbd-divider-faint: #EEF1F5;/* menu and drawer row dividers */
    --cbd-highlight: #F6EFD9;    /* highlighted cell */
    --cbd-text-disabled: #8B99A8;
    --cbd-scrim: rgba(9, 26, 40, 0.5);

    /* Type */
    --cbd-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cbd-serif: 'Source Serif 4', Georgia, serif;
    --cbd-fs-display: 52px;      /* serif 600, lh 1.1. Results score, landing hero */
    --cbd-fs-title: 28px;        /* serif 600, lh 1.15. Page h1 */
    --cbd-fs-section: 18px;      /* sans 700. Section h2 */
    --cbd-fs-body: 15px;         /* sans 400, lh 1.5 */
    --cbd-fs-meta: 13px;         /* sans 400, muted */
    --cbd-fs-label: 12px;        /* small labels, tab bar, "Full access" */
    --cbd-fs-stat: 28px;         /* sans 600, lh 1 */

    /* Spacing (4px grid) */
    --cbd-space-1: 4px;
    --cbd-space-2: 8px;
    --cbd-space-3: 12px;
    --cbd-space-4: 16px;
    --cbd-space-5: 20px;
    --cbd-space-6: 24px;
    --cbd-space-7: 28px;
    --cbd-space-8: 32px;
    --cbd-space-10: 40px;
    --cbd-space-12: 48px;
    --cbd-space-14: 56px;

    /* Radii */
    --cbd-r-mark: 3px;           /* wordmark, small firm mark */
    --cbd-r-xs: 4px;             /* firm mark 28, key box, checkbox */
    --cbd-r: 6px;                /* buttons, inputs, chips, notes */
    --cbd-r-card: 8px;           /* cards, empty state, menu, plan rows */
    --cbd-r-dialog: 10px;        /* dialog, rich toast, tour */

    /* Control heights */
    --cbd-h-control: 44px;
    --cbd-h-compact: 40px;       /* header buttons, search, secondary actions */
    --cbd-h-chip: 32px;          /* filter chip on desktop */
    --cbd-h-tall: 48px;          /* sticky CTA, lock dialog, option rows */
    --cbd-h-header: 60px;
    --cbd-h-header-m: 52px;
    --cbd-h-header-focus: 56px;
    --cbd-h-header-public: 64px;
    --cbd-h-tabbar: 56px;

    /* Layout */
    --cbd-w-main: 960px;
    --cbd-w-focus: 760px;
    --cbd-w-wide: 1200px;
    --cbd-w-auth: 420px;
    --cbd-w-rail: 264px;
    --cbd-pad-main: 32px 40px 56px;
    --cbd-pad-auth: 64px 24px;

    /* Elevation: overlays only. Everything else is a 1px hairline. */
    --cbd-hairline: 1px solid var(--cbd-line);
    --cbd-shadow-flash: 0 8px 24px rgba(9, 26, 40, 0.3);
    --cbd-shadow-menu: 0 12px 32px rgba(9, 26, 40, 0.16);
    --cbd-shadow-overlay: 0 16px 40px rgba(9, 26, 40, 0.3);

    /* Focus */
    --cbd-focus: 2px solid #C9A84C;
    --cbd-focus-offset: 2px;
}

@media (max-width: 767px) {
    :root {
        --cbd-fs-display: 34px;
        --cbd-fs-title: 24px;
        --cbd-h-chip: 44px;
        --cbd-pad-main: 20px 16px 32px;
        --cbd-pad-auth: 32px 16px;
    }
}

/* ── ELEMENT DEFAULTS (lowest priority) ─────────────────────────────────── */
@layer cbd-base {
    body {
        font-family: var(--cbd-sans);
        color: var(--cbd-ink);
        font-variant-numeric: tabular-nums;
        -webkit-font-smoothing: antialiased;
    }
    :where(input, textarea, select, button) { font-family: inherit; }
    :focus-visible {
        outline: var(--cbd-focus);
        outline-offset: var(--cbd-focus-offset);
    }
}

/* ── TYPE ───────────────────────────────────────────────────────────────── */
.cbd-display {
    margin: 0;
    font-family: var(--cbd-serif);
    font-weight: 600;
    font-size: var(--cbd-fs-display);
    line-height: 1.1;
}
.cbd-title {
    margin: 0;
    font-family: var(--cbd-serif);
    font-weight: 600;
    font-size: var(--cbd-fs-title);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.cbd-h2 { margin: 0 0 var(--cbd-space-3); font-size: var(--cbd-fs-section); font-weight: 700; line-height: 1.3; }
.cbd-body { font-size: var(--cbd-fs-body); line-height: 1.5; }
.cbd-meta { font-size: var(--cbd-fs-meta); color: var(--cbd-muted); }
.cbd-label { font-size: var(--cbd-fs-label); color: var(--cbd-muted); }
.cbd-num { font-variant-numeric: tabular-nums; }
.cbd-prose { font-size: 16px; line-height: 1.7; }
.cbd-prose h2 { font-size: 19px; font-weight: 700; margin: 28px 0 8px; }
.cbd-prose p { margin: 0 0 14px; text-wrap: pretty; }
.cbd-link,
.cbd-prose a { color: var(--cbd-ink); text-decoration: underline; text-underline-offset: 2px; }
.cbd-link:hover,
.cbd-prose a:hover { color: var(--cbd-ink-2); }

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.cbd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--cbd-h-control);
    padding: 0 20px;
    border: 0;
    border-radius: var(--cbd-r);
    background: var(--cbd-ink);
    color: var(--cbd-white);
    font: 600 15px/1 var(--cbd-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}
.cbd-btn:hover { background: var(--cbd-ink-2); color: var(--cbd-white); }
.cbd-btn--secondary { background: var(--cbd-white); color: var(--cbd-ink); border: 1px solid var(--cbd-line); }
.cbd-btn--secondary:hover { background: var(--cbd-hover); color: var(--cbd-ink); border-color: var(--cbd-ink); }
.cbd-btn--outline { background: var(--cbd-white); color: var(--cbd-ink); border: 1px solid var(--cbd-ink); }
.cbd-btn--outline:hover { background: var(--cbd-hover); color: var(--cbd-ink); }
.cbd-btn--destructive { background: var(--cbd-white); color: var(--cbd-wrong); border: 1px solid var(--cbd-wrong); }
.cbd-btn--destructive:hover { background: var(--cbd-wrong-bg); color: var(--cbd-wrong); }
/* The one accent per screen: free-plan banner CTA and the rich toast CTA. */
.cbd-btn--gold { background: var(--cbd-gold); color: var(--cbd-ink); font-weight: 700; }
.cbd-btn--gold:hover { background: var(--cbd-gold-dark); color: var(--cbd-ink); }
.cbd-btn--text { background: transparent; color: var(--cbd-muted); height: var(--cbd-h-control); padding: 0 4px; font-size: 13px; }
.cbd-btn--text:hover { background: transparent; color: var(--cbd-ink); }
.cbd-btn:disabled,
.cbd-btn[aria-disabled="true"],
.cbd-btn--disabled { background: var(--cbd-line); color: var(--cbd-muted); border: 0; cursor: not-allowed; }
.cbd-btn--sm { height: var(--cbd-h-compact); padding: 0 16px; }
.cbd-btn--lg { height: var(--cbd-h-tall); }
.cbd-btn--block { display: flex; width: 100%; }
.cbd-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.cbd-btn-row > .cbd-btn { flex: 1 1 120px; }
.cbd-btn-row > .cbd-btn:first-child { flex: 1 1 200px; }

/* Icon button (header, close). 36 on desktop headers, 44 on mobile. */
.cbd-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--cbd-r);
    background: transparent;
    color: var(--cbd-ink);
    cursor: pointer;
}
.cbd-icon-btn:hover { background: var(--cbd-wash); }
.cbd-icon-btn svg { width: 18px; height: 18px; }
.cbd-icon-btn__dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--cbd-gold); }
.cbd-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    border: 0; border-radius: var(--cbd-r);
    background: var(--cbd-wash); color: var(--cbd-ink);
    font-size: 18px; line-height: 1; cursor: pointer;
}
@media (max-width: 767px) {
    .cbd-icon-btn { width: 44px; height: 44px; }
    .cbd-icon-btn svg { width: 20px; height: 20px; }
    .cbd-icon-btn__dot { top: 12px; right: 12px; }
}

/* ── FILTER CHIPS AND SEGMENTED ─────────────────────────────────────────── */
.cbd-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.cbd-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--cbd-h-chip); padding: 0 12px;
    border: 1px solid var(--cbd-line); border-radius: var(--cbd-r);
    background: var(--cbd-white); color: var(--cbd-ink);
    font: 600 13px/1 var(--cbd-sans); white-space: nowrap; cursor: pointer;
}
.cbd-chip__count { font-weight: 500; color: var(--cbd-muted); }
.cbd-chip[aria-pressed="true"],
.cbd-chip.is-on { background: var(--cbd-ink); border-color: var(--cbd-ink); color: var(--cbd-white); }
.cbd-chip[aria-pressed="true"] .cbd-chip__count,
.cbd-chip.is-on .cbd-chip__count { color: var(--cbd-on-ink-muted); }

.cbd-segmented { display: inline-flex; border: 1px solid var(--cbd-ink); border-radius: var(--cbd-r); overflow: hidden; }
.cbd-segmented > * {
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--cbd-h-control); padding: 0 16px; border: 0;
    background: var(--cbd-white); color: var(--cbd-ink);
    font: 600 13px/1 var(--cbd-sans); cursor: pointer;
}
.cbd-segmented > [aria-pressed="true"],
.cbd-segmented > [aria-selected="true"],
.cbd-segmented > .is-on { background: var(--cbd-ink); color: var(--cbd-white); }

/* ── FORMS ──────────────────────────────────────────────────────────────── */
.cbd-field { display: block; margin-bottom: 14px; }
.cbd-field__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--cbd-ink); }
.cbd-input,
.cbd-select,
.cbd-textarea {
    display: block; width: 100%; box-sizing: border-box;
    height: var(--cbd-h-control); padding: 0 12px;
    border: 1px solid var(--cbd-line); border-radius: var(--cbd-r);
    background: var(--cbd-white); color: var(--cbd-ink);
    font: 400 15px/1.4 var(--cbd-sans);
}
.cbd-textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.cbd-input::placeholder,
.cbd-textarea::placeholder { color: var(--cbd-muted); }
.cbd-input:focus,
.cbd-select:focus,
.cbd-textarea:focus { border-color: var(--cbd-ink); }
.cbd-input--search { height: var(--cbd-h-compact); background: var(--cbd-wash); }
.cbd-field.is-error .cbd-input,
.cbd-field.is-error .cbd-select,
.cbd-field.is-error .cbd-textarea,
.cbd-input[aria-invalid="true"] { border-color: var(--cbd-wrong); }
.cbd-field__error { font-size: 13px; color: var(--cbd-wrong); margin-top: 6px; }
.cbd-field__error::before { content: "! "; font-weight: 700; }
.cbd-field__hint { font-size: 13px; color: var(--cbd-muted); margin-top: 6px; }
.cbd-dropzone { border: 1px dashed var(--cbd-muted); border-radius: var(--cbd-r); padding: 28px 16px; font-size: 13px; color: var(--cbd-muted); text-align: center; }
.cbd-checkbox { width: 20px; height: 20px; border-radius: var(--cbd-r-xs); accent-color: var(--cbd-ink); }
.cbd-switch { position: relative; display: inline-block; width: 40px; height: 24px; flex: none; border-radius: 12px; background: var(--cbd-line); cursor: pointer; }
.cbd-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cbd-white); transition: transform 0.15s; }
.cbd-switch[aria-checked="true"] { background: var(--cbd-ink); }
.cbd-switch[aria-checked="true"]::after { transform: translateX(16px); }

/* ── PAGE STRUCTURE ─────────────────────────────────────────────────────── */
.cbd-main { flex: 1; min-width: 0; padding: var(--cbd-pad-main); box-sizing: border-box; }
.cbd-container { max-width: var(--cbd-w-main); margin: 0 auto; }
.cbd-container--focus { max-width: var(--cbd-w-focus); }
.cbd-container--wide { max-width: var(--cbd-w-wide); }
.cbd-container--auth { max-width: var(--cbd-w-auth); }
.cbd-main--auth { padding: var(--cbd-pad-auth); }

.cbd-crumb {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 12px;
    font-size: 13px; color: var(--cbd-muted); text-decoration: none; cursor: pointer;
    background: none; border: 0; padding: 0;
}
.cbd-crumb:hover { color: var(--cbd-ink); }

.cbd-page-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; }
.cbd-page-head__main { min-width: 0; flex: 1 1 360px; }
.cbd-page-head__sub { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--cbd-muted); max-width: 680px; text-wrap: pretty; }
.cbd-page-head__firm { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cbd-muted); margin-bottom: 8px; }
.cbd-page-head > .cbd-btn { height: var(--cbd-h-compact); padding: 0 18px; flex: none; }

.cbd-section { margin-bottom: 28px; }
.cbd-section__desc { font-size: 13px; color: var(--cbd-muted); margin: -10px 0 4px; }

/* Stats strip: hairlines top and bottom, no boxes. */
.cbd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: var(--cbd-hairline); border-bottom: var(--cbd-hairline); margin-bottom: 20px; }
.cbd-stat { padding: 14px 16px 14px 0; }
.cbd-stat__value { font-size: var(--cbd-fs-stat); font-weight: 600; line-height: 1; }
.cbd-stat__label { font-size: 13px; color: var(--cbd-muted); margin-top: 6px; }

/* Note / well */
.cbd-note { background: var(--cbd-wash); border-radius: var(--cbd-r); padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 20px; }
.cbd-note--body { font-size: 15px; line-height: 1.55; }

/* Card: used sparingly. Lists are rows, not cards. */
.cbd-card { border: var(--cbd-hairline); border-radius: var(--cbd-r-card); padding: 20px; background: var(--cbd-white); }
.cbd-card.is-selected,
.cbd-card[aria-pressed="true"] { border: 2px solid var(--cbd-ink); background: var(--cbd-hover); }

/* ── TABS ───────────────────────────────────────────────────────────────── */
.cbd-tabs { display: flex; gap: 20px; border-bottom: var(--cbd-hairline); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.cbd-tabs::-webkit-scrollbar { display: none; }
.cbd-tab {
    display: flex; align-items: center; min-height: 44px; padding: 10px 0; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: none;
    font: 600 15px/1.2 var(--cbd-sans); color: var(--cbd-muted);
    white-space: nowrap; text-decoration: none; cursor: pointer;
}
.cbd-tab:hover { color: var(--cbd-ink); }
.cbd-tab[aria-selected="true"],
.cbd-tab.is-active { color: var(--cbd-ink); border-bottom-color: var(--cbd-gold); }
/* Course player tabs: 24 gap, 500 inactive, 700 active. */
.cbd-tabs--player { gap: 24px; }
.cbd-tabs--player .cbd-tab { font-weight: 500; }
.cbd-tabs--player .cbd-tab[aria-selected="true"],
.cbd-tabs--player .cbd-tab.is-active { font-weight: 700; }

/* ── LIST ROWS ──────────────────────────────────────────────────────────── */
.cbd-list { border-top: var(--cbd-hairline); margin: 8px 0 0; padding: 0; list-style: none; }
.cbd-row {
    display: flex; gap: 14px; align-items: center;
    min-height: 56px; padding: 14px 0; box-sizing: border-box;
    border-bottom: var(--cbd-hairline);
    color: var(--cbd-ink); text-decoration: none;
}
a.cbd-row, button.cbd-row, .cbd-row[role="button"], .cbd-row[onclick] { cursor: pointer; }
button.cbd-row { width: 100%; background: none; border-width: 0 0 1px; text-align: left; font: inherit; }
a.cbd-row:hover, button.cbd-row:hover, .cbd-row[role="button"]:hover, .cbd-row[onclick]:hover { background: var(--cbd-hover); }
.cbd-row__body { flex: 1; min-width: 0; }
.cbd-row__title { font-size: 15px; font-weight: 600; }
.cbd-row__desc { font-size: 13px; color: var(--cbd-muted); margin-top: 3px; line-height: 1.45; text-wrap: pretty; }
.cbd-row__meta { flex: none; max-width: 200px; font-size: 13px; color: var(--cbd-muted); text-align: right; }
.cbd-row__value { flex: none; max-width: 160px; font-size: 13px; font-weight: 600; text-align: right; }
.cbd-row__chev { flex: none; color: var(--cbd-muted); }
.cbd-row__bar { height: 4px; max-width: 240px; margin-top: 8px; background: var(--cbd-wash); border-radius: 2px; overflow: hidden; }
.cbd-row__bar > span { display: block; height: 100%; background: var(--cbd-ink); }
.cbd-unread { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cbd-gold); }
.cbd-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cbd-wash); color: var(--cbd-ink); font-size: 13px; font-weight: 600; }
.cbd-avatar--ink { width: 32px; height: 32px; background: var(--cbd-ink); color: var(--cbd-white); border: 0; cursor: pointer; }
@media (max-width: 767px) {
    .cbd-row__meta--desk { display: none; }
}

/* Firm mark: 28px in rows, 20px in page heads. Colours per firm. */
.cbd-firm { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--cbd-r-xs); background: var(--cbd-ink); color: var(--cbd-white); font-size: 12px; font-weight: 700; line-height: 1; }
.cbd-firm--sm { width: 20px; height: 20px; border-radius: var(--cbd-r-mark); font-size: 11px; }
.cbd-firm--mckinsey { background: #051C2C; }
.cbd-firm--bcg { background: #197A56; }
.cbd-firm--bain { background: #CC0000; }
.cbd-firm--lek { background: #0B5A3A; }
.cbd-firm--newton { background: #C2410C; }
.cbd-firm--occ { background: #2A2F6B; }
.cbd-firm--ey { background: #FFE600; color: var(--cbd-ink); }
.cbd-firm--shl { background: #5A6B7B; }

/* ── TABLE ──────────────────────────────────────────────────────────────── */
.cbd-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--cbd-ink); font-size: 13px; }
.cbd-table th { padding: 10px 12px 10px 0; border-bottom: var(--cbd-hairline); font-weight: 600; color: var(--cbd-muted); text-align: left; white-space: nowrap; }
.cbd-table td { padding: 12px 12px 12px 0; border-bottom: var(--cbd-hairline); vertical-align: top; }
.cbd-table td:first-child { font-size: 15px; font-weight: 600; }
.cbd-table tbody tr:hover { background: var(--cbd-hover); }
.cbd-table .cbd-num, .cbd-table td.is-num, .cbd-table th.is-num { text-align: right; }
@media (max-width: 767px) {
    /* Rows stack into cards on rules. Each td needs data-label for the header. */
    .cbd-table--stack { border-top: var(--cbd-hairline); }
    .cbd-table--stack thead { display: none; }
    .cbd-table--stack tr { display: block; padding: 14px 0; border-bottom: var(--cbd-hairline); }
    .cbd-table--stack td { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border: 0; }
    .cbd-table--stack td:first-child { display: block; }
    .cbd-table--stack td[data-label]:not(:first-child)::before { content: attr(data-label); color: var(--cbd-muted); }
}

/* ── PROGRESS AND MASTERY ───────────────────────────────────────────────── */
.cbd-progress { height: 4px; background: var(--cbd-wash); border-radius: 2px; overflow: hidden; }
.cbd-progress > span,
.cbd-progress__fill { display: block; height: 100%; background: var(--cbd-ink); border-radius: 2px; }
.cbd-progress--rail { background: var(--cbd-line); }
/* Focus-shell header bar: 3px, gold fill, square ends. */
.cbd-progress--focus { height: 3px; border-radius: 0; }
.cbd-progress--focus > span,
.cbd-progress--focus .cbd-progress__fill { background: var(--cbd-gold); border-radius: 0; }

.cbd-mastery { display: grid; gap: 14px; max-width: 640px; }
.cbd-mastery__head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.cbd-mastery__count { font-weight: 600; }
.cbd-mastery__bar { height: 6px; margin-top: 6px; background: var(--cbd-wash); border-radius: 3px; overflow: hidden; }
.cbd-mastery__bar > span { display: block; height: 100%; background: var(--cbd-ink); border-radius: 3px; }
.cbd-mastery--results .cbd-mastery__head { font-size: 15px; }

/* ── LOCK ───────────────────────────────────────────────────────────────── */
.cbd-lock { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 400; color: var(--cbd-muted); white-space: nowrap; }
.cbd-lock svg { width: 11px; height: 11px; flex: none; }
.cbd-lock-preview { border-top: var(--cbd-hairline); margin-top: 16px; }
.cbd-lock-preview > * { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cbd-divider-faint); font-size: 15px; color: var(--cbd-muted); }
.cbd-lock-preview > *::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: var(--cbd-hairline); box-sizing: border-box; }

/* ── EMPTY STATE ────────────────────────────────────────────────────────── */
.cbd-empty { border: 1px dashed var(--cbd-line); border-radius: var(--cbd-r-card); padding: 40px 24px; text-align: left; }
.cbd-empty__title { font-size: 18px; font-weight: 600; }
.cbd-empty__desc { font-size: 15px; line-height: 1.5; color: var(--cbd-muted); margin: 6px 0 16px; max-width: 460px; }

/* ── ANSWER OPTIONS AND FEEDBACK ────────────────────────────────────────── */
.cbd-options { display: grid; gap: 8px; }
.cbd-option {
    display: flex; gap: 12px; align-items: flex-start; width: 100%; box-sizing: border-box;
    min-height: 48px; padding: 12px 14px;
    border: 1px solid var(--cbd-line); border-radius: var(--cbd-r);
    background: var(--cbd-white); color: var(--cbd-ink);
    font: 400 15px/1.45 var(--cbd-sans); text-align: left; cursor: pointer;
}
.cbd-option:hover { border-color: var(--cbd-ink); }
.cbd-option__key { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--cbd-line); border-radius: var(--cbd-r-xs); background: var(--cbd-white); font-size: 13px; font-weight: 700; }
.cbd-option__text { flex: 1; padding-top: 2px; }
.cbd-option__state { flex: none; padding-top: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
/* 2px selected border is drawn with padding compensation so text does not shift. */
.cbd-option.is-selected,
.cbd-option[aria-pressed="true"],
.cbd-option[aria-checked="true"] { border: 2px solid var(--cbd-ink); padding: 11px 13px; background: var(--cbd-wash); }
.cbd-option.is-correct { border: 1px solid var(--cbd-correct); padding: 12px 14px; background: var(--cbd-correct-bg); }
.cbd-option.is-correct .cbd-option__state { color: var(--cbd-correct); }
.cbd-option.is-wrong { border: 1px solid var(--cbd-wrong); padding: 12px 14px; background: var(--cbd-wrong-bg); }
.cbd-option.is-wrong .cbd-option__state { color: var(--cbd-wrong); }

.cbd-feedback { margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--cbd-ink); }
.cbd-feedback--correct { border-top-color: var(--cbd-correct); }
.cbd-feedback--wrong { border-top-color: var(--cbd-wrong); }
.cbd-feedback__head { display: flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 700; }
.cbd-feedback--correct .cbd-feedback__head { color: var(--cbd-correct); }
.cbd-feedback--wrong .cbd-feedback__head { color: var(--cbd-wrong); }
.cbd-feedback__head svg { width: 18px; height: 18px; flex: none; }
.cbd-feedback__p { font-size: 15px; line-height: 1.6; margin: 8px 0 0; }
.cbd-feedback__label { font-size: 13px; font-weight: 600; color: var(--cbd-muted); margin: 14px 0 6px; }
.cbd-feedback__work { display: grid; gap: 4px; background: var(--cbd-wash); border-radius: var(--cbd-r); padding: 12px 14px; font-size: 15px; line-height: 1.5; }

/* ── TOASTS ─────────────────────────────────────────────────────────────── */
.cbd-flash {
    position: fixed; z-index: 1000; left: 50%; bottom: 24px; transform: translateX(-50%);
    max-width: 90%; padding: 12px 16px; border-radius: var(--cbd-r-card);
    background: var(--cbd-ink); color: var(--cbd-white);
    font: 600 13px/1.4 var(--cbd-sans); box-shadow: var(--cbd-shadow-flash);
}
.cbd-toast {
    position: fixed; z-index: 1000; left: 24px; bottom: 24px; width: 400px; max-width: calc(100% - 24px); box-sizing: border-box;
    padding: 18px 20px; border-radius: var(--cbd-r-dialog);
    background: var(--cbd-ink); color: var(--cbd-white); box-shadow: var(--cbd-shadow-overlay);
}
.cbd-toast__eyebrow { font-size: 12px; font-weight: 700; color: var(--cbd-gold); margin-bottom: 4px; }
.cbd-toast__head { display: flex; justify-content: space-between; gap: 12px; }
.cbd-toast__title { font-size: 15px; font-weight: 700; }
.cbd-toast__close { width: 32px; height: 32px; flex: none; margin: -6px -8px 0 0; border: 0; background: transparent; color: var(--cbd-on-ink-muted); font-size: 18px; cursor: pointer; }
.cbd-toast__text { font-size: 13px; line-height: 1.55; color: var(--cbd-on-ink-muted); margin: 6px 0 14px; }
.cbd-toast .cbd-btn { font-size: 13px; padding: 0 16px; }
.cbd-toast .cbd-btn--on-ink { background: transparent; color: var(--cbd-white); border: 1px solid var(--cbd-ink-2); padding: 0 14px; }
@media (max-width: 767px) {
    .cbd-toast { left: 12px; right: 12px; bottom: 72px; width: auto; max-width: none; }
    .cbd-toast__close { width: 44px; height: 44px; margin: -12px -14px 0 0; }
}

/* ── MODAL, MOBILE SHEET, MENU, DRAWER ──────────────────────────────────── */
.cbd-scrim { position: fixed; inset: 0; z-index: 900; background: var(--cbd-scrim); }
.cbd-modal-wrap { position: fixed; inset: 0; z-index: 901; display: flex; align-items: center; justify-content: center; padding: 16px 0; pointer-events: none; }
.cbd-modal {
    pointer-events: auto; box-sizing: border-box;
    width: 520px; max-width: calc(100% - 32px); max-height: 90%; margin: 0 16px; overflow-y: auto;
    padding: 24px; border-radius: var(--cbd-r-dialog); background: var(--cbd-white); color: var(--cbd-ink);
}
.cbd-modal__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cbd-modal__step { font-size: 13px; color: var(--cbd-muted); margin-bottom: 4px; }
.cbd-modal__title { margin: 0; font-family: var(--cbd-serif); font-size: 24px; font-weight: 600; line-height: 1.2; }
.cbd-modal__title--lg { font-size: 26px; }
.cbd-modal__p { font-size: 15px; line-height: 1.6; color: var(--cbd-muted); margin: 10px 0 0; }
/* Navy header band: upgrade modal only. */
.cbd-modal--band { padding: 0; }
.cbd-modal__band { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 22px 24px; background: var(--cbd-ink); color: var(--cbd-white); }
.cbd-modal__band .cbd-modal__eyebrow { font-size: 13px; font-weight: 600; color: var(--cbd-gold); }
.cbd-modal__band .cbd-modal__title { font-size: 26px; margin-top: 4px; color: var(--cbd-white); }
.cbd-modal__band .cbd-close { width: 44px; height: 44px; background: transparent; color: var(--cbd-on-ink-muted); font-size: 20px; }
.cbd-modal__body { padding: 20px 24px 24px; }
.cbd-plan { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px; border: var(--cbd-hairline); border-radius: var(--cbd-r-card); }
.cbd-plan--featured { border: 2px solid var(--cbd-ink); padding: 15px; }
.cbd-plan__main { flex: 1 1 180px; min-width: 0; }
.cbd-plan__name { font-size: 15px; font-weight: 700; }
.cbd-plan__desc { font-size: 13px; color: var(--cbd-muted); }
.cbd-plan__price { font-size: 24px; font-weight: 700; }
.cbd-plan__was { font-size: 15px; color: var(--cbd-muted); }
.cbd-plan__tag { font-size: 12px; font-weight: 700; color: var(--cbd-gold-dark); margin-left: 6px; }
@media (max-width: 767px) {
    /* Mobile full-screen sheet */
    .cbd-modal-wrap { align-items: flex-end; padding-top: 0; }
    .cbd-modal,
    .cbd-sheet { width: 100%; max-width: none; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
}
.cbd-sheet { pointer-events: auto; box-sizing: border-box; overflow-y: auto; padding: 24px; background: var(--cbd-white); }

.cbd-menu {
    position: absolute; z-index: 901; top: 58px; right: 24px; width: 340px; box-sizing: border-box; overflow: hidden;
    border: var(--cbd-hairline); border-radius: var(--cbd-r-card);
    background: var(--cbd-white); box-shadow: var(--cbd-shadow-menu);
}
.cbd-menu__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: var(--cbd-hairline); }
.cbd-menu__title { font-size: 15px; font-weight: 600; }
.cbd-menu__item {
    display: flex; gap: 10px; align-items: flex-start; width: 100%; min-height: 48px; box-sizing: border-box;
    padding: 12px 16px; border: 0; border-bottom: 1px solid var(--cbd-divider-faint); background: none;
    color: var(--cbd-ink); font: 500 15px/1.4 var(--cbd-sans); text-align: left; text-decoration: none; cursor: pointer;
}
.cbd-menu__item:hover { background: var(--cbd-hover); }
.cbd-menu__item-desc { display: block; font-size: 13px; font-weight: 400; color: var(--cbd-muted); margin-top: 2px; }
.cbd-menu__foot { display: block; padding: 12px 16px; font-size: 13px; font-weight: 600; text-align: center; color: var(--cbd-ink); text-decoration: none; }
@media (max-width: 767px) {
    .cbd-menu { top: 52px; left: 8px; right: 8px; width: auto; }
}

.cbd-drawer { position: fixed; z-index: 901; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; display: flex; flex-direction: column; background: var(--cbd-white); border-left: var(--cbd-hairline); }
.cbd-drawer__head { flex: none; height: 60px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; border-bottom: var(--cbd-hairline); }
.cbd-drawer__title { flex: 1; font-size: 18px; font-weight: 600; }
@media (max-width: 767px) { .cbd-drawer { width: 100%; } }

/* ── SHELL: WORDMARK ────────────────────────────────────────────────────── */
.cbd-wordmark-hit { display: flex; align-items: center; min-height: 44px; color: var(--cbd-ink); text-decoration: none; cursor: pointer; }
.cbd-wordmark {
    display: inline-block;
    padding: 6px 10px;
    border: 1.5px solid var(--cbd-ink);
    border-radius: var(--cbd-r-mark);
    font: 700 13px/1 var(--cbd-sans);
    letter-spacing: 0.14em;
    color: var(--cbd-ink);
    white-space: nowrap;
    user-select: none;
}
@media (max-width: 767px) {
    .cbd-wordmark { padding: 5px 8px; font-size: 12px; }
}

/* ── SHELL: DESKTOP APP HEADER ──────────────────────────────────────────── */
.cbd-shell-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 28px;
    height: var(--cbd-h-header); padding: 0 24px; box-sizing: border-box;
    border-bottom: var(--cbd-hairline); background: var(--cbd-white); color: var(--cbd-ink);
    font-family: var(--cbd-sans);
}
.cbd-shell-nav { display: flex; gap: 4px; height: 100%; }
.cbd-shell-nav__item {
    display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px; box-sizing: border-box;
    border: 0; border-bottom: 2px solid transparent; background: none;
    font: 500 15px/1 var(--cbd-sans); color: var(--cbd-muted);
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.cbd-shell-nav__item:hover { color: var(--cbd-ink); }
.cbd-shell-nav__item[aria-current="page"],
.cbd-shell-nav__item.is-active { font-weight: 600; color: var(--cbd-ink); border-bottom-color: var(--cbd-gold); }
.cbd-shell-nav__soon { font-size: 12px; font-weight: 500; color: var(--cbd-muted); }
.cbd-shell-nav__new { font-size: 12px; font-weight: 700; color: var(--cbd-gold-dark); }
.cbd-shell-spacer { flex: 1; }
.cbd-shell-actions { display: flex; gap: 4px; align-items: center; }
.cbd-shell-actions .cbd-avatar--ink { margin-left: 6px; }
@media (max-width: 767px) {
    .cbd-shell-header { height: var(--cbd-h-header-m); gap: 4px; padding: 0 8px 0 16px; }
    .cbd-shell-nav { display: none; }
    .cbd-shell-actions { gap: 0; }
    .cbd-shell-actions .cbd-avatar--ink { margin-left: 0; width: 30px; height: 30px; }
}

/* Focus shell header: tests, drills, cases. */
.cbd-focus-header { position: sticky; top: 0; z-index: 100; background: var(--cbd-white); border-bottom: var(--cbd-hairline); }
.cbd-focus-header__row { display: flex; align-items: center; gap: 12px; height: var(--cbd-h-header-focus); padding: 0 16px; }
.cbd-focus-header__back { height: 40px; padding: 0 12px; font-size: 13px; }
.cbd-focus-header__title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbd-focus-header__sub { font-size: 13px; font-weight: 400; color: var(--cbd-muted); }
.cbd-focus-header__timer { min-width: 48px; font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* Public and auth headers */
.cbd-public-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 24px; height: var(--cbd-h-header-public); padding: 0 24px; border-bottom: var(--cbd-hairline); background: var(--cbd-white); }
.cbd-public-nav { display: flex; gap: 20px; }
.cbd-public-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--cbd-muted); text-decoration: none; }
.cbd-public-nav a:hover { color: var(--cbd-ink); }
.cbd-auth-header { display: flex; align-items: center; justify-content: space-between; height: var(--cbd-h-header-public); padding: 0 24px; border-bottom: var(--cbd-hairline); }
.cbd-auth-header__back { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--cbd-muted); text-decoration: none; }
@media (max-width: 767px) { .cbd-public-nav { display: none; } .cbd-public-header { padding: 0 16px; } .cbd-auth-header { padding: 0 16px; } }

.cbd-footer { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; padding: 32px 24px; background: var(--cbd-ink); color: var(--cbd-white); font-size: 13px; }
.cbd-footer__legal { max-width: 360px; line-height: 1.6; color: var(--cbd-on-ink-muted); }
.cbd-footer__links { display: flex; flex-wrap: wrap; gap: 16px; }
.cbd-footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cbd-white); text-decoration: none; }

/* Free-plan banner: the gold button is this screen's one accent. */
.cbd-free-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--cbd-ink); color: var(--cbd-white); font-size: 13px; }
.cbd-free-banner .cbd-btn { height: var(--cbd-h-chip); padding: 0 14px; font-size: 13px; }

/* ── SHELL: JOURNEY RAIL (desktop) AND STEP STRIP (mobile) ──────────────── */
.cbd-rail { width: var(--cbd-w-rail); flex: none; box-sizing: border-box; padding: 20px 12px; background: var(--cbd-wash); border-right: var(--cbd-hairline); overflow-y: auto; overscroll-behavior: contain; }
.cbd-rail__group { padding: 14px 8px 6px; font-size: 12px; font-weight: 600; color: var(--cbd-muted); }
.cbd-rail__step { display: flex; gap: 10px; padding: 9px 8px; border-radius: var(--cbd-r); color: var(--cbd-ink); text-decoration: none; cursor: pointer; }
.cbd-rail__step:hover,
.cbd-rail__step[aria-current="step"],
.cbd-rail__step.is-active { background: var(--cbd-white); }
.cbd-rail__num { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; border: var(--cbd-hairline); background: var(--cbd-white); font-size: 12px; font-weight: 700; }
.cbd-rail__step[aria-current="step"] .cbd-rail__num,
.cbd-rail__step.is-active .cbd-rail__num { border: 2px solid var(--cbd-gold); }
.cbd-rail__step.is-done .cbd-rail__num { border: 0; background: var(--cbd-ink); color: var(--cbd-white); }
.cbd-rail__title { display: block; font-size: 15px; font-weight: 600; }
.cbd-rail__meta { display: block; font-size: 13px; color: var(--cbd-muted); }
.cbd-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; border-bottom: var(--cbd-hairline); background: var(--cbd-wash); }
.cbd-strip__pill { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; box-sizing: border-box; border: 2px solid transparent; border-radius: var(--cbd-r); font-size: 13px; white-space: nowrap; color: var(--cbd-ink); text-decoration: none; }
.cbd-strip__pill[aria-current="step"],
.cbd-strip__pill.is-active { background: var(--cbd-white); border-color: var(--cbd-gold); font-weight: 600; }

/* ── SHELL: MOBILE BOTTOM TAB BAR ───────────────────────────────────────── */
.cbd-tabbar {
    position: sticky; bottom: 0; z-index: 100;
    display: none; grid-auto-flow: column; grid-auto-columns: 1fr;
    border-top: var(--cbd-hairline); background: var(--cbd-white);
    padding-bottom: env(safe-area-inset-bottom);
}
.cbd-tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: var(--cbd-h-tabbar); padding: 0 4px; border: 0; background: none;
    font: 600 12px/1.2 var(--cbd-sans); color: var(--cbd-muted); text-align: center; text-decoration: none; cursor: pointer;
}
.cbd-tabbar__item::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: transparent; }
.cbd-tabbar__item[aria-current="page"],
.cbd-tabbar__item.is-active { color: var(--cbd-ink); }
.cbd-tabbar__item[aria-current="page"]::before,
.cbd-tabbar__item.is-active::before { background: var(--cbd-gold); }
@media (max-width: 767px) { .cbd-tabbar { display: grid; } }

/* Mobile sticky CTA (focus shell) */
.cbd-sticky-cta { position: sticky; bottom: 0; z-index: 100; display: flex; gap: 8px; padding: 12px 16px 20px; background: var(--cbd-white); border-top: var(--cbd-hairline); }
.cbd-sticky-cta .cbd-btn { height: var(--cbd-h-tall); flex: 2; }
.cbd-sticky-cta .cbd-btn--secondary { flex: 1; }

/* Visually hidden, still announced */
.cbd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }