index.css

@import "tailwindcss";
@import "./styles/motion.css";

/* ── Fonts (self-hosted via @fontsource — see index.tsx) ── */

/* ── Tailwind v4: dark mode via .dark-theme selector ─── */
@custom-variant dark (&:where(.dark-theme, .dark-theme *));

/* ── Theme: semantic tokens (QNBS-v3: DS foundation, FOUC-safe defaults on :root) ── */
:root {
  /* Motion & stacking — theme-agnostic */
  --sc-duration-fast: 150ms;
  --sc-duration-normal: 280ms;
  --sc-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sc-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --sc-z-docked: 10;
  --sc-z-sticky: 100;
  --sc-z-command: 150;
  --sc-z-modal: 200;
  --sc-z-toast: 300;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --font-editor: "Merriweather", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* QNBS-v3: RTL beta — Noto stacks keep the Latin base (Inter/Merriweather) as final fallback so
     mixed-script (BiDi) text stays consistent; [dir="rtl"] swaps the active token to these.
     NOTE: the base stack is inlined literally (not var(--font-ui)/var(--font-editor)) — under
     [dir="rtl"] those tokens are reassigned to var(--font-ui-rtl), which would otherwise form a
     circular var reference and drop font-family to browser defaults at computed-value time. */
  --font-ui-rtl:
    "Noto Sans Arabic", "Noto Sans Hebrew", "Inter", system-ui, -apple-system, sans-serif;
  --font-editor-rtl:
    "Noto Naskh Arabic", "Noto Sans Hebrew", "Merriweather", Georgia, "Times New Roman", serif;
  /* QNBS-v3: self-hosted via @fontsource (index.tsx), replacing a broken Google Fonts request ("Noto Sans GR" doesn't exist) — SC added for zh's Simplified Han forms; Greek uses the base "Noto Sans" family's greek subset. */
  --font-ui-cjk: "Noto Sans JP", "Noto Sans SC", "Inter", system-ui, -apple-system, sans-serif;
  --font-ui-greek: "Noto Sans", "Inter", system-ui, -apple-system, sans-serif;
  /* QNBS-v3: Korean (Hangul) — Noto Sans KR, self-hosted via @fontsource; Inter lacks Hangul glyphs. */
  --font-ui-kr: "Noto Sans KR", "Inter", system-ui, -apple-system, sans-serif;
  --sc-prose-measure: 65ch;

  /* QNBS-v3 (D3): pointer-aware touch-target size. 44px (AAA) is the default for touch/coarse
     pointers; the `.is-desktop` fine-pointer override (bottom of file) drops it to 36px (still
     WCAG 2.2 AA — 24px min) so mouse-driven toolbars aren't chunky. Consumed by the
     `min-h-touch` / `min-w-touch` utilities (packages/ui/tailwind-preset.ts). */
  --size-touch-target: 2.75rem;

  /* Icon size tokens — QNBS-v3: semantic names replace w-4/w-5/w-6/w-8 literals; map to 16/20/24/32px. */
  --icon-sc-sm: 1rem; /* 16px — inline icon */
  --icon-sc-md: 1.25rem; /* 20px — button icon */
  --icon-sc-lg: 1.5rem; /* 24px — card icon */
  --icon-sc-xl: 2rem; /* 32px — hero icon */

  /* Fluid type scale — QNBS-v3: clamp() interpolates linearly between 390px and 1280px viewport widths; prevents both mobile squishing and desktop gigantism. */
  --text-sc-xs: clamp(0.625rem, 0.59rem + 0.18vw, 0.75rem); /* 10–12px */
  --text-sc-sm: clamp(0.75rem, 0.71rem + 0.21vw, 0.875rem); /* 12–14px */
  --text-sc-base: clamp(0.875rem, 0.83rem + 0.24vw, 1rem); /* 14–16px */
  --text-sc-lg: clamp(1rem, 0.94rem + 0.31vw, 1.125rem); /* 16–18px */
  --text-sc-xl: clamp(1.125rem, 1.02rem + 0.53vw, 1.375rem); /* 18–22px */
  --text-sc-2xl: clamp(1.25rem, 1.07rem + 0.91vw, 1.75rem); /* 20–28px */
  --text-sc-3xl: clamp(1.5rem, 1.21rem + 1.46vw, 2.25rem); /* 24–36px */
  --text-sc-4xl: clamp(1.875rem, 1.4rem + 2.42vw, 3rem); /* 30–48px */

  /* Dark — semantic */
  --sc-surface-base: #020617;
  --sc-surface-raised: #0f172a;
  --sc-surface-overlay: #1e293b;
  --sc-surface-inverse: #f8fafc;
  --sc-text-primary: #f8fafc;
  --sc-text-secondary: #cbd5e1;
  /* QNBS-v3: #94a3b8 = 7.97:1 on #020617 (AAA) / 5.83:1 on #0f172a (AA) — upgraded from #64748b for WCAG 2.2 AAA goal */
  --sc-text-muted: #94a3b8;
  --sc-text-on-accent: #ffffff;
  --sc-accent: #6366f1;
  --sc-accent-hover: #4f46e5;
  --sc-accent-subtle: rgba(99, 102, 241, 0.12);
  --sc-accent-glow: 0 0 40px -10px rgba(99, 102, 241, 0.35);
  --sc-border-subtle: rgba(255, 255, 255, 0.08);
  --sc-border-strong: rgba(255, 255, 255, 0.15);
  --sc-border-focus: #6366f1;
  --sc-ring-focus: rgba(99, 102, 241, 0.55);
  --sc-danger-bg: rgba(239, 68, 68, 0.12);
  --sc-danger-fg: #f87171;
  --sc-danger-border: rgba(239, 68, 68, 0.35);
  --sc-success-bg: rgba(34, 197, 94, 0.12);
  --sc-success-fg: #4ade80;
  --sc-warning-bg: rgba(245, 158, 11, 0.12);
  --sc-warning-fg: #fbbf24;
  --sc-info-bg: rgba(59, 130, 246, 0.12);
  --sc-info-fg: #60a5fa;

  /* QNBS-v3: DS-5 — button-specific aliases so components never hard-code indigo shadows/borders. */
  --sc-button-primary-shadow: 0 4px 14px 0 color-mix(in srgb, var(--sc-accent) 39%, transparent);
  --sc-button-primary-shadow-hover: 0 6px 20px color-mix(in srgb, var(--sc-accent) 23%, transparent);
  --sc-button-primary-border: color-mix(in srgb, var(--sc-accent) 20%, transparent);

  /* QNBS-v3: Data-viz categorical palette — for graphs, charts, type badges. Hue meaning preserved across themes. */
  --sc-data-1: #ef4444;
  --sc-data-2: #6366f1;
  --sc-data-3: #10b981;
  --sc-data-4: #f59e0b;
  --sc-data-5: #ec4899;
  --sc-data-6: #8b5cf6;
  --sc-data-7: #14b8a6;
  --sc-data-8: #6b7280;

  /* QNBS-v3: Heatmap sequential ramp — for progress/activity visualization. */
  --sc-heat-0: var(--sc-surface-overlay);
  --sc-heat-1: #bbf7d0;
  --sc-heat-2: #86efac;
  --sc-heat-3: #4ade80;
  --sc-heat-4: #16a34a;

  --sc-prose-bg: var(--sc-surface-base);
  --sc-prose-fg: var(--sc-text-primary);
  --sc-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.45);
  --sc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --sc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.65), 0 4px 6px -4px rgb(0 0 0 / 0.65);
  --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.65), 0 8px 10px -6px rgb(0 0 0 / 0.65);
  --sc-backdrop-strong: rgba(0, 0, 0, 0.55);

  /* @domain/ui shorthand */
  --sc-bg: var(--sc-surface-base);
  --sc-fg: var(--sc-text-primary);
  --sc-muted: var(--sc-text-muted);

  /* QNBS-v3: DS-5 — intentional token aliases (active in components or CSS rules). */
  --border-interactive: var(--sc-border-focus);
  --ring-focus: var(--sc-ring-focus);
  --nav-background-hover: rgba(255, 255, 255, 0.05);
  --nav-background-active: rgba(99, 102, 241, 0.15);
  --nav-text-active: #a5b4fc;
  --nav-border-active: var(--sc-accent);
  --background-gradient-overlay-start: rgba(2, 6, 23, 0);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-highlight: rgba(255, 255, 255, 0.15);
  --card-gradient-overlay: rgba(0, 0, 0, 0.4);
}

