/* Variable axis, not a static cut: the interface sets weights off the 100-step
   grid (550, 620, 740, 780, 850). Those only resolve against the wght axis. */
@font-face {
  font-family: "Nova Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Geist-Variable.dfa48d5a8537.woff2") format("woff2");
}
@font-face {
  font-family: "Nova Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/Newsreader-Variable.1df447bd829d.woff2") format("woff2");
}
@font-face {
  font-family: "Nova Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/Newsreader-Italic-Variable.99f1c881bc19.woff2") format("woff2");
}
:root {
  /* Nova Editorial reference layer. Literal design values live here only.
     These are the landing page's cream-and-sage palette: the marketing surface
     and the product read as one brand. */
  --nova-ref-light-canvas: #f8f5e9;
  --nova-ref-light-canvas-alternate: #eee9dc;
  --nova-ref-light-paper: #fffdf7;
  --nova-ref-light-paper-strong: #ffffff;
  --nova-ref-light-paper-inset: #f1ece0;
  --nova-ref-light-ink: #20231f;
  /* A shade under the landing's muted ink: the product puts small muted type on
     inset and accent-soft panels, where the landing value lands nearer 4.2:1. */
  --nova-ref-light-ink-muted: #656962;
  --nova-ref-light-ink-faint: #94978f;
  --nova-ref-light-line-quiet: #d9d3c5;
  --nova-ref-light-line-control: #858880;
  --nova-ref-light-line-strong: #20231f;
  --nova-ref-dark-canvas: #202a25;
  --nova-ref-dark-paper: #25312d;
  --nova-ref-dark-paper-strong: #2d3a35;
  --nova-ref-dark-paper-inset: #1b241f;
  --nova-ref-dark-ink: #f8f5e9;
  --nova-ref-dark-ink-muted: #bcc2b6;
  --nova-ref-dark-ink-faint: #8d958b;
  --nova-ref-dark-line-quiet: #3d4c45;
  --nova-ref-dark-line-control: #74847b;
  --nova-ref-dark-line-strong: #f8f5e9;
  --nova-ref-sage: #b7caaf;
  --nova-ref-sage-hover: #a7bd9e;
  --nova-ref-sage-ink: #435840;
  --nova-ref-sage-soft: #e5ece1;
  --nova-ref-sage-soft-dark: #2f3f31;
  --nova-ref-sage-deep: #25312d;
  --nova-ref-light-attention-mark: #f3e8ac;
  /* Highlighter marks stay a three-colour set (yellow / blue / green) because
     the stored highlight choices are named for them; only the green moves onto
     the sage. */
  --nova-ref-light-attention-mark-alternate: #dce8ef;
  --nova-ref-light-attention-mark-calm: #e5ece1;
  --nova-ref-dark-attention-mark: #554b26;
  --nova-ref-dark-attention-mark-alternate: #2b404b;
  --nova-ref-dark-attention-mark-calm: #33452f;

  /* Compatibility palette references. These preserve the existing rendered
     values while keeping every literal inside the private reference layer. */
  --nova-ref-light-paper-soft: #f2eee2;
  --nova-ref-light-paper-subtle: #e6e0d0;
  --nova-ref-light-line-muted: #c7c0ad;
  --nova-ref-light-ink-supporting: #3b3f39;
  --nova-ref-dark-canvas-alternate: #1a231e;
  --nova-ref-dark-paper-code: #202b26;
  --nova-ref-dark-paper-deep: #131a16;
  --nova-ref-dark-ink-supporting: #d5d9cc;
  --nova-ref-dark-ink-subtle: #a0a798;
  --nova-ref-light-status-info: #4f6470;
  --nova-ref-light-status-success: #5f7a56;
  --nova-ref-light-status-warning: #9c7a3d;
  --nova-ref-light-status-danger: #9b5a4f;
  --nova-ref-light-status-featured: #665a73;
  --nova-ref-light-status-warning-emphasis: #96623f;
  --nova-ref-light-status-danger-emphasis: #914b50;
  --nova-ref-dark-status-info: #85a8d6;
  --nova-ref-dark-status-success: #95c477;
  --nova-ref-dark-status-warning: #d89c47;
  --nova-ref-dark-status-danger: #dc776e;
  --nova-ref-dark-status-featured: #8f7cc1;
  --nova-ref-dark-status-warning-emphasis: #df9d72;
  --nova-ref-dark-status-danger-emphasis: #df9096;

  /* User-selectable palette references. The three supplied colours are the
     source of truth; every additional role in the variant blocks is derived. */
  --nova-ref-theme-forest-accent: #3d755d;
  --nova-ref-theme-forest-background: #f5f3ed;
  --nova-ref-theme-forest-foreground: #2f312d;
  --nova-ref-theme-olive-accent: #99947c;
  --nova-ref-theme-olive-background: #272822;
  --nova-ref-theme-olive-foreground: #f8f8f2;
  --nova-ref-theme-coral-accent: #cc7d5e;
  --nova-ref-theme-coral-light: #f9f9f7;
  --nova-ref-theme-coral-dark: #2d2d2b;
  --nova-ref-theme-cobalt-accent: #0169cc;
  --nova-ref-theme-cobalt-light-background: #ffffff;
  --nova-ref-theme-cobalt-light-foreground: #0d0d0d;
  --nova-ref-theme-cobalt-dark-background: #111111;
  --nova-ref-theme-cobalt-dark-foreground: #fcfcfc;

  /* Bootstrap's alpha-colour API requires comma-separated channels rather than a
     complete colour. They remain private literals and its aliases below only
     consume these references. */
  --nova-ref-light-canvas-alternate-rgb: 238, 233, 220;
  --nova-ref-light-action-rgb: 90, 111, 85;
  --nova-ref-light-ink-secondary-rgb: 109, 113, 106;
  --nova-ref-light-status-success-rgb: 95, 122, 86;
  --nova-ref-light-status-info-rgb: 79, 100, 112;
  --nova-ref-light-status-warning-rgb: 156, 122, 61;
  --nova-ref-light-status-danger-rgb: 155, 90, 79;
  --nova-ref-light-paper-soft-rgb: 242, 238, 226;
  --nova-ref-light-ink-rgb: 32, 35, 31;
  --nova-ref-light-paper-rgb: 255, 253, 247;
  --nova-ref-sage-deep-rgb: 37, 49, 45;
  --nova-ref-light-canvas-rgb: 248, 245, 233;
  --nova-ref-light-paper-subtle-rgb: 230, 224, 208;
  --nova-ref-sage-rgb: 183, 202, 175;
  --nova-ref-dark-ink-subtle-rgb: 160, 167, 152;
  --nova-ref-dark-status-success-rgb: 149, 196, 119;
  --nova-ref-dark-status-info-rgb: 133, 168, 214;
  --nova-ref-dark-status-warning-rgb: 216, 156, 71;
  --nova-ref-dark-status-danger-rgb: 220, 119, 110;
  --nova-ref-dark-paper-rgb: 37, 49, 45;
  --nova-ref-dark-paper-deep-rgb: 19, 26, 22;
  --nova-ref-dark-ink-rgb: 248, 245, 233;
  --nova-ref-dark-canvas-rgb: 32, 42, 37;
  --nova-ref-dark-paper-strong-rgb: 45, 58, 53;
  --nova-ref-dark-link-hover-rgb: 201, 216, 194;
  --nova-ref-theme-forest-accent-rgb: 61, 117, 93;
  --nova-ref-theme-forest-background-rgb: 245, 243, 237;
  --nova-ref-theme-forest-foreground-rgb: 47, 49, 45;
  --nova-ref-theme-olive-accent-rgb: 153, 148, 124;
  --nova-ref-theme-olive-background-rgb: 39, 40, 34;
  --nova-ref-theme-olive-foreground-rgb: 248, 248, 242;
  --nova-ref-theme-coral-accent-rgb: 204, 125, 94;
  --nova-ref-theme-coral-light-rgb: 249, 249, 247;
  --nova-ref-theme-coral-dark-rgb: 45, 45, 43;
  --nova-ref-theme-cobalt-accent-rgb: 1, 105, 204;
  --nova-ref-theme-cobalt-light-background-rgb: 255, 255, 255;
  --nova-ref-theme-cobalt-light-foreground-rgb: 13, 13, 13;
  --nova-ref-theme-cobalt-dark-background-rgb: 17, 17, 17;
  --nova-ref-theme-cobalt-dark-foreground-rgb: 252, 252, 252;

  /* Legacy palette aliases are compatibility consumers, never literal owners. */
  --palette-light-bg-000: var(--nova-ref-light-paper);
  --palette-light-bg-maybe: var(--nova-ref-light-canvas-alternate);
  --palette-light-bg-maybe-rgb: var(--nova-ref-light-canvas-alternate-rgb);
  --palette-light-bg-100: var(--nova-ref-light-paper-soft);
  --palette-light-bg-200: var(--nova-ref-light-paper-subtle);
  --palette-light-bg-300: var(--nova-ref-light-line-quiet);
  --palette-light-bg-400: var(--nova-ref-light-line-muted);
  --palette-light-text-000: var(--nova-ref-light-ink);
  --palette-light-text-200: var(--nova-ref-light-ink-supporting);
  --palette-light-text-400: var(--nova-ref-light-ink-muted);
  --palette-dark-bg-000: var(--nova-ref-dark-canvas-alternate);
  --palette-dark-bg-100: var(--nova-ref-dark-paper);
  --palette-dark-bg-200: var(--nova-ref-dark-paper-code);
  --palette-dark-bg-300: var(--nova-ref-dark-paper-strong);
  --palette-dark-bg-400: var(--nova-ref-dark-paper-deep);
  --palette-dark-text-000: var(--nova-ref-dark-ink);
  --palette-dark-text-200: var(--nova-ref-dark-ink-supporting);
  --palette-dark-text-400: var(--nova-ref-dark-ink-subtle);

  /* Nova Editorial public semantic layer. */
  --nova-color-canvas: var(--nova-ref-light-canvas);
  --nova-color-surface-paper: var(--nova-ref-light-paper);
  --nova-color-surface-raised: var(--nova-ref-light-paper-strong);
  --nova-color-surface-inset: var(--nova-ref-light-paper-inset);
  --nova-color-ink: var(--nova-ref-light-ink);
  --nova-color-ink-muted: var(--nova-ref-light-ink-muted);
  --nova-color-ink-faint: var(--nova-ref-light-ink-faint);
  /* Foreground-derived depth reads correctly on paper but becomes a pale halo
     when the foreground flips in dark themes. These private sources preserve
     the light appearance while allowing every dark preset to ground depth and
     overlays in its own canvas instead. */
  --nova-shadow-source: var(--nova-color-ink);
  --nova-accent-shadow-source: var(--nova-color-accent);
  --nova-overlay-source: var(--nova-color-ink);
  --nova-color-overlay-scrim: color-mix(in srgb, var(--nova-overlay-source) 38%, transparent);
  --nova-color-border-quiet: var(--nova-ref-light-line-quiet);
  --nova-color-border-control: var(--nova-ref-light-line-control);
  --nova-color-border-strong: var(--nova-ref-light-line-strong);
  --nova-color-accent: var(--nova-ref-sage);
  --nova-color-accent-hover: var(--nova-ref-sage-hover);
  --nova-color-accent-ink: var(--nova-ref-sage-ink);
  --nova-color-accent-soft: var(--nova-ref-sage-soft);
  --nova-color-on-accent: var(--nova-ref-light-ink);
  /* The mascot is an identity asset, so its paper and ink do not inherit the
     active theme accent or flip between light and dark appearances. */
  --nova-color-mascot-paper: var(--nova-ref-sage);
  --nova-color-mascot-ink: var(--nova-ref-sage-deep);
  --nova-color-attention-mark: var(--nova-ref-light-attention-mark);
  --nova-color-attention-mark-alternate: var(--nova-ref-light-attention-mark-alternate);
  --nova-color-attention-mark-calm: var(--nova-ref-light-attention-mark-calm);
  /* Light rails stay inside their theme: a restrained step below the canvas,
     with the theme foreground retained for navigation ink. Variant canvas and
     ink overrides therefore steer the rail without inventing another palette. */
  --nova-color-rail: color-mix(in srgb, var(--nova-color-canvas) 96%, var(--nova-color-ink));
  --nova-color-rail-ink: var(--nova-color-ink);
  --nova-color-rail-muted: color-mix(in srgb, var(--nova-color-rail-ink) 70%, transparent);
  --nova-color-theme-preview-light: var(--nova-ref-light-canvas);
  --nova-color-theme-preview-light-alternate: var(--nova-ref-light-canvas-alternate);
  --nova-color-theme-preview-dark: var(--nova-ref-dark-canvas);
  --nova-color-theme-preview-forest-accent: var(--nova-ref-theme-forest-accent);
  --nova-color-theme-preview-forest-background: var(--nova-ref-theme-forest-background);
  --nova-color-theme-preview-forest-foreground: var(--nova-ref-theme-forest-foreground);
  --nova-color-theme-preview-olive-accent: var(--nova-ref-theme-olive-accent);
  --nova-color-theme-preview-olive-background: var(--nova-ref-theme-olive-background);
  --nova-color-theme-preview-olive-foreground: var(--nova-ref-theme-olive-foreground);
  --nova-color-theme-preview-coral-accent: var(--nova-ref-theme-coral-accent);
  --nova-color-theme-preview-coral-light-background: var(--nova-ref-theme-coral-light);
  --nova-color-theme-preview-coral-light-foreground: var(--nova-ref-theme-coral-dark);
  --nova-color-theme-preview-coral-dark-background: var(--nova-ref-theme-coral-dark);
  --nova-color-theme-preview-coral-dark-foreground: var(--nova-ref-theme-coral-light);
  --nova-color-theme-preview-cobalt-accent: var(--nova-ref-theme-cobalt-accent);
  --nova-color-theme-preview-cobalt-light-background: var(--nova-ref-theme-cobalt-light-background);
  --nova-color-theme-preview-cobalt-light-foreground: var(--nova-ref-theme-cobalt-light-foreground);
  --nova-color-theme-preview-cobalt-dark-background: var(--nova-ref-theme-cobalt-dark-background);
  --nova-color-theme-preview-cobalt-dark-foreground: var(--nova-ref-theme-cobalt-dark-foreground);
  --nova-color-theme-preview-border: var(--nova-ref-light-ink);
  --nova-color-theme-preview-inverse-border: var(--nova-ref-dark-ink);
  --nova-color-status-info: var(--nova-ref-light-status-info);
  --nova-color-status-info-soft: color-mix(in srgb, var(--nova-color-status-info) 10%, var(--nova-color-surface-paper));
  --nova-color-status-info-border: color-mix(in srgb, var(--nova-color-status-info) 34%, var(--nova-color-border-quiet));
  --nova-color-status-info-ink: color-mix(in srgb, var(--nova-color-status-info) 88%, var(--nova-color-ink));
  --nova-color-status-success: var(--nova-ref-light-status-success);
  --nova-color-status-success-soft: color-mix(in srgb, var(--nova-color-status-success) 10%, var(--nova-color-surface-paper));
  --nova-color-status-success-border: color-mix(in srgb, var(--nova-color-status-success) 34%, var(--nova-color-border-quiet));
  --nova-color-status-success-ink: color-mix(in srgb, var(--nova-color-status-success) 88%, var(--nova-color-ink));
  --nova-color-status-warning: var(--nova-ref-light-status-warning);
  --nova-color-status-warning-soft: color-mix(in srgb, var(--nova-color-status-warning) 10%, var(--nova-color-surface-paper));
  --nova-color-status-warning-border: color-mix(in srgb, var(--nova-color-status-warning) 34%, var(--nova-color-border-quiet));
  --nova-color-status-warning-ink: color-mix(in srgb, var(--nova-color-status-warning) 92%, var(--nova-color-ink));
  --nova-color-status-warning-emphasis: var(--nova-ref-light-status-warning-emphasis);
  --nova-color-status-danger: var(--nova-ref-light-status-danger);
  --nova-color-status-danger-soft: color-mix(in srgb, var(--nova-color-status-danger) 10%, var(--nova-color-surface-paper));
  --nova-color-status-danger-border: color-mix(in srgb, var(--nova-color-status-danger) 34%, var(--nova-color-border-quiet));
  --nova-color-status-danger-ink: color-mix(in srgb, var(--nova-color-status-danger) 88%, var(--nova-color-ink));
  --nova-color-status-danger-emphasis: var(--nova-ref-light-status-danger-emphasis);
  --nova-color-status-featured: var(--nova-ref-light-status-featured);
  --nova-texture-canvas-grain: url("../img/nova-canvas-grain.515fb12b99cf.svg");
  --nova-font-display: "Nova Geist", Geist, ui-sans-serif, system-ui, sans-serif;
  --nova-font-reading: "Nova Newsreader", Newsreader, ui-serif, serif;
  --nova-font-ui: "Nova Geist", Geist, ui-sans-serif, system-ui, sans-serif;
  --nova-font-size-assessments-preview-statement: clamp(2.75rem, 4.8vw, 4rem);
  --nova-font-size-assessments-preview-statement-mobile: clamp(2.5rem, 12vw, 3.25rem);
  --nova-font-size-assessments-preview-title: clamp(2.25rem, 4vw, 3.25rem);
  --nova-font-size-assessments-preview-section: clamp(1.75rem, 3vw, 2.25rem);
  --nova-font-size-assessments-preview-reading: clamp(1.125rem, 1.7vw, 1.5rem);
  --nova-line-height-assessments-preview-statement: 1.05;
  --nova-line-height-assessments-preview-reading: 1.4;
  --nova-letter-spacing-assessments-preview-statement: -.025em;
  --nova-font-size-display-page: clamp(48px, 8vw, 76px);
  --nova-font-size-display-section: clamp(32px, 4.5vw, 48px);
  --nova-font-size-display-card: clamp(28px, 3vw, 32px);
  --nova-font-size-reading-lead: clamp(18px, 2.2vw, 22px);
  --nova-font-size-reading-default: 16px;
  --nova-font-size-ui-micro: 10px;
  --nova-font-size-ui-small: 11px;
  --nova-font-size-ui-compact: 13px;
  --nova-font-size-ui-default: 14px;
  --nova-font-weight-display: 600;
  --nova-font-weight-action: 700;
  --nova-line-height-display-tight: 0.96;
  --nova-line-height-reading: 1.55;
  --nova-line-height-ui: 1.45;
  --nova-letter-spacing-display-tight: -0.035em;
  --nova-letter-spacing-ui-default: 0;
  --nova-letter-spacing-ui-label: 0.08em;
  --nova-letter-spacing-ui-kicker: 0.18em;
  --nova-type-size-label: 10px;
  --nova-type-size-meta: 11px;
  --nova-type-size-supporting: 13px;
  --nova-type-size-body: 16px;
  --nova-type-size-section: 24px;
  --nova-type-size-statement: clamp(46px, 5vw, 68px);
  --nova-type-weight-display: 600;
  --nova-type-weight-strong: 800;
  --nova-type-leading-display: 0.98;
  --nova-type-leading-body: 1.55;
  --nova-type-leading-meta: 1.35;
  --nova-type-leading-control: 1;
  --nova-type-tracking-label: 0.1em;
  --nova-type-tracking-display: -0.035em;
  --nova-space-1: 4px;
  --nova-space-2: 8px;
  --nova-space-3: 12px;
  --nova-space-4: 16px;
  --nova-space-5: 24px;
  --nova-space-6: 32px;
  --nova-space-7: 48px;
  --nova-space-8: 64px;
  --nova-control-height-compact: 32px;
  --nova-control-height-default: 40px;
  --nova-control-height-comfortable: 48px;
  --nova-icon-size-small: 16px;
  --nova-icon-size-default: 18px;
  --nova-icon-size-large: 20px;
  --nova-radius-small: 8px;
  --nova-radius-control: 10px;
  --nova-radius-surface: 16px;
  --nova-radius-pill: 999px;
  --nova-border-width-quiet: 1px;
  --nova-border-width-strong: 1.5px;
  --nova-elevation-grounded: 0 1px 0 color-mix(in srgb, var(--nova-shadow-source) 12%, transparent);
  --nova-elevation-control: 0 1px 0 color-mix(in srgb, var(--nova-shadow-source) 5%, transparent);
  --nova-elevation-paper: 4px 5px 0 color-mix(in srgb, var(--nova-shadow-source) 14%, transparent);
  --nova-emphasis-accent-edge: inset var(--nova-space-1) 0 0 var(--nova-color-accent);
  --nova-emphasis-accent-underline: inset 0 calc(var(--nova-border-width-strong) * -1) var(--nova-color-accent);
  --nova-emphasis-rail-current: inset 0 0 0 var(--nova-border-width-quiet) color-mix(in srgb, var(--nova-color-rail) 72%, transparent), inset 0 calc(var(--nova-border-width-strong) * -1) 0 color-mix(in srgb, var(--nova-color-rail-ink) 78%, transparent);
  --nova-emphasis-paper-current: inset 0 0 0 var(--nova-border-width-quiet) var(--nova-color-surface-raised), inset 0 calc(var(--nova-border-width-strong) * -1) 0 color-mix(in srgb, var(--nova-color-ink) 72%, transparent);
  --nova-elevation-accented-paper: inset 0 var(--nova-space-2) 0 var(--nova-color-accent), var(--nova-elevation-grounded);
  --nova-elevation-selected-edge: inset var(--nova-space-1) 0 0 var(--nova-color-accent);
  --nova-elevation-overlay: 0 var(--nova-space-5) var(--nova-space-8) color-mix(in srgb, var(--nova-shadow-source) 26%, transparent);
  --nova-elevation-drawer: calc(var(--nova-space-4) * -1) 0 var(--nova-space-8) color-mix(in srgb, var(--nova-shadow-source) 18%, transparent);
  --nova-focus-ring-color: var(--nova-color-accent-ink);
  --nova-focus-ring: 0 0 0 var(--nova-border-width-strong) var(--nova-color-surface-raised), 0 0 0 var(--nova-space-1) var(--nova-focus-ring-color);
  --nova-focus-ring-inset: inset 0 0 0 var(--nova-border-width-strong) var(--nova-color-surface-raised), inset 0 0 0 var(--nova-space-1) var(--nova-focus-ring-color);
  --nova-layout-readable-max: 920px;
  --nova-layout-reading-line-max: 68ch;
  --nova-layout-overlay-max: 720px;
  --nova-layout-dialog-max: 608px;
  --nova-layout-home-folio-max: 1120px;
  --nova-layout-directory-folio-max: 1320px;
  --nova-layout-directory-split: minmax(0, 0.72fr) minmax(0, 1.6fr);
  --nova-layout-directory-row: minmax(0, 1fr) minmax(0, 0.48fr) auto;
  --nova-layout-content-max: 2200px;
  --nova-layout-wide-surface-max: 1800px;
  --nova-layout-viewport-height: 100dvh;
  --nova-layout-page-gutter: clamp(var(--nova-space-4), 5vw, var(--nova-space-8));
  --nova-layout-ultrawide-gutter: clamp(6rem, 8vw, 12rem);
  --nova-layout-global-rail-width: calc(var(--nova-space-8) + var(--nova-space-4));
  --nova-layout-mobile-nav-height: calc(var(--nova-space-7) + var(--nova-space-2));
  --nova-layout-feedback-max: 360px;
  --nova-layout-support-panel-min: 360px;
  --nova-layout-support-panel-max: 520px;
  --nova-layout-flashcard-context-fluid: 22vw;
  --nova-progress-indeterminate-width: 34%;
  --nova-layout-toolbar-height: 56px;
  --nova-layout-toolbar-height-mobile: 50px;
  --nova-layout-toolbar-stage-min: calc(100dvh - var(--nova-layout-toolbar-height));
  --nova-layout-toolbar-stage-min-mobile: calc(100dvh - var(--nova-layout-toolbar-height-mobile));
  /* Home 4a production geometry and type. Keep its reference proportions exact. */
  --nova-home-4a-rail-width: 58px;
  --nova-home-4a-rail-padding: 14px 7px 12px;
  --nova-home-4a-rail-item-width: 44px;
  --nova-home-4a-mark-size: 32px;
  --nova-home-4a-icon-size: 18px;
  --nova-home-4a-account-icon-size: 19px;
  --nova-home-4a-rail-primary-gap: 2px;
  --nova-home-4a-rail-primary-offset: 26px;
  --nova-home-4a-rail-link-height: 40px;
  --nova-home-4a-rail-link-radius: 12px;
  --nova-home-4a-rail-footer-gap: 1px;
  --nova-home-4a-rail-footer-padding: 10px;
  --nova-home-4a-rail-footer-height: 34px;
  --nova-home-4a-rail-footer-radius: 11px;
  --nova-home-4a-content-width: min(880px, calc(100% - 120px));
  --nova-home-4a-heading-width: 880px;
  --nova-home-4a-content-height: calc(100dvh - 56px);
  --nova-home-4a-content-padding: 0 0 40px;
  --nova-home-4a-hero-padding: 0 0 40px;
  --nova-home-4a-eyebrow-type: 800 10px var(--nova-font-ui);
  --nova-home-4a-eyebrow-tracking: .16em;
  --nova-home-4a-heading-margin: 26px 0 0;
  --nova-home-4a-heading-type: 600 66px/1 var(--nova-font-display);
  --nova-home-4a-heading-tracking: -.045em;
  --nova-home-4a-lede-width: 560px;
  --nova-home-4a-lede-margin: 28px 0 0;
  --nova-home-4a-lede-type: 19px/1.6 var(--nova-font-reading);
  --nova-home-4a-actions-gap: 28px;
  --nova-home-4a-actions-margin: 44px;
  --nova-home-4a-action-type: 740 12px var(--nova-font-ui);
  --nova-home-4a-secondary-height: 34px;
  --nova-home-4a-primary-height: 56px;
  --nova-home-4a-primary-gap: 11px;
  --nova-home-4a-primary-padding: 0 30px;
  --nova-home-4a-primary-radius: 14px;
  --nova-home-4a-primary-type: 780 14px var(--nova-font-ui);
  --nova-home-4a-primary-shadow: 0 1px 0 color-mix(in srgb, var(--nova-shadow-source) 16%, transparent);
  --nova-home-4a-popover-offset: calc(100% + 12px);
  --nova-home-4a-popover-width: 340px;
  --nova-home-4a-popover-padding: 18px 20px;
  --nova-home-4a-popover-radius: 12px;
  --nova-home-4a-popover-shadow: 0 24px 64px color-mix(in srgb, var(--nova-shadow-source) 16%, transparent);
  --nova-home-4a-popover-copy-type: 12px/1.6 var(--nova-font-ui);
  --nova-home-4a-popover-row-gap: 6px;
  --nova-home-4a-disclosure-type: 740 11px var(--nova-font-ui);
  --nova-home-4a-detail-max-height: min(48vh, 420px);
  --nova-home-4a-detail-type: 11px/1.5 var(--nova-font-ui);
  --nova-home-4a-detail-label-width: 88px;
  --nova-home-4a-quiet-control-height: 32px;
  --nova-home-4a-quiet-control-radius: 9px;
  --nova-home-4a-quiet-control-type: 700 11px var(--nova-font-ui);
  --nova-home-4a-secondary-heading-type: 600 18px/1 var(--nova-font-display);
  --nova-home-4a-note-type: 11px/1.5 var(--nova-font-ui);
  --nova-home-4a-error-offset: 72px;
  --nova-home-4a-desk-gap: 14px;
  --nova-home-4a-desk-padding: 22px;
  --nova-home-4a-desk-heading-type: 800 9.5px var(--nova-font-ui);
  --nova-home-4a-desk-heading-tracking: .14em;
  --nova-home-4a-desk-link-type: 700 10px/1.4 var(--nova-font-ui);
  --nova-home-4a-desk-link-tracking: .05em;
  --nova-home-4a-desk-item-gap: 34px;
  --nova-home-4a-desk-title-type: 600 14px/1.3 var(--nova-font-reading);
  --nova-home-4a-desk-meta-type: 700 9px var(--nova-font-ui);
  --nova-home-4a-desk-meta-tracking: .06em;
  --nova-home-4a-mobile-min-height: calc(100dvh - 126px);
  --nova-home-4a-mobile-padding: 0 0 28px;
  --nova-home-4a-mobile-hero-padding: 72px 0 64px;
  --nova-home-4a-mobile-heading-size: clamp(44px, 12vw, 58px);
  --nova-home-4a-mobile-actions-gap: 18px 24px;
  --nova-home-4a-mobile-actions-margin: 36px;
  --nova-home-assessment-heading-type: 600 20px/1.1 var(--nova-font-display);
  --nova-home-assessment-heading-tracking: -.02em;
  --nova-home-assessment-support-type: 700 10px/1.4 var(--nova-font-ui);
  --nova-home-assessment-week-type: 800 9px/1 var(--nova-font-ui);
  --nova-home-assessment-week-tracking: .07em;
  --nova-home-assessment-marker-type: 800 8px/1 var(--nova-font-ui);
  --nova-home-assessment-title-type: 600 13px/1.25 var(--nova-font-reading);
  --nova-home-assessment-date-type: 800 8px/1.2 var(--nova-font-ui);
  --nova-home-assessment-date-tracking: .05em;
  --nova-home-assessment-detail-type: 10px/1.45 var(--nova-font-ui);
  --nova-type-page-statement: 600 clamp(54px, 5.2vw, 70px) / 0.98 var(--nova-font-display);
  --nova-type-card-statement: 600 clamp(44px, 4vw, 54px) / 0.84 var(--nova-font-display);
  --nova-type-section-statement: 600 32px / 1 var(--nova-font-display);
  --nova-type-reading-intro: 400 17px / 1.5 var(--nova-font-reading);
  --nova-type-support-heading: 600 36px / 1 var(--nova-font-display);
  --nova-z-content: 1;
  --nova-z-toolbar: 20;
  --nova-z-navigation: 40;
  --nova-z-overlay: 80;
  --nova-z-dialog: 100;

  /* Compatibility layer. Existing consumers resolve the canonical system. */
  --base-white: var(--nova-color-surface-raised);
  --base-black: var(--nova-color-ink);
  --bg: var(--nova-color-canvas);
  --bg-soft: var(--nova-color-surface-inset);
  --panel: var(--nova-color-surface-paper);
  --line: var(--nova-color-border-quiet);
  --text: var(--nova-color-ink);
  --muted: var(--nova-color-ink-muted);
  --accent: var(--nova-color-accent);

  /* Living Notebook composition tokens. Keep page styles on this semantic API. */
  --notebook-canvas: var(--nova-color-canvas);
  --notebook-paper: var(--nova-color-surface-paper);
  --notebook-paper-strong: var(--nova-color-surface-raised);
  --notebook-paper-soft: var(--nova-color-surface-inset);
  --notebook-ink: var(--nova-color-ink);
  --notebook-ink-muted: var(--nova-color-ink-muted);
  --notebook-hairline: var(--nova-color-border-quiet);
  --notebook-accent: var(--nova-color-accent);
  --notebook-accent-strong: var(--nova-color-accent-hover);
  --notebook-accent-ink: var(--nova-color-accent-ink);
  --notebook-accent-soft: var(--nova-color-accent-soft);
  --notebook-warning: var(--nova-color-status-warning-emphasis);
  --notebook-danger: var(--nova-color-status-danger-emphasis);
  --notebook-rail: var(--nova-color-rail);
  --notebook-rail-ink: var(--nova-color-rail-ink);
  --notebook-rail-muted: var(--nova-color-rail-muted);
  --notebook-serif: var(--nova-font-display);
  --notebook-sans: var(--nova-font-ui);
  --notebook-folio-max: var(--nova-layout-readable-max);
  --notebook-rail-width: 164px;
  --app-content-max: var(--nova-layout-content-max);
  --app-wide-surface-max: var(--nova-layout-wide-surface-max);
  --app-ultrawide-gutter: var(--nova-layout-ultrawide-gutter);
  --accent-hover: var(--nova-color-accent-hover);
  --accent-2: var(--nova-color-status-info);
  --green: var(--nova-color-status-success);
  --yellow: var(--nova-color-status-warning);
  --red: var(--nova-color-status-danger);
  --purple: var(--nova-color-status-featured);

  /* Semantic color tokens */
  --surface-raised: var(--palette-light-bg-100);
  --surface-input: var(--panel);
  --surface-code: var(--palette-dark-bg-200);
  --surface-code-text: var(--palette-dark-text-000);
  --surface-warning: color-mix(in srgb, var(--yellow) 10%, var(--panel));
  --surface-success: color-mix(in srgb, var(--green) 10%, var(--panel));
  --surface-danger: color-mix(in srgb, var(--red) 10%, var(--panel));
  --surface-info: color-mix(in srgb, var(--accent-2) 10%, var(--panel));
  --text-inverse: var(--palette-dark-text-000);
  /* Text on the identity accent. The sage is a light fill in both themes,
     so this resolves to the Nova Editorial on-accent ink, not a near-white. */
  --text-on-accent: var(--nova-color-on-accent);
  --text-on-muted: var(--palette-light-bg-000);
  --text-on-warning: var(--warning-contrast);
  --text-on-dark: var(--palette-dark-text-000);
  --muted-text: var(--muted);

  --success: var(--nova-color-status-success);
  --success-strong: color-mix(in srgb, var(--green) 82%, var(--text));
  --success-soft: var(--nova-color-status-success-soft);
  --success-soft-strong: color-mix(in srgb, var(--green) 16%, var(--panel));
  --success-border: var(--nova-color-status-success-border);
  --success-text: color-mix(in srgb, var(--green) 78%, var(--text));
  --success-text-strong: var(--nova-color-status-success-ink);
  --success-contrast: var(--palette-light-bg-000);

  --warning: var(--nova-color-status-warning);
  --warning-strong: color-mix(in srgb, var(--yellow) 82%, var(--text));
  --warning-soft: var(--nova-color-status-warning-soft);
  --warning-soft-strong: color-mix(in srgb, var(--yellow) 16%, var(--panel));
  --warning-border: var(--nova-color-status-warning-border);
  --warning-text: color-mix(in srgb, var(--yellow) 78%, var(--text));
  --warning-text-strong: var(--nova-color-status-warning-ink);
  --warning-contrast: var(--palette-light-bg-000);

  --danger: var(--nova-color-status-danger);
  --danger-strong: color-mix(in srgb, var(--red) 82%, var(--text));
  --danger-soft: var(--nova-color-status-danger-soft);
  --danger-soft-strong: color-mix(in srgb, var(--red) 16%, var(--panel));
  --danger-border: var(--nova-color-status-danger-border);
  --danger-text: color-mix(in srgb, var(--red) 78%, var(--text));
  --danger-text-strong: var(--nova-color-status-danger-ink);
  --danger-contrast: var(--palette-light-bg-000);

  --info: var(--nova-color-status-info);
  --info-strong: color-mix(in srgb, var(--accent-2) 82%, var(--text));
  --info-soft: var(--nova-color-status-info-soft);
  --info-soft-strong: color-mix(in srgb, var(--accent-2) 16%, var(--panel));
  --info-border: var(--nova-color-status-info-border);
  --info-text: color-mix(in srgb, var(--accent-2) 78%, var(--text));
  --info-contrast: var(--palette-light-bg-000);

  /* The sage fill against the cream canvas is only ~1.5:1, so the accent fill
     carries the direction's grounding edge instead of a floating shadow. */
  --button-primary-bg: var(--accent);
  --button-primary-border: var(--nova-color-border-strong);
  --button-primary-text: var(--text-on-accent);
  --button-primary-hover-bg: var(--accent-hover);
  --button-primary-hover-border: var(--nova-color-border-strong);
  --button-primary-hover-text: var(--text-on-accent);
  --button-primary-active-bg: var(--accent-hover);
  --button-primary-active-border: var(--nova-color-border-strong);
  --button-primary-active-text: var(--text-on-accent);

  --button-secondary-bg: color-mix(in srgb, var(--panel) 88%, var(--card-alt) 12%);
  --button-secondary-border: color-mix(in srgb, var(--line) 86%, var(--accent) 14%);
  --button-secondary-text: var(--text);
  --button-secondary-hover-bg: color-mix(in srgb, var(--accent) 7%, var(--panel));
  --button-secondary-hover-border: color-mix(in srgb, var(--accent) 30%, var(--line));
  --button-secondary-hover-text: var(--text);
  --button-secondary-active-bg: color-mix(in srgb, var(--accent) 11%, var(--panel));
  --button-secondary-active-border: color-mix(in srgb, var(--accent) 42%, var(--line));
  --button-secondary-active-text: var(--text);

  --button-tertiary-bg: transparent;
  --button-tertiary-border: transparent;
  --button-tertiary-text: var(--muted);
  --button-tertiary-hover-bg: color-mix(in srgb, var(--accent) 6%, transparent);
  --button-tertiary-hover-border: transparent;
  --button-tertiary-hover-text: var(--text);
  --button-tertiary-active-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --button-tertiary-active-border: transparent;
  --button-tertiary-active-text: var(--text);

  --button-icon-bg: color-mix(in srgb, var(--panel) 90%, var(--bg) 10%);
  --button-icon-border: color-mix(in srgb, var(--line) 88%, transparent);
  --button-icon-text: color-mix(in srgb, var(--muted) 84%, var(--text) 16%);
  --button-icon-hover-bg: color-mix(in srgb, var(--accent) 7%, var(--panel));
  --button-icon-hover-border: color-mix(in srgb, var(--accent) 30%, var(--line));
  --button-icon-hover-text: var(--text);
  --button-icon-active-bg: color-mix(in srgb, var(--accent) 12%, var(--panel));
  --button-icon-active-border: color-mix(in srgb, var(--accent) 42%, var(--line));
  --button-icon-active-text: var(--text);

  --button-tab-bg: var(--button-tertiary-bg);
  --button-tab-border: var(--button-secondary-border);
  --button-tab-text: var(--muted);
  --button-tab-hover-bg: var(--button-secondary-hover-bg);
  --button-tab-hover-border: var(--button-secondary-hover-border);
  --button-tab-hover-text: var(--text);
  --button-tab-active-bg: var(--button-primary-bg);
  --button-tab-active-border: var(--button-primary-border);
  --button-tab-active-text: var(--button-primary-text);

  --button-danger-bg: var(--danger);
  --button-danger-border: var(--danger);
  --button-danger-text: var(--danger-contrast);
  --button-danger-hover-bg: var(--danger-strong);
  --button-danger-hover-border: var(--danger-strong);
  --button-danger-hover-text: var(--danger-contrast);
  --button-danger-active-bg: var(--danger-strong);
  --button-danger-active-border: var(--danger-strong);
  --button-danger-active-text: var(--danger-contrast);
  --button-danger-quiet-bg: var(--danger-soft);
  --button-danger-quiet-border: color-mix(in srgb, var(--danger-border) 76%, var(--line));
  --button-danger-quiet-text: var(--danger-text-strong);
  --button-danger-quiet-hover-bg: var(--danger-soft-strong);
  --button-danger-quiet-hover-border: color-mix(in srgb, var(--danger) 40%, var(--line));
  --button-danger-quiet-hover-text: var(--danger-text-strong);

  --button-disabled-bg: color-mix(in srgb, var(--card-alt) 72%, var(--panel) 28%);
  --button-disabled-border: color-mix(in srgb, var(--line) 78%, transparent);
  --button-disabled-text: var(--muted);
  --button-focus-ring: var(--focus-ring);
  --button-loading-overlay: color-mix(in srgb, var(--button-primary-text) 8%, transparent);

  --button-solid-bg: var(--button-primary-bg);
  --button-solid-border: var(--button-primary-border);
  --button-solid-text: var(--button-primary-text);
  --button-solid-hover-bg: var(--button-primary-hover-bg);
  --button-solid-hover-border: var(--button-primary-hover-border);
  --button-solid-hover-text: var(--button-primary-hover-text);
  --button-critical-bg: var(--button-danger-bg);
  --button-critical-border: var(--button-danger-border);
  --button-critical-text: var(--button-danger-text);
  --button-critical-hover-bg: var(--button-danger-hover-bg);
  --button-critical-hover-border: var(--button-danger-hover-border);
  --button-critical-hover-text: var(--button-danger-hover-text);
  --button-quiet-bg: var(--button-secondary-bg);
  --button-quiet-border: var(--button-secondary-border);
  --button-quiet-text: var(--button-secondary-text);
  --button-quiet-hover-bg: var(--button-secondary-hover-bg);
  --button-quiet-hover-border: var(--button-secondary-hover-border);
  --button-quiet-hover-text: var(--button-secondary-hover-text);
  --button-outline-text: var(--button-secondary-text);
  --button-outline-border: var(--button-secondary-border);
  --button-outline-hover-bg: var(--button-secondary-hover-bg);
  --button-outline-hover-border: var(--button-secondary-hover-border);
  --button-outline-hover-text: var(--button-secondary-hover-text);

  --neutral: var(--muted);
  --neutral-soft: var(--palette-light-bg-200);
  --neutral-border: var(--line);
  --neutral-text: var(--muted);

  --orange: var(--yellow);
  --orange-soft: var(--warning-soft);
  --orange-border: var(--warning-border);
  --orange-text: var(--warning-text);
  --teal: var(--green);
  --teal-soft: var(--success-soft);
  --teal-border: var(--success-border);
  --teal-text: var(--success-text);
  --cyan: var(--accent-2);
  --cyan-soft: var(--info-soft);
  --cyan-border: var(--info-border);
  --cyan-text: var(--info-text);
  --indigo: var(--accent-2);
  --indigo-soft: var(--info-soft);
  --indigo-border: var(--info-border);
  --indigo-text: var(--info-text);
  --violet: var(--purple);
  --violet-soft: color-mix(in srgb, var(--purple) 10%, var(--panel));
  --violet-border: color-mix(in srgb, var(--purple) 34%, var(--line));
  --violet-text: color-mix(in srgb, var(--purple) 78%, var(--text));
  --pink: var(--red);
  --pink-soft: var(--danger-soft);
  --pink-border: var(--danger-border);
  --pink-text: var(--danger-text);

  /* Bootstrap compatibility tokens: keep semantic classes, palette-only values. */
  --bs-blue: var(--accent-2);
  --bs-indigo: var(--accent-2);
  --bs-purple: var(--purple);
  --bs-pink: var(--red);
  --bs-red: var(--danger);
  --bs-orange: var(--yellow);
  --bs-yellow: var(--warning);
  --bs-green: var(--success);
  --bs-teal: var(--green);
  --bs-cyan: var(--info);
  --bs-black: var(--base-black);
  --bs-white: var(--base-white);
  --bs-gray: var(--muted);
  --bs-gray-dark: var(--text);
  --bs-gray-100: var(--palette-light-bg-100);
  --bs-gray-200: var(--palette-light-bg-200);
  --bs-gray-300: var(--palette-light-bg-300);
  --bs-gray-400: var(--palette-light-bg-400);
  --bs-gray-500: var(--muted);
  --bs-gray-600: var(--muted);
  --bs-gray-700: var(--accent);
  --bs-gray-800: var(--text);
  --bs-gray-900: var(--text);
  --bs-primary: var(--accent);
  --bs-secondary: var(--muted);
  --bs-success: var(--success);
  --bs-info: var(--info);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-light: var(--bg-soft);
  --bs-dark: var(--text);
  --bs-primary-rgb: var(--nova-ref-light-action-rgb);
  --bs-secondary-rgb: var(--nova-ref-light-ink-secondary-rgb);
  --bs-success-rgb: var(--nova-ref-light-status-success-rgb);
  --bs-info-rgb: var(--nova-ref-light-status-info-rgb);
  --bs-warning-rgb: var(--nova-ref-light-status-warning-rgb);
  --bs-danger-rgb: var(--nova-ref-light-status-danger-rgb);
  --bs-light-rgb: var(--nova-ref-light-paper-soft-rgb);
  --bs-dark-rgb: var(--nova-ref-light-ink-rgb);
  --bs-white-rgb: var(--nova-ref-light-paper-rgb);
  --bs-black-rgb: var(--nova-ref-sage-deep-rgb);
  --bs-body-color: var(--text);
  --bs-body-color-rgb: var(--nova-ref-light-ink-rgb);
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: var(--nova-ref-light-canvas-rgb);
  --bs-emphasis-color: var(--text);
  --bs-emphasis-color-rgb: var(--nova-ref-light-ink-rgb);
  --bs-secondary-color: var(--muted);
  --bs-secondary-color-rgb: var(--nova-ref-light-ink-secondary-rgb);
  --bs-secondary-bg: var(--bg-soft);
  --bs-secondary-bg-rgb: var(--nova-ref-light-paper-soft-rgb);
  --bs-tertiary-color: var(--muted);
  --bs-tertiary-color-rgb: var(--nova-ref-light-ink-secondary-rgb);
  --bs-tertiary-bg: var(--card-alt);
  --bs-tertiary-bg-rgb: var(--nova-ref-light-paper-subtle-rgb);
  --bs-heading-color: var(--text);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: var(--nova-ref-light-action-rgb);
  --bs-link-hover-color: var(--text);
  --bs-link-hover-color-rgb: var(--nova-ref-light-ink-rgb);
  --bs-code-color: var(--text);
  --bs-highlight-color: var(--text);
  --bs-highlight-bg: var(--surface-warning);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-focus-ring-color: var(--accent);
  --bs-form-valid-color: var(--success);
  --bs-form-valid-border-color: var(--success-border);
  --bs-form-invalid-color: var(--danger);
  --bs-form-invalid-border-color: var(--danger-border);
  --bs-primary-text-emphasis: var(--accent);
  --bs-secondary-text-emphasis: var(--muted);
  --bs-success-text-emphasis: var(--success-text);
  --bs-info-text-emphasis: var(--info-text);
  --bs-warning-text-emphasis: var(--warning-text);
  --bs-danger-text-emphasis: var(--danger-text);
  --bs-light-text-emphasis: var(--muted);
  --bs-dark-text-emphasis: var(--text);
  --bs-primary-bg-subtle: var(--neutral-soft);
  --bs-secondary-bg-subtle: var(--neutral-soft);
  --bs-success-bg-subtle: var(--success-soft);
  --bs-info-bg-subtle: var(--info-soft);
  --bs-warning-bg-subtle: var(--warning-soft);
  --bs-danger-bg-subtle: var(--danger-soft);
  --bs-light-bg-subtle: var(--bg-soft);
  --bs-dark-bg-subtle: var(--card-alt);
  --bs-primary-border-subtle: var(--line);
  --bs-secondary-border-subtle: var(--line);
  --bs-success-border-subtle: var(--success-border);
  --bs-info-border-subtle: var(--info-border);
  --bs-warning-border-subtle: var(--warning-border);
  --bs-danger-border-subtle: var(--danger-border);
  --bs-light-border-subtle: var(--line);
  --bs-dark-border-subtle: var(--line);
  --bs-gradient: linear-gradient(180deg, var(--base-white), transparent);

  --overlay-backdrop: color-mix(in srgb, var(--text) 45%, transparent);
  --overlay-backdrop-strong: color-mix(in srgb, var(--text) 62%, transparent);
  --overlay-backdrop-soft: color-mix(in srgb, var(--text) 28%, transparent);
  --overlay-accent-glow: color-mix(in srgb, var(--accent) 20%, transparent);
  --glass-on-dark-subtle: color-mix(in srgb, var(--palette-dark-text-000) 8%, transparent);
  --glass-on-dark-soft: color-mix(in srgb, var(--palette-dark-text-000) 12%, transparent);
  --glass-on-dark-medium: color-mix(in srgb, var(--palette-dark-text-000) 18%, transparent);
  --glass-on-dark-strong: color-mix(in srgb, var(--palette-dark-text-000) 35%, transparent);
  --text-on-dark-muted: color-mix(in srgb, var(--palette-dark-text-000) 85%, transparent);
  --text-on-dark-subtle: color-mix(in srgb, var(--palette-dark-text-000) 65%, transparent);
  --annotation-surface: color-mix(in srgb, var(--panel) 92%, transparent);
  --theme-swatch-light-default: var(--palette-light-bg-000);
  --theme-swatch-light-maybe: var(--palette-light-bg-maybe);
  --theme-swatch-dark-default: var(--palette-dark-bg-000);
  --shadow-color-soft: color-mix(in srgb, var(--nova-shadow-source) 6%, transparent);
  --shadow-color-medium: color-mix(in srgb, var(--nova-shadow-source) 14%, transparent);
  --shadow-color-strong: color-mix(in srgb, var(--nova-shadow-source) 22%, transparent);
  --shadow-color-page: color-mix(in srgb, var(--line) 14%, transparent);
  /* Task family rail accents — muted variants for whisper-level
     differentiation in the TODAY rail. Keep them in the background/text
     palette so the rail stays calm. */
  --task-rail-practice: var(--accent);
  --task-rail-create:   var(--accent);
  --task-rail-write:    var(--text);
  --task-rail-study:    var(--muted);
  --topbar: var(--palette-light-bg-000);
  --card-alt: var(--palette-light-bg-200);
  --skeleton-surface: color-mix(in srgb, var(--card-alt) 72%, var(--panel) 28%);
  --skeleton-surface-strong: color-mix(in srgb, var(--line) 72%, var(--card-alt) 28%);
  --skeleton-sheen: color-mix(in srgb, var(--base-white) 42%, transparent);
  --skeleton-border: color-mix(in srgb, var(--line) 82%, transparent);
  --skeleton-card-bg: color-mix(in srgb, var(--panel) 84%, var(--card-alt) 16%);
  --skeleton-radius: var(--radius);
  --surface-shell-sidebar: var(--palette-light-bg-100);
  --line-shell-sidebar: var(--palette-light-bg-400);
  --surface-ops-page: var(--palette-light-bg-100);
  --surface-ops-panel: var(--palette-light-bg-000);
  --surface-ops-head: var(--palette-light-bg-200);
  --surface-ops-hover: var(--palette-light-bg-300);
  --line-ops: var(--palette-light-bg-400);
  --line-ops-soft: var(--palette-light-bg-300);
  --accent-ops: var(--accent);
  --text-ops: var(--text);
  --text-ops-muted: var(--muted);
  --text-ops-table: var(--palette-light-text-200);
  --text-ops-code: var(--text);
  --study-action-muted: var(--muted);
  --study-action-muted-hover: var(--palette-light-text-200);
  --study-action-muted-hover-strong: var(--text);
  --study-action-disabled: var(--palette-light-bg-400);
  --study-action-disabled-text: var(--muted);
  --study-paper-accent: var(--accent);
  --study-paper-line-accent: var(--accent);
  --study-paper-surface: var(--palette-light-bg-000);
  --study-prompt-ink: var(--text);
  --code-panel: var(--palette-dark-bg-200);
  --code-panel-line: var(--palette-dark-bg-000);
  --code-panel-text: var(--palette-dark-text-000);
  --radius: 8px;
  --shadow-soft: 0 8px 20px color-mix(in srgb, var(--nova-shadow-source) 4%, transparent);
  --shadow-card: 0 12px 26px color-mix(in srgb, var(--nova-shadow-source) 6%, transparent);
  --glow: color-mix(in srgb, var(--line) 24%, transparent);
  --bg-glow-2: color-mix(in srgb, var(--muted) 4%, transparent);
  --focus-ring: var(--text);
  --font-ui: var(--nova-font-ui);
  --font-body: var(--nova-font-reading);
  --font-display: var(--nova-font-display);
  --font-reading: var(--nova-font-reading);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Motion primitives are private foundation values for transition snippets.
     Keep Nova's semantic --motion-* and --ease-* aliases as the public API. */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;
  --shimmer-dur: 2000ms;
  --shimmer-base: var(--muted);
  --shimmer-highlight: var(--text);
  --shimmer-band: 400%;
  --shimmer-ease: linear;
  --motion-reduced: 1ms;
  --motion-reduced-duration: var(--motion-reduced);
  --motion-reduced-distance: 0px;
  --motion-reduced-scale: 1;
  --motion-reduced-blur: 0px;

  /* Semantic motion tokens */
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 240ms;
  --motion-structural-close: 150ms;
  --motion-structural-open: 250ms;
  --motion-panel-close: 350ms;
  --motion-panel-open: 400ms;
  --motion-control: var(--motion-fast);
  --motion-surface: var(--motion-normal);
  --motion-layout: 350ms;
  --motion-panel: var(--motion-slow);
  --motion-dropdown-open: var(--motion-surface);
  --motion-dropdown-close: var(--motion-control);
  --motion-modal-open: var(--motion-surface);
  --motion-modal-close: var(--motion-control);
  --motion-modal-scale: 0.96;
  --motion-modal-close-scale: 0.96;
  --motion-drawer-open: var(--motion-panel);
  --motion-drawer-close: var(--motion-surface);
  --motion-toast-open: var(--motion-surface);
  --motion-toast-close: var(--motion-panel);
  --motion-toast-offset: 8px;
  --motion-tabs: var(--motion-surface);
  --motion-object-context: var(--motion-surface);
  --motion-object-context-distance: 6px;
  --motion-object-context-offset: 3px;
  --motion-route-enter: 250ms;
  --motion-route-exit: 150ms;
  --motion-route-distance: 4px;
  --motion-route-blur: 2px;
  --motion-route-enter-scale: 0.995;
  --motion-progress: 300ms;
  --motion-loading-slide: 1250ms;
  --motion-loading-indeterminate: var(--motion-loading-slide);
  --motion-loading-shimmer: 1800ms;
  --motion-loading-text: 1200ms;
  --motion-loading-dots: 1200ms;
  --motion-loading-dot-delay: 160ms;
  --motion-loading-dot-distance: 4px;
  --motion-loading-spin-quick: 700ms;
  --motion-loading-spin: 900ms;
  --motion-loading-spin-reduced: 1400ms;
  --motion-metric-change: var(--motion-control);
  --motion-metric-badge: var(--motion-control);
  --motion-metric-progress: var(--motion-progress);
  --motion-metric-distance: 2px;
  --motion-metric-scale: 0.985;
  --motion-study-success: var(--motion-surface);
  --motion-study-success-path: var(--motion-panel);
  --motion-study-success-distance: 4px;
  --motion-study-success-scale: 0.98;
  --motion-form-error-reveal: var(--motion-surface);
  --motion-form-error-shake: 220ms;
  --motion-form-error-distance: 4px;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-control: var(--ease-standard);
  --ease-surface: var(--ease-emphasized);
  --ease-structural: var(--ease-smooth-out);
  --ease-dropdown: var(--ease-surface);
  --ease-modal: var(--ease-surface);
  --ease-panel: var(--ease-structural);
  --ease-drawer: var(--ease-surface);
  --ease-toast: var(--ease-surface);
  --ease-tabs: var(--ease-surface);
  --tabs-dur: var(--motion-tabs, 250ms);
  --tabs-ease: var(--ease-tabs, cubic-bezier(0.22, 1, 0.36, 1));
  --tabs-text-muted: var(--muted);
  --tabs-text-active: var(--text);
  --tabs-bar-bg: var(--panel);
  --tabs-pill-bg: var(--panel);
  --ease-route: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-object-context: var(--ease-route);
  --ease-progress: var(--ease-standard);
  --graph-label-bg: color-mix(in srgb, var(--panel) 82%, transparent);
}

