/*
 * meridian.css: the Meridian look for every LMS page.
 *
 * Meridian Design System v4.17 (Keith, 20 Oct 2026). Rules: DESIGN-v4.17.md,
 * tokens: meridian-tokens-v4.17.css, drawings: meridian-derrick.pen.
 * How to use it on a page: STYLE-GUIDE.md in the repo root.
 *
 * Loaded by every *.html page as the last stylesheet in <head>. Sections:
 *   1. Meridian tokens (--m-*), light and dark
 *   2. Legacy bridge: the old page variables (--bg, --accent, ...) point at the tokens
 *   3. Base type, focus and selection
 *   4. Legacy class bridge: common old class names get the Meridian shape
 *   5. App shell: top bar (rail + drawer are styled by js/nav.js)
 *   6. Shared components (m-*) for page lanes
 *   7. Dark-mode fixes for white text on the old accent
 *   8. Reduced motion
 *
 * Why some selectors start with ":root:not(#m)": with Turbo Drive a page's own
 * <style> is appended to <head> after this file on every visit, so source order
 * cannot be trusted. The :not(#m) adds ID-level specificity, so the bridge wins
 * over the pages' class and :root rules whatever the order. New m-* classes
 * have no legacy rival and use plain selectors.
 *
 * Page schemes (class on <body>):
 *   m-scheme-light  page has no dark design yet: stays light even when the
 *                   person picked dark (it was light-only before the redesign).
 *   m-scheme-dark   always-dark screen (big screen, TV).
 *   (none)          follows the theme toggle (html[data-theme]).
 */

/* ── 1. Meridian tokens ──────────────────────────────────────────────────── */

:root,
body.m-scheme-light {
  color-scheme: light;
  --m-background: #FDFCFC;
  --m-foreground: #000000;
  --m-muted: #6B655E;              /* secondary text, 5.2:1 on stone */
  --m-muted-2: #8A847C;            /* inactive icons and disabled only, NEVER text */
  --m-surface: #F5F3F1;            /* stone: tiles, chips, hover and selected rows, the one spotlight */
  --m-surface-foreground: #000000;
  --m-surface-secondary: #EBE8E4;  /* deep stone: tracks, pressed rows, icon tiles on the canvas */
  --m-surface-hover: #EFECE9;
  --m-overlay: #FFFFFF;            /* floating layers only, and the selected segment */
  --m-overlay-foreground: #000000;
  --m-accent: #000000;             /* the black pill: the only action colour */
  --m-accent-foreground: #FFFFFF;
  --m-accent-hover: #2B2B2B;
  --m-accent-soft: #0000000F;
  --m-default: #FFFFFF;            /* secondary button: white pill + field ring */
  --m-default-foreground: #000000;
  --m-default-hover: #F5F3F1;
  --m-link: #0A59D2;               /* links inside running text only */
  --m-focus: #0A59D2;              /* focus ring only */
  --m-success: #059669;
  --m-success-text: #047857;
  --m-success-soft: #05966922;
  --m-warning: #FF4704;            /* waiting or needs attention, never a reward */
  --m-warning-text: #B83200;
  --m-warning-soft: #FF470420;
  --m-danger: #F41A2F;
  --m-danger-text: #B5111F;
  --m-danger-soft: #F41A2F1A;
  --m-border: #00000013;           /* hairline ring */
  --m-border-strong: #0000001F;
  --m-separator: #EBE8E4;
  --m-field-background: #FFFFFF;
  --m-field-border: #0000001F;
  --m-scrim: rgba(0, 0, 0, .4);
  --m-shadow-menu: 0 12px 32px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06);
  --m-shadow-button: 0 1px 1px rgba(0, 0, 0, .04);
  /* The primary action. Follows a tenant's brand colour when one is set (section 2). */
  --m-brand: var(--m-accent);
  --m-brand-foreground: var(--m-accent-foreground);
  /* Solid destructive button: white text at AA (6.9:1). */
  --m-danger-solid: #B5111F;
  --m-danger-solid-foreground: #FFFFFF;
  /* Data-viz series: the cover palettes' mid tones (DESIGN §5). Charts, radar, legends only. */
  --m-viz-navy: #0A59D2;
  --m-viz-ember: #C4502E;
  --m-viz-lagoon: #1E7F86;
  --m-viz-sage: #5E8C6A;
  --m-viz-graphite: #3A3836;
  --m-viz-plum: #7A4B8F;
  --m-viz-saffron: #C98A1E;
  --m-viz-rose: #B8456E;
  --m-viz-indigo: #4B4FB8;
  --m-viz-olive: #6E7B32;
}

:root[data-theme="dark"],
body.m-scheme-dark {
  color-scheme: dark;
  --m-background: #121110;
  --m-foreground: #F5F3F1;
  --m-muted: #A39E97;
  --m-muted-2: #6B655E;
  --m-surface: #1C1A19;
  --m-surface-foreground: #F5F3F1;
  --m-surface-secondary: #2A2725;
  --m-surface-hover: #232120;
  --m-overlay: #24211F;
  --m-overlay-foreground: #F5F3F1;
  --m-accent: #F5F3F1;
  --m-accent-foreground: #000000;
  --m-accent-hover: #D9D4CE;
  --m-accent-soft: #FFFFFF14;
  --m-default: #1C1A19;
  --m-default-foreground: #F5F3F1;
  --m-default-hover: #2A2725;
  --m-link: #7FA6F0;
  --m-focus: #7FA6F0;
  --m-success: #34D399;
  --m-success-text: #34D399;
  --m-success-soft: #34D3991F;
  --m-warning: #FF7A45;
  --m-warning-text: #FF8A57;
  --m-warning-soft: #FF7A451F;
  --m-danger: #FF5A68;
  --m-danger-text: #FF6B78;
  --m-danger-soft: #FF5A681F;
  --m-border: #FFFFFF17;
  --m-border-strong: #FFFFFF24;
  --m-separator: #2A2725;
  --m-field-background: #1C1A19;
  --m-field-border: #FFFFFF24;
  --m-scrim: rgba(0, 0, 0, .6);
  --m-shadow-menu: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --m-shadow-button: none;
  --m-brand: var(--m-accent);
  --m-brand-foreground: var(--m-accent-foreground);
  --m-danger-solid: #FF5A68;          /* black text, 6.9:1 */
  --m-danger-solid-foreground: #000000;
  /* Data-viz series on the dark canvas: the palettes' light tones. */
  --m-viz-navy: #7FA6F0;
  --m-viz-ember: #F2A97E;
  --m-viz-lagoon: #9FD3CF;
  --m-viz-sage: #A8C49A;
  --m-viz-graphite: #A39E97;
  --m-viz-plum: #D8B9E3;
  --m-viz-saffron: #F2CF7E;
  --m-viz-rose: #F2B3C8;
  --m-viz-indigo: #B4B7F0;
  --m-viz-olive: #D5DCA4;
}

