@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Figtree:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

/* Brand invariants — fixed across every skin (see docs/ux-redesign/00-conventions.md §2).
   Skins may reference these but must never redefine them. */
:root {
  --brand-navy: #14375e;
  --brand-blue: #2f6fbf;
  --brand-green: #2fae7a;
  --font-sans: 'Figtree', system-ui, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
  /* NeoUI Charts defaults (skins may override). */
  --chart-1: var(--brand-blue);
  --chart-2: var(--brand-green);
  --chart-3: #c47a2c;
  --chart-4: #5a6b8c;
  --chart-5: #b45309;
}

/* Theme tokens live on documentElement via data-theme only.
   Do not also put .theme-* on nested shells — a stale class overrides html. */

/* NeoUI components.css styles ::selection with these tokens. Without them the
   highlight background is invalid/transparent — text looks unselectable. */
[data-theme] {
  --selection: color-mix(in srgb, var(--primary) 40%, var(--bg-surface, #fff));
  --selection-foreground: var(--ink);
}

[data-theme="calm-desk"] {
  --bg: #E8EEF0;
  --bg-mid: #DDE7EA;
  --bg-surface: #F7FAFB;
  --ink: #1B2A2E;
  --ink-muted: #5C6E73;
  --primary: #1F6F6A;
  --primary-deep: #155752;
  --brand-accent: #D4A017;
  --success: #2F7D4A;
  --danger: #B42318;
  --border: #C5D2D6;
  --focus: #1F6F6A;
  --sidebar-bg: #F7FAFB;
  --sidebar-ink: #1B2A2E;
  --sidebar-muted: #5C6E73;
  --sidebar-border: #C5D2D6;
  --sidebar-hover: color-mix(in srgb, #1F6F6A 10%, transparent);
  --sidebar-active-bg: color-mix(in srgb, #1F6F6A 14%, transparent);
  --sidebar-active: #1F6F6A;
  --sidebar-brand: #155752;
  --sidebar-accent-bar: #D4A017;
  --sidebar-pattern: none;
  --page-wash: none;

  /* NeoUI/shadcn variable mapping (see docs/ux-redesign/00-conventions.md §3) */
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--bg-surface);
  --card-foreground: var(--ink);
  --popover: var(--bg-surface);
  --popover-foreground: var(--ink);
  --primary-foreground: #F7FAFB;
  --primary-hover: var(--primary-deep);
  --secondary: var(--bg-mid);
  --secondary-foreground: var(--ink);
  --muted: var(--bg-mid);
  --muted-foreground: var(--ink-muted);
  --accent: color-mix(in srgb, var(--primary) 10%, transparent);
  --accent-foreground: var(--ink);
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --input: var(--border);
  --ring: var(--focus);
  --sidebar: var(--sidebar-bg);
  --sidebar-foreground: var(--sidebar-ink);
  --sidebar-primary: var(--sidebar-active-bg);
  --sidebar-accent: var(--sidebar-hover);
  --radius: 0.5rem;
}

[data-theme="forest"] {
  --bg: #E7EDE4;
  --bg-mid: #D8E3D4;
  --bg-surface: #F6F8F3;
  --ink: #1E2B22;
  --ink-muted: #5A6B5E;
  --primary: #2F6B3A;
  --primary-deep: #24522D;
  --brand-accent: #C47A2C;
  --success: #2F6B3A;
  --danger: #A33B2B;
  --border: #C5D0C0;
  --focus: #2F6B3A;
  --sidebar-bg: #2F6B3A;
  --sidebar-ink: #FFFFFF;
  --sidebar-muted: #E2F0E5;
  --sidebar-border: #24522D;
  --sidebar-hover: color-mix(in srgb, #fff 14%, transparent);
  --sidebar-active-bg: #C47A2C;
  --sidebar-active: #1E2B22;
  --sidebar-brand: #FFFFFF;
  --sidebar-accent-bar: #C47A2C;
  --sidebar-pattern: none;
  --page-wash: none;

  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--bg-surface);
  --card-foreground: var(--ink);
  --popover: var(--bg-surface);
  --popover-foreground: var(--ink);
  --primary-foreground: #F6F8F3;
  --primary-hover: var(--primary-deep);
  --secondary: var(--bg-mid);
  --secondary-foreground: var(--ink);
  --muted: var(--bg-mid);
  --muted-foreground: var(--ink-muted);
  --accent: color-mix(in srgb, var(--primary) 10%, transparent);
  --accent-foreground: var(--ink);
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --input: var(--border);
  --ring: var(--focus);
  --sidebar: var(--sidebar-bg);
  --sidebar-foreground: var(--sidebar-ink);
  --sidebar-primary: var(--sidebar-active-bg);
  --sidebar-accent: var(--sidebar-hover);
  --radius: 0.5rem;
}

[data-theme="blue-skies"] {
  --bg: #E6F3FB;
  --bg-mid: #D4EAF7;
  --bg-surface: #FAFCFF;
  --ink: #1A2A3A;
  --ink-muted: #5A6F82;
  --primary: #2B7BBF;
  --primary-deep: #1F5F94;
  --brand-accent: #F0B429;
  --success: #3B9B5C;
  --danger: #E24A3B;
  --border: #BFD6E8;
  --focus: #2B7BBF;
  --sidebar-bg: #1F5F94;
  --sidebar-ink: #FFFFFF;
  --sidebar-muted: #E8F3FC;
  --sidebar-border: #174A75;
  --sidebar-hover: color-mix(in srgb, #fff 16%, transparent);
  --sidebar-active-bg: #F0B429;
  --sidebar-active: #1A2A3A;
  --sidebar-brand: #FFE08A;
  --sidebar-accent-bar: #F0B429;
  --sidebar-pattern: none;
  --page-wash: radial-gradient(ellipse 80% 50% at 100% 0%, color-mix(in srgb, #F0B429 22%, transparent), transparent 55%);

  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--bg-surface);
  --card-foreground: var(--ink);
  --popover: var(--bg-surface);
  --popover-foreground: var(--ink);
  --primary-foreground: #FAFCFF;
  --primary-hover: var(--primary-deep);
  --secondary: var(--bg-mid);
  --secondary-foreground: var(--ink);
  --muted: var(--bg-mid);
  --muted-foreground: var(--ink-muted);
  --accent: color-mix(in srgb, var(--primary) 10%, transparent);
  --accent-foreground: var(--ink);
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --input: var(--border);
  --ring: var(--focus);
  --sidebar: var(--sidebar-bg);
  --sidebar-foreground: var(--sidebar-ink);
  --sidebar-primary: var(--sidebar-active-bg);
  --sidebar-accent: var(--sidebar-hover);
  --radius: 0.625rem;
}

/* FA6781 coral · FAE7CB cream · FFC94D yellow · 59B292 teal */
[data-theme="playground"] {
  --bg: #FAE7CB;
  --bg-mid: #F5D9B0;
  --bg-surface: #FFF8EC;
  --ink: #2A2418;
  --ink-muted: #6E6454;
  --primary: #59B292;
  --primary-deep: #3F8A6E;
  --brand-accent: #FFC94D;
  --success: #59B292;
  --danger: #FA6781;
  --border: #E8CFA6;
  --focus: #59B292;
  --sidebar-bg: #59B292;
  --sidebar-ink: #FFFFFF;
  --sidebar-muted: #E8F7F1;
  --sidebar-border: #3F8A6E;
  --sidebar-hover: color-mix(in srgb, #FFC94D 35%, transparent);
  --sidebar-active-bg: #FFC94D;
  --sidebar-active: #2A2418;
  --sidebar-brand: #FFC94D;
  --sidebar-accent-bar: #FA6781;
  --sidebar-pattern: radial-gradient(circle at 12% 18%, color-mix(in srgb, #FA6781 35%, transparent) 0 10px, transparent 11px),
    radial-gradient(circle at 88% 72%, color-mix(in srgb, #FFC94D 40%, transparent) 0 14px, transparent 15px);
  --page-wash: radial-gradient(ellipse 70% 45% at 0% 100%, color-mix(in srgb, #FA6781 20%, transparent), transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 0%, color-mix(in srgb, #FFC94D 28%, transparent), transparent 50%);

  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--bg-surface);
  --card-foreground: var(--ink);
  --popover: var(--bg-surface);
  --popover-foreground: var(--ink);
  --primary-foreground: #FFF8EC;
  --primary-hover: var(--primary-deep);
  --secondary: var(--bg-mid);
  --secondary-foreground: var(--ink);
  --muted: var(--bg-mid);
  --muted-foreground: var(--ink-muted);
  --accent: color-mix(in srgb, var(--primary) 12%, transparent);
  --accent-foreground: var(--ink);
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --input: var(--border);
  --ring: var(--focus);
  --sidebar: var(--sidebar-bg);
  --sidebar-foreground: var(--sidebar-ink);
  --sidebar-primary: var(--sidebar-active-bg);
  --sidebar-accent: var(--sidebar-hover);
  --radius: 1rem;
}

/* 0055DA blue · 00C68D green · FFD400 yellow · FF0052 magenta */
[data-theme="loud"] {
  --bg: #FFF6A8;
  --bg-mid: #FFE566;
  --bg-surface: #FFFFFF;
  --ink: #0A1A40;
  --ink-muted: #2A3A66;
  --primary: #0055DA;
  --primary-deep: #003FA8;
  --brand-accent: #FFD400;
  --success: #00C68D;
  --danger: #FF0052;
  --border: #0055DA;
  --focus: #FF0052;
  --sidebar-bg: #0055DA;
  --sidebar-ink: #FFFFFF;
  --sidebar-muted: #B8CCFF;
  --sidebar-border: #003FA8;
  --sidebar-hover: color-mix(in srgb, #FFD400 28%, transparent);
  --sidebar-active-bg: #FFD400;
  --sidebar-active: #0A1A40;
  --sidebar-brand: #FFD400;
  --sidebar-accent-bar: #FF0052;
  --sidebar-pattern: repeating-linear-gradient(
      -32deg,
      transparent 0 14px,
      color-mix(in srgb, #FFD400 22%, transparent) 14px 28px
    ),
    radial-gradient(circle at 90% 8%, color-mix(in srgb, #FF0052 45%, transparent) 0 28px, transparent 29px),
    radial-gradient(circle at 10% 92%, color-mix(in srgb, #00C68D 40%, transparent) 0 22px, transparent 23px);
  --page-wash: radial-gradient(ellipse 55% 40% at 100% 0%, color-mix(in srgb, #FF0052 28%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 35% at 0% 100%, color-mix(in srgb, #00C68D 30%, transparent), transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, #FFD400 55%, transparent), transparent 42%);

  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--bg-surface);
  --card-foreground: var(--ink);
  --popover: var(--bg-surface);
  --popover-foreground: var(--ink);
  --primary-foreground: #FFFFFF;
  --primary-hover: var(--primary-deep);
  --secondary: var(--bg-mid);
  --secondary-foreground: var(--ink);
  --muted: var(--bg-mid);
  --muted-foreground: var(--ink-muted);
  --accent: color-mix(in srgb, var(--primary) 12%, transparent);
  --accent-foreground: var(--ink);
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --input: var(--border);
  --ring: var(--focus);
  --sidebar: var(--sidebar-bg);
  --sidebar-foreground: var(--sidebar-ink);
  --sidebar-primary: var(--sidebar-active-bg);
  --sidebar-accent: var(--sidebar-hover);
  --radius: 0.75rem;
}

/* 90s Memphis / Saved-by-the-Bell energy:
   royal blue field · magenta chrome · yellow · cyan · hard black shadows */
[data-theme="90s"] {
  --bg: #3D5BDB;
  --bg-mid: #2F48C4;
  --bg-surface: #FFFFFF;
  --ink: #FFE135;
  --ink-muted: #C8D6FF;
  --primary: #FF2D95;
  --primary-deep: #C41870;
  --brand-accent: #FFE135;
  --success: #00D4C8;
  --danger: #FF6B35;
  --border: #111111;
  --focus: #00E5FF;
  --sidebar-bg: #E91E8C;
  --sidebar-ink: #FFFFFF;
  --sidebar-muted: #FFC2E0;
  --sidebar-border: #111111;
  --sidebar-hover: color-mix(in srgb, #FFE135 40%, transparent);
  --sidebar-active-bg: #FFE135;
  --sidebar-active: #111111;
  --sidebar-brand: #FFE135;
  --sidebar-accent-bar: #00E5FF;
  --sidebar-pattern:
    repeating-linear-gradient(
      -35deg,
      transparent 0 10px,
      color-mix(in srgb, #111 18%, transparent) 10px 12px
    ),
    radial-gradient(circle at 82% 12%, #FFE135 0 10px, transparent 11px),
    radial-gradient(circle at 18% 78%, #00E5FF 0 12px, transparent 13px),
    radial-gradient(circle at 70% 70%, #3D5BDB 0 8px, transparent 9px);
  --page-wash:
    radial-gradient(circle at 6% 8%, #FFE135 0 34px, transparent 35px),
    radial-gradient(circle at 94% 12%, #FF2D95 0 26px, transparent 27px),
    radial-gradient(circle at 88% 84%, #00E5FF 0 40px, transparent 41px),
    radial-gradient(circle at 10% 86%, #FF2D95 0 16px, transparent 17px),
    radial-gradient(circle at 52% 4%, #00D4C8 0 18px, transparent 19px),
    radial-gradient(circle at 40% 92%, #FFE135 0 12px, transparent 13px),
    radial-gradient(circle at 28% 36%, #FFE135 0 8px, transparent 9px),
    radial-gradient(circle at 68% 58%, #FF6B35 0 10px, transparent 11px),
    radial-gradient(circle at 18% 55%, #00E5FF 0 7px, transparent 8px),
    /* sparse diagonal confetti ticks */
    repeating-linear-gradient(
      45deg,
      transparent 0 56px,
      #FFE135 56px 59px,
      transparent 59px 112px,
      #FF2D95 112px 115px,
      transparent 115px 170px,
      #00E5FF 170px 173px
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, #5B7CFF 55%, transparent) 0%,
      transparent 30%,
      transparent 70%,
      color-mix(in srgb, #2438A8 50%, transparent) 100%
    );

  --background: var(--bg);
  --foreground: #111111;
  --card: var(--bg-surface);
  --card-foreground: #111111;
  --popover: var(--bg-surface);
  --popover-foreground: #111111;
  --primary-foreground: #FFFFFF;
  --primary-hover: var(--primary-deep);
  --secondary: var(--bg-mid);
  --secondary-foreground: #111111;
  --muted: var(--bg-mid);
  --muted-foreground: #4A4A4A;
  --accent: color-mix(in srgb, var(--primary) 16%, transparent);
  --accent-foreground: #111111;
  --destructive: var(--danger);
  --destructive-foreground: #111111;
  --input: var(--border);
  --ring: var(--focus);
  --sidebar: var(--sidebar-bg);
  --sidebar-foreground: var(--sidebar-ink);
  --sidebar-primary: var(--sidebar-active-bg);
  --sidebar-accent: var(--sidebar-hover);
  --radius: 0rem;
}

/* Dropped #f658b8. Kept #f29ad8 #ee71c3 #f039b1 #e305ad */
[data-theme="barbie"] {
  --bg: #FCE4F4;
  --bg-mid: #F9D0EC;
  --bg-surface: #FFF5FB;
  --ink: #4A1038;
  --ink-muted: #8A4A72;
  --primary: #E305AD;
  --primary-deep: #B00488;
  --brand-accent: #F29AD8;
  --success: #EE71C3;
  --danger: #B42318;
  --border: #F0B8DE;
  --focus: #E305AD;
  --sidebar-bg: #E305AD;
  --sidebar-ink: #FFFFFF;
  --sidebar-muted: #FFE8F6;
  --sidebar-border: #B00488;
  --sidebar-hover: color-mix(in srgb, #fff 18%, transparent);
  --sidebar-active-bg: #F29AD8;
  --sidebar-active: #4A1038;
  --sidebar-brand: #FFFFFF;
  --sidebar-accent-bar: #F29AD8;
  --sidebar-pattern: radial-gradient(circle at 20% 20%, color-mix(in srgb, #fff 25%, transparent) 0 16px, transparent 17px),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, #F29AD8 50%, transparent) 0 20px, transparent 21px);
  --page-wash: radial-gradient(ellipse 60% 40% at 100% 0%, color-mix(in srgb, #E305AD 18%, transparent), transparent 55%);

  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--bg-surface);
  --card-foreground: var(--ink);
  --popover: var(--bg-surface);
  --popover-foreground: var(--ink);
  --primary-foreground: #FFF5FB;
  --primary-hover: var(--primary-deep);
  --secondary: var(--bg-mid);
  --secondary-foreground: var(--ink);
  --muted: var(--bg-mid);
  --muted-foreground: var(--ink-muted);
  --accent: color-mix(in srgb, var(--primary) 10%, transparent);
  --accent-foreground: var(--ink);
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --input: var(--border);
  --ring: var(--focus);
  --sidebar: var(--sidebar-bg);
  --sidebar-foreground: var(--sidebar-ink);
  --sidebar-primary: var(--sidebar-active-bg);
  --sidebar-accent: var(--sidebar-hover);
  --radius: 1rem;
}

/* ===================================================================
   Currio brand-locked skins (docs/ux-redesign/00-conventions.md §2).
   Currio blue/green stay primary/success in all three — only the
   background palette, secondary accent, radius, and density vary.
   =================================================================== */

/* Calm — parent default. Cool neutral, minimal, few motifs. */
[data-theme="calm"] {
  --bg: #EEF2F5;
  --bg-mid: #E3E9ED;
  --bg-surface: #FFFFFF;
  --ink: #1A2733;
  --ink-muted: #5C6B78;
  --primary: var(--brand-blue);
  --primary-deep: #1F5695;
  --brand-accent: #C9A44C;
  --success: var(--brand-green);
  --danger: #C23B2E;
  --border: #D7DEE3;
  --focus: var(--brand-blue);
  --sidebar-bg: #FFFFFF;
  --sidebar-ink: #1A2733;
  --sidebar-muted: #6B7A87;
  --sidebar-border: #E1E7EB;
  --sidebar-hover: color-mix(in srgb, var(--brand-blue) 8%, transparent);
  --sidebar-active-bg: color-mix(in srgb, var(--brand-blue) 12%, transparent);
  --sidebar-active: var(--brand-navy);
  --sidebar-brand: var(--brand-navy);
  --sidebar-accent-bar: var(--brand-green);
  --sidebar-pattern: none;
  --page-wash: none;
  --skin-card-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
  --skin-chrome-border: var(--border);

  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--bg-surface);
  --card-foreground: var(--ink);
  --popover: var(--bg-surface);
  --popover-foreground: var(--ink);
  --primary-foreground: #FFFFFF;
  --primary-hover: var(--primary-deep);
  --secondary: var(--bg-mid);
  --secondary-foreground: var(--ink);
  --muted: var(--bg-mid);
  --muted-foreground: var(--ink-muted);
  --accent: color-mix(in srgb, var(--primary) 8%, transparent);
  --accent-foreground: var(--brand-navy);
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --input: var(--border);
  --ring: var(--focus);
  --sidebar: var(--sidebar-bg);
  --sidebar-foreground: var(--sidebar-ink);
  --sidebar-primary: var(--sidebar-active);
  --sidebar-accent: var(--sidebar-hover);
  --radius: 0.5rem;
}

/* Academy — warm scholarly. Cream/parchment surfaces, gold accent, serif headings (--font-heading). */
[data-theme="academy"] {
  --bg: #F6EFE1;
  --bg-mid: #EFE3CC;
  --bg-surface: #FFFBF2;
  --ink: #2E2418;
  --ink-muted: #6B5D48;
  --primary: var(--brand-blue);
  --primary-deep: #1F5695;
  --brand-accent: #C7952B;
  --success: var(--brand-green);
  --danger: #A8402C;
  --border: #E0D2AF;
  --focus: var(--brand-blue);
  --sidebar-bg: #3A2E1F;
  --sidebar-ink: #F6EFE1;
  --sidebar-muted: #C7B896;
  --sidebar-border: #241B10;
  --sidebar-hover: color-mix(in srgb, #C7952B 24%, transparent);
  --sidebar-active-bg: #C7952B;
  --sidebar-active: #2E2418;
  --sidebar-brand: #F6EFE1;
  --sidebar-accent-bar: #C7952B;
  --sidebar-pattern:
    linear-gradient(180deg, color-mix(in srgb, #C7952B 8%, transparent), transparent 40%),
    repeating-linear-gradient(
      0deg,
      transparent 0 11px,
      color-mix(in srgb, #C7952B 10%, transparent) 11px 12px
    );
  --page-wash:
    radial-gradient(ellipse 90% 55% at 8% 0%, color-mix(in srgb, #C7952B 14%, transparent), transparent 58%),
    radial-gradient(ellipse 70% 45% at 100% 100%, color-mix(in srgb, #E0D2AF 55%, transparent), transparent 52%),
    repeating-linear-gradient(
      0deg,
      transparent 0 13px,
      color-mix(in srgb, #2E2418 3.5%, transparent) 13px 14px
    );
  --skin-card-shadow: 0 1px 2px color-mix(in srgb, #2E2418 8%, transparent),
    0 8px 20px color-mix(in srgb, #2E2418 6%, transparent);
  --skin-chrome-border: color-mix(in srgb, #C7952B 55%, var(--border));

  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--bg-surface);
  --card-foreground: var(--ink);
  --popover: var(--bg-surface);
  --popover-foreground: var(--ink);
  --primary-foreground: #FFFFFF;
  --primary-hover: var(--primary-deep);
  --secondary: var(--bg-mid);
  --secondary-foreground: var(--ink);
  --muted: var(--bg-mid);
  --muted-foreground: var(--ink-muted);
  --accent: color-mix(in srgb, var(--primary) 8%, transparent);
  --accent-foreground: var(--brand-navy);
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --input: var(--border);
  --ring: var(--focus);
  --sidebar: var(--sidebar-bg);
  --sidebar-foreground: var(--sidebar-ink);
  --sidebar-primary: var(--sidebar-active-bg);
  --sidebar-accent: var(--sidebar-hover);
  --radius: 0.375rem;
}

/* Playful — student default. Light + friendly, coral/yellow/mint accents, big radius. */
[data-theme="playful"] {
  --bg: #F2F7FF;
  --bg-mid: #E3EEFF;
  --bg-surface: #FFFFFF;
  --ink: #1E2A3A;
  --ink-muted: #5C6E82;
  --primary: var(--brand-blue);
  --primary-deep: #1F5695;
  --brand-accent: #FF6B6B;
  --success: var(--brand-green);
  --danger: #C23B2E;
  --border: #CFE0F5;
  --focus: var(--brand-blue);
  --sidebar-bg: var(--brand-blue);
  --sidebar-ink: #FFFFFF;
  --sidebar-muted: #C9E0FF;
  --sidebar-border: #1F5695;
  --sidebar-hover: color-mix(in srgb, #fff 14%, transparent);
  --sidebar-active-bg: #FFD166;
  --sidebar-active: #1E2A3A;
  --sidebar-brand: #FFFFFF;
  --sidebar-accent-bar: #FF6B6B;
  --sidebar-pattern:
    radial-gradient(circle at 14% 20%, color-mix(in srgb, #FFD166 45%, transparent) 0 12px, transparent 13px),
    radial-gradient(circle at 86% 74%, color-mix(in srgb, #7BE0C0 45%, transparent) 0 14px, transparent 15px),
    radial-gradient(circle at 50% 92%, color-mix(in srgb, #FF6B6B 28%, transparent) 0 18px, transparent 19px);
  --page-wash:
    radial-gradient(ellipse 55% 42% at 100% 0%, color-mix(in srgb, #7BE0C0 28%, transparent), transparent 58%),
    radial-gradient(ellipse 48% 38% at 0% 100%, color-mix(in srgb, #FFD166 26%, transparent), transparent 55%),
    radial-gradient(ellipse 40% 32% at 92% 88%, color-mix(in srgb, #FF6B6B 18%, transparent), transparent 50%),
    radial-gradient(circle at 12% 18%, color-mix(in srgb, #FFD166 35%, transparent) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 28%, color-mix(in srgb, #7BE0C0 30%, transparent) 0 4px, transparent 5px),
    radial-gradient(circle at 38% 72%, color-mix(in srgb, #FF6B6B 28%, transparent) 0 3px, transparent 4px);
  --skin-card-shadow: 0 2px 4px color-mix(in srgb, var(--brand-blue) 8%, transparent),
    0 12px 28px color-mix(in srgb, var(--brand-blue) 10%, transparent);
  --skin-chrome-border: color-mix(in srgb, var(--brand-blue) 22%, var(--border));

  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--bg-surface);
  --card-foreground: var(--ink);
  --popover: var(--bg-surface);
  --popover-foreground: var(--ink);
  --primary-foreground: #FFFFFF;
  --primary-hover: var(--primary-deep);
  --secondary: var(--bg-mid);
  --secondary-foreground: var(--ink);
  --muted: var(--bg-mid);
  --muted-foreground: var(--ink-muted);
  --accent: color-mix(in srgb, var(--primary) 10%, transparent);
  --accent-foreground: var(--brand-navy);
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --input: var(--border);
  --ring: var(--focus);
  --sidebar: var(--sidebar-bg);
  --sidebar-foreground: var(--sidebar-ink);
  --sidebar-primary: var(--sidebar-active-bg);
  --sidebar-accent: var(--sidebar-hover);
  --radius: 1rem;
  --chart-1: #FF6B6B;
  --chart-2: #FFD166;
  --chart-3: #7BE0C0;
  --chart-4: var(--brand-blue);
  --chart-5: var(--brand-green);
}

/* ===================================================================
   Currio motif layer — shared hook classes styled per brand-locked skin.
   Markup stays shared; only [data-theme] changes the look.
   =================================================================== */

.skin-mascot,
.skin-flourish {
  display: none;
}

.skin-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 0.25rem;
}

.skin-hero-main {
  min-width: 0;
  flex: 1 1 16rem;
}

.skin-section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.skin-section-label::before {
  content: none;
}

.skin-lesson-icon {
  display: flex;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

.course-tinted-shell .skin-lesson-card.course-tinted,
[data-theme="academy"] .course-tinted-shell .skin-lesson-card.course-tinted,
[data-theme="playful"] .course-tinted-shell .skin-lesson-card.course-tinted,
[data-theme="calm"] .course-tinted-shell .skin-lesson-card.course-tinted,
[data-theme="academy"] .course-tinted-shell .skin-lesson-card.course-tinted.is-overdue,
[data-theme="playful"] .course-tinted-shell .skin-lesson-card.course-tinted.is-overdue,
[data-theme="calm"] .course-tinted-shell .skin-lesson-card.course-tinted.is-overdue {
  background: var(--course-color, var(--primary));
  border-color: color-mix(in srgb, var(--course-color, var(--primary)) 55%, #000);
  color: #fff;
  box-shadow: var(--skin-card-shadow, none);
}

.course-tinted-shell .skin-lesson-card.course-tinted.is-overdue,
[data-theme="academy"] .course-tinted-shell .skin-lesson-card.course-tinted.is-overdue,
[data-theme="playful"] .course-tinted-shell .skin-lesson-card.course-tinted.is-overdue {
  border-color: var(--danger);
  box-shadow:
    inset 3px 0 0 var(--danger),
    var(--skin-card-shadow, none);
}

.course-tinted-shell .skin-lesson-card.course-tinted .text-muted-foreground,
.course-tinted-shell .skin-lesson-card.course-tinted .font-heading,
.course-tinted-shell .skin-lesson-card.course-tinted .font-medium {
  color: #fff;
}

.course-tinted-shell .skin-lesson-card.course-tinted .text-muted-foreground {
  color: rgb(255 255 255 / 88%);
}

.course-tinted-shell .course-tinted-icon,
[data-theme="academy"] .course-tinted-shell .course-tinted-icon,
[data-theme="playful"] .course-tinted-shell .course-tinted-icon,
[data-theme="calm"] .course-tinted-shell .course-tinted-icon {
  background: color-mix(in srgb, #fff 22%, transparent);
  color: #fff;
}

.skin-stat-card {
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--card-foreground);
  padding: 1rem;
  transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  text-decoration: none;
}

a.skin-stat-card,
a.skin-stat-card:hover {
  color: var(--card-foreground);
  text-decoration: none;
}

.skin-stat-card:hover {
  background: var(--accent);
}

/* --- Academy --- */
[data-theme="academy"] .app-shell-chrome.skin-chrome {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 92%, #fff), var(--bg-surface));
  border-bottom-color: var(--skin-chrome-border, var(--border));
  border-bottom-width: 2px;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, #C7952B 35%, transparent);
}

[data-theme="academy"] .app-shell-chrome.skin-chrome a.font-heading {
  color: var(--brand-navy);
  letter-spacing: -0.03em;
}

[data-theme="academy"] .skin-chrome nav a.active,
[data-theme="academy"] .skin-chrome a.active {
  box-shadow: inset 0 -2px 0 var(--brand-blue);
  background: transparent;
  color: var(--brand-navy);
  border-radius: 0;
}

[data-theme="academy"] .skin-flourish {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #C7952B 0 28%, transparent 30%),
    conic-gradient(from 20deg, transparent 0 40deg, #C7952B 40deg 55deg, transparent 55deg 130deg, #C7952B 130deg 145deg, transparent 145deg 220deg, #C7952B 220deg 235deg, transparent 235deg 310deg, #C7952B 310deg 325deg, transparent 325deg);
  opacity: 0.85;
}

[data-theme="academy"] .skin-section-label h2 {
  color: var(--ink);
}

[data-theme="academy"] .skin-section-label.is-overdue h2 {
  color: var(--danger);
}

[data-theme="academy"] .skin-lesson-card {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: var(--skin-card-shadow);
}

[data-theme="academy"] .skin-lesson-card.is-overdue {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  box-shadow:
    inset 3px 0 0 var(--danger),
    var(--skin-card-shadow);
}

[data-theme="academy"] .skin-lesson-icon {
  background: color-mix(in srgb, #C7952B 16%, var(--bg-surface));
  color: #6B4E12;
  border: 1px solid color-mix(in srgb, #C7952B 40%, transparent);
  border-radius: 999px;
}

[data-theme="academy"] .skin-stat-card {
  box-shadow: var(--skin-card-shadow);
  border-color: var(--border);
}

[data-theme="academy"] aside.parent-sidebar,
[data-theme="academy"] aside.bg-sidebar,
[data-theme="academy"] .parent-sidebar {
  box-shadow: inset -3px 0 0 #C7952B;
}

[data-theme="academy"] aside.bg-sidebar a.active,
[data-theme="academy"] .parent-sidebar a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  border-radius: calc(var(--radius) + 2px);
}

/* --- Playful --- */
[data-theme="playful"] .app-shell-chrome.skin-chrome {
  background: color-mix(in srgb, var(--bg-surface) 88%, #fff);
  border-bottom-color: var(--skin-chrome-border, var(--border));
}

[data-theme="playful"] .skin-chrome nav a {
  border-radius: 999px;
}

[data-theme="playful"] .skin-chrome nav a.active,
[data-theme="playful"] .skin-chrome a.active {
  background: color-mix(in srgb, var(--brand-blue) 14%, transparent);
  color: var(--brand-blue);
  font-weight: 600;
}

[data-theme="playful"] .skin-mascot {
  display: block;
  width: 7.5rem;
  height: auto;
  flex: 0 0 auto;
  margin-inline-start: auto;
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--brand-blue) 18%, transparent));
}

[data-theme="playful"] .skin-lesson-card {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  box-shadow: var(--skin-card-shadow);
  border-radius: calc(var(--radius) + 0.15rem);
}

[data-theme="playful"] .skin-lesson-card.is-overdue {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 6%, var(--bg-surface));
}

[data-theme="playful"] .skin-lesson-icon {
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-blue) 14%, transparent);
  color: var(--brand-blue);
  width: 3.25rem;
  height: 3.25rem;
}

[data-theme="playful"] .skin-lesson-card.subject-math .skin-lesson-icon {
  background: color-mix(in srgb, #FF6B6B 18%, transparent);
  color: #C23B2E;
}

[data-theme="playful"] .skin-lesson-card.subject-reading .skin-lesson-icon,
[data-theme="playful"] .skin-lesson-card.subject-language .skin-lesson-icon {
  background: color-mix(in srgb, var(--brand-blue) 18%, transparent);
  color: var(--brand-blue);
}

[data-theme="playful"] .skin-lesson-card.subject-science .skin-lesson-icon {
  background: color-mix(in srgb, #7BE0C0 28%, transparent);
  color: #1F7A5C;
}

[data-theme="playful"] .skin-lesson-card.subject-history .skin-lesson-icon {
  background: color-mix(in srgb, #FFD166 35%, transparent);
  color: #9A6B00;
}

[data-theme="playful"] .skin-lesson-card.subject-art .skin-lesson-icon {
  background: color-mix(in srgb, #B39DDB 30%, transparent);
  color: #5E35B1;
}

[data-theme="playful"] .skin-section-label h2 {
  font-weight: 700;
}

[data-theme="playful"] .skin-stat-card {
  border-radius: calc(var(--radius) + 0.25rem);
  border-width: 2px;
  box-shadow: var(--skin-card-shadow);
}

[data-theme="playful"] aside.bg-sidebar a.active,
[data-theme="playful"] .parent-sidebar a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  border-radius: 999px;
  font-weight: 600;
}

/* --- Calm (baseline polish) --- */
[data-theme="calm"] .app-shell-chrome.skin-chrome {
  background: var(--bg-surface);
  border-bottom-color: var(--border);
}

[data-theme="calm"] .skin-chrome nav a.active,
[data-theme="calm"] .skin-chrome a.active {
  color: var(--brand-blue);
  box-shadow: inset 0 -2px 0 var(--brand-blue);
  background: transparent;
  border-radius: 0;
}

[data-theme="calm"] .skin-lesson-card {
  box-shadow: var(--skin-card-shadow);
}

[data-theme="calm"] .skin-lesson-icon {
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

[data-theme="calm"] .skin-stat-card {
  box-shadow: var(--skin-card-shadow);
}

/* ===================================================================
   Student Today layout variants (coupled to academy/playful/calm).
   =================================================================== */

.today-accent-icon {
  color: var(--brand-accent, var(--primary));
}

.today-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 1.75rem;
}

.today-hero-mascot {
  display: none;
}

.today-split {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .today-split {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
    align-items: start;
  }
}

.today-rail-framed {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 0.25rem);
  background: var(--bg-surface);
  box-shadow: var(--skin-card-shadow, none);
}

.today-rail-rule {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--brand-accent, var(--border)) 45%, var(--border));
  margin: 0;
}

.today-footer-note {
  letter-spacing: 0.02em;
}

.today-week-days {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
}

.today-week-day {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--muted);
}

.today-week-day.is-past {
  background: color-mix(in srgb, var(--success, var(--brand-green)) 22%, transparent);
  color: var(--ink);
}

.today-week-day.is-today {
  background: var(--primary);
  color: var(--primary-foreground, #fff);
}

.today-encourage {
  background: color-mix(in srgb, var(--success, var(--brand-green)) 14%, transparent);
}

.progress-ring {
  --ring-size: 96px;
  --ring-pct: 0;
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
  flex-shrink: 0;
}

.progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring-track,
.progress-ring-value {
  fill: none;
  stroke-width: 3.2;
}

.progress-ring-track {
  stroke: color-mix(in srgb, var(--primary) 16%, var(--border));
}

.progress-ring-value {
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: calc(97.4 - (97.4 * var(--ring-pct) / 100));
  transition: stroke-dashoffset 240ms ease;
}

.progress-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Fraunces', serif);
  font-size: calc(var(--ring-size) * 0.22);
  font-weight: 600;
  color: var(--ink);
}

[data-theme="playful"] .today-hero-mascot,
[data-theme="playful"] .skin-mascot.today-hero-mascot {
  display: block;
  width: 8.5rem;
  height: auto;
}

[data-theme="playful"] .today-rail-card {
  border-width: 2px;
  border-radius: calc(var(--radius) + 0.35rem);
}

[data-theme="academy"] .today-rail-framed {
  border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand-accent) 25%, transparent),
    var(--skin-card-shadow, none);
}

[data-theme="academy"] .today-footer-note::before,
[data-theme="academy"] .today-footer-note::after {
  content: "✦";
  margin: 0 0.6rem;
  color: var(--brand-accent);
  font-size: 0.75rem;
}

/* Soft reading surface on play so strong washes don't fight question text */
[data-theme="academy"] .question-play-list,
[data-theme="playful"] .question-play-list {
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 0.25rem);
  box-shadow: var(--skin-card-shadow, none);
  padding: 0.5rem 1rem 1rem;
}

html {
  color-scheme: light;
}

/* Memphis chrome: chunky black outlines + hard shadows + sticker type */
[data-theme="90s"] .brand,
[data-theme="90s"] h1 {
  font-family: 'Bungee', 'Fraunces', cursive;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: #FFE135;
  text-shadow: 3px 3px 0 #111;
}

[data-theme="90s"] h2 {
  color: #FFFFFF;
  text-shadow: 2px 2px 0 #111;
}

[data-theme="90s"] p,
[data-theme="90s"] .text-muted-foreground {
  color: #C8D6FF;
}

[data-theme="90s"] a:not(.brand):not(.nav-link):not(.user-chip-link) {
  color: #FFE135;
  text-decoration-thickness: 2px;
}

[data-theme="90s"] a:not(.brand):not(.nav-link):not(.user-chip-link):hover {
  color: #00E5FF;
}

[data-theme="90s"] .parent-sidebar {
  border-right-width: 5px;
  box-shadow: 6px 0 0 #111;
}

[data-theme="90s"] .student-topbar {
  border-bottom-width: 5px;
  box-shadow: 0 6px 0 #111;
}

[data-theme="90s"] input[type="text"],
[data-theme="90s"] input[type="email"],
[data-theme="90s"] input[type="password"],
[data-theme="90s"] select,
[data-theme="90s"] textarea {
  border: 3px solid #111;
  border-radius: 0;
  background: #fff;
  color: #111;
  box-shadow: 3px 3px 0 #111;
}

/* Soft panel behind lesson questions so diagonal wash doesn't fight the text */
[data-theme="90s"] .question-play-list {
  background: color-mix(in srgb, #FFFFFF 78%, transparent);
  backdrop-filter: blur(3px);
  border: 3px solid #111;
  box-shadow: 6px 6px 0 #111;
  padding: 0.35rem 1.25rem 0.85rem;
  color: #111;
}

[data-theme="90s"] .question-play-item {
  border-top-color: color-mix(in srgb, #111 55%, transparent);
}

[data-theme="90s"] .question-play-item:first-child {
  border-top-color: transparent;
}

[data-theme="90s"] .question-play-item p,
[data-theme="90s"] .question-play-item .review-block,
[data-theme="90s"] .question-play-header strong,
[data-theme="90s"] .question-play-item .answer-field label,
[data-theme="90s"] .focused-card,
[data-theme="90s"] .focused-card p,
[data-theme="90s"] .focused-card .question-prompt,
[data-theme="90s"] .focused-card .review-block,
[data-theme="90s"] .focused-card .question-play-header strong,
[data-theme="90s"] .focused-card .answer-field label {
  color: #111;
  text-shadow: none;
}

[data-theme="90s"] .question-play-header .text-muted-foreground,
[data-theme="90s"] .question-play-item .text-muted-foreground,
[data-theme="90s"] .focused-card .text-muted-foreground,
[data-theme="90s"] .focused-card .question-play-header .text-muted-foreground {
  color: #444;
}

[data-theme="90s"] .question-play-item .status-ok,
[data-theme="90s"] .focused-card .status-ok {
  color: #0A7A72;
}

[data-theme="90s"] .question-play-item .status-bad,
[data-theme="90s"] .focused-card .status-bad {
  color: #C43A12;
}

[data-theme="90s"] .status-skip {
  color: #555;
}

[data-theme="90s"] .focused-progress {
  color: #FFE135;
  text-shadow: 2px 2px 0 #111;
}

[data-theme="90s"] .choice-item {
  background: color-mix(in srgb, #FFFFFF 90%, transparent);
  border: 2px solid #111;
  border-radius: 0;
  color: #111;
  box-shadow: 2px 2px 0 #111;
  padding: 0.28rem 0.4rem;
}

[data-theme="90s"] .math-toolbar-btn {
  border-radius: 0;
}

[data-theme="90s"] .score-banner {
  background: color-mix(in srgb, #FFFFFF 78%, transparent);
  backdrop-filter: blur(3px);
  border: 3px solid #111;
  box-shadow: 4px 4px 0 #111;
  padding: 0.75rem 1rem;
  color: #111;
  display: inline-block;
}

[data-theme="90s"] .score-banner strong {
  color: #C41870;
}

[data-theme="90s"] .profile-section {
  background: #fff;
  border: 3px solid #111;
  box-shadow: 6px 6px 0 #111;
  padding: 1.1rem 1.2rem;
  border-radius: 0;
  color: #111;
}

[data-theme="90s"] .profile-section h2 {
  color: #FF2D95;
  text-shadow: none;
}

[data-theme="90s"] .profile-section .text-muted-foreground {
  color: #555;
}

[data-theme="90s"] .theme-swatch {
  border-radius: 0;
  border-width: 3px;
  border-color: #111;
  box-shadow: 4px 4px 0 #111;
  background: #fff;
  color: #111;
}

[data-theme="90s"] .theme-swatch.selected {
  box-shadow: 4px 4px 0 #00E5FF;
  border-color: #111;
  background: #FFE135;
}

[data-theme="90s"] .user-avatar {
  border-radius: 0;
  border: 2px solid #111;
  box-shadow: 2px 2px 0 #111;
}

[data-theme="90s"] .sidebar-toggle,
[data-theme="90s"] .brand-mark {
  border-radius: 0;
  border: 2px solid #111;
  background: #FFE135;
  color: #111;
  box-shadow: 2px 2px 0 #111;
}

[data-theme="90s"] .parent-sidebar .nav-link {
  border-radius: 0;
  border: 2px solid transparent;
}

[data-theme="90s"] .parent-sidebar .nav-link.active {
  border-color: #111;
  box-shadow: 3px 3px 0 #111;
}

[data-theme="90s"] .parent-sidebar .nav-link.active::before {
  display: none;
}

/* === Global chrome moved from app.css (chunk 4.4) === */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink, #1B2A2E);
  background: var(--bg, #E8EEF0);
  /* Default to selectable text. NeoUI Sortable still disables selection during an
     active drag via an inline body style; our theme.js clears that when idle. */
  -webkit-user-select: text;
  user-select: text;
}

/* Interactive chrome that should not highlight while clicking */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
.math-toolbar-btn,
.math-toolbar-compact-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* Text fields must stay selectable even if a parent temporarily sets none */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
[contenteditable="true"],
.ql-editor {
  -webkit-user-select: text;
  user-select: text;
}

.theme-root {
  min-height: 100vh;
  color: var(--ink);
  background:
    var(--page-wash, none),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-mid) 100%);
  background-attachment: fixed;
}

.page-main {
  padding: 2rem 1.75rem 3rem;
  max-width: min(1100px, 100%);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  animation: page-fade 200ms ease;
}

.page-main.wide {
  max-width: min(1200px, 100%);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

@keyframes page-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 800px) {
  .page-main,
  .page-main.wide {
    padding: 1.25rem 1rem 2.5rem;
    max-width: none;
  }
}

h1, h2, h3, .brand {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

p {
  margin: 0 0 1rem;
  color: var(--ink-muted);
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-deep);
  text-decoration: underline;
}

/* LinkButton / anchor buttons: unlayered `a { color }` beats Tailwind
   text-primary-foreground, so primary fills show primary-on-primary. */
a.bg-primary,
a.bg-primary:hover {
  color: var(--primary-foreground);
  text-decoration: none;
}

/* Sidebar pattern + ink (tokens were unused until now). */
aside.bg-sidebar,
aside.parent-sidebar,
.parent-sidebar.bg-sidebar {
  background-color: var(--sidebar-bg);
  background-image: var(--sidebar-pattern, none);
  color: var(--sidebar-ink);
  border-right-color: var(--sidebar-border);
}

/* Sidebar chrome: global `a { color: var(--primary) }` is unlayered and beats Tailwind
   utilities, so primary-on-sidebar (often same hue as the rail) becomes unreadable. */
aside.bg-sidebar {
  color: var(--sidebar-ink);
}

aside.bg-sidebar a,
.parent-sidebar a {
  color: var(--sidebar-ink);
}

aside.bg-sidebar a:hover,
.parent-sidebar a:hover {
  color: var(--sidebar-ink);
  text-decoration: none;
}

aside.bg-sidebar a.active,
.parent-sidebar a.active {
  color: var(--sidebar-active);
}

aside.bg-sidebar button,
.parent-sidebar button {
  color: var(--sidebar-ink);
}



/*
  Form control fill: NeoUI Input/Select use bg-background, and our skins map
  --background → page wash (--bg). That makes fields disappear into the page.
  Lift fills to the elevated surface (--card / --bg-surface) so inputs read as
  inputs. Textareas ship as bg-transparent and need the same treatment.
  :where() keeps specificity low so skin-specific rules (e.g. 90s) still win.
*/
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="color"]),
  textarea,
  select,
  [role="combobox"]
) {
  background-color: var(--card);
}

.border-input.bg-background,
.border-input.bg-transparent {
  background-color: var(--card);
}

/* Visible text selection (NeoUI ::selection uses --selection; keep fields in sync). */
::selection {
  background-color: var(--selection);
  color: var(--selection-foreground);
}

input::selection,
textarea::selection,
[role="textbox"]::selection {
  background-color: var(--selection);
  color: var(--selection-foreground);
}

/* NeoUI RichTextEditor uses Quill headless (theme: null). Core CSS alone leaves
   .ql-editor unreadable against our skins — force ink + surface fill. */
.ql-container {
  font-family: inherit;
  font-size: inherit;
}

.ql-editor {
  min-height: 7.5rem;
  padding: 0.75rem 0.875rem;
  color: var(--ink, var(--foreground));
  background-color: var(--card);
  border: 1px solid var(--border, var(--input));
  border-radius: var(--radius, 0.5rem);
  line-height: 1.5;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

.ql-editor::selection,
.ql-editor *::selection {
  background-color: var(--selection);
  color: var(--selection-foreground);
}

.ql-editor.ql-blank::before {
  left: 0.875rem;
  right: 0.875rem;
  color: var(--muted-foreground);
  font-style: normal;
}

.ql-editor:focus {
  outline: none;
}

.ql-editor p,
.ql-editor li,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3 {
  color: inherit;
}

/* Blazor FocusOnNavigate targets #page-main — keep it focusable for a11y without a visible ring. */
#page-main:focus,
#page-main:focus-visible {
  outline: none;
  box-shadow: none;
}

h1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

@media print {
  [data-sidebar],
  .app-shell-chrome,
  .theme-picker,
  .no-print,
  .print-toolbar,
  .video-modal-backdrop {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  .theme-root,
  .page-main {
    display: block;
    background: #fff !important;
    color: #000 !important;
    max-width: none;
    padding: 0;
    margin: 0;
    animation: none;
    box-shadow: none;
  }

  .print-report,
  .print-report-neutral,
  .print-report-neutral * {
    max-width: none;
    color: #111 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  }

  .print-report,
  .print-report-neutral {
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-report-title {
    color: #111 !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  }

  .print-header-rule {
    border-top: 3px double #222 !important;
  }

  .print-meta-block {
    border: 1px solid #b8b8b8 !important;
  }

  .print-meta-cell {
    padding: 0.65rem 0.9rem !important;
  }

  .print-meta-row-primary {
    background: #e8e8e8 !important;
  }

  .print-meta-row-secondary {
    background: #f3f3f3 !important;
  }

  .print-meta-row-primary .print-meta-cell {
    padding-bottom: 0.65rem !important;
    border-bottom: 1px solid #c8c8c8 !important;
  }

  .print-meta-row-secondary .print-meta-cell {
    padding-top: 0.65rem !important;
    border-top: none !important;
  }

  .print-meta-label {
    color: #555 !important;
  }

  .print-meta-value {
    color: #111 !important;
  }

  .print-subject-banner {
    border-bottom: 2px solid #222 !important;
    margin-bottom: 0.55rem;
  }

  .print-section-title,
  .print-lesson-title,
  .print-report h2,
  .print-report h3 {
    color: #111 !important;
    text-shadow: none !important;
    text-transform: none !important;
  }

  .print-section-lead,
  .print-lesson-meta,
  .print-empty,
  .print-qnum,
  .print-label {
    color: #444 !important;
  }

  .print-section-lead strong {
    color: #111 !important;
  }

  .print-lesson-block {
    margin: 0.5rem 0 0.65rem;
    border-bottom: none !important;
    page-break-inside: auto;
    break-inside: auto;
  }

  .print-summary-table {
    border: 1px solid #c8c8c8;
  }

  .print-summary-table th {
    background: #e4e4e4 !important;
    color: #333 !important;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom-color: #b8b8b8 !important;
  }

  .print-summary-table td {
    border-bottom-color: #d4d4d4 !important;
    color: #000 !important;
  }

  .print-summary-table tbody tr:nth-child(even) {
    background: #f2f2f2 !important;
  }

  .print-summary-table tbody tr:nth-child(odd) {
    background: #fff !important;
  }

  .print-summary-table tfoot td {
    background: #ebebeb !important;
    border-top: 1px solid #b8b8b8;
    border-bottom: none;
    padding-top: 0.75rem;
  }

  .print-page-break {
    height: 0;
    break-before: page;
    page-break-before: always;
  }

  .print-report + .print-report {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    page-break-before: always;
  }

  .print-question,
  .print-summary-table tr,
  .print-meta-row,
  .print-subject-banner {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-report-footer {
    border-top-color: #666 !important;
    color: #333 !important;
  }
}