.light-theme {
  --sc-surface-base: #ffffff;
  --sc-surface-raised: #f8fafc;
  --sc-surface-overlay: #f1f5f9;
  --sc-surface-inverse: #0f172a;
  --sc-text-primary: #0f172a;
  --sc-text-secondary: #475569;
  /* QNBS-v3: #4b5563 = 7.39:1 on #ffffff (AAA) / 6.77:1 on #f1f5f9 (AA+) — upgraded from #64748b for WCAG 2.2 AAA goal */
  --sc-text-muted: #4b5563;
  --sc-text-on-accent: #ffffff;
  --sc-accent: #4f46e5;
  --sc-accent-hover: #4338ca;
  /* QNBS-v3: WCAG 2 AA fix — 0.12 opacity gives 4.5:1 contrast on #ffffff when used as bg with text-[var(--sc-accent)] */
  --sc-accent-subtle: rgba(79, 70, 229, 0.12);
  --sc-accent-glow: 0 0 24px -6px rgba(79, 70, 229, 0.18);
  --sc-border-subtle: #e2e8f0;
  --sc-border-strong: #cbd5e1;
  --sc-border-focus: #4f46e5;
  /* QNBS-v3: WCAG 2 AA fix — 0.45 opacity gives 4.5:1 contrast on #ffffff (light theme) */
  --sc-ring-focus: rgba(79, 70, 229, 0.45);
  --sc-danger-bg: rgba(220, 38, 38, 0.08);
  --sc-danger-fg: #dc2626;
  --sc-danger-border: rgba(220, 38, 38, 0.25);
  --sc-success-bg: rgba(22, 163, 74, 0.1);
  --sc-success-fg: #15803d;
  --sc-warning-bg: rgba(217, 119, 6, 0.1);
  --sc-warning-fg: #c2410c;
  --sc-info-bg: rgba(37, 99, 235, 0.1);
  --sc-info-fg: #1d4ed8;

  /* QNBS-v3: DS-5 — button-specific aliases so components never hard-code indigo shadows/borders. */
  --sc-button-primary-shadow: 0 4px 14px 0 color-mix(in srgb, var(--sc-accent) 20%, transparent);
  --sc-button-primary-shadow-hover: 0 6px 20px color-mix(in srgb, var(--sc-accent) 14%, transparent);
  --sc-button-primary-border: color-mix(in srgb, var(--sc-accent) 20%, transparent);

  /* QNBS-v3: Data-viz categorical palette — for graphs, charts, type badges. Hue meaning preserved across themes. */
  --sc-data-1: #dc2626;
  --sc-data-2: #4f46e5;
  --sc-data-3: #15803d;
  --sc-data-4: #c2410c;
  --sc-data-5: #db2777;
  --sc-data-6: #7c3aed;
  --sc-data-7: #0d9488;
  --sc-data-8: #6b7280;

  /* QNBS-v3: Heatmap sequential ramp — for progress/activity visualization. */
  --sc-heat-0: var(--sc-surface-overlay);
  --sc-heat-1: #d1fae5;
  --sc-heat-2: #a7f3d0;
  --sc-heat-3: #6ee7b7;
  --sc-heat-4: #059669;

  --sc-prose-bg: #ffffff;
  --sc-prose-fg: var(--sc-text-primary);
  --sc-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --sc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
  --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);
  /* QNBS-v3: DS-5 — 0.22 matches original --overlay-backdrop for light-theme (lighter than dark's 0.55). */
  --sc-backdrop-strong: rgba(0, 0, 0, 0.22);

  --sc-bg: var(--sc-surface-base);
  --sc-fg: var(--sc-text-primary);
  --sc-muted: var(--sc-text-muted);

  --border-interactive: var(--sc-border-focus);
  --ring-focus: var(--sc-ring-focus);
  --nav-background-hover: rgba(0, 0, 0, 0.03);
  --nav-background-active: rgba(79, 70, 229, 0.08);
  --nav-text-active: #4338ca;
  --nav-border-active: var(--sc-accent);
  --background-gradient-overlay-start: rgba(255, 255, 255, 0);
  --glass-bg: rgba(0, 0, 0, 0.03);
  --glass-bg-hover: rgba(0, 0, 0, 0.05);
  --glass-border: rgba(0, 0, 0, 0.05);
  --glass-highlight: rgba(0, 0, 0, 0.08);
  --card-gradient-overlay: rgba(0, 0, 0, 0.15);
}

