/* =============================================================================
   WORKSPACE SCREENS — the landing page's look for the dark chrome of the
   Evaluate picker, the evaluation screens and the Roadmap (map + topic page).
   White surfaces and the canvas are deliberately untouched: only dark panels,
   accents, buttons, chips and cards change. Scoped by <html class="ws-header">.
   Accent: cyan #5cc8f2 on dark, blue #3b82f6 on white. No purple.
============================================================================= */
.ws-header {
  --im-accent: #3b82f6;
  --ws2-bg: #0e1626;
  --ws2-surface: #141e31;
  --ws2-line: rgba(255,255,255,0.08);
  --ws2-accent: #5cc8f2;
  --ws2-blue: #3b82f6;
  --ws2-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ws2-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* ─── Evaluate: problem picker ─────────────────────────────────────────────── */
.ws-header .evaluate-selection-screen { font-family: var(--ws2-font); }
.ws-header .ess-left {
  background:
    radial-gradient(ellipse 70% 45% at 15% 10%, rgba(29,78,216,0.35), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 95%, rgba(14,116,144,0.28), transparent 70%),
    var(--ws2-bg);
  border-right: 1px solid var(--ws2-line);
}
.ws-header .ess-floater,
.ws-header .ess-r-floater,
.ws-header .ess-accent-blob { display: none !important; }
.ws-header .ess-eyebrow {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--ws2-mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ws2-accent);
}
.ws-header .ess-eyebrow svg { display: none; }
.ws-header .ess-headline { letter-spacing: -0.02em; }
.ws-header .ess-subhead,
.ws-header .ess-step-desc { color: #a9b6c9; }
.ws-header .ess-step-title { color: #e8edf5; }
.ws-header .ess-step-dot {
  border-radius: 999px;
  background: var(--ws2-surface);
  border: 1px solid rgba(92,200,242,0.35);
  color: var(--ws2-accent);
  box-shadow: 0 0 0 4px rgba(92,200,242,0.06);
}
.ws-header .ess-step-line { background: linear-gradient(var(--ws2-accent), rgba(92,200,242,0.1)); opacity: 0.5; }
.ws-header .ess-terminal-arrow path { stroke: var(--ws2-accent); }
.ws-header .ess-terminal-pill {
  background: rgba(92,200,242,0.08);
  border: 1px solid rgba(92,200,242,0.3);
  color: #e8edf5;
}

/* Right side keeps its white background; the cards get calmer */
.ws-header .ess-right-title { letter-spacing: -0.01em; }
.ws-header .ess-filter-pill { border-radius: 999px; font-family: var(--ws2-font); }
.ws-header .ess-filter-pill--active { background: #0f172a; border-color: #0f172a; color: #fff; }
.ws-header .ess-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.ws-header .ess-card:hover {
  background: #ffffff;
  border-color: rgba(59,130,246,0.45);
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
  transform: translateY(-2px);
}
.ws-header .ess-card.selected {
  background: #ffffff;
  border-color: var(--ws2-blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15), 0 10px 28px rgba(15,23,42,0.08);
}
.ws-header .ess-card-tag { border-radius: 999px; }
.ws-header .ess-dur-trigger { border-radius: 999px; }
.ws-header .ess-start-btn { border-radius: 999px; background: var(--ws2-blue); color: #ffffff; box-shadow: 0 6px 18px rgba(59,130,246,0.3); }
.ws-header .ess-start-btn:not(:disabled):hover { background: #2563eb; }
/* Disabled keeps the blue fill, so the base grey text was unreadable on it */
.ws-header .ess-start-btn:disabled,
.ws-header .ess-start-btn[aria-disabled="true"] { box-shadow: none; color: #ffffff; opacity: 0.55; }

/* ─── Evaluation session and report: accents only ──────────────────────────── */
.ws-header .im-round-badge,
.ws-header .im-guided-chip { border-radius: 999px; }
.ws-header .im-round-pip.done { background: var(--ws2-accent); }
.ws-header .im-exit-continue-btn { border-radius: 999px; background: var(--ws2-blue); }
.ws-header .im-exit-continue-btn:hover { background: #2563eb; }
.ws-header .er-section-tag,
.ws-header .er-stat-chip,
.ws-header .qa-pill,
.ws-header .qa-pill-diff,
.ws-header .chip { border-radius: 999px; }

/* ─── Roadmap map ──────────────────────────────────────────────────────────── */
.ws-header .page-roadmap { font-family: var(--ws2-font); }
.ws-header .rm-hero-title { letter-spacing: -0.02em; }
.ws-header .rm-hero-title em {
  font-style: normal;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ws2-accent);
}
.ws-header #rm-hero-progress-bar { background: var(--ws2-accent); box-shadow: 0 0 10px rgba(92,200,242,0.5); }
.ws-header .rm-road-cap-badge { border-color: rgba(92,200,242,0.45); }
.ws-header .rm-ms-start-cta { color: var(--ws2-accent); }

/* ─── Roadmap topic page: dark sidebar and top strip (content stays white) ──── */
.ws-header #rp-left { background: var(--ws2-bg); border-right: 1px solid var(--ws2-line); }
.ws-header #rp-left-header { background: var(--ws2-bg); border-bottom: 1px solid var(--ws2-line); }
.ws-header .rp-pc-phase-tag { font-family: var(--ws2-mono); letter-spacing: 0.02em; color: var(--ws2-accent); }
.ws-header .rp-pc-progress-fill,
.ws-header #rp-overall-bar { background: var(--ws2-accent) !important; }
.ws-header .rp-pc-topic-option { border-radius: 12px; }
.ws-header .rp-pc-topic-option.is-active {
  background: rgba(92,200,242,0.08);
  border: 1px solid rgba(92,200,242,0.35);
  box-shadow: none;
}
.ws-header .rp-pc-subtopics-list { background: rgba(255,255,255,0.025); border-radius: 0 0 12px 12px; }
.ws-header .rp-pc-subtopic-option { border-radius: 8px; }
.ws-header .rp-pc-subtopic-option.is-active { color: var(--ws2-accent); background: rgba(92,200,242,0.08); }
.ws-header .rm-mission-box {
  background: #f8fafc;
  border-left-color: var(--ws2-blue);
  border-radius: 12px;
}
.ws-header .rm-footer-nav { border-radius: 999px; }

/* =============================================================================
   ROADMAP, round 2 — the landing page's stage and cards, made visible.
============================================================================= */
/* Map stage: slate with the landing page's soft light instead of the navy ramp */
.ws-header #rm-main {
  background:
    radial-gradient(ellipse 55% 45% at 12% 18%, rgba(29,78,216,0.32), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 78%, rgba(14,116,144,0.26), transparent 70%),
    radial-gradient(ellipse 40% 30% at 55% 100%, rgba(15,118,110,0.18), transparent 70%),
    var(--ws2-bg) !important;
}
.ws-header .rm-hero-stat-label { font-family: var(--ws2-mono); letter-spacing: 0.04em; text-transform: none; color: #8a9ab3; }
.ws-header .rm-hero-stat-value { font-family: var(--ws2-font); }

/* Phase cards: solid slate, generous padding, the phase colour as a glowing top edge */
.ws-header .rm-ms-card {
  background: var(--ws2-surface);
  border: 1px solid var(--ws2-line);
  border-radius: 16px;
  padding: 18px 18px 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 18px 40px -18px rgba(2,6,23,0.7);
}
.ws-header .rm-ms-card::before {
  left: 18px; right: 18px; top: 0; bottom: auto;
  width: auto; height: 2px;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 14px var(--ms-color, var(--ws2-accent));
}
.ws-header .rm-ms-card:hover {
  border-color: color-mix(in srgb, var(--ms-color, var(--ws2-accent)) 45%, transparent);
  box-shadow: 0 22px 46px -18px rgba(2,6,23,0.8), 0 0 0 1px color-mix(in srgb, var(--ms-color, var(--ws2-accent)) 20%, transparent);
}
.ws-header .rm-ms-card:hover::before { width: auto; }
.ws-header .rm-ms-card .rm-ms-top-glow { display: none; }
.ws-header .rm-ms-head { align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ws-header .rm-ms-num {
  background: none; border: 0; padding: 0;
  font-family: var(--ws2-mono); font-size: var(--t-small); font-weight: 600; letter-spacing: 0;
}
.ws-header .rm-ms-info { text-align: left; }
.ws-header .rm-ms-label { font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.01em; }
.ws-header .rm-ms-start-cta { letter-spacing: 0; }
.ws-header .rm-ms-topic-pill {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #cbd5e1;
  padding: 4px 10px;
}

/* Topic page sidebar (the old rules use !important, so these must too) */
.ws-header #rp-left { background: var(--ws2-bg) !important; border-right-color: var(--ws2-line) !important; }
.ws-header #rp-left-header { background: var(--ws2-bg) !important; border-bottom-color: var(--ws2-line) !important; }
.ws-header .rp-left-panel-title { text-transform: none !important; letter-spacing: 0 !important; font-size: var(--t-body) !important; font-weight: 600; }
.ws-header #rp-phase-context { padding-bottom: 6px; border-bottom: 1px solid var(--ws2-line); }

/* ─── Roadmap map: the landing page's own effects ──────────────────────────── */
/* Same ambient light layer as the landing page, held inside the map */
.ws-header #rm-main { background: var(--ws2-bg) !important; }
.ws-header #rm-main > .lp-ambient { position: absolute; z-index: 0; background: transparent; }
/* Same staggered fade-up as the landing sections */
.ws-header #rm-hero { animation: ws-rise 0.7s cubic-bezier(.2,.8,.2,1) both; }
.ws-header .rm-milestone .rm-ms-card { animation: ws-rise 0.7s cubic-bezier(.2,.8,.2,1) both; }
.ws-header .rm-milestone:nth-of-type(2) .rm-ms-card { animation-delay: 0.08s; }
.ws-header .rm-milestone:nth-of-type(3) .rm-ms-card { animation-delay: 0.16s; }
.ws-header .rm-milestone:nth-of-type(4) .rm-ms-card { animation-delay: 0.24s; }
.ws-header .rm-milestone:nth-of-type(5) .rm-ms-card { animation-delay: 0.32s; }
@keyframes ws-rise { from { opacity: 0; translate: 0 16px; } }
/* Same light sheen as the landing framework cards on hover */
.ws-header .rm-ms-card::after {
  inset: 0; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(115deg, transparent 40%, rgba(92,200,242,0.10) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 120% 0;
  transform: none;
  opacity: 1;
  transition: background-position 0.8s ease;
}
.ws-header .rm-ms-card:hover::after { background-position: -20% 0; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ws-header #rm-hero, .ws-header .rm-milestone .rm-ms-card { animation: none; }
}

/* ─── Card depth (roadmap phase cards, Evaluate problem cards) ────────────── */
/* Phase cards: lit from the top in their phase colour, layered shadow. */
.ws-header .rm-ms-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ms-color, var(--ws2-accent)) 9%, transparent) 0%, transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 40%),
    var(--ws2-surface);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 6px rgba(0,0,0,0.3), 0 22px 46px -22px rgba(2,6,23,0.85);
}
.ws-header .rm-ms-card:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 28px 56px -22px rgba(2,6,23,0.9),
    0 0 0 1px color-mix(in srgb, var(--ms-color, var(--ws2-accent)) 30%, transparent),
    0 0 36px -8px color-mix(in srgb, var(--ms-color, var(--ws2-accent)) 40%, transparent);
}
/* Problem cards (white in both themes): soft gradient, lift and blue glow. */
.ws-header .ess-card {
  background: linear-gradient(160deg, #ffffff 0%, #fbfcff 55%, #f0f6ff 100%);
  box-shadow: 0 1px 0 #ffffff inset, 0 1px 2px rgba(15,23,42,0.06), 0 14px 30px -20px rgba(37,99,235,0.3);
  transition: transform .25s cubic-bezier(.34,1.4,.64,1), box-shadow .25s ease, border-color .25s ease;
}
.ws-header .ess-card:hover {
  background: linear-gradient(160deg, #ffffff 0%, #f8fbff 50%, #eaf2ff 100%);
  box-shadow: 0 1px 0 #ffffff inset, 0 4px 10px rgba(15,23,42,0.06), 0 26px 48px -22px rgba(37,99,235,0.42), 0 0 0 1px rgba(59,130,246,0.25);
  transform: translateY(-4px);
}
.ws-header .ess-card.selected { background: linear-gradient(160deg, #ffffff 0%, #f3f8ff 60%, #e6f0ff 100%); }