/* Two-layer construction:
   1. The base text renders normally in --shimmer-base.
   2. ::before duplicates it via content: attr(data-text),
      paints a transparent → highlight → transparent gradient
      onto it, and clips that gradient to the glyphs via
      background-clip: text. Animating background-position
      sweeps the band across the text. The empty text alternative
      keeps this decorative copy out of accessibility output. */
.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-shimmer::before { animation: none !important; }
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  display: block;
  padding: 10px 14px;
  border: 2px solid var(--focus-ring);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 750;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}

.skip-link:focus-visible {
  box-shadow: var(--nova-focus-ring);
  outline: none;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: var(--motion-reduced-duration);
    --motion-normal: var(--motion-reduced-duration);
    --motion-slow: var(--motion-reduced-duration);
    --motion-control: var(--motion-reduced-duration);
    --motion-surface: var(--motion-reduced-duration);
    --motion-layout: var(--motion-reduced-duration);
    --motion-panel: var(--motion-reduced-duration);
    --motion-structural-open: var(--motion-reduced-duration);
    --motion-structural-close: var(--motion-reduced-duration);
    --motion-panel-open: var(--motion-reduced-duration);
    --motion-panel-close: var(--motion-reduced-duration);
    --motion-dropdown-open: var(--motion-reduced-duration);
    --motion-dropdown-close: var(--motion-reduced-duration);
    --motion-modal-open: var(--motion-reduced-duration);
    --motion-modal-close: var(--motion-reduced-duration);
    --motion-drawer-open: var(--motion-reduced-duration);
    --motion-drawer-close: var(--motion-reduced-duration);
    --motion-tabs: var(--motion-reduced-duration);
    --motion-route-enter: var(--motion-reduced-duration);
    --motion-route-exit: var(--motion-reduced-duration);
    --motion-progress: var(--motion-reduced-duration);
    --motion-route-distance: 0px;
    --motion-route-blur: 0px;
    --motion-route-enter-scale: 1;
    --motion-object-context: var(--motion-reduced-duration);
    --motion-object-context-distance: 0px;
    --motion-object-context-offset: 0px;
    --motion-loading-dot-distance: 0px;
    --motion-metric-distance: 0px;
    --motion-metric-scale: 1;
    --motion-study-success-distance: 0px;
    --motion-study-success-scale: 1;
    --motion-form-error-distance: 0px;
    --duration-stagger: var(--motion-reduced-duration);
    --duration-micro: var(--motion-reduced-duration);
    --duration-quick: var(--motion-reduced-duration);
    --duration-fast: var(--motion-reduced-duration);
    --duration-medium: var(--motion-reduced-duration);
    --duration-slow: var(--motion-reduced-duration);
    --duration-very-slow: var(--motion-reduced-duration);
    --distance-micro: var(--motion-reduced-distance);
    --distance-small: var(--motion-reduced-distance);
    --distance-base: var(--motion-reduced-distance);
    --distance-medium: var(--motion-reduced-distance);
    --distance-large: var(--motion-reduced-distance);
    --scale-large: var(--motion-reduced-scale);
    --scale-medium: var(--motion-reduced-scale);
    --scale-small: var(--motion-reduced-scale);
    --scale-tiny: var(--motion-reduced-scale);
    --blur-small: var(--motion-reduced-blur);
    --blur-medium: var(--motion-reduced-blur);
    --blur-large: var(--motion-reduced-blur);
  }
}