/* Writer's Sepia (light) — warm daylit paper; stacks on .light-theme */
.appearance-sepia {
  --sc-surface-base: #f4ecd8;
  --sc-surface-raised: #efe6cf;
  --sc-surface-overlay: #e8dcc8;
  --sc-text-primary: #3d3428;
  --sc-text-secondary: #5c5346;
  /* QNBS-v3: #655c50 = 5.57:1 on #f4ecd8 (AA) — darkened from #8a7f72 which was 3.33:1 (fail) */
  --sc-text-muted: #655c50;
  /* QNBS-v3: #b45309 was 4.27:1 on base / 3.66:1 on active-nav-bg (#ecdabf) — both below 4.5:1 AA.
     Darkened to #92400e (5.68:1 on base, 4.97:1 on active-nav-bg). White text on buttons: 6.69:1 ✓ */
  --sc-accent: #92400e;
  --sc-accent-hover: #78350f;
  --sc-accent-subtle: rgba(146, 64, 14, 0.14);
  --sc-accent-glow: 0 0 32px -8px rgba(146, 64, 14, 0.28);
  --sc-border-subtle: rgba(61, 52, 40, 0.12);
  --sc-border-strong: rgba(61, 52, 40, 0.22);
  --sc-border-focus: #92400e;
  --sc-ring-focus: rgba(146, 64, 14, 0.45);
  --sc-prose-bg: #faf6ee;
  --sc-prose-fg: #2c2419;
  --nav-text-active: #92400e;
  --nav-background-active: rgba(146, 64, 14, 0.12);
  --sc-bg: var(--sc-surface-base);
  --sc-fg: var(--sc-text-primary);
  --sc-muted: var(--sc-text-muted);
  --border-interactive: var(--sc-border-focus);
  --ring-focus: var(--sc-ring-focus);
  --nav-border-active: var(--sc-accent);

  /* QNBS-v3: state colors — dark-theme values (#4ade80 etc.) fail on sepia's light bg;
     override with light-theme-equivalent deep tones that pass WCAG AA on all sepia surfaces */
  --sc-danger-fg: #b91c1c;
  --sc-danger-bg: rgba(185, 28, 28, 0.08);
  --sc-danger-border: rgba(185, 28, 28, 0.25);
  --sc-success-fg: #166534;
  --sc-success-bg: rgba(22, 101, 52, 0.08);
  /* QNBS-v3: #9a3412 distinguishes warning from accent (#92400e) — both warm but different hues */
  --sc-warning-fg: #9a3412;
  --sc-warning-bg: rgba(146, 64, 14, 0.08);
  --sc-info-fg: #1d4ed8;
  --sc-info-bg: rgba(29, 78, 216, 0.08);

  /* QNBS-v3: DS-5 — button-specific aliases so components never hard-code amber/brown shadows/borders. */
  --sc-button-primary-shadow: 0 4px 14px 0 color-mix(in srgb, var(--sc-accent) 22%, transparent);
  --sc-button-primary-shadow-hover: 0 6px 20px color-mix(in srgb, var(--sc-accent) 15%, transparent);
  --sc-button-primary-border: color-mix(in srgb, var(--sc-accent) 20%, transparent);

  /* QNBS-v3: Data-viz categorical palette — sepia-adjusted for warmth. */
  --sc-data-1: #dc2626;
  --sc-data-2: #4f46e5;
  --sc-data-3: #15803d;
  --sc-data-4: #c2410c;
  --sc-data-5: #db2777;
  --sc-data-6: #7c3aed;
  --sc-data-7: #0d9488;
  --sc-data-8: #6b7280;

  /* QNBS-v3: Heatmap sequential ramp — sepia-adjusted. */
  --sc-heat-0: var(--sc-surface-overlay);
  --sc-heat-1: #fef3c7;
  --sc-heat-2: #fde047;
  --sc-heat-3: #facc15;
  --sc-heat-4: #ca8a04;
}