:root {
  --m-font-heading: "Geist", ui-sans-serif, system-ui, sans-serif;
  --m-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --m-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --m-radius-field: 12px;          /* field, select, menu item */
  --m-radius-inner: 16px;          /* inner tile, image, tab track, row hover */
  --m-radius-card: 24px;           /* card, panel, dialog */
  --m-radius-pill: 9999px;         /* button, chip, segment, tag */
  --m-rail-w: 256px;
  --m-topbar-h: 56px;
  --m-content-max: 1120px;
  --m-gutter: 40px;
  --m-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── 2. Legacy bridge ──────────────────────────────────────────────────────
 * Every page still declares its own palette in an inline <style>. These
 * declarations repoint the old names at the Meridian tokens, in both themes,
 * on <html> and again on <body> (so body.m-scheme-* re-resolves them). The
 * table with every old name is in STYLE-GUIDE.md. */

:root:not(#m),
:root:not(#m) > body {
  --bg: var(--m-background);
  --surface: var(--m-background);      /* old card fill: cards now sit on the canvas with a hairline */
  --panel: var(--m-background);
  --card: var(--m-background);
  --modal-bg: var(--m-overlay);
  --nav-bg: var(--m-background);
  --text: var(--m-foreground);
  --ink: var(--m-foreground);
  --muted: var(--m-muted);
  --muted2: var(--m-muted);
  --sep: var(--m-muted);
  --border: var(--m-border);
  --border2: var(--m-border-strong);
  --line: var(--m-border);
  --hover: var(--m-surface);
  --active-bg: var(--m-surface);
  --accent: var(--m-accent);            /* old navy action colour: now the black pill */
  --accent-hover: var(--m-accent-hover);
  --accent2: var(--m-accent-hover);     /* used as the hover of the old primary buttons */
  --navy: var(--m-accent);
  --navy2: var(--m-accent-hover);
  --tint: var(--m-link);                /* old blue links */
  --tint-soft: var(--m-surface);
  --green: var(--m-success-text);
  --red: var(--m-danger-text);
  --gold: var(--m-warning-text);
  --amber: var(--m-warning-text);
  --orange: var(--m-warning);
  --shadow: none;
  --shadow-sm: none;
  --nav-h: var(--m-topbar-h);
  /* Old Elitez brand marks: neutral now (the orange-navy-teal strip is retired below). */
  --brand-navy: var(--m-foreground);
  --brand-orange: var(--m-muted);
  --brand-teal: var(--m-muted);
  /* Data-viz colours: kept as colour, moved onto the palette series tokens. */
  --purple: var(--m-viz-plum);
  --silver: var(--m-viz-graphite);
  --bronze: var(--m-viz-ember);
  --i-lms: var(--m-viz-lagoon);         /* skills radar inputs (css/radar-block.css) */
  --i-rolefit: var(--m-viz-indigo);
  --i-review: var(--m-viz-ember);
  --i-supervisor: var(--m-viz-sage);
  --i-aspiration: var(--m-viz-rose);
  background-color: var(--m-background);
}

/* Light-only and always-dark pages keep their canvas behind the body too. */
:root:not(#m):has(> body.m-scheme-light) { background-color: #FDFCFC; }
:root:not(#m):has(> body.m-scheme-dark) { background-color: #121110; }

/* Always-dark screens: the old navy was the screen itself, not an action. */
:root:not(#m) > body.m-scheme-dark {
  --navy: var(--m-background);
  --navy2: var(--m-surface);
  --ink: #0d2742;
}

/* Tenant brand colour (js/tenant-brand-init.js and -apply.js set --accent and
 * --navy inline on <html>). Keep it: body inherits the tenant colour instead
 * of the bridge value, and the m- primary button follows it too. */
:root:not(#m)[style*="--accent"] > body {
  --accent: inherit;
  --navy: inherit;
}
:root:not(#m)[style*="--accent"],
:root:not(#m)[style*="--accent"] > body {
  --m-brand: var(--accent);
  --m-brand-foreground: #FFFFFF;
}

/* ── 3. Base ──────────────────────────────────────────────────────────────── */

html {
  font-synthesis: none;              /* only Inter 400/500 are loaded: old 600-800 render at 500, never faux bold */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root:not(#m) body {
  font-family: var(--m-font-body);
  color: var(--m-foreground);
  text-wrap: pretty;
}

:root:not(#m) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--m-font-heading);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
:root:not(#m) h1 { font-weight: 300; letter-spacing: -0.03em; }

/* Sentence case (DESIGN §3): the old CSS capitals show the authored text again.
 * Only the rules that set `uppercase` are listed (generated by
 * .planning/lms-ui-upgrade/foundation-tools/gen_uppercase.py), so
 * `capitalize` and `lowercase` keep working. Initials and code inputs keep their capitals. */
:root:not(#m) :is(
    #migration-notice-overlay .mn-top-label,
    .a-attn .b span,
    .acc > summary .tag,
    .action-chip,
    .ai-seg-eyebrow,
    .alert-title,
    .article .tag,
    .b-focus .fh,
    .b-pill .st,
    .badge,
    .badge-soft,
    .badge.scope,
    .band .tag,
    .bool-example-label,
    .brand .label,
    .brand-name,
    .card h3,
    .card-title,
    .cat h4,
    .cath,
    .cert-eyebrow,
    .chip,
    .ci-badge,
    .ci-tier,
    .code-box .lbl,
    .cohort-card h3,
    .coming-lab,
    .comp-card .row b,
    .comp-card .stance,
    .counter .l,
    .csv-preview th,
    .ct,
    .cta .txt .k,
    .drill-head .eb,
    .drill-sec h3,
    .drill-section-head,
    .drill-section-label,
    .drill-table-wrap th,
    .ds .l,
    .email-label,
    .events-table th,
    .example .ex-head,
    .eyebrow,
    .field label,
    .filter-bar label,
    .flag-label,
    .form-row label,
    .gate label,
    .hero .h-eyebrow,
    .hm-cell.col-label,
    .join-banner .lbl,
    .json-label,
    .kind-chip,
    .kpi .lbl,
    .kpi-label,
    .kv .k,
    .lb-title,
    .lvl,
    .mai-label,
    .meridian-intro-eli,
    .meridian-intro-name,
    .meridian-intro-sub,
    .meta-pill,
    .mi-eyebrow,
    .mi-lane,
    .mid-sec h4,
    .mod-nav-label,
    .mod-tag,
    .modal-eyebrow,
    .modal-refs-label,
    .modal-row label,
    .mode-pill,
    .mx-stage-h,
    .nav-logo .nav-wordmark,
    .nstage,
    .ob-body label,
    .onb-callout-eyebrow,
    .onb-eyebrow,
    .onb-title,
    .overdue-table th,
    .padmin-you-chip,
    .page-eyebrow,
    .pc-label,
    .pill,
    .pricing .badge,
    .probation-card-month,
    .probation-card-role,
    .ps-label,
    .ps-title,
    .pulse-card .pulse-eyebrow,
    .q-block .label,
    .qcard .qmeta,
    .qe-field > label,
    .qmx th,
    .quality-tier,
    .rb-ring span,
    .rb-trk-h,
    .rdx-eyebrow,
    .recipient-card .label,
    .reporter-block .label,
    .review-card h3,
    .row .lbl,
    .row label,
    .rt,
    .rule .verdict .label,
    .sb-meta .k,
    .sb-section-label,
    .scope,
    .score-table th,
    .section-h,
    .section-label,
    .seg .lab,
    .self-badge,
    .sh,
    .sh-card .sh-eyebrow,
    .side h4,
    .sidenav .sn-eyebrow,
    .signin-card label,
    .stage h2,
    .stage h4,
    .stat .l,
    .stat .lbl,
    .stat span,
    .stat-label,
    .stats-bar .label,
    .stats-kpi .lbl,
    .status-chip,
    .status-pill,
    .subhdr,
    .summary .stat-label,
    .tax-table th,
    .tier .badge,
    .tier .fund .k,
    .tier-card .tier-badge,
    .tier-card .tier-example b,
    .tier-strip-label,
    .topbar .label,
    .track-card .name .pill,
    .trial-cta .tc-badge,
    .v2-head .eyebrow,
    .vh .eyebrow,
    .welcome-eyebrow,
    .welcome-stat-label,
    h2,
    input#code,
    label,
    table.audit th,
    table.drafts th,
    table.dt th,
    table.issues th,
    table.mi-hm th,
    table.mi-ws th,
    table.roster th,
    table.team th,
    table.tenants th,
    th,
    thead th
  ):not(.av):not(.avatar):not([class*="avatar"]):not(.va-av):not(.sr-av):not([class^="m-"]):not([class*=" m-"]) {
  text-transform: none;
  letter-spacing: 0;                 /* the wide tracking was for the capitals */
}
:root:not(#m) table.gaps td::before {
  text-transform: none;
  letter-spacing: 0;
}
:root:not(#m) body :is([style*="text-transform:uppercase"], [style*="text-transform: uppercase"]):not(.av):not(.avatar):not([class*="avatar"]) {
  text-transform: none !important;
}

:root:not(#m) body :where(*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.page-title):not(.nav-wordmark):not([class^="m-"]):not([class*=" m-"]):not(:is(h1, h2, h3, h4, h5, h6, .page-title, :not(body):is([class^="m-"], [class*=" m-"])) *)) {
  letter-spacing: 0 !important;      /* body tracking is 0; the old wide tracking was for capitals */
}

:root:not(#m) code,
:root:not(#m) kbd,
:root:not(#m) samp,
:root:not(#m) pre {
  font-family: var(--m-font-mono);
  font-weight: 400;
}

:root:not(#m) :focus-visible {
  outline: 2px solid var(--m-focus);
  outline-offset: 2px;
}

::selection { background: var(--m-surface-secondary); color: var(--m-foreground); }

/* ── 4. Legacy class bridge ───────────────────────────────────────────────
 * Shape and type only. Colours come from the variable bridge, so a page that
 * uses .btn as a secondary keeps it secondary. Elements that also carry an
 * m- class are left alone. */

:root:not(#m) :is(.eyebrow, .page-eyebrow, .modal-eyebrow):not([class*=" m-"]):not([class^="m-"]) {
  font-family: var(--m-font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

:root:not(#m) :is(.page-title):not([class*=" m-"]):not([class^="m-"]) {
  font-family: var(--m-font-heading);
  font-size: clamp(28px, 1.4rem + 1vw, 36px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.03em;
}

:root:not(#m) :is(.page-sub, .lede):not([class*=" m-"]):not([class^="m-"]) {
  color: var(--m-muted);
}

:root:not(#m) :is(.btn, button.primary, a.primary, .primary-btn, button.ghost, a.ghost, .ghost-btn, .submit-btn, .mini-btn, .cta, .drill-back):not([class*=" m-"]):not([class^="m-"]) {
  border-radius: var(--m-radius-pill);
  font-weight: 500;
  letter-spacing: 0;
}

:root:not(#m) :is(.card, .panel, .kpi, .stat, .score-card):not([class*=" m-"]):not([class^="m-"]) {
  border-radius: var(--m-radius-card);
  box-shadow: none;
}

:root:not(#m) :is(.pill, .badge, .chip, .tag, .status-chip, .nav-badge, .live-pill, .domain-chip):not([class*=" m-"]):not([class^="m-"]) {
  border-radius: var(--m-radius-pill);
  letter-spacing: 0;
}

:root:not(#m) th:not([class*=" m-"]):not([class^="m-"]) {
  font-weight: 500;
  letter-spacing: 0;
  color: var(--m-muted);
}

:root:not(#m) :is(label, .lbl, .label, .stat-label, .kpi-label):not([class*=" m-"]):not([class^="m-"]) {
  letter-spacing: 0;
}

:root:not(#m) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):not([class*=" m-"]):not([class^="m-"]) {
  border-radius: var(--m-radius-field);
  border-color: var(--m-field-border);
  color: var(--m-foreground);
}
:root:not(#m) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--m-accent); }

:root:not(#m) :is(.modal, .va-modal, .drill):not([class*=" m-"]):not([class^="m-"]) {
  background: var(--m-overlay);
  color: var(--m-overlay-foreground);
  border-color: var(--m-border);
  border-radius: var(--m-radius-card);
  box-shadow: var(--m-shadow-menu);
}
:root:not(#m) :is(.modal h3, .modal-title, .va-modal__h h3) {
  font-family: var(--m-font-heading);
  font-weight: 400;
  letter-spacing: -0.01em;
}
:root:not(#m) :is(.modal-overlay, .ovl, .va-overlay, .drill-overlay):not([class*=" m-"]):not([class^="m-"]) {
  background-color: var(--m-scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root:not(#m) .toast:not([class*=" m-"]):not([class^="m-"]) {
  border-radius: var(--m-radius-field);
  font-weight: 500;
}

/* Bold text: the weight ceiling is 500 (DESIGN §3). Inter has no 600+ face
 * loaded, so this also makes the computed weight honest. */
:root:not(#m) :is(b, strong):not([class^="m-"]):not([class*=" m-"]) { font-weight: 500; }

/* Shared export control (js/lib/export-formats.js injects its own CSS at
 * 600): weight 500 and the Meridian pill shape. */
:root:not(#m) :is(.export-formats__label, .export-formats__opt, .export-formats__go, .export-formats__hint.is-error) { font-weight: 500; }
:root:not(#m) :is(.export-formats__group, .export-formats__go) { border-radius: var(--m-radius-pill); }
/* The format choice is the standard segmented control (stone track, white
 * selected pill) and Download is a secondary pill: the page keeps its one
 * black primary (G5). The radio dots stay, in ink. */
:root:not(#m) .export-formats__group { gap: 2px; padding: 4px; border: 0; background: var(--m-surface); }
:root:not(#m) .export-formats__opt {
  height: 32px; padding: 0 12px; border: 0; border-radius: var(--m-radius-pill);
  color: var(--m-muted); font-size: 13px; background: transparent;
}
:root:not(#m) .export-formats__opt:hover { background: var(--m-surface-hover); color: var(--m-foreground); }
:root:not(#m) .export-formats__opt:has(input:checked) {
  background: var(--m-overlay); color: var(--m-foreground); box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
:root:not(#m) .export-formats__opt input,
:root:not(#m) .export-formats__opt:has(input:checked) input { accent-color: var(--m-foreground); }
:root:not(#m) .export-formats__opt:focus-within { outline: 2px solid var(--m-focus); outline-offset: 0; }
:root:not(#m) .export-formats .export-formats__go {
  height: 36px; padding: 0 16px; font-size: 14px;
  background: var(--m-default); color: var(--m-default-foreground);
  border: 1px solid var(--m-field-border); box-shadow: var(--m-shadow-button);
}
:root:not(#m) .export-formats .export-formats__go:hover { background: var(--m-default-hover); }

:root:not(#m) .skel { background: var(--m-surface); }

/* The old orange-navy-teal brand strip under page eyebrows: retired (no
 * gradients outside covers, DESIGN §5). Its spacing stays. */
:root:not(#m) .brand-rule { background: none; height: 0; }

/* ── 5. App shell: top bar ────────────────────────────────────────────────
 * The top bar is each page's <nav class="topnav" id="lms-topnav">. The rail
 * (#lms-nav-panel), its drawer and the menu button are styled by js/nav.js. */

:root:not(#m) nav.topnav {
  background: var(--m-background);
  color: var(--m-foreground);
  border-bottom: 1px solid var(--m-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  box-sizing: border-box;
  min-height: var(--m-topbar-h);
  padding: 0 16px 0 24px;
}

/* Desktop with the rail: the logo sits over the rail, the hairline under the
 * top bar starts where the rail ends, and the rail's divider runs to the top
 * (Keith's App shell: rail 256, top bar 56). */
@media (min-width: 1000px) {
  :root:not(#m).lms-has-sidebar body:not([data-shell="focus"]):not([data-shell="bare"]) nav.topnav {
    border-bottom-color: transparent;
    background:
      linear-gradient(var(--m-border), var(--m-border)) var(--m-rail-w) 100% / calc(100% - var(--m-rail-w)) 1px no-repeat,
      linear-gradient(var(--m-border), var(--m-border)) calc(var(--m-rail-w) - 1px) 0 / 1px 100% no-repeat,
      var(--m-background);
  }
}

:root:not(#m) .nav-logo { gap: 10px; }
:root:not(#m) .nav-logo img { height: 24px; }
/* Dark canvas: the Elitez logo's navy "+" and small strapline vanish on #121110,
 * so the logo file sits on a small light plate (the light canvas colour). Only the
 * stock Elitez file: a tenant logo (another src) is left alone. */
:root:not(#m)[data-theme="dark"] body:not(.m-scheme-light) img[src$="elitez-logo.png"],
:root:not(#m) body.m-scheme-dark img[src$="elitez-logo.png"] {
  box-sizing: content-box;
  padding: 4px 8px;
  border-radius: 8px;
  background: #FDFCFC;
}
:root:not(#m) .nav-logo .nav-wordmark,
:root:not(#m) nav.topnav .nav-wordmark {
  font-family: var(--m-font-heading);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--m-foreground);
}

/* Title format: "Elitez Meridian" and an optional muted "· Section". */
:root:not(#m) .nav-wordmark .nav-section { color: var(--m-muted); }

:root:not(#m) nav.topnav .nav-right { gap: 8px; }
:root:not(#m) nav.topnav .nav-right > a,
:root:not(#m) nav.topnav #nav-signout {
  font-size: 14px;
  font-weight: 400;
  color: var(--m-foreground);
  padding: 8px 10px;
  border-radius: var(--m-radius-pill);
  text-decoration: none;
}
:root:not(#m) nav.topnav .nav-right > a:hover,
:root:not(#m) nav.topnav #nav-signout:hover { background: var(--m-default-hover); color: var(--m-foreground); text-decoration: none; }

/* Signed-in person: a secondary pill (the profile menu opens from it). */
:root:not(#m) nav.topnav .nav-badge,
:root:not(#m) #nav-user {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--m-field-border);
  border-radius: var(--m-radius-pill);
  background: var(--m-default);
  color: var(--m-default-foreground);
  box-shadow: var(--m-shadow-button);
  font-size: 14px;
  font-weight: 500;
}
:root:not(#m) #nav-user:empty { display: none; }

/* Theme toggle and other icon-only buttons in the top bar: 36px round, field ring. */
:root:not(#m) .theme-toggle,
:root:not(#m) nav.topnav .drawer-toggle {
  /* no display here: pages hide these (subcomp #theme-toggle, learn's desktop drawer button) */
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--m-field-border);
  border-radius: var(--m-radius-pill);
  background: var(--m-default);
  color: var(--m-foreground);
  box-shadow: var(--m-shadow-button);
}
:root:not(#m) .theme-toggle:hover,
:root:not(#m) nav.topnav .drawer-toggle:hover { background: var(--m-default-hover); }

/* Phone: keep the top bar on one row inside 390px. */
@media (max-width: 640px) {
  :root:not(#m) nav.topnav .nav-right { gap: 6px; }
  :root:not(#m) nav.topnav .nav-badge,
  :root:not(#m) #nav-user { max-width: 30vw; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 34px; }
  :root:not(#m) nav.topnav .nav-right > a,
  :root:not(#m) nav.topnav #nav-signout { padding: 8px 4px; }
}

/* ── 6. Shared components (m-*) ───────────────────────────────────────────
 * Snippets for each one are in STYLE-GUIDE.md. */

/* An m- part with the hidden attribute stays hidden, whatever its display. */
[hidden]:is([class^="m-"], [class*=" m-"]) { display: none !important; }

/* Page frame: 40px gutter at the top and sides, content at most 1120px. */
.m-page {
  width: 100%;
  max-width: calc(var(--m-content-max) + 2 * var(--m-gutter));
  margin: 0 auto;
  padding: var(--m-gutter) var(--m-gutter) 96px;
}
.m-stack { display: flex; flex-direction: column; gap: 72px; }
.m-grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }

/* Page header: eyebrow, title, lede, actions on the right. */
.m-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.m-page-header > div:first-child { min-width: 0; }
.m-eyebrow { font: 400 14px/1.4 var(--m-font-body); color: var(--m-muted); margin: 0 0 4px; }
.m-title {
  font: 300 36px/1.05 var(--m-font-heading);
  letter-spacing: -0.03em;
  color: var(--m-foreground);
  margin: 0;
  text-wrap: balance;
}
.m-lede { font: 400 16px/1.4 var(--m-font-body); color: var(--m-muted); margin: 8px 0 0; max-width: 64ch; text-wrap: pretty; }
.m-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Type roles. */
.m-display { font: 300 48px/1 var(--m-font-heading); letter-spacing: -0.03em; }
.m-h1 { font: 300 36px/1.05 var(--m-font-heading); letter-spacing: -0.03em; }
.m-h2 { font: 300 32px/1.1 var(--m-font-heading); letter-spacing: -0.03em; }
.m-h3 { font: 300 28px/1.2 var(--m-font-heading); letter-spacing: -0.02em; }
.m-h4 { font: 400 20px/1.3 var(--m-font-heading); letter-spacing: -0.01em; }
.m-h5 { font: 400 18px/1.35 var(--m-font-heading); }
.m-body-lg { font: 400 18px/1.4 var(--m-font-body); }
.m-body { font: 400 16px/1.4 var(--m-font-body); }
.m-small { font: 400 14px/1.4 var(--m-font-body); }
.m-caption { font: 400 11px/1.4 var(--m-font-body); color: var(--m-muted); }
.m-muted { color: var(--m-muted); }
.m-code { font: 400 13px/1.4 var(--m-font-mono); }
:is(.m-display, .m-h1, .m-h2, .m-h3, .m-h4, .m-h5) { margin: 0; color: var(--m-foreground); text-wrap: balance; }

/* Section header: H3-role title with a quiet "See all" on the right. */
.m-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.m-section-title { font: 400 24px/1.2 var(--m-font-heading); letter-spacing: -0.02em; color: var(--m-foreground); margin: 0; }
.m-see-all {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 15px/1.4 var(--m-font-body); color: var(--m-foreground); text-decoration: none; white-space: nowrap;
}
.m-see-all::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--m-ease);
}
.m-see-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.m-see-all:hover::after { transform: translateX(3px) rotate(45deg); }

/* Links: running-text links are blue; standalone links are black. */
.m-link { color: var(--m-link); text-decoration: underline; text-underline-offset: 2px; }
.m-quiet { color: var(--m-foreground); text-decoration: none; }
.m-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Buttons. lg 40px (default), md 36px, sm 32px; touch screens +4px. */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--m-radius-pill);
  font: 500 16px/1 var(--m-font-body); letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .15s var(--m-ease), background-color .15s, border-color .15s, color .15s;
  text-wrap: balance;
}
.m-btn:hover { transform: translateY(-1px); text-decoration: none; }
.m-btn:active { transform: scale(.97); }
.m-btn:disabled, .m-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.m-btn-md { height: 36px; font-size: 14px; }
.m-btn-sm { height: 32px; padding: 0 12px; font-size: 14px; }
.m-btn-block { display: flex; width: 100%; }
.m-btn-primary { background: var(--m-brand); color: var(--m-brand-foreground); border-color: var(--m-brand); }
.m-btn-primary:hover { background: var(--m-accent-hover); border-color: var(--m-accent-hover); color: var(--m-accent-foreground); }
.m-btn-secondary {
  background: var(--m-default); color: var(--m-default-foreground);
  border-color: var(--m-field-border); box-shadow: var(--m-shadow-button);
}
.m-btn-secondary:hover { background: var(--m-default-hover); }
.m-btn-tertiary { background: var(--m-surface); color: var(--m-foreground); }
.m-btn-tertiary:hover { background: var(--m-surface-secondary); }
.m-btn-quiet { background: transparent; color: var(--m-foreground); padding: 0 8px; }
.m-btn-quiet:hover { text-decoration: underline; text-underline-offset: 3px; transform: none; }
.m-btn-danger { background: var(--m-danger-solid); color: var(--m-danger-solid-foreground); border-color: var(--m-danger-solid); }
.m-btn-danger:hover { filter: brightness(.94); }
.m-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--m-field-border); border-radius: var(--m-radius-pill);
  background: var(--m-default); color: var(--m-foreground); cursor: pointer;
}
.m-icon-btn:hover { background: var(--m-default-hover); }
@media (pointer: coarse) {
  .m-btn { height: 44px; }
  .m-btn-md { height: 40px; }
  .m-btn-sm { height: 36px; }
  .m-icon-btn { width: 44px; height: 44px; }
}

/* Status chip: stone fill, 6px dot in the status colour, the word in ink. A neutral state has no dot. */
.m-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border-radius: var(--m-radius-pill);
  background: var(--m-surface); color: var(--m-foreground);
  font: 500 13px/1 var(--m-font-body); white-space: nowrap;
}
.m-chip::before { content: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.m-chip-done::before, .m-chip-waiting::before, .m-chip-error::before, .m-chip-info::before { content: ""; }
.m-chip-done::before { background: var(--m-success); }
.m-chip-waiting::before { background: var(--m-warning); }
.m-chip-error::before { background: var(--m-danger); }
.m-chip-info::before { background: var(--m-muted-2); }
/* Soft colour chips: only when the colour carries the meaning. */
.m-chip-soft-success { background: var(--m-success-soft); color: var(--m-success-text); }
.m-chip-soft-warning { background: var(--m-warning-soft); color: var(--m-warning-text); }
.m-chip-soft-danger { background: var(--m-danger-soft); color: var(--m-danger-text); }

/* Tag pills (course labels, levels). */
.m-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: var(--m-radius-pill);
  background: var(--m-surface); color: var(--m-foreground);
  font: 400 13px/1 var(--m-font-body); white-space: nowrap;
}
.m-tag-solid { background: var(--m-accent); color: var(--m-accent-foreground); }
.m-tag-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--m-border-strong); }

/* Count badge (black pill, 18px). */
.m-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--m-radius-pill);
  background: var(--m-accent); color: var(--m-accent-foreground);
  font: 500 11px/1 var(--m-font-body);
}

/* Spotlight / hero card: the ONE stone card per page. */
.m-spotlight {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: stretch;
  background: var(--m-surface); color: var(--m-surface-foreground);
  border-radius: var(--m-radius-card); padding: 32px;
}
.m-spotlight-eyebrow { font: 400 14px/1.4 var(--m-font-body); color: var(--m-muted); margin: 0 0 8px; }
.m-spotlight-title { font: 300 32px/1.1 var(--m-font-heading); letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.m-spotlight-meta { font: 400 15px/1.4 var(--m-font-body); color: var(--m-muted); margin: 8px 0 0; }
.m-spotlight-media { width: 268px; border-radius: var(--m-radius-inner); background: var(--m-surface-secondary); overflow: hidden; }
.m-spotlight-actions { display: flex; gap: 8px; align-items: center; margin-top: 24px; flex-wrap: wrap; }

/* Panel: a transparent card with the hairline, for an action or a decision. */
.m-card {
  background: transparent; color: inherit;
  border: 1px solid var(--m-border); border-radius: var(--m-radius-card);
  padding: 24px;
}
.m-card-title { font: 400 20px/1.3 var(--m-font-heading); letter-spacing: -0.01em; margin: 0; }
.m-card-sub { font: 400 14px/1.4 var(--m-font-body); color: var(--m-muted); margin: 4px 0 0; }

/* Inline note (Alert): stone by default. */
.m-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--m-surface); color: var(--m-foreground);
  border-radius: var(--m-radius-inner); padding: 16px;
  font: 400 14px/1.4 var(--m-font-body);
}
.m-note-error { background: var(--m-danger-soft); color: var(--m-danger-text); }
.m-note-success { background: var(--m-success-soft); color: var(--m-success-text); }

/* List: rows sit on the canvas with hairlines between them; no box, no card per row. */
.m-list { list-style: none; margin: 0; padding: 0; }
.m-row {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  min-height: 72px; padding: 12px 0;
  color: inherit; text-decoration: none;
}
.m-list > .m-row + .m-row,
.m-list > li + li > .m-row,
.m-list > li + li { border-top: 1px solid var(--m-separator); }
.m-list > li + li > .m-row { border-top: 0; }
a.m-row:hover, button.m-row:hover, .m-row.is-link:hover {
  background: var(--m-surface);
  border-radius: var(--m-radius-inner);
  margin: 0 -12px; padding-left: 12px; padding-right: 12px;
  text-decoration: none;
}
a.m-row:active, button.m-row:active { background: var(--m-surface-secondary); }
button.m-row { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.m-row-marker {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px; background: var(--m-surface-secondary); color: var(--m-foreground);
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 13px/1 var(--m-font-body); overflow: hidden;
}
.m-row:hover .m-row-marker { background: var(--m-overlay); }
.m-row-body { flex: 1; min-width: 0; }
.m-row-title { font: 400 16px/1.35 var(--m-font-body); color: var(--m-foreground); margin: 0; }
.m-row-meta { font: 400 14px/1.4 var(--m-font-body); color: var(--m-muted); margin: 2px 0 0; }
.m-row-end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.m-chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); color: var(--m-foreground); flex-shrink: 0; }

/* Label and value rows. */
.m-dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); margin: 0; }
.m-dl > dt, .m-dl > dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--m-separator); font: 400 14px/1.4 var(--m-font-body); }
.m-dl > dt { color: var(--m-muted); padding-right: 24px; }
.m-dl > dt:first-of-type, .m-dl > dt:first-of-type + dd { border-top: 0; }

/* Avatar: initials on stone. */
.m-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--m-surface); color: var(--m-foreground);
  font: 500 12px/1 var(--m-font-body);
}
.m-avatar-md { width: 40px; height: 40px; font-size: 13px; }

/* Table (HeroUI Table, variant secondary): no box, hairline rows. */
.m-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.m-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--m-font-body); color: var(--m-foreground); }
.m-table th {
  height: 40px; padding: 0 12px; text-align: left; vertical-align: middle;
  font: 500 12px/1.2 var(--m-font-body); color: var(--m-muted); letter-spacing: 0;
  border-bottom: 1px solid var(--m-separator); background: var(--m-background); white-space: nowrap;
}
.m-table td { height: 64px; padding: 8px 12px; vertical-align: middle; border-bottom: 1px solid var(--m-separator); }
.m-table tbody tr:last-child td { border-bottom: 0; }
.m-table tbody tr:hover td { background: var(--m-surface); }
.m-table .m-num, .m-table th.m-num { text-align: right; font-variant-numeric: tabular-nums; }
.m-table-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font: 400 14px/1.4 var(--m-font-body); color: var(--m-muted); }

/* Form field: label above (14/500), help under (muted 13), error replaces help. */
.m-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.m-label { font: 500 14px/1.4 var(--m-font-body); color: var(--m-foreground); }
.m-label .m-optional { font-weight: 400; color: var(--m-muted); }
.m-input, .m-select, .m-textarea {
  width: 100%; min-height: 40px; padding: 8px 12px;
  background: var(--m-field-background); color: var(--m-foreground);
  border: 1px solid var(--m-field-border); border-radius: var(--m-radius-field);
  font: 400 15px/1.4 var(--m-font-body);
}
.m-textarea { min-height: 96px; resize: vertical; }
.m-select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.m-input::placeholder, .m-textarea::placeholder { color: var(--m-muted); }
.m-input:focus-visible, .m-select:focus-visible, .m-textarea:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 0; border-color: transparent; }
.m-help { font: 400 13px/1.4 var(--m-font-body); color: var(--m-muted); }
.m-field.is-invalid .m-input, .m-field.is-invalid .m-select, .m-field.is-invalid .m-textarea { border-color: var(--m-danger); }
.m-error { font: 400 13px/1.4 var(--m-font-body); color: var(--m-danger-text); }
@media (pointer: coarse) { .m-input, .m-select { min-height: 44px; } }

/* Tabs. Segmented (primary): stone track, white selected pill. Underline (secondary): 2px ink. */
.m-segmented {
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--m-surface); border-radius: var(--m-radius-pill);
}
.m-segmented > :is(button, a) {
  height: 32px; padding: 0 14px; border: 0; border-radius: var(--m-radius-pill);
  background: transparent; color: var(--m-muted); cursor: pointer;
  font: 500 13px/1 var(--m-font-body); text-decoration: none;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.m-segmented > :is(.is-active, .active, .on, [aria-selected="true"], [aria-pressed="true"]) {
  background: var(--m-overlay); color: var(--m-foreground); box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.m-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--m-separator); overflow-x: auto; }
.m-tabs > :is(button, a) {
  position: relative; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: 400 15px/1 var(--m-font-body); color: var(--m-muted); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.m-tabs > :is(.is-active, .active, .on, [aria-selected="true"]) { color: var(--m-foreground); }
.m-tabs > :is(.is-active, .active, .on, [aria-selected="true"])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--m-foreground);
}

/* Stat: a band word or number with a caption; no box. */
.m-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.m-stat { min-width: 0; }
.m-stat-value { font: 300 32px/1.1 var(--m-font-heading); letter-spacing: -0.03em; color: var(--m-foreground); font-variant-numeric: tabular-nums; }
.m-stat-label { font: 400 14px/1.4 var(--m-font-body); color: var(--m-muted); margin-top: 4px; }

/* Progress: green fill on a deep-stone track. */
.m-progress { height: 6px; border-radius: var(--m-radius-pill); background: var(--m-surface-secondary); overflow: hidden; }
.m-progress > span { display: block; height: 100%; background: var(--m-success); border-radius: inherit; }

/* Empty state: icon, one line (H4), one sentence, one way out. */
.m-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 8px; min-height: 240px; padding: 40px 24px;
  border: 1px solid var(--m-border); border-radius: var(--m-radius-card);
}
.m-empty-title { font: 400 20px/1.3 var(--m-font-heading); letter-spacing: -0.01em; color: var(--m-foreground); margin: 0; }
.m-empty-text { font: 400 14px/1.4 var(--m-font-body); color: var(--m-muted); margin: 0; max-width: 44ch; }
.m-empty .m-btn { margin-top: 8px; }

/* Skeleton: never a spinner for page content. */
.m-skeleton { background: var(--m-surface); border-radius: var(--m-radius-field); animation: m-pulse 1.4s ease-in-out infinite; }
@keyframes m-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Dialog: white floating layer, 24px corners, 40% black scrim. */
.m-scrim { position: fixed; inset: 0; z-index: 2000; background: var(--m-scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.m-dialog {
  width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--m-overlay); color: var(--m-overlay-foreground);
  border-radius: var(--m-radius-card); box-shadow: var(--m-shadow-menu);
  padding: 24px;
}
.m-dialog-title { font: 400 22px/1.25 var(--m-font-heading); letter-spacing: -0.01em; margin: 0 0 8px; }
.m-dialog-text { font: 400 14px/1.45 var(--m-font-body); color: var(--m-muted); margin: 0; }
.m-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* Menu / popover surface. */
.m-menu {
  background: var(--m-overlay); color: var(--m-overlay-foreground);
  border: 1px solid var(--m-border); border-radius: var(--m-radius-field);
  box-shadow: var(--m-shadow-menu); padding: 6px;
}
.m-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left;
  font: 400 14px/1.3 var(--m-font-body); text-decoration: none; cursor: pointer;
}
.m-menu-item:hover { background: var(--m-surface); }
.m-menu-sep { height: 1px; background: var(--m-separator); margin: 6px 0; border: 0; }

/* Keycap. */
.m-kbd {
  display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 6px;
  background: var(--m-overlay); box-shadow: inset 0 0 0 1px var(--m-border);
  font: 500 11px/1 var(--m-font-body); color: var(--m-muted);
}

/* Separator. */
.m-sep { height: 1px; border: 0; background: var(--m-separator); margin: 0; }

/* Entry motion: rise. */
.m-rise { animation: m-rise .36s var(--m-ease) both; }
@keyframes m-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 759px) {
  .m-page { padding: 24px 16px 80px; }
  .m-stack { gap: 48px; }
  .m-grid-main { grid-template-columns: minmax(0, 1fr); }
  .m-page-header { flex-direction: column; align-items: flex-start; }
  .m-title, .m-h1 { font-size: 28px; }
  .m-spotlight { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .m-spotlight-media { width: 100%; aspect-ratio: 1 / 1; }
  .m-spotlight-title { font-size: 26px; }
  .m-row { align-items: flex-start; }
  .m-row-end { flex-direction: column; align-items: flex-end; }
}

/* ── 7. Dark mode: white text on the old accent ───────────────────────────
 * In dark mode the old --accent/--navy become the light Meridian action
 * colour, so an old button or band that paints WHITE text on them would
 * vanish. The fix never touches text colour: inside those elements only, the
 * old accent is re-pointed to deep stone (and its hover to a lighter stone),
 * so a background that still uses var(--accent) turns dark under its own white
 * text, and an element whose background no longer uses the accent (restyled by
 * a page lane, or a different element sharing the class name) is unaffected.
 * m- parts are excluded. The selector list is generated from the pages by
 * .planning/lms-ui-upgrade/foundation-tools/gen_dark_fix.py (rules that set an
 * accent background with white text; the :not() parts exclude variants that
 * swap the background). .btn and .filter.active mean "secondary" on most
 * pages, so they are fixed only on pages that mark <body> with m-solid-btn /
 * m-solid-filter. A tenant brand colour (inline --accent on <html>) keeps its
 * colour. Checked with foundation-tools/darkfix-probe.mjs. */

:is(:root[data-theme="dark"]:not([style*="--accent"]) body:not(.m-scheme-light), :root:not([style*="--accent"]) body.m-scheme-dark)
  :is(
      .actions a.primary:not(.btn):not(.modal-btn):not(.ob-btn),
      .av,
      .band:not(.Developing):not(.Emerging):not(.Exceptional):not(.Solid):not(.Strong):not(.none),
      body.m-solid-btn .btn:not(.danger):not(.danger-o):not(.ghost):not(.go):not(.primary),
      .btn.primary,
      .bulk-bar,
      .chip.is-active,
      .chipbtn.on,
      .cta:not(.secondary),
      .depth-cta,
      .drill-back,
      .empty-actions a.primary:not(.btn):not(.modal-btn):not(.ob-btn),
      body.m-solid-filter .filter.active:not(.filter-subpar),
      .filter.active .count,
      .guided-pathway-banner,
      .idhero .av,
      .legend .step .n,
      .lookup button,
      .mini-btn:not(.danger):not(.ghost),
      .onb-callout-cta,
      .opt.picked .opt-letter,
      .points-card .pts-redeem,
      .primary:not(.btn):not(.modal-btn):not(.ob-btn),
      .primary-btn,
      .pulse-card .pulse-btn,
      .rdx-btn,
      .seg button.on:not(.toggle),
      .sh-card:not(.calm),
      .sh-card.calm .sh-cta:not(.ghost),
      .sh-cta:hover:not(.ghost),
      .sidenav nav a.active:not(.filter):not(.filter-subpar):not(.jr-tab):not(.method-tab):not(.pill):not(.probation-card):not(.probation-tab):not(.quality-tab):not(.role-btn):not(.sr-item):not(.tree-mod):not(.welcome-view-tab),
      .sr-av,
      .stats-bar .toggle button.active:not(.filter):not(.filter-subpar):not(.jr-tab):not(.method-tab):not(.pill):not(.probation-card):not(.probation-tab):not(.quality-tab):not(.role-btn):not(.sr-item):not(.tree-mod):not(.welcome-view-tab),
      .status-filter button.active:not(.filter):not(.filter-subpar):not(.jr-tab):not(.method-tab):not(.pill):not(.probation-card):not(.probation-tab):not(.quality-tab):not(.role-btn):not(.sr-item):not(.tree-mod):not(.welcome-view-tab),
      .submit-btn,
      .tctx .badge:not(.archived):not(.bad):not(.draft):not(.empty):not(.obsolete):not(.ok):not(.platform):not(.published):not(.scope):not(.scope-bu):not(.scope-company):not(.scope-role):not(.tenant):not(.tsc):not(.x-high):not(.x-lim):not(.x-mod),
      .team .av,
      .tier.cur .badge:not(.archived):not(.bad):not(.draft):not(.empty):not(.obsolete):not(.ok):not(.platform):not(.published):not(.scope):not(.scope-bu):not(.scope-company):not(.scope-role):not(.tenant):not(.tsc):not(.x-high):not(.x-lim):not(.x-mod),
      .toast,
      .trial-cta .tc-badge,
      .user-pick-avatar,
      .v2-toggle .on:not(.toggle),
      .v2-toggle button.on:not(.toggle),
      .viewas .exit,
      .whead .av,
      button.primary:not(.btn):not(.modal-btn):not(.ob-btn),
      .c-intent button,
      .sh-card:not(.calm),
      .bulk-bar,
      .guided-pathway-banner
  ):not([class^="m-"]):not([class*=" m-"]),
/* Inline styles in renderers ("background:var(--accent);color:#fff"). Styles set
 * from script (el.style.cssText) are serialised by the browser as
 * "color: rgb(255, 255, 255)", so those forms are matched too. */
:is(:root[data-theme="dark"]:not([style*="--accent"]) body:not(.m-scheme-light), :root:not([style*="--accent"]) body.m-scheme-dark)
  :is([style*="background:var(--accent"], [style*="background: var(--accent"], [style*="background:var(--navy"], [style*="background: var(--navy"]):is([style*="color:#fff"], [style*="color: #fff"], [style*="color:white"], [style*="color: white"], [style*="color: rgb(255, 255, 255)"], [style*="color:rgb(255, 255, 255)"], [style*="color: rgb(255,255,255)"], [style*="color:rgb(255,255,255)"]):not([class^="m-"]):not([class*=" m-"]) {
  --accent: var(--m-surface-secondary);
  --navy: var(--m-surface-secondary);
  --accent2: var(--m-muted-2);
  --accent-hover: var(--m-muted-2);
  --navy2: var(--m-muted-2);
}

/* Page-specific bridge fixes. Page lanes: drop yours when the page is on m- parts.
 * home: the "Start here" eyebrow sits on the dark band in both themes.
 * tv-hrlf: the white call-to-action card on the dark screen needs the
 * light-theme orange for its words (the dark one is 2.6:1 on white). */
:root:not(#m) .sh-card:not(.calm) .sh-eyebrow { color: rgba(255, 255, 255, .72); }
:root:not(#m) body.m-scheme-dark .cta { --orange: #B83200; }

/* ── 8. Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .m-rise, .m-skeleton { animation: none; }
  .m-btn, .m-see-all::after { transition: none; }
  .m-btn:hover, .m-btn:active { transform: none; }
}