.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}

.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 30px;
  padding: 4px 12px;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}

.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] {
  color: var(--tabs-text-active);
}

.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill,
  .t-tab {
    transition: none !important;
  }
}

.nova-disclosure-motion {
  display: grid;
  grid-template-rows: 0fr;
  min-width: 0;
  transition: grid-template-rows var(--motion-panel) var(--ease-surface);
}

.nova-disclosure-motion[data-open="true"] {
  grid-template-rows: 1fr;
}

.nova-disclosure-motion__inner {
  min-height: 0;
  overflow: hidden;
}

@keyframes nova-metric-settle {
  from {
    opacity: 0.84;
    transform: translateY(var(--motion-metric-distance)) scale(var(--motion-metric-scale));
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nova-metric-fill-settle {
  from {
    opacity: 0.9;
    transform: scaleX(0.97);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes nova-study-success-settle {
  from {
    opacity: 0.72;
    transform:
      translateY(var(--motion-study-success-distance))
      scale(var(--motion-study-success-scale));
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nova-study-success-check {
  from {
    stroke-dashoffset: 18;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes nova-form-error-reveal {
  from {
    opacity: 0;
    transform: translateY(calc(var(--motion-form-error-distance) * -1));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nova-form-error-shake {
  0% {
    transform: translateX(0);
  }

  34% {
    transform: translateX(var(--motion-form-error-distance));
  }

  68% {
    transform: translateX(calc(var(--motion-form-error-distance) * -1));
  }

  100% {
    transform: translateX(0);
  }
}

.nova-study-success {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--success-soft) 70%, var(--panel));
  color: color-mix(in srgb, var(--success) 76%, var(--text));
  opacity: 0.92;
  transform-origin: center;
}

.nova-study-success svg {
  display: block;
  overflow: visible;
}

.nova-study-success svg path {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
}

.nova-study-success.is-study-success-visible,
.is-study-success-visible .nova-study-success {
  animation: nova-study-success-settle var(--motion-study-success) var(--ease-surface) both;
}

.nova-study-success-surface.is-study-success-visible {
  animation: nova-study-success-settle var(--motion-study-success) var(--ease-surface) both;
}

.nova-study-success.is-study-success-visible svg path,
.is-study-success-visible .nova-study-success svg path {
  animation: nova-study-success-check var(--motion-study-success-path) var(--ease-route) 40ms both;
}

.nova-form-error {
  animation: nova-form-error-reveal var(--motion-form-error-reveal) var(--ease-surface) both;
}

.nova-form-error-target.is-form-error {
  animation: nova-form-error-shake var(--motion-form-error-shake) var(--ease-control) both;
}

.nova-metric-value {
  font-variant-numeric: tabular-nums;
  transition:
    color var(--motion-metric-change) var(--ease-control),
    opacity var(--motion-metric-change) var(--ease-control);
}

.nova-metric-badge,
.nova-metric-card {
  transition:
    background-color var(--motion-metric-badge) var(--ease-control),
    border-color var(--motion-metric-badge) var(--ease-control),
    color var(--motion-metric-badge) var(--ease-control),
    opacity var(--motion-metric-badge) var(--ease-control),
    transform var(--motion-metric-badge) var(--ease-control);
}

.nova-metric-value.is-metric-updating,
.nova-metric-badge.is-metric-updating,
.nova-metric-card.is-metric-updating {
  animation: nova-metric-settle var(--motion-metric-change) var(--ease-control) both;
}

.nova-metric-progress {
  overflow: hidden;
}

.nova-metric-progress__fill {
  display: block;
  height: 100%;
  transform-origin: left center;
  transition:
    width var(--motion-metric-progress) var(--ease-progress),
    background-color var(--motion-metric-badge) var(--ease-control);
  will-change: width;
}

.nova-metric-progress__fill.is-metric-updating {
  animation: nova-metric-fill-settle var(--motion-metric-progress) var(--ease-progress) both;
}

[data-metric-evidence="untested"].is-metric-updating,
[data-metric-evidence="untested"] .is-metric-updating {
  animation: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .nova-disclosure-motion {
    transition: none !important;
  }

  .nova-metric-value,
  .nova-metric-badge,
  .nova-metric-card,
  .nova-metric-progress__fill,
  .nova-study-success,
  .nova-study-success-surface.is-study-success-visible,
  .nova-study-success svg path,
  .nova-form-error,
  .nova-form-error-target.is-form-error {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  .trust-disclosure__summary .badge {
    transition: none !important;
  }
}

.brand-link {
  color: var(--text);
}

.brand-link:is(:hover, :focus-visible) {
  color: var(--text);
}

/* ═══ Typography utilities ═══ */
.u-mono,
.font-mono {
  font-family: var(--font-mono);
}

/* Motion utilities */
.u-transition-soft {
  transition-property: transform, opacity, box-shadow, background-color, border-color, color;
  transition-duration: var(--motion-surface);
  transition-timing-function: var(--ease-control);
}

.u-pressable {
  transform: translateY(0);
}

.u-pressable:hover {
  transform: translateY(0);
}

.u-pressable:active {
  transform: translateY(1px);
}

.u-fade-in {
  opacity: 0;
  transform: translateY(4px);
}

.u-fade-in.is-in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-surface) var(--ease-surface),
              transform var(--motion-surface) var(--ease-surface);
}

.u-fade-in-up {
  opacity: 0;
  transform: translateY(10px);
}

.u-fade-in-up.is-in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-surface) var(--ease-surface),
              transform var(--motion-surface) var(--ease-surface);
}

/* Shared shape-preserving loading skeletons. Route-specific layouts compose
   these classes instead of defining their own shimmer vocabulary. */
.nova-skeleton,
.nova-skeleton-line,
.nova-skeleton-block,
.nova-skeleton-pill,
.nova-skeleton-avatar {
  background: var(--skeleton-surface);
  border-radius: var(--skeleton-radius);
  box-sizing: border-box;
  color: transparent;
  display: block;
  overflow: hidden;
  pointer-events: none;
  position: relative;
  user-select: none;
}

.nova-skeleton::after,
.nova-skeleton-line::after,
.nova-skeleton-block::after,
.nova-skeleton-pill::after,
.nova-skeleton-avatar::after {
  animation: nova-skeleton-shimmer var(--motion-loading-shimmer) var(--ease-linear) infinite;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--skeleton-sheen) 48%,
    transparent 100%
  );
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-100%);
}

.nova-skeleton-line {
  height: var(--nova-skeleton-line-height, .72rem);
  width: var(--nova-skeleton-line-width, 100%);
}

.nova-skeleton-block {
  min-height: var(--nova-skeleton-block-height, 5.5rem);
  width: var(--nova-skeleton-block-width, 100%);
}

.nova-skeleton-pill {
  border-radius: 999px;
  height: var(--nova-skeleton-pill-height, 1.65rem);
  width: var(--nova-skeleton-pill-width, 7.5rem);
}

.nova-skeleton-avatar {
  aspect-ratio: 1;
  border-radius: 50%;
  width: var(--nova-skeleton-avatar-size, 2.25rem);
}

.nova-skeleton-card {
  background: var(--skeleton-card-bg);
  border: 1px solid var(--skeleton-border);
  border-radius: calc(var(--skeleton-radius) + 2px);
  box-sizing: border-box;
  box-shadow: var(--shadow-soft);
  padding: var(--nova-skeleton-card-padding, 1rem);
}

.nova-skeleton-stack,
.nova-skeleton-row,
.nova-skeleton-rail {
  display: grid;
  gap: var(--nova-skeleton-gap, .7rem);
}

.nova-skeleton-row {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
}

.nova-skeleton-rail {
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
}

.nova-skeleton-cluster {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nova-skeleton-gap, .7rem);
}

.nova-skeleton-line[data-width="short"] {
  width: 42%;
}

.nova-skeleton-line[data-width="medium"] {
  width: 68%;
}

.nova-skeleton-line[data-width="long"] {
  width: 86%;
}

@keyframes nova-skeleton-shimmer {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nova-skeleton::after,
  .nova-skeleton-line::after,
  .nova-skeleton-block::after,
  .nova-skeleton-pill::after,
  .nova-skeleton-avatar::after {
    animation: none !important;
    opacity: 0;
  }
}

.nova-route-skeleton {
  display: grid;
  flex: 1 1 auto;
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  min-height: 100%;
  min-width: 0;
  pointer-events: none;
  width: 100%;
}

.nova-route-skeleton .nova-skeleton-card,
.nova-route-skeleton .nova-skeleton-block,
.nova-route-skeleton .nova-skeleton-line,
.nova-route-skeleton .nova-skeleton-pill {
  min-width: 0;
}

.nova-route-skeleton--dashboard {
  align-items: stretch;
  grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .75fr);
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}