/* Writer's Sepia (dark) — "Candlelit Manuscript"; stacks on .dark-theme.
   QNBS-v3: compound selector (specificity 0,2,0) wins over .appearance-sepia (0,1,0).
   Contrast ratios verified: primary 14.7:1 AAA / secondary 8.6:1 AAA / muted 5.3:1 AA
   (all on worst-case overlay bg #302214). Accent #f59e0b: on-accent #1c1308 = 9.1:1 AAA;
   accent-hover #d97706 with same on-accent = 6.1:1 AA. */
.dark-theme.appearance-sepia {
  /* Surfaces — deep warm browns, never pure black */
  --sc-surface-base: #1c1308;
  --sc-surface-raised: #261a0d;
  --sc-surface-overlay: #302214;
  --sc-surface-inverse: #f0e4cc;

  /* Text — warm cream / tan tones */
  --sc-text-primary: #eddfc0;
  --sc-text-secondary: #c8a97a;
  /* QNBS-v3: #b38a64 = 5.28:1 on overlay (#302214), 6.32:1 on base — both AA */
  --sc-text-muted: #b38a64;
  /* QNBS-v3: amber accent is bright; dark text on #f59e0b = 9.1:1 AAA, on hover #d97706 = 6.1:1 AA */
  --sc-text-on-accent: #1c1308;

  /* Accent — candlelight amber */
  --sc-accent: #f59e0b;
  --sc-accent-hover: #d97706;
  --sc-accent-subtle: rgba(245, 158, 11, 0.14);
  --sc-accent-glow: 0 0 32px -8px rgba(245, 158, 11, 0.35);

  /* Borders */
  --sc-border-subtle: rgba(237, 223, 192, 0.08);
  --sc-border-strong: rgba(237, 223, 192, 0.16);
  --sc-border-focus: #f59e0b;
  --sc-ring-focus: rgba(245, 158, 11, 0.5);

  /* Prose (writing area — darkest warm surface) */
  --sc-prose-bg: #120d05;
  --sc-prose-fg: #f0e4cc;

  /* Nav */
  --nav-text-active: #fbbf24;
  --nav-background-active: rgba(245, 158, 11, 0.15);
  --nav-background-hover: rgba(237, 223, 192, 0.05);
  --nav-border-active: #f59e0b;

  /* Alias tokens */
  --sc-bg: var(--sc-surface-base);
  --sc-fg: var(--sc-text-primary);
  --sc-muted: var(--sc-text-muted);
  --border-interactive: var(--sc-border-focus);
  --ring-focus: var(--sc-ring-focus);
  --background-gradient-overlay-start: rgba(28, 19, 8, 0);

  /* Glass — warm glow instead of cool white */
  --glass-bg: rgba(237, 223, 192, 0.04);
  --glass-bg-hover: rgba(237, 223, 192, 0.08);
  --glass-border: rgba(237, 223, 192, 0.06);
  --glass-highlight: rgba(237, 223, 192, 0.12);
  --card-gradient-overlay: rgba(0, 0, 0, 0.45);

  /* State colors — luminous on dark bg (same as :root dark defaults but amber-tuned) */
  --sc-danger-fg: #fca5a5;
  --sc-danger-bg: rgba(239, 68, 68, 0.12);
  --sc-danger-border: rgba(239, 68, 68, 0.3);
  --sc-success-fg: #86efac;
  --sc-success-bg: rgba(34, 197, 94, 0.12);
  --sc-warning-fg: #fbbf24;
  --sc-warning-bg: rgba(251, 191, 36, 0.1);
  --sc-info-fg: #93c5fd;
  --sc-info-bg: rgba(147, 197, 253, 0.1);

  /* QNBS-v3: DS-5 — button-specific aliases so components never hard-code amber shadows/borders. */
  --sc-button-primary-shadow: 0 4px 14px 0 color-mix(in srgb, var(--sc-accent) 28%, transparent);
  --sc-button-primary-shadow-hover: 0 6px 20px color-mix(in srgb, var(--sc-accent) 18%, transparent);
  --sc-button-primary-border: color-mix(in srgb, var(--sc-accent) 20%, transparent);

  /* Shadows — heavy dark (same as :root; explicit for clarity) */
  --sc-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.45);
  --sc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --sc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.65), 0 4px 6px -4px rgb(0 0 0 / 0.65);
  --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.65), 0 8px 10px -6px rgb(0 0 0 / 0.65);
  --sc-backdrop-strong: rgba(0, 0, 0, 0.6);

  /* Data-viz — brighter on dark bg */
  --sc-data-1: #ef4444;
  --sc-data-2: #a78bfa;
  --sc-data-3: #4ade80;
  --sc-data-4: #fbbf24;
  --sc-data-5: #f472b6;
  --sc-data-6: #c084fc;
  --sc-data-7: #2dd4bf;
  --sc-data-8: #94a3b8;

  /* Heatmap — amber ramp on dark */
  --sc-heat-0: var(--sc-surface-overlay);
  --sc-heat-1: #fef3c7;
  --sc-heat-2: #fde047;
  --sc-heat-3: #facc15;
  --sc-heat-4: #d97706;
}

