/* =============================================================================
   WORKSPACE LIGHT MODE — the light version of workspace-header.css and
   workspace-screens.css (Practice / Learn / Evaluate header, the Evaluate
   picker, the Roadmap map and topic page). Switched by <html data-theme="light">
   (partials/theme_init.html, sun/moon button in the navbar).
   Same rules as the dark version: white surfaces and the canvas are untouched;
   only the dark chrome becomes a pale blue gradient with dark text.
============================================================================= */
html.ws-header[data-theme="light"] {
  color-scheme: light;
  --wh-bg: #f4f8ff;
  --wh-surface: #ffffff;
  --wh-line: rgba(37,99,235,0.12);
  --wh-text: #0f172a;
  --wh-text-2: #475569;
  --wh-accent: #2563eb;
  --ws2-bg: #f4f8ff;
  --ws2-surface: #ffffff;
  --ws2-line: rgba(15,23,42,0.09);
  --ws2-accent: #2563eb;
  --wl-grad: linear-gradient(90deg, #e8f1ff 0%, #f6f9ff 45%, #eaf6fd 100%);
  --wl-panel: linear-gradient(160deg, #eaf2ff 0%, #f5f8ff 45%, #eef8fd 100%);
}

/* ─── Header: navbar + action bar + interview toolbar, one pale blue band ──── */
html.ws-header[data-theme="light"] .an-toolbar,
html.ws-header[data-theme="light"] #workspace-action-bar,
html.ws-header[data-theme="light"] #im-toolbar { background: var(--wl-grad) !important; }
html.ws-header[data-theme="light"] .an-toolbar .an-tab { color: #475569; }
html.ws-header[data-theme="light"] .an-toolbar .an-tab:hover,
html.ws-header[data-theme="light"] .an-toolbar .an-tab.active,
html.ws-header[data-theme="light"] .an-toolbar .an-tab.tsw-active { color: #0f172a; }
html.ws-header[data-theme="light"] .an-tab.active::after,
html.ws-header[data-theme="light"] .an-tab.tsw-active::after { box-shadow: 0 0 8px rgba(37,99,235,0.35); }
html.ws-header[data-theme="light"] .an-toolbar .an-tl-icon-btn { background: transparent; color: #334155; }
html.ws-header[data-theme="light"] .an-toolbar .an-tl-icon-btn:hover { background: rgba(15,23,42,0.05); color: #0f172a; }
html.ws-header[data-theme="light"] .an-toolbar .button.ghost,
html.ws-header[data-theme="light"] .an-toolbar .an-feedback-btn {
  background: #ffffff; border-color: rgba(15,23,42,0.12); color: #334155;
}
html.ws-header[data-theme="light"] .an-toolbar .button.ghost:hover,
html.ws-header[data-theme="light"] .an-toolbar .an-feedback-btn:hover {
  background: #f1f5f9; border-color: rgba(15,23,42,0.18); color: #0f172a;
}
html.ws-header[data-theme="light"] .an-avatar { background: #eff6ff; color: #2563eb; border-color: rgba(37,99,235,0.35); }
html.ws-header[data-theme="light"] .an-avatar:hover { box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
html.ws-header[data-theme="light"] #workspace-action-bar::after,
html.ws-header[data-theme="light"] #im-toolbar::after {
  background: linear-gradient(90deg, transparent 0%, rgba(37,99,235,0) 20%, rgba(37,99,235,0.6) 50%, rgba(14,165,233,0) 80%, transparent 100%);
  background-size: 200% 100%;
}

/* Problem selector */
html.ws-header[data-theme="light"] #wab-question-selector .custom-select-trigger,
html.ws-header[data-theme="light"] #wab-designfix-nav .custom-select-trigger {
  background: #ffffff !important;
  border-color: rgba(15,23,42,0.12) !important;
  color: #0f172a !important;
}
html.ws-header[data-theme="light"] #wab-question-selector .custom-select-value,
html.ws-header[data-theme="light"] #wab-designfix-nav .custom-select-value { color: #0f172a !important; }
html.ws-header[data-theme="light"] #wab-question-selector .custom-select-trigger:hover,
html.ws-header[data-theme="light"] #wab-designfix-nav .custom-select-trigger:hover {
  background: #ffffff !important;
  border-color: rgba(37,99,235,0.45) !important;
}

/* Simulate / Run / Submit pill */
html.ws-header[data-theme="light"] .wab-actions { background: transparent !important; }
html.ws-header[data-theme="light"] #wab-simulate-btn { color: #334155; }
html.ws-header[data-theme="light"] #wab-simulate-btn:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
html.ws-header[data-theme="light"] #wab-run-btn { box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
html.ws-header[data-theme="light"] #wab-submit-btn { background: rgba(22,163,74,0.08); color: #15803d; box-shadow: inset 0 0 0 1px rgba(22,163,74,0.35); }
html.ws-header[data-theme="light"] #wab-submit-btn:hover:not(:disabled) { background: rgba(22,163,74,0.14); color: #166534; }
html.ws-header[data-theme="light"] body.learn-mode-active #wab-simulate-btn,
html.ws-header[data-theme="light"] body.practice-custom-mode #wab-simulate-btn { color: #ffffff; }
html.ws-header[data-theme="light"] .wab-stopwatch-btn { color: #475569; }

/* ─── Evaluate picker: the left panel becomes a pale blue panel ───────────── */
html.ws-header[data-theme="light"] .ess-left {
  background:
    radial-gradient(ellipse 70% 45% at 15% 10%, rgba(59,130,246,0.14), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 95%, rgba(14,165,233,0.12), transparent 70%),
    var(--wl-panel);
  border-right-color: rgba(15,23,42,0.08);
}
html.ws-header[data-theme="light"] .ess-headline,
html.ws-header[data-theme="light"] .ess-step-title { color: #0f172a; }
html.ws-header[data-theme="light"] .ess-subhead,
html.ws-header[data-theme="light"] .ess-step-desc { color: #475569; }
html.ws-header[data-theme="light"] .ess-step-dot { background: #ffffff; border-color: rgba(37,99,235,0.35); color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,0.06); }
html.ws-header[data-theme="light"] .ess-step-dot svg { color: #2563eb; stroke: #2563eb; }
html.ws-header[data-theme="light"] .ess-step-line { background: linear-gradient(#2563eb, rgba(37,99,235,0.1)); }
html.ws-header[data-theme="light"] .ess-terminal-pill { background: #ffffff; border-color: rgba(37,99,235,0.3); color: #0f172a; }

/* ─── Roadmap map: pale blue stage with the landing page's light ─────────── */
html.ws-header[data-theme="light"] #rm-main { background: linear-gradient(180deg, #eef4ff 0%, #f6f8fb 55%, #eef8fd 100%) !important; }
html.ws-header[data-theme="light"] #rm-main > .lp-ambient i { opacity: 0.5 !important; filter: blur(100px); }
html.ws-header[data-theme="light"] #rm-main > .lp-ambient i:nth-child(1) { background: radial-gradient(circle, #93c5fd, transparent 65%); }
html.ws-header[data-theme="light"] #rm-main > .lp-ambient i:nth-child(2) { background: radial-gradient(circle, #a5f3fc, transparent 65%); }
html.ws-header[data-theme="light"] #rm-main > .lp-ambient i:nth-child(3) { background: radial-gradient(circle, #bfdbfe, transparent 65%); }
html.ws-header[data-theme="light"] .rm-ms-card {
  background: #ffffff;
  border-color: rgba(15,23,42,0.09);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 14px 32px -16px rgba(15,23,42,0.18);
}
html.ws-header[data-theme="light"] .rm-ms-card:hover { box-shadow: 0 18px 40px -16px rgba(15,23,42,0.22), 0 0 0 1px color-mix(in srgb, var(--ms-color, #2563eb) 25%, transparent); }
html.ws-header[data-theme="light"] .rm-ms-card::after { background: linear-gradient(115deg, transparent 40%, rgba(37,99,235,0.07) 50%, transparent 60%); background-size: 250% 100%; background-position: 120% 0; }
html.ws-header[data-theme="light"] .rm-ms-card:hover::after { background-position: -20% 0; }
html.ws-header[data-theme="light"] .rm-ms-topic-pill { background: #f8fafc; border-color: rgba(15,23,42,0.1); color: #334155; }

/* ─── Roadmap topic page: pale sidebar and top strip ─────────────────────── */
html.ws-header[data-theme="light"] #rp-left,
html.ws-header[data-theme="light"] #rp-left-header { background: var(--wl-panel) !important; }
html.ws-header[data-theme="light"] #rp-left { border-right-color: rgba(15,23,42,0.08) !important; }
html.ws-header[data-theme="light"] .rp-pc-topic-option.is-active { background: #ffffff; border-color: rgba(37,99,235,0.35); }
html.ws-header[data-theme="light"] .rp-pc-subtopics-list { background: rgba(255,255,255,0.6); }
html.ws-header[data-theme="light"] .rp-pc-subtopic-option.is-active { background: rgba(37,99,235,0.08); }

/* Roadmap tokens (css/roadmap/roadmap-main.css :root) */
html.ws-header[data-theme="light"] {
  --rm-bg: #f4f8ff;
  --rm-border: rgba(15,23,42,0.1);
  --rm-text: #0f172a;
  --rm-text-2: #334155;
  --rm-muted: #475569;
  --rm-dim: #64748b;
}
html.ws-header[data-theme="light"] .rm-hero-title em { color: #2563eb; }
html.ws-header[data-theme="light"] .rm-hero-stat { border-right-color: rgba(15,23,42,0.1); }

/* Roadmap pages (generated from css/roadmap/*.css: dark-only text colours mapped to light) */
html.ws-header[data-theme="light"] .rm-ms-lock-badge { color: #64748b; }
html.ws-header[data-theme="light"] .rm-ms-topic-pill { color: #0f172a; }
/* Locked topics: readable but clearly unavailable (the dark-theme 35% opacity
   left them nearly white on the light background). */
html.ws-header[data-theme="light"] .rm-ms-topic-pill.rm-tp-locked {
  opacity: 1;
  filter: none;
  color: #64748b;
  background: #f1f5f9;
  border-color: rgba(15,23,42,0.08);
}
html.ws-header[data-theme="light"] .rm-milestone.rm-ms-locked .rm-ms-card,
html.ws-header[data-theme="light"] .rm-ms-card.rm-ms-locked { opacity: 0.85; filter: none; }
html.ws-header[data-theme="light"] .rm-milestone.rm-ms-locked .rm-ms-card:hover,
html.ws-header[data-theme="light"] .rm-ms-card.rm-ms-locked:hover { background: #ffffff; }
/* Road: a light slate road instead of the dark theme's navy asphalt. Layer
   order matches partials/roadmap/main.html: glow, edge, asphalt, surface,
   lane highlight, centre dashes. */
html.ws-header[data-theme="light"] #rm-road-svg > path.rm-road-layer:nth-of-type(1) { stroke: rgba(71,85,105,0.14); }
html.ws-header[data-theme="light"] #rm-road-svg > path.rm-road-layer:nth-of-type(2) { stroke: #ffffff; }
html.ws-header[data-theme="light"] #rm-road-svg > path.rm-road-layer:nth-of-type(3) { stroke: #64748b; }
html.ws-header[data-theme="light"] #rm-road-svg > path.rm-road-layer:nth-of-type(4) { stroke: #94a3b8; }
html.ws-header[data-theme="light"] #rm-road-svg > path.rm-road-layer:nth-of-type(5) { stroke: transparent; }
html.ws-header[data-theme="light"] #rm-road-svg > path.rm-road-layer:nth-of-type(6) { stroke: #ffffff; stroke-width: 2.5; }
/* Hero stats and progress: dark enough to read on the light background. */
html.ws-header[data-theme="light"] .rm-hero-stat-value { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-hero-stat-label { color: #475569; }
html.ws-header[data-theme="light"] .rm-hero-progress-meta { color: #334155; }
/* Phase cards: a clear edge and lift so they read as cards on the light map. */
html.ws-header[data-theme="light"] .rm-ms-card {
  border: 1px solid rgba(15,23,42,0.16);
  box-shadow: 0 2px 6px rgba(15,23,42,0.08), 0 18px 40px -18px rgba(15,23,42,0.3);
}
html.ws-header[data-theme="light"] #rm-road-progress-path { stroke: #3b82f6; filter: none; }
html.ws-header[data-theme="light"] .rm-mode-label { color: #334155; }
html.ws-header[data-theme="light"] .rm-mode-dropdown { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-search-input { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-search-input::placeholder { color: #64748b; }
html.ws-header[data-theme="light"] .rm-search-icon { color: #64748b; }
html.ws-header[data-theme="light"] .rp-pc-topic-option { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-pc-subtopic-option { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-pc-subtopic-option:hover { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-case-study-card strong { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-case-study-card em { color: #1d4ed8; }
html.ws-header[data-theme="light"] .rm-blocks-table em { color: #1d4ed8; }
html.ws-header[data-theme="light"] .rm-checklist li em { color: #1d4ed8; }
html.ws-header[data-theme="light"] .rm-link-btn:hover { color: #2563eb; }
html.ws-header[data-theme="light"] #rp-left,
html.ws-header[data-theme="light"] #rp-right { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-left-count-badge { color: #1d4ed8; }
html.ws-header[data-theme="light"] #rp-overall-pct { color: #0369a1; }
html.ws-header[data-theme="light"] #rm-spa-filter-btn { color: #334155; }
html.ws-header[data-theme="light"] .rm-filter-option { color: #334155; }
html.ws-header[data-theme="light"] .rm-filter-option.selected { color: #0369a1; }
html.ws-header[data-theme="light"] .rm-topic-item { color: #334155; }
html.ws-header[data-theme="light"] .rm-topic-item.active { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-topic-item.active .rm-topic-num { color: #1d4ed8; }
html.ws-header[data-theme="light"] .rm-topic-name { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rm-topic-item.active .rm-topic-name { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rm-topic-meta-row { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rm-topic-item.active .rm-topic-meta-row { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rm-topic-sub-count { color: #0f172a !important; }
html.ws-header[data-theme="light"] #rm-spa-xp-value { color: #0369a1; }
html.ws-header[data-theme="light"] #rp-left-collapse:hover,
html.ws-header[data-theme="light"] #rp-right-collapse:hover { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-rec-item__title { color: #334155; }
html.ws-header[data-theme="light"] .rp-rec-item--medium .rp-rec-item__badge { color: #a16207; }
html.ws-header[data-theme="light"] .rp-rec-item--low   .rp-rec-item__badge { color: #1d4ed8; }
html.ws-header[data-theme="light"] .rp-tp-lead { color: #64748b; }
html.ws-header[data-theme="light"] .rp-tp-item--focus { color: #a16207; }
html.ws-header[data-theme="light"] .rp-mock-verdict--blue { color: #2563eb; }
html.ws-header[data-theme="light"] .rp-mock-verdict--yellow { color: #a16207; }
html.ws-header[data-theme="light"] .rp-mock-verdict--dim { color: #64748b; }
html.ws-header[data-theme="light"] .rp-mock-pill--almost { color: #a16207; }
html.ws-header[data-theme="light"] .rp-dna-label { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-modal-header h3 { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-modal-close:hover { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-pf-modal-coverage { color: #64748b; }
html.ws-header[data-theme="light"] .rp-pf-modal-stat-val { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rp-pf-modal-areas { color: #64748b; }
html.ws-header[data-theme="light"] .rp-pf-modal-area-label { color: #334155; }
html.ws-header[data-theme="light"] .rp-summary-row { color: #64748b; }
html.ws-header[data-theme="light"] .rp-summary-areas { color: #64748b; }
html.ws-header[data-theme="light"] .rp-summary-next { color: #1d4ed8; }
html.ws-header[data-theme="light"] .rp-company-name { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-company-prep { color: #1d4ed8; }
html.ws-header[data-theme="light"] .rp-company-style { color: #64748b; }
html.ws-header[data-theme="light"] .rp-company-topic { color: #1d4ed8; }
html.ws-header[data-theme="light"] .rp-left-panel-title { color: #0f172a !important; }
html.ws-header[data-theme="light"] #rp-overall-label { color: #0f172a !important; }
html.ws-header[data-theme="light"] #rp-overall-pct { color: #2563eb !important; }
html.ws-header[data-theme="light"] .rp-topic-item { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rp-topic-name { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rp-right-header-label { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rp-card-head-title,
html.ws-header[data-theme="light"] .rp-card-title { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rp-rank-value { color: #2563eb !important; }
html.ws-header[data-theme="light"] .rp-theory-pct { color: #2563eb !important; }
html.ws-header[data-theme="light"] .rp-adaptive-card__header { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rm-rank-card__label { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rm-rank-card__stats strong { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rm-rank-card__theory-pct { color: #2563eb !important; }
html.ws-header[data-theme="light"] .rm-streak-day__label { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rm-streak-day.active .rm-streak-day__label { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rm-streak-footer { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rm-xp-row__label { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-xp-row__val { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-streak-day__label { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-streak-day.active .rm-streak-day__label { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-streak-footer { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-mock-verdict { color: #0f172a !important; }
html.ws-header[data-theme="light"] .rp-checklist-verdict { color: #0f172a !important; }
html.ws-header[data-theme="light"] #rp-left .rp-left-mock .rp-mock-verdict { color: #0f172a !important; }
html.ws-header[data-theme="light"] #roadmap-view .rp-left-sub-item { color: #0f172a; }
html.ws-header[data-theme="light"] .rm-quiz-result-icon { color: #0f172a; }


/* Action bar (generated from css/shared/workspace-action-bar.css) */
html.ws-header[data-theme="light"] body.practice-mode .wab-mode-badge { color: #4338ca; }
html.ws-header[data-theme="light"] body.learn-mode-active .wab-mode-badge { color: #15803d; }
html.ws-header[data-theme="light"] body.roadmap-mode .wab-mode-badge { color: #1d4ed8; }
html.ws-header[data-theme="light"] .wab-question-selector .pcs-trigger { color: #0f172a; }
html.ws-header[data-theme="light"] .wab-btn { color: #0f172a; }
html.ws-header[data-theme="light"] .wab-stopwatch-btn { color: #334155; }
html.ws-header[data-theme="light"] .wab-stopwatch-btn:hover { color: #0f172a; }
html.ws-header[data-theme="light"] .wab-stopwatch[data-state="idle"]    .wab-stopwatch-btn { color: #334155; }
html.ws-header[data-theme="light"] .wab-stopwatch[data-state="running"] .wab-stopwatch-btn { color: #15803d; }
html.ws-header[data-theme="light"] .wab-stopwatch[data-state="running"] .wab-timer-display { color: #15803d; }
html.ws-header[data-theme="light"] .wab-stopwatch[data-state="paused"]  .wab-timer-display { color: #a16207; }
html.ws-header[data-theme="light"] .wab-custom-label span { color: #0f172a; }
html.ws-header[data-theme="light"] .wab-roadmap-phase.is-clickable:hover .wab-roadmap-value,
html.ws-header[data-theme="light"] .wab-roadmap-upcoming.is-clickable:hover .wab-roadmap-value { color: #1d4ed8; }
html.ws-header[data-theme="light"] .wab-roadmap-value { color: #0f172a; }
html.ws-header[data-theme="light"] body.roadmap-mode .wab-roadmap-topics-btn,
html.ws-header[data-theme="light"] body.roadmap-mode #wab-roadmap-phase,
html.ws-header[data-theme="light"] body.roadmap-mode #wab-roadmap-upcoming { color: #0f172a; }
html.ws-header[data-theme="light"] .wab-df-nav-btn { color: #0f172a; }
html.ws-header[data-theme="light"] .wab-roadmap-label { color: #2563eb; }
html.ws-header[data-theme="light"] .pcs-trigger-text { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-pc-phase-title span,
html.ws-header[data-theme="light"] .rp-pc-topic-option span { color: #0f172a; }
html.ws-header[data-theme="light"] .rp-pc-progress-row span { color: #475569; }
html.ws-header[data-theme="light"] .rp-pc-topic-option.is-active span { color: #1d4ed8; }
html.ws-header[data-theme="light"] #rp-left .rp-pc-phase-title span:not(.rp-pc-phase-tag),
html.ws-header[data-theme="light"] #rp-left .rp-pc-subtopic-option:not(.is-active) { color: #0f172a !important; }
html.ws-header[data-theme="light"] #rp-left .rp-pc-subtopic-option.is-active { color: #1d4ed8 !important; }

/* =============================================================================
   LIVING LIGHT — slow animated gradients so light mode isn't flat.
   Blue / sky / indigo washes drifting over 20–40s; still under reduced motion.
============================================================================= */
@keyframes wl-flow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes wl-mesh {
  0%   { background-position: 0% 0%, 100% 100%, 50% 0%, 0 0; }
  50%  { background-position: 60% 40%, 30% 70%, 100% 60%, 0 0; }
  100% { background-position: 100% 100%, 0% 20%, 20% 100%, 0 0; }
}

/* Header: one band that flows across navbar + action bar + interview toolbar.
   Fixed attachment shares a single gradient field, so the bars join seamlessly. */
html.ws-header[data-theme="light"] .an-toolbar,
html.ws-header[data-theme="light"] #workspace-action-bar,
html.ws-header[data-theme="light"] #im-toolbar {
  background: linear-gradient(100deg, #e2ecff 0%, #f4f8ff 18%, #dff1fd 36%, #ebe9ff 54%, #f2f7ff 72%, #dcebff 90%, #e8f4fd 100%) !important;
  background-size: 300% 100% !important;
  background-attachment: fixed !important;
  animation: wl-flow 26s ease-in-out infinite alternate;
}

/* Soft moving mesh for panels and stages */
html.ws-header[data-theme="light"] .ess-left,
html.ws-header[data-theme="light"] #rp-left {
  background:
    radial-gradient(closest-side, rgba(96,165,250,0.20), transparent),
    radial-gradient(closest-side, rgba(56,189,248,0.16), transparent),
    radial-gradient(closest-side, rgba(129,140,248,0.14), transparent),
    linear-gradient(160deg, #eef4ff 0%, #f6f9ff 50%, #eef8fd 100%) !important;
  background-size: 130% 90%, 120% 100%, 110% 80%, 100% 100% !important;
  background-repeat: no-repeat !important;
  animation: wl-mesh 28s ease-in-out infinite alternate;
}
/* the sidebar's header sits on the sidebar's own moving light */
html.ws-header[data-theme="light"] #rp-left-header,
html.ws-header[data-theme="light"] #rp-center-footer { background: transparent !important; }
html.ws-header[data-theme="light"] #rp-center {
  background:
    radial-gradient(closest-side, rgba(147,197,253,0.22), transparent),
    radial-gradient(closest-side, rgba(165,243,252,0.20), transparent),
    radial-gradient(closest-side, rgba(199,210,254,0.18), transparent),
    #f6f8fb !important;
  background-size: 90% 80%, 80% 90%, 70% 70%, 100% 100% !important;
  background-repeat: no-repeat !important;
  animation: wl-mesh 36s ease-in-out infinite alternate;
}

/* Roadmap stage: stronger drifting light behind the road */
html.ws-header[data-theme="light"] #rm-main {
  background:
    radial-gradient(closest-side, rgba(96,165,250,0.22), transparent),
    radial-gradient(closest-side, rgba(103,232,249,0.18), transparent),
    radial-gradient(closest-side, rgba(165,180,252,0.18), transparent),
    linear-gradient(180deg, #eef4ff 0%, #f6f8fb 55%, #eef8fd 100%) !important;
  background-size: 70% 70%, 60% 80%, 55% 60%, 100% 100% !important;
  background-repeat: no-repeat !important;
  animation: wl-mesh 40s ease-in-out infinite alternate;
}
html.ws-header[data-theme="light"] #rm-main > .lp-ambient i { opacity: 0.7 !important; }

@media (prefers-reduced-motion: reduce) {
  html.ws-header[data-theme="light"] .an-toolbar,
  html.ws-header[data-theme="light"] #workspace-action-bar,
  html.ws-header[data-theme="light"] #im-toolbar,
  html.ws-header[data-theme="light"] .ess-left,
  html.ws-header[data-theme="light"] #rp-left,
  html.ws-header[data-theme="light"] #rp-left-header,
  html.ws-header[data-theme="light"] #rp-center,
  html.ws-header[data-theme="light"] #rm-main { animation: none; }
}

/* =============================================================================
   HEADER POLISH (light) — one control height (34px), one shape language:
   text actions are outlined pills, icon actions are bare circles.
============================================================================= */
html.ws-header[data-theme="light"] #wab-question-selector .custom-select-trigger,
html.ws-header[data-theme="light"] #wab-designfix-nav .custom-select-trigger {
  height: 34px !important; min-height: 34px !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(15,23,42,0.1) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html.ws-header[data-theme="light"] #wab-question-selector .custom-select-trigger:hover,
html.ws-header[data-theme="light"] #wab-designfix-nav .custom-select-trigger:hover {
  background: #ffffff !important; border-color: rgba(37,99,235,0.35) !important;
}
html.ws-header[data-theme="light"] #wab-question-selector .custom-select-value,
html.ws-header[data-theme="light"] #wab-designfix-nav .custom-select-value { font-size: var(--t-body); font-weight: 600; }
html.ws-header[data-theme="light"] .wab-actions {
  background: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 2px;
}
html.ws-header[data-theme="light"] body.learn-mode-active .wab-actions,
html.ws-header[data-theme="light"] body.practice-custom-mode .wab-actions { background: transparent; box-shadow: none; backdrop-filter: none; padding: 0; }
html.ws-header[data-theme="light"] body.learn-mode-active #wab-simulate-btn,
html.ws-header[data-theme="light"] body.practice-custom-mode #wab-simulate-btn {
  height: 34px; background: #2563eb; box-shadow: 0 4px 12px -2px rgba(37,99,235,0.35);
}
html.ws-header[data-theme="light"] body.learn-mode-active #wab-simulate-btn:hover:not(:disabled),
html.ws-header[data-theme="light"] body.practice-custom-mode #wab-simulate-btn:hover:not(:disabled) { background: #1d4ed8; color: #ffffff; }

/* Navbar actions */
html.ws-header[data-theme="light"] .an-toolbar .an-feedback-btn,
html.ws-header[data-theme="light"] .an-toolbar .button.ghost {
  height: 32px; background: transparent; border: 1px solid rgba(15,23,42,0.12); color: #334155; box-shadow: none;
}
html.ws-header[data-theme="light"] .an-toolbar .an-feedback-btn:hover,
html.ws-header[data-theme="light"] .an-toolbar .button.ghost:hover { background: rgba(255,255,255,0.8); border-color: rgba(15,23,42,0.18); color: #0f172a; }
html.ws-header[data-theme="light"] .an-toolbar .an-tl-icon-btn,
html.ws-header[data-theme="light"] .an-theme-quick {
  width: 34px; height: 34px; border-radius: 999px; border: 0; background: transparent; color: #334155; box-shadow: none;
}
html.ws-header[data-theme="light"] .an-toolbar .an-tl-icon-btn:hover,
html.ws-header[data-theme="light"] .an-theme-quick:hover { background: rgba(15,23,42,0.06); color: #0f172a; }
html.ws-header[data-theme="light"] #wab-simulate-btn { background: rgba(37,99,235,0.09); color: #1d4ed8; }
html.ws-header[data-theme="light"] #wab-simulate-btn:hover:not(:disabled) { background: rgba(37,99,235,0.16); color: #1e40af; }

/* Phase cards: white with a faint wash of the phase colour, layered blue-grey shadow. */
html.ws-header[data-theme="light"] .rm-ms-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ms-color, #2563eb) 8%, #ffffff) 0%, #ffffff 45%, #f7faff 100%);
  box-shadow: 0 1px 0 #ffffff inset, 0 1px 3px rgba(15,23,42,0.06), 0 18px 38px -20px rgba(37,99,235,0.3);
}
html.ws-header[data-theme="light"] .rm-ms-card:hover {
  box-shadow: 0 1px 0 #ffffff inset, 0 28px 52px -22px rgba(37,99,235,0.4),
    0 0 0 1px color-mix(in srgb, var(--ms-color, #2563eb) 30%, transparent);
}