.nova-route-skeleton--library,
.nova-route-skeleton--study,
.nova-route-skeleton--flashcards {
  align-content: stretch;
  padding: clamp(1rem, 2.2vw, 2rem);
}

.nova-route-skeleton--library {
  grid-template-rows: auto minmax(0, 1fr);
}

.nova-route-skeleton--study,
.nova-route-skeleton--flashcards {
  place-items: center;
}

.nova-route-skeleton__main,
.nova-route-skeleton__aside,
.nova-route-skeleton__cards,
.nova-route-skeleton__list,
.nova-route-skeleton__execution {
  display: grid;
  gap: clamp(.85rem, 1.4vw, 1.15rem);
  min-width: 0;
}

.nova-route-skeleton__main {
  align-content: start;
}

.nova-route-skeleton__aside,
.nova-route-skeleton__assistant {
  align-content: start;
}

.nova-route-skeleton__hero {
  display: grid;
  gap: clamp(1rem, 1.7vw, 1.4rem);
}

.nova-route-skeleton__graph {
  --nova-skeleton-block-height: clamp(10rem, 24vh, 16rem);
}

.nova-route-skeleton__toolbar,
.nova-route-skeleton__tabs,
.nova-route-skeleton__choice-grid {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  min-width: 0;
}

.nova-route-skeleton__toolbar {
  justify-content: space-between;
}

.nova-route-skeleton__split {
  display: grid;
  gap: clamp(.9rem, 1.5vw, 1.25rem);
  grid-template-columns: minmax(16rem, .75fr) minmax(0, 1.25fr);
  min-height: 0;
  min-width: 0;
}

.nova-route-skeleton__execution {
  max-width: min(46rem, 100%);
  width: 100%;
}

.nova-route-skeleton__execution-shell {
  display: grid;
  gap: clamp(.75rem, 1.2vw, 1rem);
  max-width: min(46rem, 100%);
  width: 100%;
}

.nova-route-skeleton__context {
  max-width: 14rem;
}

.nova-route-skeleton__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: flex-start;
}

.nova-route-skeleton__actions .nova-skeleton-pill {
  --nova-skeleton-pill-height: 2rem;
  --nova-skeleton-pill-width: clamp(6.5rem, 18vw, 9rem);
}

.nova-route-skeleton__prompt {
  --nova-skeleton-block-height: clamp(10rem, 28vh, 18rem);
}

.nova-route-skeleton__page {
  align-content: start;
  display: grid;
  gap: .85rem;
  min-height: clamp(24rem, 66vh, 48rem);
}

@media (max-width: 920px) {
  .nova-route-skeleton--dashboard,
  .nova-route-skeleton__split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .nova-route-skeleton--library,
  .nova-route-skeleton--study,
  .nova-route-skeleton--flashcards {
    padding: 1rem;
  }
}

.account-menu {
  min-width: 220px;
}

.app-toast-container {
  max-width: min(24rem, calc(100vw - 1rem));
  pointer-events: none;
  z-index: 9999;
}

html[data-theme="dark"] {
  --nova-color-canvas: var(--nova-ref-dark-canvas);
  --nova-color-surface-paper: var(--nova-ref-dark-paper);
  --nova-color-surface-raised: var(--nova-ref-dark-paper-strong);
  --nova-color-surface-inset: var(--nova-ref-dark-paper-inset);
  --nova-color-ink: var(--nova-ref-dark-ink);
  --nova-color-ink-muted: var(--nova-ref-dark-ink-muted);
  --nova-color-ink-faint: var(--nova-ref-dark-ink-faint);
  --nova-shadow-source: var(--nova-color-canvas);
  --nova-accent-shadow-source: var(--nova-color-canvas);
  --nova-overlay-source: var(--nova-color-canvas);
  --nova-color-border-quiet: var(--nova-ref-dark-line-quiet);
  --nova-color-border-control: var(--nova-ref-dark-line-control);
  --nova-color-border-strong: var(--nova-ref-dark-line-strong);
  --nova-color-accent-soft: var(--nova-ref-sage-soft-dark);
  --nova-color-accent-ink: var(--nova-ref-sage);
  --nova-color-attention-mark: var(--nova-ref-dark-attention-mark);
  --nova-color-attention-mark-alternate: var(--nova-ref-dark-attention-mark-alternate);
  --nova-color-attention-mark-calm: var(--nova-ref-dark-attention-mark-calm);
  --nova-color-rail: var(--nova-ref-dark-canvas);
  --nova-color-rail-ink: var(--nova-ref-dark-ink);
  --nova-color-rail-muted: color-mix(in srgb, var(--nova-color-rail-ink) 68%, transparent);
  --base-black: var(--nova-color-canvas);
  --nova-color-status-info: var(--nova-ref-dark-status-info);
  --nova-color-status-info-soft: color-mix(in srgb, var(--nova-color-status-info) 12%, var(--nova-color-surface-paper));
  --nova-color-status-info-border: color-mix(in srgb, var(--nova-color-status-info) 34%, var(--nova-color-border-quiet));
  --nova-color-status-info-ink: color-mix(in srgb, var(--nova-color-status-info) 92%, var(--nova-color-ink));
  --nova-color-status-success: var(--nova-ref-dark-status-success);
  --nova-color-status-success-soft: color-mix(in srgb, var(--nova-color-status-success) 12%, var(--nova-color-surface-paper));
  --nova-color-status-success-border: color-mix(in srgb, var(--nova-color-status-success) 34%, var(--nova-color-border-quiet));
  --nova-color-status-success-ink: color-mix(in srgb, var(--nova-color-status-success) 92%, var(--nova-color-ink));
  --nova-color-status-warning: var(--nova-ref-dark-status-warning);
  --nova-color-status-warning-soft: color-mix(in srgb, var(--nova-color-status-warning) 12%, var(--nova-color-surface-paper));
  --nova-color-status-warning-border: color-mix(in srgb, var(--nova-color-status-warning) 34%, var(--nova-color-border-quiet));
  --nova-color-status-warning-ink: color-mix(in srgb, var(--nova-color-status-warning) 92%, var(--nova-color-ink));
  --nova-color-status-warning-emphasis: var(--nova-ref-dark-status-warning-emphasis);
  --nova-color-status-danger: var(--nova-ref-dark-status-danger);
  --nova-color-status-danger-soft: color-mix(in srgb, var(--nova-color-status-danger) 12%, var(--nova-color-surface-paper));
  --nova-color-status-danger-border: color-mix(in srgb, var(--nova-color-status-danger) 34%, var(--nova-color-border-quiet));
  --nova-color-status-danger-ink: color-mix(in srgb, var(--nova-color-status-danger) 92%, var(--nova-color-ink));
  --nova-color-status-danger-emphasis: var(--nova-ref-dark-status-danger-emphasis);
  --nova-color-status-featured: var(--nova-ref-dark-status-featured);

  --bg: var(--nova-color-canvas);
  --bg-soft: var(--nova-color-surface-inset);
  --panel: var(--nova-color-surface-paper);
  --line: var(--nova-color-border-quiet);
  --text: var(--nova-color-ink);
  --muted: var(--nova-color-ink-muted);
  --accent: var(--nova-color-accent);
  --accent-hover: var(--nova-color-accent-hover);
  --accent-2: var(--nova-color-status-info);
  --green: var(--nova-color-status-success);
  --yellow: var(--nova-color-status-warning);
  --red: var(--nova-color-status-danger);
  --purple: var(--nova-color-status-featured);

  --notebook-canvas: var(--nova-color-canvas);
  --notebook-paper: var(--nova-color-surface-paper);
  --notebook-paper-strong: var(--nova-color-surface-raised);
  --notebook-paper-soft: var(--nova-color-surface-inset);
  --notebook-ink: var(--nova-color-ink);
  --notebook-ink-muted: var(--nova-color-ink-muted);
  --notebook-hairline: var(--nova-color-border-quiet);
  --notebook-accent: var(--nova-color-accent);
  --notebook-accent-strong: var(--nova-color-accent-hover);
  --notebook-accent-ink: var(--nova-color-accent-ink);
  --notebook-accent-soft: var(--nova-color-accent-soft);
  --notebook-warning: var(--nova-color-status-warning-emphasis);
  --notebook-danger: var(--nova-color-status-danger-emphasis);
  --notebook-rail: var(--nova-color-rail);
  --notebook-rail-ink: var(--nova-color-rail-ink);
  --notebook-rail-muted: var(--nova-color-rail-muted);

  --surface-raised: var(--palette-dark-bg-100);
  --surface-input: var(--panel);
  --surface-code: var(--palette-dark-bg-400);
  --surface-code-text: var(--text);
  --surface-warning: color-mix(in srgb, var(--yellow) 12%, var(--panel));
  --surface-success: color-mix(in srgb, var(--green) 12%, var(--panel));
  --surface-danger: color-mix(in srgb, var(--red) 12%, var(--panel));
  --surface-info: color-mix(in srgb, var(--accent-2) 12%, var(--panel));
  --text-inverse: var(--palette-light-text-000);
  --text-on-accent: var(--palette-dark-bg-400);
  --text-on-muted: var(--palette-dark-bg-400);
  --text-on-warning: var(--warning-contrast);

  --success-strong: color-mix(in srgb, var(--green) 88%, var(--text));
  --success-soft: var(--nova-color-status-success-soft);
  --success-soft-strong: color-mix(in srgb, var(--green) 18%, var(--panel));
  --success-border: var(--nova-color-status-success-border);
  --success-text: color-mix(in srgb, var(--green) 82%, var(--text));
  --success-text-strong: var(--nova-color-status-success-ink);
  --success-contrast: var(--palette-dark-bg-400);
  --warning-strong: color-mix(in srgb, var(--yellow) 88%, var(--text));
  --warning-soft: var(--nova-color-status-warning-soft);
  --warning-soft-strong: color-mix(in srgb, var(--yellow) 18%, var(--panel));
  --warning-border: var(--nova-color-status-warning-border);
  --warning-text: color-mix(in srgb, var(--yellow) 82%, var(--text));
  --warning-text-strong: var(--nova-color-status-warning-ink);
  --warning-contrast: var(--palette-dark-bg-400);
  --danger-strong: color-mix(in srgb, var(--red) 88%, var(--text));
  --danger-soft: var(--nova-color-status-danger-soft);
  --danger-soft-strong: color-mix(in srgb, var(--red) 18%, var(--panel));
  --danger-border: var(--nova-color-status-danger-border);
  --danger-text: color-mix(in srgb, var(--red) 82%, var(--text));
  --danger-text-strong: var(--nova-color-status-danger-ink);
  --danger-contrast: var(--palette-dark-bg-400);
  --info: var(--nova-color-status-info);
  --info-strong: color-mix(in srgb, var(--accent-2) 88%, var(--text));
  --info-soft: var(--nova-color-status-info-soft);
  --info-soft-strong: color-mix(in srgb, var(--accent-2) 18%, var(--panel));
  --info-border: var(--nova-color-status-info-border);
  --info-text: color-mix(in srgb, var(--accent-2) 82%, var(--text));
  --info-contrast: var(--palette-dark-bg-400);

  --neutral: var(--muted);
  --neutral-soft: var(--palette-dark-bg-100);
  --neutral-border: var(--line);
  --neutral-text: var(--muted);
  --orange: var(--yellow);
  --orange-soft: var(--warning-soft);
  --orange-border: var(--warning-border);
  --orange-text: var(--warning-text);
  --teal: var(--green);
  --teal-soft: var(--success-soft);
  --teal-border: var(--success-border);
  --teal-text: var(--success-text);
  --cyan: var(--accent-2);
  --cyan-soft: var(--info-soft);
  --cyan-border: var(--info-border);
  --cyan-text: var(--info-text);
  --indigo: var(--accent-2);
  --indigo-soft: var(--info-soft);
  --indigo-border: var(--info-border);
  --indigo-text: var(--info-text);
  --violet: var(--purple);
  --violet-soft: color-mix(in srgb, var(--purple) 12%, var(--panel));
  --violet-border: color-mix(in srgb, var(--purple) 34%, var(--line));
  --violet-text: color-mix(in srgb, var(--purple) 82%, var(--text));
  --pink: var(--red);
  --pink-soft: var(--danger-soft);
  --pink-border: var(--danger-border);
  --pink-text: var(--danger-text);

  --bs-primary-rgb: var(--nova-ref-sage-rgb);
  --bs-secondary-rgb: var(--nova-ref-dark-ink-subtle-rgb);
  --bs-success-rgb: var(--nova-ref-dark-status-success-rgb);
  --bs-info-rgb: var(--nova-ref-dark-status-info-rgb);
  --bs-warning-rgb: var(--nova-ref-dark-status-warning-rgb);
  --bs-danger-rgb: var(--nova-ref-dark-status-danger-rgb);
  --bs-light-rgb: var(--nova-ref-dark-paper-rgb);
  --bs-dark-rgb: var(--nova-ref-dark-paper-deep-rgb);
  --bs-white-rgb: var(--nova-ref-dark-ink-rgb);
  --bs-black-rgb: var(--nova-ref-dark-paper-deep-rgb);
  --bs-body-color-rgb: var(--nova-ref-dark-ink-rgb);
  --bs-body-bg-rgb: var(--nova-ref-dark-canvas-rgb);
  --bs-emphasis-color-rgb: var(--nova-ref-dark-ink-rgb);
  --bs-secondary-color-rgb: var(--nova-ref-dark-ink-subtle-rgb);
  --bs-secondary-bg-rgb: var(--nova-ref-dark-paper-rgb);
  --bs-tertiary-color-rgb: var(--nova-ref-dark-ink-subtle-rgb);
  --bs-tertiary-bg-rgb: var(--nova-ref-dark-paper-strong-rgb);
  --bs-link-color-rgb: var(--nova-ref-sage-rgb);
  --bs-link-hover-color-rgb: var(--nova-ref-dark-link-hover-rgb);

  --overlay-backdrop: color-mix(in srgb, var(--base-black) 55%, transparent);
  --overlay-backdrop-strong: color-mix(in srgb, var(--base-black) 70%, transparent);
  --overlay-backdrop-soft: color-mix(in srgb, var(--base-black) 36%, transparent);
  --overlay-accent-glow: transparent;

  --button-disabled-bg: color-mix(in srgb, var(--panel) 78%, var(--accent) 8%);
  --button-disabled-border: color-mix(in srgb, var(--line) 70%, var(--accent) 30%);
  --button-disabled-text: color-mix(in srgb, var(--muted) 55%, var(--text) 45%);
  --annotation-surface: color-mix(in srgb, var(--panel) 92%, transparent);
  --shadow-color-soft: color-mix(in srgb, var(--nova-shadow-source) 20%, transparent);
  --shadow-color-medium: color-mix(in srgb, var(--nova-shadow-source) 28%, transparent);
  --shadow-color-strong: color-mix(in srgb, var(--nova-shadow-source) 42%, transparent);
  --shadow-color-page: color-mix(in srgb, var(--nova-shadow-source) 22%, transparent);
  --task-rail-practice: var(--accent);
  --task-rail-create:   var(--accent);
  --task-rail-write:    var(--text);
  --task-rail-study:    var(--muted);
  --topbar: var(--nova-color-canvas);
  --card-alt: var(--palette-dark-bg-300);
  --skeleton-surface: color-mix(in srgb, var(--palette-dark-bg-000) 78%, var(--accent) 9%);
  --skeleton-surface-strong: color-mix(in srgb, var(--palette-dark-bg-000) 68%, var(--accent) 14%);
  --skeleton-sheen: color-mix(in srgb, var(--palette-dark-text-000) 12%, transparent);
  --skeleton-border: color-mix(in srgb, var(--line) 74%, var(--text) 8%);
  --skeleton-card-bg: color-mix(in srgb, var(--panel) 82%, var(--surface-raised) 18%);
  --surface-shell-sidebar: var(--palette-dark-bg-100);
  --line-shell-sidebar: var(--palette-dark-bg-000);
  --surface-ops-page: var(--palette-dark-bg-100);
  --surface-ops-panel: var(--palette-dark-bg-200);
  --surface-ops-head: var(--palette-dark-bg-300);
  --surface-ops-hover: var(--palette-dark-bg-000);
  --line-ops: var(--palette-dark-bg-000);
  --line-ops-soft: var(--palette-dark-bg-100);
  --accent-ops: var(--accent);
  --text-ops: var(--text);
  --text-ops-muted: var(--muted);
  --text-ops-table: var(--accent);
  --text-ops-code: var(--text);
  --study-action-muted: var(--muted);
  --study-action-muted-hover: var(--accent);
  --study-action-muted-hover-strong: var(--text);
  --study-action-disabled: var(--line);
  --study-action-disabled-text: var(--muted);
  --study-paper-accent: var(--accent);
  --study-paper-line-accent: var(--accent);
  --study-paper-surface: var(--palette-dark-bg-100);
  --study-prompt-ink: var(--text);
  --code-panel: var(--palette-dark-bg-400);
  --code-panel-line: var(--palette-dark-bg-000);
  --code-panel-text: var(--text);
  --shadow-soft: 0 4px 12px color-mix(in srgb, var(--nova-shadow-source) 20%, transparent);
  --shadow-card: 0 6px 16px color-mix(in srgb, var(--nova-shadow-source) 25%, transparent);
  --glow: transparent;
  --bg-glow-2: transparent;
  --focus-ring: var(--text);
  --graph-label-bg: color-mix(in srgb, var(--panel) 82%, transparent);
}