/* High contrast — user toggle + system preference */
.accessibility-high-contrast {
  /* QNBS-v3: DS-5 — use sc-* token directly; --foreground-primary bridge alias removed. */
  --sc-border-subtle: color-mix(in srgb, var(--sc-text-primary) 28%, transparent);
  --sc-border-strong: color-mix(in srgb, var(--sc-text-primary) 45%, transparent);
  --ring-focus: color-mix(in srgb, var(--sc-accent) 65%, white);
}

@media (prefers-contrast: more) {
  :root {
    --sc-border-subtle: rgba(255, 255, 255, 0.22);
    --sc-border-strong: rgba(255, 255, 255, 0.38);
  }
  .light-theme {
    --sc-border-subtle: #94a3b8;
    --sc-border-strong: #64748b;
  }
}

/* QNBS-v3: prefers-reduced-data disables Aurora on metered/low-bandwidth connections — blobs are purely decorative. */
@media (prefers-reduced-data: reduce) {
  .aurora-blob {
    display: none;
  }
}

/* QNBS-v3: .aurora-disabled is toggled by inline JS in index.html when hardwareConcurrency ≤ 4 — prevents GPU drain on low-end devices. */
.aurora-disabled .aurora-blob {
  display: none;
}

.worldscript-reduced-motion .aurora-blob {
  animation: none;
  opacity: 0.1;
}

/* Large UI text — paired with Settings › Accessibility */
html.worldscript-large-text {
  font-size: 112.5%;
}

/* Comfortable tap targets — motor preset */
body.accessibility-comfortable-targets :where(button:not(.sr-only), [role="button"]) {
  min-height: 44px;
}

/* Stronger focus rings when enabled */
body.worldscript-focus-indicators :focus-visible {
  outline: 3px solid var(--ring-focus);
  outline-offset: 3px;
}

/* Screen reader mode — slightly roomier line rhythm */
body.worldscript-screen-reader {
  line-height: 1.65;
}

/* Tailwind v4 theme bridge → utilities bg-sc-* / text-sc-* / icon-sc-* */
@theme inline {
  --color-sc-bg: var(--sc-bg);
  --color-sc-fg: var(--sc-fg);
  --color-sc-muted: var(--sc-muted);
  --color-sc-accent: var(--sc-accent);
  --color-sc-surface-base: var(--sc-surface-base);
  --color-sc-surface-raised: var(--sc-surface-raised);
  --color-sc-surface-overlay: var(--sc-surface-overlay);
  --color-sc-text-primary: var(--sc-text-primary);
  --color-sc-text-secondary: var(--sc-text-secondary);
  --color-sc-text-muted: var(--sc-text-muted);
  --shadow-sc-sm: var(--sc-shadow-sm);
  --shadow-sc-md: var(--sc-shadow-md);
  --shadow-sc-lg: var(--sc-shadow-lg);
  --radius-sc-sm: 0.375rem;
  --radius-sc-md: 0.5rem;
  --radius-sc-lg: 0.75rem;
  /* QNBS-v3: xl radius for feature cards, stat cards — 1rem matches current rounded-2xl usage */
  --radius-sc-xl: 1rem;
  --spacing-sc-xs: 0.25rem;
  --spacing-sc-sm: 0.5rem;
  --spacing-sc-md: 1rem;
  --spacing-sc-lg: 1.5rem;
  --spacing-sc-xl: 2rem;
  --ease-sc-standard: var(--sc-ease-standard);
  --ease-sc-emphasized: var(--sc-ease-emphasized);
  --duration-sc-fast: var(--sc-duration-fast);
  --duration-sc-normal: var(--sc-duration-normal);
  /* QNBS-v3: fluid type scale used by text-sc-* utilities */
  --font-size-sc-xs: var(--text-sc-xs);
  --font-size-sc-xs--line-height: 1.5;
  --font-size-sc-sm: var(--text-sc-sm);
  --font-size-sc-sm--line-height: 1.5;
  --font-size-sc-base: var(--text-sc-base);
  --font-size-sc-base--line-height: 1.6;
  --font-size-sc-lg: var(--text-sc-lg);
  --font-size-sc-lg--line-height: 1.5;
  --font-size-sc-xl: var(--text-sc-xl);
  --font-size-sc-xl--line-height: 1.4;
  --font-size-sc-2xl: var(--text-sc-2xl);
  --font-size-sc-2xl--line-height: 1.3;
  --font-size-sc-3xl: var(--text-sc-3xl);
  --font-size-sc-3xl--line-height: 1.25;
  --font-size-sc-4xl: var(--text-sc-4xl);
  --font-size-sc-4xl--line-height: 1.1;
  /* QNBS-v3: icon size utilities used by the centralized <Icon /> component */
  --width-icon-sc-sm: var(--icon-sc-sm);
  --width-icon-sc-md: var(--icon-sc-md);
  --width-icon-sc-lg: var(--icon-sc-lg);
  --width-icon-sc-xl: var(--icon-sc-xl);
  --height-icon-sc-sm: var(--icon-sc-sm);
  --height-icon-sc-md: var(--icon-sc-md);
  --height-icon-sc-lg: var(--icon-sc-lg);
  --height-icon-sc-xl: var(--icon-sc-xl);
}

/* QNBS-v3 (D3): pointer-aware touch-target utilities. `min-height`/`min-width` aren't a Tailwind v4
   theme namespace, so define them as first-class `@utility` rules (variant-compatible). They read
   `--size-touch-target` (44px default; 36px under `.is-desktop` + `(pointer: fine)`), so the same
   class is AAA-sized for touch and AA-sized (≥24px) under a desktop mouse. Replaces raw
   `min-h-[44px]`/`min-w-[44px]`. */
@utility min-h-touch {
  min-height: var(--size-touch-target);
}

@utility min-w-touch {
  min-width: var(--size-touch-target);
}

/* ── Base ──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  background-color: var(--sc-surface-base);
  color: var(--sc-text-primary);
  transition:
    background-color var(--sc-duration-normal) var(--sc-ease-emphasized),
    color var(--sc-duration-normal) var(--sc-ease-emphasized);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  height: 100%;
}

#root {
  height: 100%;
  width: 100vw;
  position: relative;
  z-index: 1;
}

/* ── Cinematic Grain ───────────────────────────────────── */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 50;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.light-theme .noise-overlay {
  opacity: 0.025;
}

/* ── Ambient Lighting - Aurora ─────────────────────────── */
.aurora-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora-blob {
  position: absolute;
  filter: blur(100px);
  opacity: 0.25;
  border-radius: 50%;
  will-change: transform;
  animation: float 25s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
.light-theme .aurora-blob {
  opacity: 0.08;
}
.blob-1 {
  top: -10%;
  left: -10%;
  width: 50vw;
  height: 50vh;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 70%);
}
.blob-2 {
  bottom: -20%;
  right: -10%;
  width: 60vw;
  height: 60vh;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.3), transparent 70%);
  animation-delay: -8s;
}
.blob-3 {
  top: 40%;
  left: 30%;
  width: 40vw;
  height: 40vh;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.25), transparent 70%);
  animation-delay: -15s;
}

/* QNBS-v3: A plain writing surface removes decorative fixed layers without clipping content or changing layout. */
.writing-surface-plain .noise-overlay,
.writing-surface-plain .aurora-container {
  display: none;
}

@keyframes float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(8%, 8%) scale(1.15);
  }
}

/* ── Custom Scrollbar - Minimalist ─────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--sc-border-subtle);
  border-radius: 10px;
  transition: background-color 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--sc-text-muted);
}

/* ── Animations ────────────────────────────────────────── */
.animate-in {
  animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  animation-delay: calc(var(--index) * 80ms);
}
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* QNBS-v3: must come after the .aurora-blob/.animate-in base rules above — same specificity means source order decides, and this override was previously silently dead when declared earlier in the file, leaving both perpetually animating under prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .aurora-blob {
    animation: none;
    opacity: 0.12;
  }
  .animate-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.animate-pulse-slow {
  animation: pulse-glow 3s infinite ease-in-out;
}
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* QNBS-v3: Toast motion — centralized so components don't ship inline <style> tags. */
.animate-toast-slide-up {
  animation: toast-slide-up 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes toast-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-toast-progress {
  animation: toast-progress-shrink 5s linear forwards;
}
@keyframes toast-progress-shrink {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* QNBS-v3: Modal enter/exit motion — centralized so Modal.tsx can avoid inline style={{ animation }}. */
.animate-modal-backdrop {
  animation: modal-fade-in 0.2s ease-out forwards;
}
.animate-modal-panel {
  animation: modal-scale-in 0.2s ease-out forwards;
}
@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-scale-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Range Input ───────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  background: var(--sc-surface-overlay);
  border-radius: 999px;
  height: 4px;
  width: 100%;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--sc-text-primary);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0px;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 4px var(--sc-accent-subtle);
}