html[data-theme="light"][data-theme-variant="maybe"] {
  --nova-color-canvas: var(--nova-ref-light-canvas-alternate);
  --bg: var(--nova-color-canvas);
  --bs-body-bg-rgb: var(--palette-light-bg-maybe-rgb);
}

html[data-theme="light"][data-theme-variant="forest"] {
  --nova-color-canvas: var(--nova-ref-theme-forest-background);
  --nova-color-surface-paper: color-mix(in srgb, var(--nova-ref-theme-forest-background) 98%, var(--nova-ref-theme-forest-foreground));
  --nova-color-surface-raised: var(--nova-ref-theme-forest-background);
  --nova-color-surface-inset: color-mix(in srgb, var(--nova-ref-theme-forest-background) 94%, var(--nova-ref-theme-forest-foreground));
  --nova-color-ink: var(--nova-ref-theme-forest-foreground);
  --nova-color-ink-muted: color-mix(in srgb, var(--nova-ref-theme-forest-foreground) 72%, var(--nova-ref-theme-forest-background));
  --nova-color-ink-faint: color-mix(in srgb, var(--nova-ref-theme-forest-foreground) 52%, var(--nova-ref-theme-forest-background));
  --nova-color-border-quiet: color-mix(in srgb, var(--nova-ref-theme-forest-foreground) 18%, var(--nova-ref-theme-forest-background));
  --nova-color-border-control: color-mix(in srgb, var(--nova-ref-theme-forest-foreground) 56%, var(--nova-ref-theme-forest-background));
  --nova-color-border-strong: var(--nova-ref-theme-forest-foreground);
  --nova-color-accent: var(--nova-ref-theme-forest-accent);
  --nova-color-accent-hover: color-mix(in srgb, var(--nova-ref-theme-forest-accent) 86%, var(--nova-ref-theme-forest-foreground));
  --nova-color-accent-ink: var(--nova-ref-theme-forest-accent);
  --nova-color-accent-soft: color-mix(in srgb, var(--nova-ref-theme-forest-accent) 12%, var(--nova-ref-theme-forest-background));
  --nova-color-on-accent: var(--nova-ref-theme-forest-background);
  --bs-primary-rgb: var(--nova-ref-theme-forest-accent-rgb);
  --bs-light-rgb: var(--nova-ref-theme-forest-background-rgb);
  --bs-dark-rgb: var(--nova-ref-theme-forest-foreground-rgb);
  --bs-white-rgb: var(--nova-ref-theme-forest-background-rgb);
  --bs-black-rgb: var(--nova-ref-theme-forest-foreground-rgb);
  --bs-body-color-rgb: var(--nova-ref-theme-forest-foreground-rgb);
  --bs-body-bg-rgb: var(--nova-ref-theme-forest-background-rgb);
  --bs-emphasis-color-rgb: var(--nova-ref-theme-forest-foreground-rgb);
  --bs-link-color-rgb: var(--nova-ref-theme-forest-accent-rgb);
  --bs-link-hover-color-rgb: var(--nova-ref-theme-forest-foreground-rgb);
}

html[data-theme="dark"][data-theme-variant="forest"] {
  --nova-color-canvas: var(--nova-ref-theme-coral-dark);
  --nova-color-surface-paper: color-mix(in srgb, var(--nova-ref-theme-coral-dark) 94%, var(--nova-ref-theme-coral-light));
  --nova-color-surface-raised: color-mix(in srgb, var(--nova-ref-theme-coral-dark) 88%, var(--nova-ref-theme-coral-light));
  --nova-color-surface-inset: var(--nova-ref-theme-coral-dark);
  --nova-color-ink: var(--nova-ref-theme-coral-light);
  --nova-color-ink-muted: color-mix(in srgb, var(--nova-ref-theme-coral-light) 72%, var(--nova-ref-theme-coral-dark));
  --nova-color-ink-faint: color-mix(in srgb, var(--nova-ref-theme-coral-light) 52%, var(--nova-ref-theme-coral-dark));
  --nova-color-border-quiet: color-mix(in srgb, var(--nova-ref-theme-coral-light) 18%, var(--nova-ref-theme-coral-dark));
  --nova-color-border-control: color-mix(in srgb, var(--nova-ref-theme-coral-light) 56%, var(--nova-ref-theme-coral-dark));
  --nova-color-border-strong: var(--nova-ref-theme-coral-light);
  --nova-color-accent: var(--nova-ref-theme-forest-accent);
  --nova-color-accent-hover: color-mix(in srgb, var(--nova-ref-theme-forest-accent) 86%, var(--nova-ref-theme-coral-dark));
  --nova-color-accent-ink: color-mix(in srgb, var(--nova-ref-theme-forest-accent) 68%, var(--nova-ref-theme-coral-light));
  --nova-color-accent-soft: color-mix(in srgb, var(--nova-ref-theme-forest-accent) 18%, var(--nova-ref-theme-coral-dark));
  --nova-color-on-accent: var(--nova-ref-theme-coral-light);
  --nova-color-rail: var(--nova-ref-theme-coral-dark);
  --nova-color-rail-ink: var(--nova-ref-theme-coral-light);
  --nova-color-rail-muted: color-mix(in srgb, var(--nova-color-rail-ink) 68%, transparent);
  --bs-primary-rgb: var(--nova-ref-theme-forest-accent-rgb);
  --bs-light-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-dark-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-white-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-black-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-body-color-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-body-bg-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-emphasis-color-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-link-color-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-link-hover-color-rgb: var(--nova-ref-theme-coral-light-rgb);
}

html[data-theme="dark"][data-theme-variant="olive"] {
  --nova-color-canvas: var(--nova-ref-theme-olive-background);
  --nova-color-surface-paper: color-mix(in srgb, var(--nova-ref-theme-olive-background) 94%, var(--nova-ref-theme-olive-foreground));
  --nova-color-surface-raised: color-mix(in srgb, var(--nova-ref-theme-olive-background) 88%, var(--nova-ref-theme-olive-foreground));
  --nova-color-surface-inset: var(--nova-ref-theme-olive-background);
  --nova-color-ink: var(--nova-ref-theme-olive-foreground);
  --nova-color-ink-muted: color-mix(in srgb, var(--nova-ref-theme-olive-foreground) 72%, var(--nova-ref-theme-olive-background));
  --nova-color-ink-faint: color-mix(in srgb, var(--nova-ref-theme-olive-foreground) 52%, var(--nova-ref-theme-olive-background));
  --nova-color-border-quiet: color-mix(in srgb, var(--nova-ref-theme-olive-foreground) 18%, var(--nova-ref-theme-olive-background));
  --nova-color-border-control: color-mix(in srgb, var(--nova-ref-theme-olive-foreground) 56%, var(--nova-ref-theme-olive-background));
  --nova-color-border-strong: var(--nova-ref-theme-olive-foreground);
  --nova-color-accent: var(--nova-ref-theme-olive-accent);
  --nova-color-accent-hover: color-mix(in srgb, var(--nova-ref-theme-olive-accent) 86%, var(--nova-ref-theme-olive-foreground));
  --nova-color-accent-ink: var(--nova-ref-theme-olive-accent);
  --nova-color-accent-soft: color-mix(in srgb, var(--nova-ref-theme-olive-accent) 18%, var(--nova-ref-theme-olive-background));
  --nova-color-on-accent: var(--nova-ref-theme-olive-background);
  --nova-color-rail: var(--nova-ref-theme-olive-background);
  --nova-color-rail-ink: var(--nova-ref-theme-olive-foreground);
  --nova-color-rail-muted: color-mix(in srgb, var(--nova-color-rail-ink) 68%, transparent);
  --bs-primary-rgb: var(--nova-ref-theme-olive-accent-rgb);
  --bs-light-rgb: var(--nova-ref-theme-olive-foreground-rgb);
  --bs-dark-rgb: var(--nova-ref-theme-olive-background-rgb);
  --bs-white-rgb: var(--nova-ref-theme-olive-foreground-rgb);
  --bs-black-rgb: var(--nova-ref-theme-olive-background-rgb);
  --bs-body-color-rgb: var(--nova-ref-theme-olive-foreground-rgb);
  --bs-body-bg-rgb: var(--nova-ref-theme-olive-background-rgb);
  --bs-emphasis-color-rgb: var(--nova-ref-theme-olive-foreground-rgb);
  --bs-link-color-rgb: var(--nova-ref-theme-olive-accent-rgb);
  --bs-link-hover-color-rgb: var(--nova-ref-theme-olive-foreground-rgb);
}

html[data-theme="light"][data-theme-variant="coral"] {
  --nova-color-canvas: var(--nova-ref-theme-coral-light);
  --nova-color-surface-paper: color-mix(in srgb, var(--nova-ref-theme-coral-light) 98%, var(--nova-ref-theme-coral-dark));
  --nova-color-surface-raised: var(--nova-ref-theme-coral-light);
  --nova-color-surface-inset: color-mix(in srgb, var(--nova-ref-theme-coral-light) 94%, var(--nova-ref-theme-coral-dark));
  --nova-color-ink: var(--nova-ref-theme-coral-dark);
  --nova-color-ink-muted: color-mix(in srgb, var(--nova-ref-theme-coral-dark) 72%, var(--nova-ref-theme-coral-light));
  --nova-color-ink-faint: color-mix(in srgb, var(--nova-ref-theme-coral-dark) 52%, var(--nova-ref-theme-coral-light));
  --nova-color-border-quiet: color-mix(in srgb, var(--nova-ref-theme-coral-dark) 18%, var(--nova-ref-theme-coral-light));
  --nova-color-border-control: color-mix(in srgb, var(--nova-ref-theme-coral-dark) 56%, var(--nova-ref-theme-coral-light));
  --nova-color-border-strong: var(--nova-ref-theme-coral-dark);
  --nova-color-accent: var(--nova-ref-theme-coral-accent);
  --nova-color-accent-hover: color-mix(in srgb, var(--nova-ref-theme-coral-accent) 86%, var(--nova-ref-theme-coral-dark));
  --nova-color-accent-ink: color-mix(in srgb, var(--nova-ref-theme-coral-accent) 70%, var(--nova-ref-theme-coral-dark));
  --nova-color-accent-soft: color-mix(in srgb, var(--nova-ref-theme-coral-accent) 12%, var(--nova-ref-theme-coral-light));
  --nova-color-on-accent: color-mix(in srgb, var(--nova-ref-theme-coral-dark) 70%, var(--nova-ref-light-ink));
  --bs-primary-rgb: var(--nova-ref-theme-coral-accent-rgb);
  --bs-light-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-dark-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-white-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-black-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-body-color-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-body-bg-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-emphasis-color-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-link-color-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-link-hover-color-rgb: var(--nova-ref-theme-coral-dark-rgb);
}

html[data-theme="dark"][data-theme-variant="coral"] {
  --nova-color-canvas: var(--nova-ref-theme-coral-dark);
  --nova-color-surface-paper: color-mix(in srgb, var(--nova-ref-theme-coral-dark) 94%, var(--nova-ref-theme-coral-light));
  --nova-color-surface-raised: color-mix(in srgb, var(--nova-ref-theme-coral-dark) 88%, var(--nova-ref-theme-coral-light));
  --nova-color-surface-inset: var(--nova-ref-theme-coral-dark);
  --nova-color-ink: var(--nova-ref-theme-coral-light);
  --nova-color-ink-muted: color-mix(in srgb, var(--nova-ref-theme-coral-light) 72%, var(--nova-ref-theme-coral-dark));
  --nova-color-ink-faint: color-mix(in srgb, var(--nova-ref-theme-coral-light) 52%, var(--nova-ref-theme-coral-dark));
  --nova-color-border-quiet: color-mix(in srgb, var(--nova-ref-theme-coral-light) 18%, var(--nova-ref-theme-coral-dark));
  --nova-color-border-control: color-mix(in srgb, var(--nova-ref-theme-coral-light) 56%, var(--nova-ref-theme-coral-dark));
  --nova-color-border-strong: var(--nova-ref-theme-coral-light);
  --nova-color-accent: var(--nova-ref-theme-coral-accent);
  --nova-color-accent-hover: color-mix(in srgb, var(--nova-ref-theme-coral-accent) 86%, var(--nova-ref-theme-coral-light));
  --nova-color-accent-ink: color-mix(in srgb, var(--nova-ref-theme-coral-accent) 95%, var(--nova-ref-theme-coral-light));
  --nova-color-accent-soft: color-mix(in srgb, var(--nova-ref-theme-coral-accent) 18%, var(--nova-ref-theme-coral-dark));
  --nova-color-on-accent: color-mix(in srgb, var(--nova-ref-theme-coral-dark) 70%, var(--nova-ref-light-ink));
  --nova-color-rail: var(--nova-ref-theme-coral-dark);
  --nova-color-rail-ink: var(--nova-ref-theme-coral-light);
  --nova-color-rail-muted: color-mix(in srgb, var(--nova-color-rail-ink) 68%, transparent);
  --bs-primary-rgb: var(--nova-ref-theme-coral-accent-rgb);
  --bs-light-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-dark-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-white-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-black-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-body-color-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-body-bg-rgb: var(--nova-ref-theme-coral-dark-rgb);
  --bs-emphasis-color-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-link-color-rgb: var(--nova-ref-theme-coral-light-rgb);
  --bs-link-hover-color-rgb: var(--nova-ref-theme-coral-light-rgb);
}

html[data-theme="light"][data-theme-variant="cobalt"] {
  --nova-color-canvas: var(--nova-ref-theme-cobalt-light-background);
  --nova-color-surface-paper: color-mix(in srgb, var(--nova-ref-theme-cobalt-light-background) 98%, var(--nova-ref-theme-cobalt-light-foreground));
  --nova-color-surface-raised: var(--nova-ref-theme-cobalt-light-background);
  --nova-color-surface-inset: color-mix(in srgb, var(--nova-ref-theme-cobalt-light-background) 94%, var(--nova-ref-theme-cobalt-light-foreground));
  --nova-color-ink: var(--nova-ref-theme-cobalt-light-foreground);
  --nova-color-ink-muted: color-mix(in srgb, var(--nova-ref-theme-cobalt-light-foreground) 72%, var(--nova-ref-theme-cobalt-light-background));
  --nova-color-ink-faint: color-mix(in srgb, var(--nova-ref-theme-cobalt-light-foreground) 52%, var(--nova-ref-theme-cobalt-light-background));
  --nova-color-border-quiet: color-mix(in srgb, var(--nova-ref-theme-cobalt-light-foreground) 18%, var(--nova-ref-theme-cobalt-light-background));
  --nova-color-border-control: color-mix(in srgb, var(--nova-ref-theme-cobalt-light-foreground) 56%, var(--nova-ref-theme-cobalt-light-background));
  --nova-color-border-strong: var(--nova-ref-theme-cobalt-light-foreground);
  --nova-color-accent: var(--nova-ref-theme-cobalt-accent);
  --nova-color-accent-hover: color-mix(in srgb, var(--nova-ref-theme-cobalt-accent) 86%, var(--nova-ref-theme-cobalt-light-foreground));
  --nova-color-accent-ink: var(--nova-ref-theme-cobalt-accent);
  --nova-color-accent-soft: color-mix(in srgb, var(--nova-ref-theme-cobalt-accent) 12%, var(--nova-ref-theme-cobalt-light-background));
  --nova-color-on-accent: var(--nova-ref-theme-cobalt-dark-foreground);
  --bs-primary-rgb: var(--nova-ref-theme-cobalt-accent-rgb);
  --bs-light-rgb: var(--nova-ref-theme-cobalt-light-background-rgb);
  --bs-dark-rgb: var(--nova-ref-theme-cobalt-light-foreground-rgb);
  --bs-white-rgb: var(--nova-ref-theme-cobalt-light-background-rgb);
  --bs-black-rgb: var(--nova-ref-theme-cobalt-light-foreground-rgb);
  --bs-body-color-rgb: var(--nova-ref-theme-cobalt-light-foreground-rgb);
  --bs-body-bg-rgb: var(--nova-ref-theme-cobalt-light-background-rgb);
  --bs-emphasis-color-rgb: var(--nova-ref-theme-cobalt-light-foreground-rgb);
  --bs-link-color-rgb: var(--nova-ref-theme-cobalt-accent-rgb);
  --bs-link-hover-color-rgb: var(--nova-ref-theme-cobalt-light-foreground-rgb);
}

html[data-theme="dark"][data-theme-variant="cobalt"] {
  --nova-color-canvas: var(--nova-ref-theme-cobalt-dark-background);
  --nova-color-surface-paper: color-mix(in srgb, var(--nova-ref-theme-cobalt-dark-background) 94%, var(--nova-ref-theme-cobalt-dark-foreground));
  --nova-color-surface-raised: color-mix(in srgb, var(--nova-ref-theme-cobalt-dark-background) 88%, var(--nova-ref-theme-cobalt-dark-foreground));
  --nova-color-surface-inset: var(--nova-ref-theme-cobalt-dark-background);
  --nova-color-ink: var(--nova-ref-theme-cobalt-dark-foreground);
  --nova-color-ink-muted: color-mix(in srgb, var(--nova-ref-theme-cobalt-dark-foreground) 72%, var(--nova-ref-theme-cobalt-dark-background));
  --nova-color-ink-faint: color-mix(in srgb, var(--nova-ref-theme-cobalt-dark-foreground) 52%, var(--nova-ref-theme-cobalt-dark-background));
  --nova-color-border-quiet: color-mix(in srgb, var(--nova-ref-theme-cobalt-dark-foreground) 18%, var(--nova-ref-theme-cobalt-dark-background));
  --nova-color-border-control: color-mix(in srgb, var(--nova-ref-theme-cobalt-dark-foreground) 56%, var(--nova-ref-theme-cobalt-dark-background));
  --nova-color-border-strong: var(--nova-ref-theme-cobalt-dark-foreground);
  --nova-color-accent: var(--nova-ref-theme-cobalt-accent);
  --nova-color-accent-hover: color-mix(in srgb, var(--nova-ref-theme-cobalt-accent) 95%, var(--nova-ref-theme-cobalt-dark-foreground));
  --nova-color-accent-ink: color-mix(in srgb, var(--nova-ref-theme-cobalt-accent) 85%, var(--nova-ref-theme-cobalt-dark-foreground));
  --nova-color-accent-soft: color-mix(in srgb, var(--nova-ref-theme-cobalt-accent) 18%, var(--nova-ref-theme-cobalt-dark-background));
  --nova-color-on-accent: var(--nova-ref-theme-cobalt-dark-foreground);
  --nova-color-rail: var(--nova-ref-theme-cobalt-dark-background);
  --nova-color-rail-ink: var(--nova-ref-theme-cobalt-dark-foreground);
  --nova-color-rail-muted: color-mix(in srgb, var(--nova-color-rail-ink) 68%, transparent);
  --bs-primary-rgb: var(--nova-ref-theme-cobalt-accent-rgb);
  --bs-light-rgb: var(--nova-ref-theme-cobalt-dark-foreground-rgb);
  --bs-dark-rgb: var(--nova-ref-theme-cobalt-dark-background-rgb);
  --bs-white-rgb: var(--nova-ref-theme-cobalt-dark-foreground-rgb);
  --bs-black-rgb: var(--nova-ref-theme-cobalt-dark-background-rgb);
  --bs-body-color-rgb: var(--nova-ref-theme-cobalt-dark-foreground-rgb);
  --bs-body-bg-rgb: var(--nova-ref-theme-cobalt-dark-background-rgb);
  --bs-emphasis-color-rgb: var(--nova-ref-theme-cobalt-dark-foreground-rgb);
  --bs-link-color-rgb: var(--nova-ref-theme-cobalt-dark-foreground-rgb);
  --bs-link-hover-color-rgb: var(--nova-ref-theme-cobalt-dark-foreground-rgb);
}

/* Legacy consumers still resolve through semantic roles for custom presets. */
html[data-theme="light"][data-theme-variant="forest"],
html[data-theme="dark"][data-theme-variant="forest"],
html[data-theme="dark"][data-theme-variant="olive"],
html[data-theme="light"][data-theme-variant="coral"],
html[data-theme="dark"][data-theme-variant="coral"],
html[data-theme="light"][data-theme-variant="cobalt"],
html[data-theme="dark"][data-theme-variant="cobalt"] {
  --surface-raised: var(--nova-color-surface-raised);
  --surface-code: var(--nova-color-rail);
  --surface-code-text: var(--nova-color-rail-ink);
  --text-inverse: var(--nova-color-rail-ink);
  --text-on-accent: var(--nova-color-on-accent);
  --text-on-muted: var(--nova-color-on-accent);
  --text-on-dark: var(--nova-color-rail-ink);
  --success-contrast: var(--nova-color-canvas);
  --warning-contrast: var(--nova-color-canvas);
  --danger-contrast: var(--nova-color-canvas);
  --info-contrast: var(--nova-color-canvas);
  --neutral-soft: var(--nova-color-surface-inset);
  --bs-gray-100: var(--nova-color-surface-raised);
  --bs-gray-200: var(--nova-color-surface-inset);
  --bs-gray-300: var(--nova-color-border-quiet);
  --bs-gray-400: var(--nova-color-border-control);
  --glass-on-dark-subtle: color-mix(in srgb, var(--nova-color-rail-ink) 8%, transparent);
  --glass-on-dark-soft: color-mix(in srgb, var(--nova-color-rail-ink) 12%, transparent);
  --glass-on-dark-medium: color-mix(in srgb, var(--nova-color-rail-ink) 18%, transparent);
  --glass-on-dark-strong: color-mix(in srgb, var(--nova-color-rail-ink) 35%, transparent);
  --text-on-dark-muted: color-mix(in srgb, var(--nova-color-rail-ink) 85%, transparent);
  --text-on-dark-subtle: color-mix(in srgb, var(--nova-color-rail-ink) 65%, transparent);
  --topbar: var(--nova-color-canvas);
  --card-alt: var(--nova-color-surface-inset);
  --skeleton-surface: color-mix(in srgb, var(--nova-color-surface-inset) 78%, var(--nova-color-accent) 9%);
  --skeleton-surface-strong: color-mix(in srgb, var(--nova-color-surface-inset) 68%, var(--nova-color-accent) 14%);
  --skeleton-sheen: color-mix(in srgb, var(--nova-color-ink) 12%, transparent);
  --surface-shell-sidebar: var(--nova-color-surface-inset);
  --line-shell-sidebar: var(--nova-color-border-control);
  --surface-ops-page: var(--nova-color-surface-inset);
  --surface-ops-panel: var(--nova-color-surface-paper);
  --surface-ops-head: var(--nova-color-surface-raised);
  --surface-ops-hover: var(--nova-color-accent-soft);
  --line-ops: var(--nova-color-border-control);
  --line-ops-soft: var(--nova-color-border-quiet);
  --text-ops-table: var(--nova-color-ink);
  --study-action-muted-hover: var(--nova-color-ink);
  --study-action-disabled: var(--nova-color-border-control);
  --study-paper-surface: var(--nova-color-surface-paper);
  --code-panel: var(--nova-color-rail);
  --code-panel-line: var(--nova-color-border-control);
  --code-panel-text: var(--nova-color-rail-ink);
}

/* These compatibility roles describe inverse content, not navigation. Keep
   their dark-surface behavior when a light preset uses its new light rail. */
html[data-theme="light"][data-theme-variant="forest"],
html[data-theme="light"][data-theme-variant="coral"],
html[data-theme="light"][data-theme-variant="cobalt"] {
  --surface-code: var(--nova-color-ink);
  --surface-code-text: var(--nova-color-canvas);
  --text-inverse: var(--nova-color-canvas);
  --text-on-dark: var(--nova-color-canvas);
  --glass-on-dark-subtle: color-mix(in srgb, var(--nova-color-canvas) 8%, transparent);
  --glass-on-dark-soft: color-mix(in srgb, var(--nova-color-canvas) 12%, transparent);
  --glass-on-dark-medium: color-mix(in srgb, var(--nova-color-canvas) 18%, transparent);
  --glass-on-dark-strong: color-mix(in srgb, var(--nova-color-canvas) 35%, transparent);
  --text-on-dark-muted: color-mix(in srgb, var(--nova-color-canvas) 85%, transparent);
  --text-on-dark-subtle: color-mix(in srgb, var(--nova-color-canvas) 65%, transparent);
  --code-panel: var(--nova-color-ink);
  --code-panel-text: var(--nova-color-canvas);
}

* {
  box-sizing: border-box;
}

/* Universal text color fixes - ensure all text is visible in both themes */
html,
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p,
li,
dd,
dt,
a,
button,
input,
select,
textarea,
option,
label {
  color: var(--text);
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-family: var(--font-body);
  background-image:
    var(--nova-texture-canvas-grain),
    radial-gradient(60rem 60rem at 10% -10%, var(--glow), transparent 50%),
    radial-gradient(40rem 40rem at 90% 10%, var(--bg-glow-2), transparent 45%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 192px 192px, auto, auto;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-ui);
}

button,
.btn,
input,
select,
textarea,
label,
.navbar,
.nav-pill,
.dropdown-item,
.user-chip,
.table thead th,
.form-label,
.form-text,
.small,
.badge,
.panel-header h2,
.panel-header h3 {
  font-family: var(--font-ui);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

/* Badges with numeric/technical content use monospace */
.badge[data-mono],
.badge.font-mono,
.badge.u-mono {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

main.container {
  flex: 1 0 auto;
}

.container.app-main-shell {
  max-width: min(1080px, calc(100vw - 8rem)) !important;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Large desktop scaling (1440p and above) */
@media (min-width: 1400px) {
  html {
    font-size: 17px;
  }

  .container.app-main-shell {
    max-width: min(1500px, calc(100vw - 3rem)) !important;
  }

  .page-subtitle,
  .form-text,
  .small,
  .text-muted {
    font-size: 0.92rem;
  }
}

/* Ultra-wide desktop scaling */
@media (min-width: 1920px) {
  html {
    font-size: 18px;
  }

  .container.app-main-shell {
    max-width: min(var(--app-content-max), calc(100vw - var(--app-ultrawide-gutter))) !important;
  }

  .site-footer > .container {
    width: 100%;
    max-width: min(var(--app-content-max), calc(100vw - var(--app-ultrawide-gutter)));
  }

  .auth-page-shell {
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
  }
}

.legal-document-body .container.app-main-shell {
  max-width: min(72rem, calc(100vw - 2rem)) !important;
}

.top-shell {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.eros-nav {
  background: var(--topbar);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nova-accent-shadow-source) 15%, transparent);
}

.app-nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (min-width: 992px) {
  .eros-nav > .container.app-main-shell {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .eros-nav .navbar-collapse {
    display: contents !important;
  }

  .nav-main-row {
    display: contents !important;
  }

  .app-nav-links {
    grid-column: 2;
    justify-content: center;
  }

  .nav-utility-cluster {
    grid-column: 3;
    justify-self: end;
  }

  .nav-public-actions {
    grid-column: 3;
    justify-self: end;
  }
}

.nav-utility-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.nav-account-dropdown {
  flex: 0 0 auto;
  width: auto;
}

.nav-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--yellow) 38%, var(--line) 62%);
  background: color-mix(in srgb, var(--surface-warning) 72%, var(--panel) 28%);
  color: var(--text);
  text-decoration: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--base-white) 45%, transparent);
  transition: transform var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control),
              border-color var(--motion-control) var(--ease-control),
              background-color var(--motion-control) var(--ease-control);
}

.nav-streak-chip:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--yellow) 55%, var(--line) 45%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--warning) 10%, transparent);
}

.nav-streak-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 30%, transparent 70%);
}

.nav-streak-chip--zero {
  opacity: 0.4;
}

.nav-streak-chip--pending {
  border-color: color-mix(in srgb, var(--neutral) 28%, var(--line) 72%);
  background: color-mix(in srgb, var(--neutral-soft) 58%, var(--panel) 42%);
  opacity: 0.62;
}

.nav-streak-chip--pending .nav-streak-chip__value {
  background: color-mix(in srgb, var(--neutral) 22%, var(--panel) 78%);
  color: var(--muted);
}

.nav-streak-chip__label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-streak-chip__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--button-solid-hover-bg) 0%, var(--button-solid-bg) 100%);
  color: var(--button-solid-text);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

html[data-theme="dark"] .nav-streak-chip {
  background: color-mix(in srgb, var(--surface-warning) 74%, var(--panel) 26%);
  border-color: color-mix(in srgb, var(--yellow) 48%, var(--line) 52%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--base-white) 6%, transparent);
}

.nav-pill {
  color: var(--text);
  text-decoration: none;
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  font-size: 0.85rem;
  transition: background-color var(--motion-control) var(--ease-control),
              color var(--motion-control) var(--ease-control),
              border-color var(--motion-control) var(--ease-control),
              transform var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control);
  white-space: nowrap;
  border: 1px solid transparent;
  display: inline-block;
  background: transparent;
  font-weight: 500;
}

.nav-pill:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--card-alt) 70%, var(--panel) 30%);
  border-color: color-mix(in srgb, var(--line) 56%, transparent 44%);
}

.nav-pill:active {
  transform: scale(0.98);
}

.nav-pill.active {
  background: color-mix(in srgb, var(--accent) 80%, var(--info) 20%);
  color: var(--text-on-accent) !important;
  font-weight: 600;
  border-color: color-mix(in srgb, var(--base-black) 8%, transparent);
}

.nav-pill.active:hover {
  color: var(--text-on-accent) !important;
  background: color-mix(in srgb, var(--accent-hover) 82%, var(--info) 18%);
}

.nav-pill.active:focus {
  color: var(--text-on-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.nav-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.account-menu-btn {
  justify-content: center;
  min-width: 9.5rem;
}

@media (min-width: 992px) {
  .nav-utility-cluster {
    flex-wrap: nowrap;
  }
}

@media (max-width: 576px) {
  .app-nav-links {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  .nav-pill {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
    flex: 0 0 auto;
    text-align: center;
  }

  .nav-utility-cluster {
    width: 100%;
    justify-content: stretch !important;
  }

  .nav-account-dropdown {
    width: 100%;
  }

  .nav-streak-chip {
    width: 100%;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
  }

  .navbar-collapse {
    padding-top: 0.5rem;
  }

  .navbar-collapse .ms-auto {
    width: 100%;
    margin-left: 0 !important;
    justify-content: flex-end;
  }

  .navbar-collapse .btn {
    width: 100%;
    text-align: left;
    font-size: 0.8rem;
  }

  .navbar-collapse form {
    width: 100%;
  }

  .navbar-collapse form .btn {
    width: 100%;
  }
}

.brand-logo {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--nova-accent-shadow-source) 20%, transparent);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.theme-toggle .theme-icon {
  font-size: 0.9rem;
}

.user-chip {
  border: 1px solid var(--line);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.8rem;
}

/* Navbar-specific adjustments: present the user label inline without a white box */
.eros-nav #accountDropdown {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.15rem 0.35rem;
}
.eros-nav #accountDropdown .user-chip {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--text);
}
.eros-nav #accountDropdown:focus {
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Ensure critical UI text is readable in both light and dark themes
   Targeted selectors (headings, nav pills, table cells, badges, dropdown items)
   --------------------------------------------------------------------------- */
.card .card-body h1,
.card .card-body h2,
.card .card-body h3,
.card .card-body h4,
.card .card-body h5,
.card .card-body h6,
.card .card-body p,
.card .card-body a,
.nav-pills-shell .nav-pill,
.table th,
.table td,
.badge,
.panel-header h2,
.page-title,
.page-subtitle,
.metric-label,
.metric-value {
  color: var(--text);
}

/* Keep `.text-muted` lighter intentionally but ensure minimum contrast */
.text-muted {
  color: var(--muted);
  opacity: 1;
}
.btn-eros {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: 1px solid var(--button-primary-border);
  font-weight: 600;
  transition: background-color var(--motion-control) var(--ease-control),
              color var(--motion-control) var(--ease-control),
              border-color var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control),
              transform var(--motion-control) var(--ease-control);
}

.btn-eros:hover {
  background: var(--button-primary-hover-bg);
  border-color: var(--button-primary-hover-border);
  color: var(--button-primary-hover-text);
}

.btn-eros:active,
.btn-eros.active {
  background: var(--button-primary-active-bg);
  border-color: var(--button-primary-active-border);
  color: var(--button-primary-active-text);
}

/* Bootstrap button variants mapped back onto the Nova palette. */
.btn-light {
  --bs-btn-color: var(--button-secondary-text);
  --bs-btn-bg: var(--button-secondary-bg);
  --bs-btn-border-color: var(--button-secondary-border);
  --bs-btn-hover-color: var(--button-secondary-hover-text);
  --bs-btn-hover-bg: var(--button-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--button-secondary-hover-border);
  --bs-btn-active-color: var(--button-secondary-active-text);
  --bs-btn-active-bg: var(--button-secondary-active-bg);
  --bs-btn-active-border-color: var(--button-secondary-active-border);
  --bs-btn-disabled-color: var(--button-disabled-text);
  --bs-btn-disabled-bg: var(--button-disabled-bg);
  --bs-btn-disabled-border-color: var(--button-disabled-border);
  background: var(--bs-btn-bg);
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  transition: background-color var(--motion-control) var(--ease-control),
              border-color var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control),
              transform var(--motion-control) var(--ease-control);
}

.btn-light:hover {
  background: var(--bs-btn-hover-bg);
  color: var(--bs-btn-hover-color);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-light:active,
.btn-light.active {
  background: var(--bs-btn-active-bg);
  color: var(--bs-btn-active-color);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light {
  --bs-btn-color: var(--button-secondary-text);
  --bs-btn-border-color: var(--button-secondary-border);
  --bs-btn-hover-color: var(--button-secondary-hover-text);
  --bs-btn-hover-bg: var(--button-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--button-secondary-hover-border);
  --bs-btn-active-color: var(--button-secondary-active-text);
  --bs-btn-active-bg: var(--button-secondary-active-bg);
  --bs-btn-active-border-color: var(--button-secondary-active-border);
  --bs-btn-disabled-color: var(--button-disabled-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--button-disabled-border);
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background: transparent;
  transition: background-color var(--motion-control) var(--ease-control),
              border-color var(--motion-control) var(--ease-control),
              color var(--motion-control) var(--ease-control),
              transform var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover {
  background: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

.btn-outline-primary:active,
.btn-outline-secondary:active,
.btn-outline-success:active,
.btn-outline-warning:active,
.btn-outline-info:active,
.btn-outline-dark:active,
.btn-outline-light:active,
.btn-outline-primary.active,
.btn-outline-secondary.active,
.btn-outline-success.active,
.btn-outline-warning.active,
.btn-outline-info.active,
.btn-outline-dark.active,
.btn-outline-light.active {
  background: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  color: var(--bs-btn-active-color);
}

.btn-outline-danger {
  --bs-btn-color: var(--button-danger-quiet-text);
  --bs-btn-border-color: var(--button-danger-quiet-border);
  --bs-btn-hover-color: var(--button-danger-quiet-hover-text);
  --bs-btn-hover-bg: var(--button-danger-quiet-hover-bg);
  --bs-btn-hover-border-color: var(--button-danger-quiet-hover-border);
  --bs-btn-active-color: var(--button-danger-quiet-hover-text);
  --bs-btn-active-bg: var(--button-danger-quiet-hover-bg);
  --bs-btn-active-border-color: var(--button-danger-quiet-hover-border);
  --bs-btn-disabled-color: var(--button-disabled-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--button-disabled-border);
  background: transparent;
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}

.btn-outline-danger:hover,
.btn-outline-danger:active,
.btn-outline-danger.active {
  background: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark {
  background: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  transition: background-color var(--motion-control) var(--ease-control),
              border-color var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control),
              transform var(--motion-control) var(--ease-control);
}

.btn-primary,
.btn-success,
.btn-warning,
.btn-info,
.btn-dark {
  --bs-btn-color: var(--button-primary-text);
  --bs-btn-bg: var(--button-primary-bg);
  --bs-btn-border-color: var(--button-primary-border);
  --bs-btn-hover-color: var(--button-primary-hover-text);
  --bs-btn-hover-bg: var(--button-primary-hover-bg);
  --bs-btn-hover-border-color: var(--button-primary-hover-border);
  --bs-btn-active-color: var(--button-primary-active-text);
  --bs-btn-active-bg: var(--button-primary-active-bg);
  --bs-btn-active-border-color: var(--button-primary-active-border);
  --bs-btn-disabled-color: var(--button-disabled-text);
  --bs-btn-disabled-bg: var(--button-disabled-bg);
  --bs-btn-disabled-border-color: var(--button-disabled-border);
}

.btn-secondary {
  --bs-btn-color: var(--button-secondary-text);
  --bs-btn-bg: var(--button-secondary-bg);
  --bs-btn-border-color: var(--button-secondary-border);
  --bs-btn-hover-color: var(--button-secondary-hover-text);
  --bs-btn-hover-bg: var(--button-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--button-secondary-hover-border);
  --bs-btn-active-color: var(--button-secondary-active-text);
  --bs-btn-active-bg: var(--button-secondary-active-bg);
  --bs-btn-active-border-color: var(--button-secondary-active-border);
  --bs-btn-disabled-color: var(--button-disabled-text);
  --bs-btn-disabled-bg: var(--button-disabled-bg);
  --bs-btn-disabled-border-color: var(--button-disabled-border);
}

.btn-danger {
  --bs-btn-color: var(--button-danger-text);
  --bs-btn-bg: var(--button-danger-bg);
  --bs-btn-border-color: var(--button-danger-border);
  --bs-btn-hover-color: var(--button-danger-hover-text);
  --bs-btn-hover-bg: var(--button-danger-hover-bg);
  --bs-btn-hover-border-color: var(--button-danger-hover-border);
  --bs-btn-active-color: var(--button-danger-active-text);
  --bs-btn-active-bg: var(--button-danger-active-bg);
  --bs-btn-active-border-color: var(--button-danger-active-border);
  --bs-btn-disabled-color: var(--button-disabled-text);
  --bs-btn-disabled-bg: var(--button-disabled-bg);
  --bs-btn-disabled-border-color: var(--button-disabled-border);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-dark:hover {
  background: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

.btn-primary:active,
.btn-secondary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active,
.btn-info:active,
.btn-dark:active,
.btn-primary.active,
.btn-secondary.active,
.btn-success.active,
.btn-danger.active,
.btn-warning.active,
.btn-info.active,
.btn-dark.active {
  background: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  color: var(--bs-btn-active-color);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  background: var(--bs-btn-disabled-bg, var(--button-disabled-bg));
  border-color: var(--bs-btn-disabled-border-color, var(--button-disabled-border));
  color: var(--bs-btn-disabled-color, var(--button-disabled-text));
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

.nova-confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--overlay-backdrop);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-modal-open) var(--ease-modal);
}

body.nova-modal-open {
  overflow: hidden;
}

.nova-confirm-dialog__panel {
  width: min(30rem, 100%);
  border: 1px solid color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  opacity: 0;
  box-shadow: 0 24px 64px var(--shadow-color-strong);
  transform: scale(var(--motion-modal-scale));
  transform-origin: center;
  transition:
    transform var(--motion-modal-open) var(--ease-modal),
    opacity var(--motion-modal-open) var(--ease-modal);
  will-change: transform, opacity;
  overscroll-behavior: contain;
}

.nova-confirm-dialog__panel:focus {
  outline: none;
}

.nova-confirm-dialog__panel:focus-visible {
  box-shadow:
    var(--nova-focus-ring),
    0 24px 64px var(--shadow-color-strong);
}

.nova-confirm-dialog.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nova-confirm-dialog.is-open .nova-confirm-dialog__panel {
  opacity: 1;
  transform: scale(1);
}

.nova-confirm-dialog.is-closing {
  opacity: 0;
  transition-duration: var(--motion-modal-close);
}

.nova-confirm-dialog.is-closing .nova-confirm-dialog__panel {
  opacity: 0;
  transform: scale(var(--motion-modal-close-scale));
  transition-duration: var(--motion-modal-close);
}

.nova-confirm-dialog__body {
  padding: 1.15rem 1.15rem 0.5rem;
}

.nova-confirm-dialog__title {
  margin: 0;
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.25;
}

.nova-confirm-dialog__message {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.nova-confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.8rem 1.15rem 1.1rem;
}

.nova-confirm-dialog__button {
  min-width: 5.75rem;
  min-height: 2.35rem;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  transition:
    background-color var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    color var(--motion-normal) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard);
}

.nova-confirm-dialog__button:hover {
  box-shadow: var(--nova-elevation-control);
}

.nova-confirm-dialog__button:focus-visible {
  outline: none;
  box-shadow: var(--nova-focus-ring);
}

.nova-confirm-dialog__button--secondary {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.nova-confirm-dialog__button--secondary:hover {
  border-color: var(--button-secondary-hover-border);
  background: var(--button-secondary-hover-bg);
  color: var(--button-secondary-hover-text);
}

.nova-confirm-dialog__button--primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}

.nova-confirm-dialog__button--primary:hover {
  background: var(--button-primary-hover-bg);
  border-color: var(--button-primary-hover-border);
  color: var(--button-primary-hover-text);
}

.nova-confirm-dialog.is-danger .nova-confirm-dialog__button--primary {
  background: var(--button-critical-bg);
  border-color: var(--button-critical-border);
  color: var(--button-critical-text);
}

.nova-confirm-dialog.is-danger .nova-confirm-dialog__button--primary:hover {
  background: var(--button-critical-hover-bg);
  border-color: var(--button-critical-hover-border);
  color: var(--button-critical-hover-text);
}

@media (max-width: 575.98px) {
  .nova-confirm-dialog {
    align-items: flex-end;
  }

  .nova-confirm-dialog__panel {
    width: 100%;
  }

  .nova-confirm-dialog__actions {
    flex-direction: column-reverse;
  }

  .nova-confirm-dialog__button {
    width: 100%;
  }
}

.study-session-loading-btn.is-loading {
  position: relative;
  filter: saturate(0.92) brightness(0.96);
  box-shadow: inset 0 0 0 999px var(--button-loading-overlay),
              0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.study-session-loading-btn.is-loading::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.45em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.12em;
  animation: button-click-loading-spin var(--motion-loading-spin-quick) var(--ease-linear) infinite;
}

.study-session-loading-btn.is-loading:empty::before {
  margin-right: 0;
}

@keyframes button-click-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .study-session-loading-btn.is-loading::before {
    animation-duration: var(--motion-loading-spin-reduced);
  }
}

.btn-eros-muted {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border: 1px solid var(--button-secondary-border);
}

.btn-eros-muted:hover {
  background: var(--button-secondary-hover-bg);
  border-color: var(--button-secondary-hover-border);
  color: var(--button-secondary-hover-text);
}

.btn-eros-muted:active,
.btn-eros-muted.active {
  background: var(--button-secondary-active-bg);
  border-color: var(--button-secondary-active-border);
  color: var(--button-secondary-active-text);
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--motion-surface) var(--ease-control),
              box-shadow var(--motion-surface) var(--ease-control),
              border-color var(--motion-surface) var(--ease-control),
              background-color var(--motion-surface) var(--ease-control);
}

.card.card--interactive:hover,
a.card:hover,
button.card:hover,
[role="button"].card:hover,
.card[data-interactive="true"]:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-color-medium) 58%, transparent);
}