/* ── Utility ───────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Mention Pills ─────────────────────────────────────── */
.mention-pill {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9em;
  margin: 0 1px;
  transition: all 0.2s;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mention-pill-character {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.mention-pill-world {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.light-theme .mention-pill-character {
  color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.light-theme .mention-pill-world {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* ── Spell Error ───────────────────────────────────────── */
.spell-error {
  text-decoration: underline wavy #ef4444;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
  transition: background-color 0.2s;
  text-underline-offset: 3px;
}
.spell-error:hover {
  background-color: rgba(239, 68, 68, 0.15);
}

/* ── Select Dropdown ───────────────────────────────────── */
select option {
  background-color: var(--sc-surface-raised);
  color: var(--sc-text-primary);
}

/* ── driver.js spotlight tour ─────────────────────────── */
/* QNBS-v3: two-class selectors beat driver.js specificity without !important. */
.driver-popover.worldscript-driver-popover,
.driver-popover.storycraft-driver-popover {
  background: var(--sc-surface-raised);
  color: var(--sc-text-primary);
  border: 1px solid var(--sc-border-subtle);
  box-shadow: var(--sc-shadow-md, 0 12px 40px rgba(0, 0, 0, 0.35));
}
.driver-popover.worldscript-driver-popover .driver-popover-title,
.driver-popover.storycraft-driver-popover .driver-popover-title {
  color: var(--sc-text-primary);
}
.driver-popover.worldscript-driver-popover .driver-popover-description,
.driver-popover.storycraft-driver-popover .driver-popover-description {
  color: var(--sc-text-secondary);
}
.driver-popover.worldscript-driver-popover .driver-popover-navigation-btns button,
.driver-popover.storycraft-driver-popover .driver-popover-navigation-btns button {
  text-shadow: none;
}
.driver-popover.worldscript-driver-popover button.driver-popover-next-btn,
.driver-popover.storycraft-driver-popover button.driver-popover-next-btn {
  background: var(--sc-accent);
  color: var(--sc-text-on-accent);
}
.driver-popover.worldscript-driver-popover button.driver-popover-prev-btn,
.driver-popover.worldscript-driver-popover button.driver-popover-close-btn,
.driver-popover.storycraft-driver-popover button.driver-popover-prev-btn,
.driver-popover.storycraft-driver-popover button.driver-popover-close-btn {
  color: var(--sc-text-secondary);
}

/* Approximate color-vision hints — nach base `body`-Regeln (Biome noDescendingSpecificity). */
:root[data-colorblind="protanopia"] body {
  filter: sepia(0.12) hue-rotate(-12deg) saturate(1.15);
}

:root[data-colorblind="deuteranopia"] body {
  filter: sepia(0.1) hue-rotate(-8deg) saturate(1.12);
}

:root[data-colorblind="tritanopia"] body {
  filter: sepia(0.08) hue-rotate(18deg) saturate(1.1);
}

/* ── Mobile bottom tab bar clearance ── */
:root {
  --sc-mobile-tab-bar-height: calc(5.75rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  :root {
    --sc-mobile-tab-bar-height: 0px;
  }
}

/* Legacy helper kept for reference — replaced by .app-column-mobile approach. */
.pb-mobile-nav {
  padding-bottom: calc(var(--sc-mobile-tab-bar-height) + 1.25rem);
}

/* QNBS-v3: Cap the inner app column on mobile so every h-full view is bounded
   above the fixed bottom nav. Defensive against Safari/old-Chrome where
   height:100% on a block child of overflow:auto can resolve to the parent's
   border-box height (including padding) instead of the content height. */
@media (max-width: 767px) {
  .app-column-mobile {
    max-height: calc(100dvh - var(--sc-mobile-tab-bar-height));
  }
}

/* QNBS-v3: RTL beta (B-5/C-6) — global safety net for [dir="rtl"]. The app shell and
   primary views use logical Tailwind utilities (ms-/me-/ps-/pe-/start-/end-/text-start/end),
   which flip automatically; this net catches the remaining physical utilities and shared
   directional patterns so unconverted spots still read correctly in Arabic/Hebrew.
   Canvas/SVG boards opt out via .rtl-keep-ltr (geometry math must stay LTR). */
[dir="rtl"] {
  /* QNBS-v3: swap active font tokens to Noto Arabic/Hebrew stacks; body uses var(--font-ui). */
  --font-ui: var(--font-ui-rtl);
  --font-editor: var(--font-editor-rtl);

  /* Swap physical text-align utilities that weren't migrated to text-start/text-end */
  .text-left {
    text-align: right;
  }
  .text-right {
    text-align: left;
  }

  /* Swap physical float utilities */
  .float-left {
    float: right;
  }
  .float-right {
    float: left;
  }

  /* Mirror chevron/arrow icons used in navigation (opt-in per icon) */
  .rtl-mirror {
    transform: scaleX(-1);
  }
}

/* QNBS-v3: RTL beta — directional icons that should always mirror under RTL without a
   per-instance class (back/forward carets, breadcrumb separators, disclosure chevrons). */
[dir="rtl"] .rtl-auto-mirror {
  transform: scaleX(-1);
}

/* QNBS-v3: RTL beta — coordinate-system islands. PlotCanvas/ConnectionLayer/PlotMinimap/
   CharacterGraphView rely on getBoundingClientRect + pointer math that assumes LTR; force
   LTR on the wrapper so the board geometry/hit-testing stays correct while the surrounding
   chrome flips. Inner text labels can still opt back in with dir="auto". */
.rtl-keep-ltr {
  direction: ltr;
}

/* QNBS-v3: PR1 i18n — bind the per-script UI font stacks (registry `fontScript`) to the active
   <html lang>. These vars existed (--font-ui-cjk / --font-ui-greek) but NO selector consumed them,
   so ja/zh/el rendered via the Latin base stack and only hit Noto as a late fallback. Leading the
   stack with the right Noto family fixes glyph coverage + metrics. RTL scripts (ar/he/fa) keep their
   own [dir="rtl"] token swap above; `:lang(zh)` also covers a future zh-Hant. */
:lang(ja),
:lang(zh) {
  --font-ui: var(--font-ui-cjk);
}
:lang(el) {
  --font-ui: var(--font-ui-greek);
}
:lang(ko) {
  --font-ui: var(--font-ui-kr);
}

/* ==========================================================================
   Desktop (Tauri) scoped layer — QNBS-v3
   Applied only inside the Tauri WebView: `applyDesktopRuntimeFlags()`
   (services/tauriRuntime.ts) sets `body.is-desktop` + `data-os` on mount, so
   every desktop-specific refinement lives here and the PWA stays untouched.
   `data-os` ∈ {windows, macos, linux} is available for per-engine quirks
   (WebView2 / WebKit / WebKitGTK). Populated by the Desktop UI/UX remediation
   phases D1–D4 — see docs/DESKTOP-UI-AUDIT.md. (D0 = hook only, no visual change.)
   ========================================================================== */
body.is-desktop {
  /* QNBS-v3 (D2): desktop content-width family. One scale reused by the
     `.view-shell` primitive so every view inherits consistent desktop measure
     instead of ad-hoc `max-w-*`. A no-op on the PWA, which never gets
     `.is-desktop`. Pair with `--sc-prose-measure` (65ch) for long-form text.
       narrow → single-column reading/forms · default → work-content
       wide   → multi-column dashboards/grids that need room to breathe */
  --width-content-narrow: 48rem;
  --width-content: 72rem;
  --width-content-wide: 90rem;

  /* QNBS-v3 (D2): desktop vertical rhythm. The PWA tunes section spacing for
     touch; a mouse-driven desktop reads denser. Views opt in via `.view-stack`
     (token only — applying it is incremental, so nothing shifts implicitly). */
  --space-section-desktop: 1.5rem;
}

/* QNBS-v3 (D1/D2): the content-width primitive (components/ui/PageContainer.tsx
   → `.view-shell`). Centers content-light views under the desktop cap; on the
   web the rule is inert because the cap only applies inside `.is-desktop`.
   Editor, Plot Board and Mind Map own their width and are NOT wrapped.
   Width variants are opt-in modifier classes set by PageContainer's `width` prop. */
body.is-desktop .view-shell {
  max-width: var(--width-content);
  margin-inline: auto;
}

body.is-desktop .view-shell--narrow {
  max-width: var(--width-content-narrow);
}

body.is-desktop .view-shell--wide {
  max-width: var(--width-content-wide);
}

/* QNBS-v3 (D3): denser touch targets for mouse-driven desktop. Guarded by
   `(pointer: fine) and (not (any-pointer: coarse))` so HYBRID touchscreen laptops
   (precise mouse AND a coarse touch input) keep the full 44px (AAA) rather than being
   shrunk to 36px — only pure-pointer devices densify. 36px still satisfies WCAG 2.2
   AA (2.5.8 — 24px minimum). Drives `min-h-touch` / `min-w-touch` via `--size-touch-target`. */
@media (pointer: fine) and (not (any-pointer: coarse)) {
  body.is-desktop {
    --size-touch-target: 2.25rem;
  }
}

/* QNBS-v3 (D4 / C-8): scrollbars sized for a mouse on desktop. The 6px global default reads well for
   touch/trackpad; a desktop pointer grabs a 10px track more comfortably. `::-webkit-scrollbar` covers
   all three Tauri engines (WebView2 / WebKit / WebKitGTK, all Chromium/WebKit-based). */
body.is-desktop ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* QNBS-v3 (#187): reserve a stable scrollbar gutter on the ACTUAL desktop scroll containers (Tailwind
   overflow utilities). `body` is `overflow: hidden`, so the gutter must live on the scrolling
   descendants, not body — otherwise classic (non-overlay) scrollbars appearing/disappearing shift
   content horizontally. `:where()` keeps specificity at 0 so view styles still win. */
body.is-desktop
:where(.overflow-y-auto, .overflow-auto, .overflow-y-scroll, .overflow-x-auto, .overflow-x-scroll) {
  scrollbar-gutter: stable;
}

/* QNBS-v3 (D4/C-6/#332): honors OS reduced-transparency by making the token-driven glass layer opaque and neutralizing direct backdrop-blur-* utilities (24 files) the token swap alone doesn't reach; unlayered CSS already outranks Tailwind's utility layer, so no !important is needed. */
@media (prefers-reduced-transparency: reduce) {
  body.is-desktop {
    --glass-bg: var(--sc-surface-raised);
    --glass-bg-hover: var(--sc-surface-overlay);
    --glass-border: var(--sc-border-subtle);
  }
  body.is-desktop [class*="backdrop-blur-"] {
    backdrop-filter: none;
  }
}

/* QNBS-v3 (#332/D4): manual "Reduce transparency effects" relief valve for desktop/Linux users whose OS/DE doesn't expose prefers-reduced-transparency; scoped to body.is-desktop like the OS-preference block above since the GPU cost this addresses is WebKitGTK-specific. */
body.is-desktop.worldscript-reduced-transparency {
  --glass-bg: var(--sc-surface-raised);
  --glass-bg-hover: var(--sc-surface-overlay);
  --glass-border: var(--sc-border-subtle);
}
body.is-desktop.worldscript-reduced-transparency [class*="backdrop-blur-"] {
  backdrop-filter: none;
}

/* QNBS-v3 (PR2): scoped typography for the Export view's "Rendered" preview. DOMPurify strips
   class/style from the sanitized markdown HTML, so these element selectors carry the styling. */
.export-rendered-preview h1 {
  font-size: 1.8em;
  font-weight: 700;
  text-align: center;
  margin: 0.6em 0;
}
.export-rendered-preview h2 {
  font-size: 1.4em;
  font-weight: 700;
  border-bottom: 1px solid var(--sc-border-subtle);
  padding-bottom: 0.2em;
  margin: 1em 0 0.4em;
}
.export-rendered-preview h3 {
  font-size: 1.15em;
  font-weight: 600;
  margin: 0.8em 0 0.3em;
}
.export-rendered-preview p {
  margin: 0.5em 0;
  line-height: 1.7;
}
.export-rendered-preview ul {
  margin: 0.5em 0;
  padding-inline-start: 1.4em;
  list-style: disc;
}
.export-rendered-preview img {
  max-width: 100%;
  height: auto;
}
.export-rendered-preview code {
  font-family: monospace;
  background: var(--sc-surface-overlay);
  padding: 0 0.25em;
  border-radius: 3px;
}