.card .card-body {
  background: var(--panel);
}

html[data-theme="dark"] .card .card-body {
  background: var(--panel);
}

.card .card-body {
  background: var(--panel);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.page-title {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.page-subtitle {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-style: italic;
}

html[data-theme="dark"] .page-subtitle {
  color: var(--muted);
}

/* --- Metrics --- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.metrics-grid-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.hero-value {
  font-size: 2.6rem;
  font-weight: 700;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.mini-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.deck-card {
  transition:
    transform var(--motion-surface) var(--ease-control),
    box-shadow var(--motion-surface) var(--ease-control);
}

.deck-card:hover {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-color-medium) 58%, transparent);
}

/* Ensure deck card headings are readable in all themes */
.deck-card .card-body,
.deck-card h3 {
  color: var(--text);
}

/* Responsive deck cards grid */
@media (max-width: 768px) {
  .deck-card {
    transform: none !important;
  }

  .deck-card .card-body {
    padding: 0.9rem;
  }

  .deck-card .d-flex.justify-content-between {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .deck-card h3 {
    font-size: 0.95rem;
  }
}

@media (max-width: 576px) {
  .deck-card .card-body {
    padding: 0.85rem;
  }

  .deck-card h3 {
    font-size: 0.9rem;
  }

  .deck-card p {
    font-size: 0.8rem;
    margin-bottom: 0.75rem !important;
  }

  .deck-card .state-badges {
    margin-bottom: 0.75rem !important;
  }

  .deck-card .d-flex.gap-2 {
    gap: 0.4rem !important;
    width: 100%;
  }

  .deck-card .btn {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
    min-height: 40px;
  }

  .deck-card .dropdown-menu {
    font-size: 0.85rem;
  }
}

.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
}

.metric-accent {
  border-left: 3px solid var(--accent);
}

.metric-green {
  border-left: 3px solid var(--green);
}

.metric-yellow {
  border-left: 3px solid var(--yellow);
}

.metric-red {
  border-left: 3px solid var(--red);
}

.metric-label {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.metric-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.metric-value-sm {
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

/* --- Tables --- */
.table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--muted) 85%, var(--text) 15%);
  border-bottom-color: var(--line);
  background: var(--card-alt);
  border-top: 1px solid var(--line);
}

.table tbody tr {
  color: var(--text);
}

.table td {
  vertical-align: middle;
  border-color: var(--line);
  color: var(--text);
}

.card-content-cell {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive tables - stack on mobile */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    min-width: 600px;
  }

  .card-content-cell {
    max-width: 150px;
  }
}

@media (max-width: 576px) {
  /* Hide table on very small screens and show card layout instead */
  .table {
    font-size: 0.8rem;
  }

  .table thead {
    display: none;
  }

  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    border-bottom: 2px solid var(--line);
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--base-black) 4%, transparent);
  }

  .table td {
    padding: 0.5rem 0 !important;
    border: none;
    position: relative;
    padding-left: 40% !important;
  }

  .table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.75rem;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    width: 35%;
  }

  .table td:first-child {
    padding-left: 0.75rem !important;
  }

  .table td:first-child::before {
    display: none;
  }

  .card-content-cell {
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
  }

  .card-content-cell::before {
    content: attr(data-label);
  }
}

/* --- Forms --- */
.form-control,
.form-select {
  border-radius: 10px;
  border-color: var(--line);
  background-color: var(--panel);
  color: var(--text);
  transition: border-color var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control),
              background-color var(--motion-control) var(--ease-control),
              color var(--motion-control) var(--ease-control);
}

.form-control::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
  color: var(--text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: color-mix(in srgb, var(--panel) 92%, var(--base-black) 8%);
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .form-control::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

/* Ensure labels are readable */
label,
.form-label {
  color: var(--text);
}

.btn-eros-muted {
  background: var(--button-quiet-bg);
}

html[data-theme="dark"] .btn-eros-muted {
  background: var(--button-quiet-bg);
}

.form-text,
.text-muted {
  color: var(--muted);
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--topbar);
  padding: 1.1rem 0 0.8rem;
  margin-top: auto;
  flex-shrink: 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.95rem;
  font-size: 0.82rem;
}

.footer-links a {
  color: var(--text);
  text-decoration: none;
  opacity: 0.8;
}

.footer-links a:hover {
  color: var(--accent);
  opacity: 1;
}

.footer-bottom {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.74rem;
}

/* --- Heatmap --- */
.heatmap-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.heatmap-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.heatmap-labels {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.heatmap-label {
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1rem;
  /* Ensure horizontal rendering across browsers (Firefox fix) */
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
  display: inline-block;
}

.dropdown-menu .icon {
  width: 20px;
  display: inline-block;
  text-align: center;
}

.dropdown-item .icon {
  margin-right: 8px;
}

/* Ensure dropdowns inherit the app theme colors so text is visible in dark mode */
.dropdown-menu {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 24px var(--shadow-color-medium);
  transition: opacity var(--motion-dropdown-open) var(--ease-dropdown),
              transform var(--motion-dropdown-open) var(--ease-dropdown),
              box-shadow var(--motion-dropdown-open) var(--ease-dropdown);
}
.dropdown-menu .dropdown-item {
  color: var(--text) !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: color-mix(in srgb, var(--card-alt) 78%, var(--accent) 22%);
  color: var(--text) !important;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.dropdown-item:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: none;
  box-shadow: var(--nova-focus-ring);
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
}
.dropdown-divider {
  border-top-color: var(--line) !important;
}

.heatmap-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--card-alt);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}

.heatmap-cell.level-1 { background: color-mix(in srgb, var(--accent) 20%, var(--card-alt) 80%); }
.heatmap-cell.level-2 { background: color-mix(in srgb, var(--accent) 36%, var(--card-alt) 64%); }
.heatmap-cell.level-3 { background: color-mix(in srgb, var(--accent) 54%, var(--card-alt) 46%); }
.heatmap-cell.level-4 { background: color-mix(in srgb, var(--accent) 72%, var(--card-alt) 28%); }

html[data-theme="dark"] .heatmap-cell {
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, var(--base-white) 6%);
}
html[data-theme="dark"] .heatmap-cell.level-1 { background: color-mix(in srgb, var(--accent) 22%, var(--panel) 78%); }
html[data-theme="dark"] .heatmap-cell.level-2 { background: color-mix(in srgb, var(--accent) 38%, var(--panel) 62%); }
html[data-theme="dark"] .heatmap-cell.level-3 { background: color-mix(in srgb, var(--accent) 56%, var(--panel) 44%); }
html[data-theme="dark"] .heatmap-cell.level-4 { background: color-mix(in srgb, var(--accent) 74%, var(--panel) 26%); }

/* --- Auth preview --- */
.auth-study-preview {
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
  padding-top: .35rem;
}

.auth-study-preview__item {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-size: .9rem;
}

.auth-study-preview__item::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  background: var(--accent);
  opacity: .58;
}

.card-content-cell code {
  background: color-mix(in srgb, var(--card-alt) 84%, var(--accent) 16%);
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
  font-size: 0.9em;
}

.card-content-cell pre {
  background: color-mix(in srgb, var(--card-alt) 84%, var(--accent) 16%);
  padding: 0.75rem;
  border-radius: 10px;
  overflow: auto;
}

html[data-theme="dark"] .card-content-cell code,
html[data-theme="dark"] .card-content-cell pre {
  background: color-mix(in srgb, var(--card-alt) 82%, var(--accent) 18%);
}

.rating-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.rating-actions .btn {
  padding: 0.8rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  line-height: 1.15;
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--base-white) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--base-black) 8%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--base-black) 12%, transparent);
}

.rating-actions .btn.btn-danger {
  background: var(--button-danger-bg);
  border-color: var(--button-danger-border);
  color: var(--button-danger-text);
}

.rating-actions .btn.btn-warning {
  background: var(--button-secondary-bg);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}

.rating-actions .btn.btn-primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}

.rating-actions .btn.btn-success {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}

.rating-actions .rating-label {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rating-actions .rating-interval {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.96;
}

.rating-actions .rating-hotkey {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.72;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rating-actions .btn.btn-warning {
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
  text-shadow: none;
}

.rating-actions .btn.btn-warning .rating-hotkey {
  opacity: 0.78;
}

.rating-actions .btn:hover,
.rating-actions .btn:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--base-white) 12%, transparent), 0 3px 10px color-mix(in srgb, var(--base-black) 9%, transparent);
}

.rating-actions .btn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 8px color-mix(in srgb, var(--base-black) 16%, transparent);
}

.trust-disclosure__notice {
  font-size: 0.84rem;
  border: 1px solid var(--nova-color-status-warning-border);
  background: var(--nova-color-status-warning-soft);
  color: var(--nova-color-ink);
}

.degraded-trust-banner {
  padding: var(--nova-space-4);
  border: var(--nova-border-width-quiet) solid var(--nova-color-status-warning-border);
  border-radius: var(--nova-radius-surface);
  background: var(--nova-color-status-warning-soft);
  color: var(--nova-color-ink);
}

.degraded-trust-banner.is-compact {
  padding: var(--nova-space-3);
  border-radius: var(--nova-radius-control);
}

.degraded-trust-banner__message {
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-compact);
  line-height: var(--nova-line-height-reading);
}

.degraded-trust-banner__title {
  color: var(--nova-color-status-warning-ink);
}

.degraded-trust-banner__reason {
  margin-top: var(--nova-space-1);
  color: var(--nova-color-ink-muted);
  font-family: var(--nova-font-ui);
  font-size: var(--nova-font-size-ui-small);
  line-height: var(--nova-line-height-ui);
}

.trust-disclosure__summary {
  cursor: pointer;
  list-style: none;
}

.trust-disclosure__summary::-webkit-details-marker {
  display: none;
}

.trust-disclosure__summary .badge {
  transition:
    background-color var(--motion-control) var(--ease-control),
    border-color var(--motion-control) var(--ease-control),
    color var(--motion-control) var(--ease-control);
}

.trust-disclosure__summary[aria-expanded="true"] .badge {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
  color: var(--text);
}

.trust-disclosure__source {
  font-size: 0.84rem;
  background: var(--panel);
}

.trust-disclosure__quote {
  color: var(--muted);
  font-style: italic;
}

.execution-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1rem;
  height: 100%;
  min-height: 0;
}

.execution-shell__context {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.execution-shell__body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.execution-shell__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.25rem;
  flex-wrap: wrap;
}

.execution-shell__actions .btn {
  border-radius: 999px;
  font-weight: 700;
  padding-inline: 1rem;
}

/* --- Cloze --- */
.cloze-answer {
  background: color-mix(in srgb, var(--green) 20%, var(--panel) 80%);
  color: color-mix(in srgb, var(--green) 72%, var(--text) 28%);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-weight: 600;
}

html[data-theme="dark"] .cloze-answer {
  background: color-mix(in srgb, var(--green) 26%, var(--panel) 74%);
  color: color-mix(in srgb, var(--green) 82%, var(--base-white) 18%);
}

/* --- Paper --- */
.paper-preview {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem;
  font-size: 0.82rem;
}

.paper-content-full {
  white-space: normal;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.9rem;
  max-height: 600px;
  overflow-y: auto;
}

/* Paper inner formatting – cap heading sizes to stay proportional */
.paper-content-full h2, .paper-preview h2 {
  font-size: 1.05rem;
  margin: 0.8rem 0 0.4rem 0;
  font-weight: 700;
}
.paper-content-full h3, .paper-preview h3 {
  font-size: 0.95rem;
  margin: 0.6rem 0 0.35rem 0;
  font-weight: 700;
}
.paper-content-full h4, .paper-preview h4 {
  font-size: 0.9rem;
  margin: 0.5rem 0 0.3rem 0;
  font-weight: 700;
}

.paper-section {
  color: var(--muted);
  letter-spacing: 0.02em;
}

.paper-gap { height: 0.8rem; }

.paper-question { margin: 0.5rem 0; display: flex; gap: 0.6rem; align-items: flex-start; }
.paper-question .q-badge {
  display: inline-block;
  min-width: 38px;
  text-align: center;
  background: var(--accent);
  color: var(--text-on-accent);
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
}
.paper-question .q-body { flex: 1; font-size: 0.9rem; line-height: 1.55; }

.paper-list { margin: 0.25rem 0 0.8rem 1rem; }
.paper-list li { margin: 0.25rem 0; }
.paper-list.numbered { list-style-type: decimal; }

.paper-content-full p { margin: 0 0 0.6rem 0; }
.paper-content-full ul, .paper-content-full ol { margin: 0 0 0.8rem 1rem; }


@media (max-width: 768px) {
  .paper-preview {
    max-height: 150px;
    font-size: 0.75rem;
    padding: 0.5rem;
  }

  .paper-content-full {
    max-height: 400px;
    font-size: 0.85rem;
    padding: 0.75rem;
  }

  .row.g-4 {
    gap: 0.75rem !important;
  }
}

@media (max-width: 576px) {
  .paper-preview {
    max-height: 120px;
    font-size: 0.7rem;
  }

  .paper-content-full {
    max-height: 300px;
    font-size: 0.8rem;
  }

  .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .d-flex.gap-1 {
    flex-wrap: wrap;
  }

  .d-flex.gap-1 .btn {
    flex: 1 1 auto;
    min-width: 60px;
    font-size: 0.7rem;
  }
}

/* --- Exam Mode --- */
.exam-question-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  transition: border-color var(--motion-surface) var(--ease-control),
              box-shadow var(--motion-surface) var(--ease-control),
              background-color var(--motion-surface) var(--ease-control);
}

.exam-question-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}

.exam-question-box .q-number {
  display: inline-block;
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.exam-question-box .q-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.exam-question-box textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
  font-size: 0.9rem;
  width: 100%;
  min-height: 80px;
  padding: 0.6rem 0.8rem;
  transition: border-color var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control),
              background-color var(--motion-control) var(--ease-control);
  background: var(--bg);
  color: var(--text);
}

.exam-question-box textarea::placeholder {
  color: var(--muted);
}

.exam-question-box textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .exam-question-box:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 12%, transparent);
}

html[data-theme="dark"] .exam-question-box textarea:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--info) 15%, transparent);
}

/* Paper content in dark mode */
html[data-theme="dark"] .paper-content-full,
html[data-theme="dark"] .paper-preview {
  color: var(--text);
}

html[data-theme="dark"] .paper-content-full h2,
html[data-theme="dark"] .paper-content-full h3,
html[data-theme="dark"] .paper-content-full h4,
html[data-theme="dark"] .paper-content-full p,
html[data-theme="dark"] .paper-content-full li,
html[data-theme="dark"] .paper-content-full span,
html[data-theme="dark"] .paper-preview h2,
html[data-theme="dark"] .paper-preview h3,
html[data-theme="dark"] .paper-preview h4,
html[data-theme="dark"] .paper-preview p,
html[data-theme="dark"] .paper-preview li,
html[data-theme="dark"] .paper-preview span {
  color: var(--text);
}

html[data-theme="dark"] .paper-question .q-body,
html[data-theme="dark"] .paper-question .q-body * {
  color: var(--text);
}

/* ── Adaptive exam answer widgets ─────────────────────── */

/* MCQ / multi-select options */
.exam-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.exam-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--motion-control) var(--ease-control),
              border-color var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
}

.exam-option:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
}

.exam-option.selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg) 90%);
  border-color: var(--accent);
}

.exam-option input[type="radio"],
.exam-option input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}

.option-label {
  font-weight: 700;
  min-width: 1.4rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.option-text {
  flex: 1;
}

/* True / False toggle pair */
.exam-tf {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.exam-tf-btn {
  flex: 1;
  justify-content: center;
  text-align: center;
  padding: 0.65rem 1rem;
  font-weight: 600;
  border-radius: 10px;
}

.exam-tf-btn input[type="radio"] {
  display: none;
}

.tf-label {
  font-size: 0.95rem;
}

.true-label { color: var(--green); }
.false-label { color: var(--red); }

/* These fills are the semantic success/danger tokens, not the identity accent,
   so they take their own contrast pairings. */
.exam-tf-btn.selected .true-label {
  color: var(--success-contrast);
}

.exam-tf-btn.selected .false-label {
  color: var(--danger-contrast);
}

.exam-tf-btn.selected:has(.true-label) {
  background: var(--green);
  border-color: var(--green);
}

.exam-tf-btn.selected:has(.false-label) {
  background: var(--red);
  border-color: var(--red);
}

/* Matching / ordering */
.exam-word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.word-bank-chip {
  display: inline-block;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.82rem;
  color: var(--text);
}

.exam-matching-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.3rem;
}

.matching-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.matching-label {
  font-weight: 700;
  min-width: 2.2rem;
  font-size: 0.9rem;
  color: var(--text);
}

.matching-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control),
              background-color var(--motion-control) var(--ease-control);
}

.matching-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}

.matching-input::placeholder { color: var(--muted); }

/* Fill-in-the-blank */
.exam-fill-blanks {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.3rem;
}

.fill-blank-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fill-blank-label {
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 4rem;
  white-space: nowrap;
}

.fill-blank-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color var(--motion-control) var(--ease-control),
              box-shadow var(--motion-control) var(--ease-control),
              background-color var(--motion-control) var(--ease-control);
}

.fill-blank-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}

.fill-blank-input::placeholder { color: var(--muted); }

/* Dark mode overrides for adaptive widgets */
html[data-theme="dark"] .exam-option.selected {
  background: color-mix(in srgb, var(--accent) 15%, var(--panel) 85%);
}

html[data-theme="dark"] .matching-input:focus,
html[data-theme="dark"] .fill-blank-input:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--info) 15%, transparent);
}

/* exam navigation & single-question view */
.exam-question-box.hidden { display: none; }
.exam-nav { display: inline-flex; align-items: center; gap: 0.5rem; }
.exam-nav #exam-counter { min-width: 120px; text-align: center; display: inline-block; }
.exam-nav button { padding: 0.2rem 0.6rem; line-height: 1; }

/* --- Deck card --- */
.deck-card {
  transition:
    transform var(--motion-control) var(--ease-control),
    box-shadow var(--motion-control) var(--ease-control);
}

.deck-card:hover {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--nova-accent-shadow-source) 8%, transparent);
}

/* --- State badges --- */
.state-badges {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* --- Progress bar --- */
.progress {
  border-radius: 999px;
  background: var(--bg-soft);
}

.progress-bar {
  background: var(--accent);
  border-radius: 999px;
  transition: width var(--motion-progress) var(--ease-progress);
}

.source-highlight {
  background: color-mix(in srgb, var(--yellow) 24%, var(--panel) 76%);
  border-color: var(--line) !important;
  cursor: pointer;
  transition: background-color var(--motion-surface) var(--ease-control);
}

.source-highlight:hover {
  background: color-mix(in srgb, var(--yellow) 36%, var(--panel) 64%);
}

html[data-theme="dark"] .source-highlight {
  background: color-mix(in srgb, var(--yellow) 20%, var(--panel) 80%);
}

html[data-theme="dark"] .source-highlight:hover {
  background: color-mix(in srgb, var(--yellow) 28%, var(--panel) 72%);
}

/* --- Purple badge for cloze --- */
.bg-purple-subtle {
  background-color: color-mix(in srgb, var(--purple) 18%, var(--panel) 82%) !important;
}

html[data-theme="dark"] .bg-purple-subtle {
  background-color: color-mix(in srgb, var(--purple) 16%, var(--panel) 84%) !important;
}

.text-purple-emphasis {
  color: var(--purple) !important;
}

/* Bootstrap utility classes: semantic names, palette-only rendering. */
.text-bg-light {
  background-color: var(--card-alt) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.text-bg-dark {
  background-color: var(--text) !important;
  color: var(--bg) !important;
}

.text-bg-primary {
  background-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
}

.text-bg-secondary {
  background-color: var(--muted) !important;
  color: var(--text-on-muted) !important;
}

.text-bg-success {
  background-color: var(--success) !important;
  color: var(--success-contrast) !important;
}

.text-bg-danger {
  background-color: var(--danger) !important;
  color: var(--danger-contrast) !important;
}

.text-bg-warning {
  background-color: var(--warning) !important;
  color: var(--warning-contrast) !important;
}

.text-bg-info {
  background-color: var(--info) !important;
  color: var(--info-contrast) !important;
}

.bg-primary {
  background-color: var(--accent) !important;
}

.bg-secondary {
  background-color: var(--muted) !important;
}

.bg-success {
  background-color: var(--success) !important;
}

.bg-danger {
  background-color: var(--danger) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-info {
  background-color: var(--info) !important;
}

.bg-light {
  background-color: var(--bg-soft) !important;
}

.bg-dark {
  background-color: var(--text) !important;
}

.border-primary {
  border-color: var(--accent) !important;
}

.border-secondary {
  border-color: var(--muted) !important;
}

.border-success {
  border-color: var(--success-border) !important;
}

.border-danger {
  border-color: var(--danger-border) !important;
}

.border-warning {
  border-color: var(--warning-border) !important;
}

.border-info {
  border-color: var(--info-border) !important;
}

.border-light,
.border-dark {
  border-color: var(--line) !important;
}

/* Ensure ALL small/small text elements have proper color */
small,
.small {
  color: var(--text);
}

/* Keep text-muted color consistent */
.text-muted,
.form-text {
  color: var(--muted) !important;
}

.alert-primary,
.alert-secondary,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.alert-light,
.alert-dark {
  background-color: var(--neutral-soft);
  color: var(--text);
  border-color: var(--line);
}

.alert-success {
  background-color: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success-text);
}

.alert-danger {
  background-color: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.alert-warning {
  background-color: var(--warning-soft);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.alert-info {
  background-color: var(--info-soft);
  border-color: var(--info-border);
  color: var(--info-text);
}

.alerts-stack .alert {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--motion-toast-close) var(--ease-toast),
    transform var(--motion-toast-close) var(--ease-toast);
}

.alerts-stack .alert.is-closing,
.alerts-stack .alert.fade:not(.show) {
  opacity: 0;
  transform: translateY(calc(var(--motion-toast-offset) * -0.5));
}

.text-primary {
  color: var(--accent) !important;
}

.text-secondary {
  color: var(--muted) !important;
}

.text-success {
  color: var(--green) !important;
}

.text-danger {
  color: var(--red) !important;
}

.text-warning {
  color: var(--yellow) !important;
}

.text-info {
  color: var(--accent) !important;
}

.text-light {
  color: var(--bg-soft) !important;
}

.text-dark {
  color: var(--text) !important;
}

.link-primary,
.link-secondary,
.link-success,
.link-danger,
.link-warning,
.link-info,
.link-dark,
.link-light {
  color: var(--accent) !important;
}


/* --- Study page --- */
.study-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.study-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
  justify-content: flex-end;
}

.session-builder-card .form-label {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.session-minutes-input {
  max-width: 120px;
}

.study-gencards-modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--overlay-backdrop);
  z-index: 1100;
  padding: 1rem;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--motion-modal-open) var(--ease-modal),
    transform var(--motion-modal-open) var(--ease-modal);
}

.study-gencards-modal {
  width: min(460px, 96vw);
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 60px var(--shadow-color-strong);
  padding: 1rem;
}

.study-gencards-modal-backdrop.is-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.study-gencards-title {
  font-weight: 700;
  font-size: 1.03rem;
  margin-bottom: 0.15rem;
}

.study-gencards-sub {
  color: var(--muted);
  font-size: 0.86rem;
  margin-bottom: 0.7rem;
}

.study-gencards-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.study-gencards-option {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}

.study-gencards-option.active {
  background: color-mix(in srgb, var(--info-strong) 14%, transparent);
  border-color: color-mix(in srgb, var(--info-strong) 35%, transparent);
  color: var(--info-text);
  font-weight: 600;
}

.study-gencards-status {
  min-height: 1.2rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.study-gencards-progress {
  display: none;
  height: 8px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-alt);
  overflow: hidden;
  margin-bottom: 0.65rem;
}

.study-gencards-progress.is-active {
  display: block;
}

.study-gencards-progress-bar {
  width: 34%;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transform: translateX(-120%);
}

.study-gencards-progress.is-active .study-gencards-progress-bar {
  animation: study-gencards-slider var(--motion-loading-indeterminate) var(--ease-linear) infinite;
}

@keyframes study-gencards-slider {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(320%);
  }
}

.study-gencards-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .study-gencards-modal-backdrop {
    transition: none !important;
  }

  .study-gencards-progress.is-active .study-gencards-progress-bar {
    animation: none !important;
    transform: translateX(0);
  }
}

/* --- Study session focus mode --- */
.study-focus-mode .top-shell,
.study-focus-mode .site-footer,
.study-focus-mode .study-quick-actions,
.study-focus-mode .sidebar,
.study-focus-mode [class*="sidebar"] {
  display: none !important;
}

.study-focus-mode .app-main-shell {
  max-width: 100% !important;
  padding-top: 0 !important;
}

.focus-mode-exit {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1040;
}

.focus-mode-shell {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3rem 1rem;
}

.focus-mode-content {
  width: min(1800px, calc(100vw - clamp(2rem, 4vw, 6rem)));
  margin: 0 auto;
}

.study-session-loader {
  --nova-skeleton-card-padding: clamp(1.1rem, 2vw, 1.5rem);
  display: grid;
  gap: 1rem;
  width: 100%;
}

.study-session-loader__header {
  align-items: center;
  display: flex;
  gap: .75rem;
}

.study-session-loader__icon {
  align-items: center;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.study-session-loader__copy {
  min-width: 0;
}

.study-session-loader__title {
  color: var(--text);
  font-weight: 700;
}

.study-session-loader__message {
  color: var(--muted);
  font-size: .92rem;
}

.study-session-loader__body {
  display: grid;
  gap: .75rem;
}

.study-session-loader__prompt {
  --nova-skeleton-block-height: clamp(4.75rem, 14vh, 7rem);
}

.study-session-loader__cards {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .study-session-loader__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Bootstrap subtle utilities, used heavily for badges and state labels. */
.bg-primary-subtle,
.bg-secondary-subtle {
  background-color: var(--neutral-soft) !important;
  color: var(--neutral-text) !important;
}

.bg-light-subtle,
.bg-dark-subtle {
  background-color: var(--card-alt) !important;
  color: var(--text) !important;
}

.bg-success-subtle {
  background-color: var(--success-soft) !important;
  color: var(--success-text) !important;
}

.bg-danger-subtle {
  background-color: var(--danger-soft) !important;
  color: var(--danger-text) !important;
}

.bg-warning-subtle {
  background-color: var(--warning-soft) !important;
  color: var(--warning-text) !important;
}

.bg-info-subtle {
  background-color: var(--info-soft) !important;
  color: var(--info-text) !important;
}

.text-primary-emphasis,
.text-secondary-emphasis {
  color: var(--neutral-text) !important;
}

.text-light-emphasis,
.text-dark-emphasis {
  color: var(--text) !important;
}

.text-success-emphasis {
  color: var(--success-text) !important;
}

.text-danger-emphasis {
  color: var(--danger-text) !important;
}

.text-warning-emphasis {
  color: var(--warning-text) !important;
}

.text-info-emphasis {
  color: var(--info-text) !important;
}

.border-primary-subtle,
.border-secondary-subtle,
.border-success-subtle,
.border-danger-subtle,
.border-warning-subtle,
.border-info-subtle,
.border-light-subtle,
.border-dark-subtle {
  border-color: var(--line) !important;
}

/* --- Auth --- */
.auth-wrap {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
}

.auth-card {
  width: min(520px, 100%);
}

/* --- Toast --- */
.toast-container .toast {
  max-width: min(24rem, calc(100vw - 2rem));
  min-width: min(280px, calc(100vw - 2rem));
}

.toast-container .app-toast {
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(var(--motion-toast-offset), 0, 0);
  transition:
    opacity var(--motion-toast-open) var(--ease-toast),
    transform var(--motion-toast-open) var(--ease-toast);
  will-change: opacity, transform;
}

.toast-container .app-toast.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.toast-container .app-toast.is-closing {
  opacity: 0;
  transform: translate3d(var(--motion-toast-offset), 0, 0);
  transition-duration: var(--motion-toast-close);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):active,
  .nova-confirm-dialog__button:not(:disabled):active {
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-container .app-toast,
  .alerts-stack .alert {
    transform: none !important;
    transition: none !important;
  }
}

/* --- Spinner overlay --- */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--base-white) 70%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
}

html[data-theme="dark"] .spinner-overlay {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}

/* --- Responsive --- */
/* Tablet (max 991px) */
@media (max-width: 991px) {
  .study-header {
    align-items: stretch;
  }

  .study-header-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .study-header-actions .btn {
    flex: 1 1 180px;
  }

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

  .metrics-grid-7 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rating-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-pills-shell {
    justify-content: center;
  }

  .page-title {
    font-size: 1.25rem;
  }

  .hero-value {
    font-size: 2rem;
  }

  .mini-metrics {
    grid-template-columns: 1fr;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .heatmap-cell {
    width: 100%;
  }
}

/* Mobile tablets (max 768px) */
@media (max-width: 768px) {
  body {
    font-size: 0.95rem;
  }

  .page-header {
    flex-direction: column;
    gap: 1rem;
  }

  .page-header div:last-child {
    width: 100%;
  }

  .page-header .btn {
    flex: 1;
  }

  .page-title {
    font-size: 1.15rem;
  }

  .page-subtitle {
    font-size: 0.85rem;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .metrics-grid-7 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric {
    padding: 0.7rem 0.8rem;
  }

  .metric-label {
    font-size: 0.65rem;
  }

  .metric-value {
    font-size: 1rem;
  }

  .hero-value {
    font-size: 1.8rem;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .panel-header div {
    width: 100%;
  }

  .panel-header .badge {
    align-self: flex-start;
  }

  .mini-metrics {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .heatmap-week {
    gap: 4px;
  }

  .heatmap-cell {
    border-radius: 4px;
  }

  .rating-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .rating-actions .btn {
    padding: 0.72rem 0.45rem;
    font-size: 0.8rem;
    min-height: 48px;
  }

  .rating-actions .rating-label {
    font-size: 0.96rem;
  }

  .rating-actions .rating-interval {
    font-size: 0.8rem;
  }

  .rating-actions .rating-hotkey {
    font-size: 0.68rem;
  }

  .progress {
    height: 4px !important;
  }

  .form-control,
  .form-select {
    font-size: 1rem;
    min-height: 44px;
  }

  .btn {
    min-height: 44px;
  }

  .card-content-cell {
    max-width: 100%;
    overflow-x: auto;
  }

  .table {
    font-size: 0.85rem;
  }

  .table thead th {
    padding: 0.5rem;
    font-size: 0.65rem;
  }

  .table td {
    padding: 0.75rem 0.5rem;
  }

  .footer-inner {
    flex-direction: column;
    gap: 1rem;
  }

  .footer-links {
    width: 100%;
    justify-content: center;
  }
}

/* Small phones (max 576px) */
@media (max-width: 576px) {
  body {
    font-size: 0.9rem;
  }

  .page-header {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .page-header div:last-child {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .page-header .btn {
    width: auto;
    font-size: 0.85rem;
  }

  .page-title {
    font-size: 1rem;
  }

  .page-subtitle {
    font-size: 0.75rem;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.5rem;
  }

  .metrics-grid-7 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric {
    padding: 0.6rem 0.7rem;
  }

  .metric-label {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
  }

  .metric-value {
    font-size: 0.9rem;
  }

  .metric-value-sm {
    font-size: 0.8rem;
  }

  .hero-value {
    font-size: 1.5rem;
    margin: 0.3rem 0;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
  }

  .panel-header h2 {
    font-size: 0.9rem;
    margin-bottom: 0.2rem !important;
  }

  .panel-header p {
    font-size: 0.75rem;
    margin: 0;
  }

  .mini-metrics {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    margin-top: 0.6rem;
  }

  .heatmap-week {
    gap: 3px;
  }

  /* Keep weekday initials on a single horizontal row on small screens */
  .heatmap-labels {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    overflow-x: auto;
  }
  .heatmap-label {
    min-width: 18px;
    text-align: center;
    white-space: nowrap;
    font-size: 0.65rem;
  }

  .heatmap-cell {
    border-radius: 3px;
    border: none;
  }

  .progress {
    height: 3px !important;
    margin-bottom: 0.6rem !important;
  }

  .rating-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .rating-actions .btn {
    padding: 0.5rem 0.3rem;
    font-size: 0.7rem;
    min-height: 44px;
    gap: 0.05rem;
  }

  .rating-actions .rating-label {
    font-size: 0.85rem;
  }

  .rating-actions .rating-interval {
    font-size: 0.7rem;
  }

  .rating-actions .rating-hotkey {
    font-size: 0.63rem;
  }

  .card {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--surface-code) 10%, transparent);
  }

  .card-body {
    padding: 0.8rem 0.9rem;
  }

  .form-control,
  .form-select {
    font-size: 0.95rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
  }

  .btn {
    min-height: 44px;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
  }

  .btn-sm {
    min-height: 40px;
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
  }

  .table {
    font-size: 0.8rem;
    margin-bottom: 0;
  }

  .table thead th {
    padding: 0.4rem 0.3rem;
    font-size: 0.6rem;
    white-space: nowrap;
  }

  .table td {
    padding: 0.6rem 0.3rem;
    word-break: break-word;
  }

  .table-responsive {
    font-size: 0.8rem;
  }

  .card-content-cell {
    max-width: 150px;
    word-break: break-word;
  }

  .eros-nav {
    padding: 0.5rem 0;
  }

  .brand-logo {
    width: 24px;
    height: 24px;
  }

  .user-chip {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  .nav-pills-shell {
    gap: 0.2rem;
    padding: 0.25rem;
    border-radius: 16px;
  }

  .nav-pill {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
  }

  .navbar-toggler {
    padding: 0.25rem 0.5rem;
  }

  .footer-inner {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0.5rem;
  }

  .footer-note {
    font-size: 0.75rem;
    text-align: center;
  }

  .footer-links {
    width: 100%;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.8rem;
  }

  .footer-bottom {
    font-size: 0.7rem;
    text-align: center;
  }

  .state-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.75rem !important;
  }

  .state-badges .badge {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
  }

  .deck-card .d-flex.gap-2 {
    gap: 0.4rem !important;
  }

  .deck-card .btn {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }
}

/* Ultra-small phones (max 480px) */
@media (max-width: 480px) {
  .page-header {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .page-title {
    font-size: 0.95rem;
  }

  .page-subtitle {
    display: none;
  }

  .metrics-grid {
    gap: 0.3rem;
    margin-bottom: 0.4rem;
  }

  .hero-value {
    font-size: 1.3rem;
  }

  .rating-actions {
    gap: 0.4rem;
  }

  .rating-actions .btn {
    font-size: 0.65rem;
  }

  .rating-actions .rating-label {
    font-size: 0.75rem;
  }

  .rating-actions .rating-interval {
    font-size: 0.62rem;
  }

  .rating-actions .rating-hotkey {
    font-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nova-confirm-dialog,
  .nova-confirm-dialog__panel {
    transition: none !important;
  }
}

/* Current Source workspace PDF stage. */
.document-pdf-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.document-pdf-stage .docviewer-pdf-scroll {
  flex: 1 1 auto;
  min-height: 0;
}

.docviewer-content-dock {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  display: flex;
  justify-content: center;
  margin-top: -64px;
  padding: 0 16px 16px;
  pointer-events: none;
}

.docviewer-content-dock > * {
  pointer-events: auto;
}

/* PDF.js canvas renderer */
.docviewer-pdf-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.document-pdf-stage--flush .docviewer-pdf-scroll {
  scrollbar-gutter: stable;
}

.docviewer-pdf-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 72px; /* bottom pad clears floating toolbar */
  gap: 16px;
}

.document-pdf-stage--flush .docviewer-pdf-pages {
  align-items: stretch;
  padding: 0 0 72px;
  gap: 8px;
}

.docviewer-pdf-page {
  box-shadow: 0 2px 12px color-mix(in srgb, var(--base-black) 18%, transparent);
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
  flex-shrink: 0;
}

.document-pdf-stage--flush .docviewer-pdf-page {
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}

.docviewer-pdf-canvas {
  display: block;
  max-width: 100%;
}

.docviewer-pdf-loading {
  box-sizing: border-box;
  min-height: 100%;
  padding: 24px 20px 72px;
  pointer-events: none;
}

.docviewer-pdf-loading__pages {
  display: grid;
  gap: 16px;
  justify-items: center;
  min-height: 100%;
}

.docviewer-pdf-page-skeleton {
  --nova-skeleton-block-height: clamp(28rem, calc(100dvh - 14rem), 56rem);
  width: min(100%, 46rem);
  border: 1px solid var(--skeleton-border);
  border-radius: 2px;
  background: var(--skeleton-surface-strong);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--base-black) 14%, transparent);
}

.document-pdf-stage--flush .docviewer-pdf-loading {
  padding: 0 0 72px;
}

.document-pdf-stage--flush .docviewer-pdf-loading__pages {
  gap: 8px;
  justify-items: stretch;
}

.document-pdf-stage--flush .docviewer-pdf-page-skeleton {
  --nova-skeleton-block-height: clamp(24rem, calc(100dvh - 12rem), 54rem);
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}

.docviewer-pdf-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 2rem;
  color: var(--danger);
  font-size: .9rem;
}

/* Fallback iframe */
.docviewer-annot-canvas {
  display: block;
  touch-action: none;
}

/* Annotation text input */
.docviewer-annot-text-input {
  border: 1.5px solid var(--danger-strong);
  border-radius: 6px;
  background: var(--annotation-surface);
  color: var(--danger-strong);
  font: 700 14px/1.4 var(--nova-font-ui);
  padding: .2rem .45rem;
  outline: none;
  min-width: 120px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--base-black) 12%, transparent);
}

/* ── PDF Toolbar (sticky dock content) ── */
.docviewer-toolbar {
  position: static;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .4rem .65rem;
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--base-black) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--base-black) 7%, transparent);
  white-space: nowrap;
}

.docviewer-toolbar-group {
  display: flex;
  align-items: center;
  gap: .15rem;
}

.docviewer-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 .3rem;
  flex-shrink: 0;
}

.docviewer-toolbar-btn {
  border: 1px solid transparent;
  background: var(--button-tertiary-bg);
  color: var(--button-tertiary-text);
  border-radius: 7px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--motion-control) var(--ease-control), color var(--motion-control) var(--ease-control);
  padding: 0;
  flex-shrink: 0;
}

.docviewer-toolbar-btn:hover:not(:disabled) {
  border-color: var(--button-icon-hover-border);
  background: var(--button-icon-hover-bg);
  color: var(--button-icon-hover-text);
}

.docviewer-toolbar-btn.active {
  border-color: var(--button-icon-active-border);
  background: var(--button-icon-active-bg);
  color: var(--button-icon-active-text);
}

.docviewer-toolbar-btn:disabled {
  border-color: var(--button-disabled-border);
  background: var(--button-disabled-bg);
  color: var(--button-disabled-text);
  opacity: 1;
  cursor: not-allowed;
}

.docviewer-toolbar-zoom {
  font-size: .77rem;
  font-weight: 600;
  color: var(--muted-text);
  min-width: 36px;
  text-align: center;
  user-select: none;
}




@media (prefers-reduced-motion: reduce) {
  .u-transition-soft,
  .u-fade-in.is-in-view,
  .u-fade-in-up.is-in-view,
  .nav-streak-chip,
  .nav-pill,
  .btn-eros,
  .btn-light,
  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-outline-success,
  .btn-outline-warning,
  .btn-outline-info,
  .btn-outline-dark,
  .btn-outline-light,
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-danger,
  .btn-warning,
  .btn-info,
  .btn-dark,
  .card,
  .form-control,
  .form-select,
  .dropdown-menu,
  .exam-question-box,
  .exam-question-box textarea,
  .exam-option,
  .matching-input,
  .fill-blank-input {
    transition-duration: var(--motion-reduced);
  }
}

.nova-writing-cleanup-dialog {
  width: min(40rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--nova-color-border-control);
  background: var(--nova-color-surface-paper);
  color: var(--nova-color-ink);
  opacity: 1;
  transform: none;
}
.nova-writing-cleanup-dialog .nova-confirm-dialog__button--secondary,
.nova-writing-cleanup-dialog .nova-confirm-dialog__button--secondary:hover {
  border-color: var(--nova-color-border-control);
  background: var(--nova-color-surface-paper);
  color: var(--nova-color-ink);
}
.nova-writing-cleanup-dialog::backdrop { background: var(--nova-color-overlay-scrim); }
.nova-writing-cleanup-dialog .nova-confirm-dialog__actions { flex-wrap: wrap; }