/* ── css/shared/node-interactions.css ── */
.node.is-hovered .node-port,
.node.selected .node-port {
  opacity: 1;
}

/* Keep nodes above connection paths for reliable hover/drag hit-testing. */
.node {
  z-index: 4;
}

.node.is-hovered .node-close,
.node.selected .node-close {
  opacity: 1;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.2);
}

/* When the canvas welcome card is visually hidden, make sure it cannot block
   hover/drag interactions in the middle of the canvas. */
.canvas-empty-state.ces-hidden .ces-inner {
  pointer-events: none;
}

.connection-path {
  fill: none;
  stroke-linecap: round;
  opacity: 0.85;
}

.connection-path:hover {
  stroke-width: 3px;
  opacity: 1;
}

.connection-path.selected {
  stroke-width: 3px;
  opacity: 1;
}

/* ── css/shared/canvas-flow.css ── */
/* ─── PRISM CanvasFlow — live simulation visual layer ──────────────────────────
   Activated by body.sim-running (set by canvas-flow.js on simulate).
   All effects are subtle engineering-OS glows — no gaming/neon aesthetics.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Traffic flow: marching dashes DISABLED ────────────────────────────────── */
/* Dashed arrow animations removed — no canvas flow animation on simulate. */

/* ── Node simulation state classes ────────────────────────────────────────── */

/* Healthy: soft green ring that breathes slowly */
@keyframes cf-breathe-green {
  0%, 100% {
    box-shadow:
      0 2px 8px rgba(0,0,0,0.10),
      0 0 0 0   rgba(34,197,94,0);
  }
  50% {
    box-shadow:
      0 2px 8px rgba(0,0,0,0.10),
      0 0 0 3px rgba(34,197,94,0.22),
      0 4px 16px rgba(34,197,94,0.09);
  }
}

/* Active/high-traffic: cyan ring, faster rhythm */
@keyframes cf-breathe-cyan {
  0%, 100% {
    box-shadow:
      0 2px 8px rgba(0,0,0,0.10),
      0 0 0 0   rgba(56,189,248,0);
  }
  50% {
    box-shadow:
      0 2px 8px rgba(0,0,0,0.10),
      0 0 0 3px rgba(56,189,248,0.28),
      0 6px 20px rgba(56,189,248,0.13);
  }
}

/* Bottleneck high: amplified red pulse on top of existing btk-high styling */
@keyframes cf-pulse-red {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(220,38,38,0.28),
      0 8px 24px rgba(220,38,38,0.22),
      0 2px 8px rgba(0,0,0,0.14);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(220,38,38,0.36),
      0 12px 32px rgba(220,38,38,0.30),
      0 2px 8px rgba(0,0,0,0.14);
  }
}

/* Bottleneck medium: amber pulse */
@keyframes cf-pulse-amber {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(217,119,6,0.28),
      0 8px 24px rgba(217,119,6,0.20),
      0 2px 8px rgba(0,0,0,0.14);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(217,119,6,0.36),
      0 12px 32px rgba(217,119,6,0.26),
      0 2px 8px rgba(0,0,0,0.14);
  }
}

.node.sim-healthy {
  animation: cf-breathe-green 3s ease-in-out infinite;
}

.node.sim-active {
  animation: cf-breathe-cyan 1.8s ease-in-out infinite;
}

/* Intensify existing btk-* glows with rhythm during simulation */
body.sim-running .node.btk-high {
  animation: cf-pulse-red 0.9s ease-in-out infinite !important;
}

body.sim-running .node.btk-medium {
  animation: cf-pulse-amber 1.3s ease-in-out infinite !important;
}

/* ── Simulation status badge ───────────────────────────────────────────────── */
.cf-status-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 10px;
  background: rgba(10, 17, 34, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #94a3b8;
  pointer-events: none;
  user-select: none;
  z-index: 50;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.cf-status-badge.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cf-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #475569;
  flex-shrink: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

.cf-status-text {
  transition: color 0.3s ease;
}

/* Simulating */
.cf-status-badge[data-state="simulating"] .cf-status-dot {
  background: #3b82f6;
  animation: cf-dot-blink 0.85s ease-in-out infinite;
}
.cf-status-badge[data-state="simulating"] .cf-status-text {
  color: #93c5fd;
}

/* Stable */
.cf-status-badge[data-state="stable"] .cf-status-dot {
  background: #22c55e;
}
.cf-status-badge[data-state="stable"] .cf-status-text {
  color: #86efac;
}

/* Under load */
.cf-status-badge[data-state="under-load"] .cf-status-dot {
  background: #f59e0b;
}
.cf-status-badge[data-state="under-load"] .cf-status-text {
  color: #fcd34d;
}

/* Bottleneck detected */
.cf-status-badge[data-state="bottleneck"] .cf-status-dot {
  background: #ef4444;
  animation: cf-dot-blink 0.7s ease-in-out infinite;
}
.cf-status-badge[data-state="bottleneck"] .cf-status-text {
  color: #fca5a5;
}

/* In practice-mode or learn-mode, lift badge above the canvas dock */
body.practice-mode .cf-status-badge,
body.learn-mode-active .cf-status-badge {
  bottom: 88px;
}

/* Idle — fully hidden */
.cf-status-badge[data-state="idle"],
.cf-status-badge:not([data-state]) {
  opacity: 0 !important;
  pointer-events: none;
}

@keyframes cf-dot-blink {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(0.68); }
}

/* ── Simulate button polish during loading ─────────────────────────────────── */
#simulate.is-loading {
  cursor: not-allowed;
  opacity: 0.82;
}

/* ── Connection paths: smoother base transitions ───────────────────────────── */
/* Only apply when NOT in sim-running, to avoid fighting with the animation */
body:not(.sim-running) #connections .connection-path {
  transition: stroke 0.25s ease, opacity 0.25s ease, stroke-width 0.2s ease;
}

/* ── css/shared/learn-mode.css ── */
/* =============================================================================
   PRISM LEARN MODE — learn-mode.css
   Light mode only. Additive overrides scoped to body.mode-learn.
   Covers: Focus Mode, narration tooltip, experiment prompts, expand toggle,
           left-panel question list, stage theory panel, right panel tweaks.
   ============================================================================= */

/* ─── CSS CUSTOM PROPERTIES (light palette) ─────────────────────────────────
   Defines the Learn-mode colour tokens used throughout this file.
   All values are light-mode safe.
   --------------------------------------------------------------------------- */
body.mode-learn {
  --lm-accent:       #3b82f6;
  --lm-accent-dim:   rgba(59,130,246,0.10);
  --lm-accent-ring:  rgba(59,130,246,0.22);
  --lm-surface:      #ffffff;
  --lm-surface-2:    #f8fafc;
  --lm-border:       #e2e8f0;
  --lm-border-faint: rgba(0,0,0,0.06);
  --lm-text:         #1e293b;
  --lm-text-dim:     #64748b;
  --lm-text-muted:   #94a3b8;
  --lm-green:        #16a34a;
  --lm-green-bg:     rgba(22,163,74,0.08);
  --lm-amber:        #d97706;
  --lm-amber-bg:     rgba(217,119,6,0.08);
  --lm-red:          #dc2626;
  --lm-red-bg:       rgba(220,38,38,0.07);
  --lm-purple:       #7c3aed;
  --lm-purple-bg:    rgba(124,58,237,0.07);
}

/* ─── FOCUS MODE — canvas node dim / glow ───────────────────────────────────
   When body.lm-node-focused is set, unrelated nodes dim.
   --------------------------------------------------------------------------- */

body.mode-learn.lm-node-focused .node.lm-dimmed {
  opacity: 0.25;
  filter: saturate(0.15) brightness(1.05);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

body.mode-learn.lm-node-focused .node.lm-focused {
  opacity: 1;
  filter: none;
  box-shadow:
    0 0 0 2px var(--lm-accent),
    0 0 16px var(--lm-accent-ring);
  transition: box-shadow 0.2s ease;
}

body.mode-learn.lm-node-focused .node.lm-related {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 1.5px var(--lm-accent-ring);
  transition: box-shadow 0.2s ease;
}

/* ─── FOCUS MODE — edge paths ─────────────────────────────────────────────── */

body.mode-learn.lm-node-focused .connection-path.lm-edge-dim {
  opacity: 0.1;
  transition: opacity 0.2s ease;
}

body.mode-learn.lm-node-focused .connection-path.lm-edge-focus {
  opacity: 1;
  stroke-width: 2.5 !important;
  filter: drop-shadow(0 0 3px var(--lm-accent-ring));
  transition: opacity 0.2s ease;
}

/* ─── NARRATION TOOLTIP ──────────────────────────────────────────────────────
   Appears bottom-centre of the canvas when a node is clicked.
   --------------------------------------------------------------------------- */

#lm-narration {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 1200;
  background: #1e293b;
  color: #e2e8f0;
  font-size: var(--fs-xs);
  font-style: italic;
  line-height: 1.5;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  max-width: 440px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

#lm-narration.lm-narration-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── EXPERIMENT PROMPTS ─────────────────────────────────────────────────────
   Rows injected into #stage-theory by learn-mode-ui.js.
   --------------------------------------------------------------------------- */

.lm-experiment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 12px 12px;
}

.lm-experiment-row {
  cursor: default;
  background: var(--lm-purple-bg);
  border: 1px solid rgba(124,58,237,0.18);
  border-left: 3px solid var(--lm-purple);
  border-radius: 8px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lm-exp-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--lm-purple) !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lm-exp-label::before {
  content: '⟩';
  font-style: normal;
}

.lm-exp-text {
  font-size: var(--fs-xs);
  color: #3b2f5e;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  line-height: 1.5;
}

/* ─── SECONDARY BREAKDOWN TOGGLE ─────────────────────────────────────────── */

.lm-secondary-breakdown {
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.lm-expand-toggle {
  margin-top: 6px;
  font-size: var(--fs-xss);
  font-weight: 600;
  color: var(--lm-text-muted);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.lm-expand-toggle:hover { color: var(--lm-accent); }

/* ─── SYSTEM BRIEF BADGE ─────────────────────────────────────────────────── */

.lm-brief-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lm-red);
  background: var(--lm-red-bg);
  border: 1px solid rgba(220,38,38,0.2);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

@keyframes lm-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.lm-brief-badge::before {
  content: '▊';
  font-size: var(--fs-micro);
  animation: lm-blink 1.1s step-end infinite;
}

/* ─── STAGE THEORY CONTAINER ─────────────────────────────────────────────── */

body.mode-learn .stage-theory {
  background: var(--lm-surface);
  padding: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}

/* ─── LEFT PANEL — question list ─────────────────────────────────────────── */

body.mode-learn .learn-question-item {
  background: var(--lm-surface);
  border: 1px solid var(--lm-border);
  border-radius: 10px;
  padding: 11px 13px;
  gap: 5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

body.mode-learn .learn-question-item:hover {
  border-color: var(--lm-accent);
  box-shadow: 0 2px 10px var(--lm-accent-dim);
}

body.mode-learn .learn-question-item[data-active="true"] {
  border-color: var(--lm-accent);
  background: var(--lm-accent-dim);
}

body.mode-learn .learn-question-title {
  color: var(--lm-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

body.mode-learn .learn-question-desc {
  color: var(--lm-text-dim);
  font-size: var(--fs-xss);
  line-height: 1.45;
}

body.mode-learn .learn-question-item[data-difficulty="easy"]   .learn-question-diff { color: var(--lm-green); }
body.mode-learn .learn-question-item[data-difficulty="medium"] .learn-question-diff { color: var(--lm-amber); }
body.mode-learn .learn-question-item[data-difficulty="hard"]   .learn-question-diff { color: var(--lm-red);   }

/* Difficulty segment bar */
.lm-diff-bar { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.lm-diff-seg { width: 8px; height: 4px; border-radius: 2px; background: #e2e8f0; }
[data-difficulty="easy"]   .lm-diff-seg:nth-child(-n+1) { background: var(--lm-green); }
[data-difficulty="medium"] .lm-diff-seg:nth-child(-n+2) { background: var(--lm-amber); }
[data-difficulty="hard"]   .lm-diff-seg:nth-child(-n+3) { background: var(--lm-red);   }

/* ─── RIGHT PANEL HEADER ─────────────────────────────────────────────────── */

body.mode-learn #right-panel .panel-header {
  background: var(--lm-surface);
  border-bottom: 0.5px solid var(--lm-border);
}

/* ─── LRP PROBLEM NAME PILL ──────────────────────────────────────────────── */

#lrp-problem-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--lm-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
}

/* Hide the sticky-header container once moved into panel-header — no visible UI there */
body.mode-learn #right-panel .panel-header #learn-sticky-header {
  display: none;
}

/* ─── LRP TAB BAR ────────────────────────────────────────────────────────── */

#lrp-header-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--lm-surface);
  border-bottom: 1px solid var(--lm-border);
  padding: 0 12px;
  gap: 0;
  flex-shrink: 0;
}
#lrp-header-tabs::-webkit-scrollbar { display: none; }

/* ─── LRP PROBLEM PANE ───────────────────────────────────────────────────── */

#lrp-pane-problem { overflow-y: auto; background: var(--lm-surface); }

.lrp-problem { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.lrp-problem-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lrp-problem-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--lm-text);
  flex: 1 1 0;
  min-width: 0;
}

.lrp-problem-desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--lm-text-dim);
  line-height: 1.6;
}

.lrp-req-section { display: flex; flex-direction: column; gap: 6px; }

.lrp-req-heading {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lm-accent);
}

.lrp-req-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.lrp-req-list li { font-size: var(--fs-sm); color: var(--lm-text); line-height: 1.55; }

/* ─── LRP EMPTY STATE ────────────────────────────────────────────────────── */

.lrp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; text-align: center; }
.lrp-empty-title { font-size: var(--fs-sm); font-weight: 600; color: var(--lm-text-dim); }
.lrp-empty-sub   { font-size: var(--fs-xs); color: var(--lm-text-muted); line-height: 1.5; }

/* ─── LRP SIMULATE FOOTER ────────────────────────────────────────────────── */

.lrp-sim-footer {
  flex-shrink: 0;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem 0.65rem;
  background: var(--lm-surface);
  border-top: 1px solid var(--lm-border);
}
.lrp-sim-footer .button { flex: 1; padding: 0.75rem 1.25rem; font-size: var(--fs-sm); border-radius: 10px; }

/* ─── STAGE PICKER ───────────────────────────────────────────────────────── */

/* Positioning context so the floating title pill anchors correctly */
body.mode-learn .simulation-panel {
  position: relative;
}

/* Problem title pill — sits at top of right panel content, centered */
body.mode-learn .learn-problem-title {
  display: block;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 12px auto 0;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(241, 245, 249, 0.92);
  border: 1px solid var(--lm-border);
  box-shadow: 0 1px 6px rgba(2, 6, 23, 0.07);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lm-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.mode-learn .learn-stage-picker {
  background: var(--lm-surface);
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--lm-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.mode-learn .learn-stage-picker-label,
body.mode-learn .learn-stage-picker label {
  color: var(--lm-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0;
}

/* ─── STAGE THEORY INNER SECTIONS ────────────────────────────────────────── */

body.mode-learn .stage-theory .guide-section-label {
  color: var(--lm-text-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 14px 4px;
}

body.mode-learn .stage-theory .guide-breakdown-card {
  background: var(--lm-surface);
  /* border-color: var(--lm-border); */
}

body.mode-learn .stage-theory details.guide-component-card {
  background: var(--lm-surface);
  border: 1px solid var(--lm-border);
  border-radius: 8px;
  margin: 0 12px 6px;
  overflow: hidden;
}

body.mode-learn .stage-theory details.guide-component-card summary {
  padding: 9px 12px;
  color: var(--lm-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  background: var(--lm-surface-2);
  transition: background 0.15s;
}

body.mode-learn .stage-theory details.guide-component-card summary:hover {
  background: var(--lm-accent-dim);
}

body.mode-learn .stage-theory details.guide-component-card .guide-component-card-body {
  padding: 10px 12px;
  border-top: 1px solid var(--lm-border);
}

body.mode-learn .stage-theory .guide-kb-value {
  font-size: var(--t-body);
  color: #334155;
  line-height: 1.55;
}

/* Keep the coloured left rule clear of the text. */
body.mode-learn .stage-theory .guide-kb-row {
  padding: 10px 12px;
}
body.mode-learn .stage-theory .guide-kb-row:last-child { border-bottom: none; }

body.mode-learn .guide-new-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--lm-accent-dim);
  color: var(--lm-accent);
  border: 1px solid var(--lm-accent-ring);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ─── THEORY OVERLAY ─────────────────────────────────────────────────────── */

body.mode-learn .theory-overlay {
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(4px);
}

body.mode-learn .theory-overlay-inner {
  background: var(--lm-surface);
  border: 1px solid var(--lm-border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
  border-radius: 14px;
  overflow: hidden;
}

body.mode-learn .theory-overlay-header {
  background: var(--lm-surface-2);
  border-bottom: 1px solid var(--lm-border);
  padding: 20px 24px 16px;
}

body.mode-learn .theory-overlay-title {
  color: var(--lm-text);
  font-size: var(--fs-lg);
  font-weight: 700;
}

body.mode-learn .theory-overlay-desc {
  color: var(--lm-text-dim);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-top: 5px;
}

body.mode-learn .theory-overlay-body {
  background: var(--lm-surface);
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.mode-learn .theory-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lm-accent);
  margin-bottom: 8px;
}

body.mode-learn .theory-req-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }

body.mode-learn .theory-req-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; }
body.mode-learn .theory-req-item.fr-item  { background: var(--lm-accent-dim);  border: 1px solid var(--lm-accent-ring); }
body.mode-learn .theory-req-item.nfr-item { background: var(--lm-purple-bg); border: 1px solid rgba(124,58,237,0.15); }

body.mode-learn .req-index {
  font-size: var(--fs-micro);
  font-weight: 700;
  background: var(--lm-accent-dim);
  color: var(--lm-accent);
  width: 18px; height: 18px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

body.mode-learn .req-text    { font-size: var(--fs-xs); color: var(--lm-text); line-height: 1.5; }
body.mode-learn .nfr-label   { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lm-purple); display: block; margin-bottom: 2px; }
body.mode-learn .nfr-detail  { font-size: var(--fs-xs); color: var(--lm-text-dim); line-height: 1.45; }

body.mode-learn .theory-difficulty-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-bottom: 6px; }
body.mode-learn .theory-difficulty-badge.diff-easy                                         { background: var(--lm-green-bg); color: var(--lm-green); border: 1px solid rgba(22,163,74,0.2);  }
body.mode-learn .theory-difficulty-badge.diff-intermediate,
body.mode-learn .theory-difficulty-badge.diff-medium                                       { background: var(--lm-amber-bg); color: var(--lm-amber); border: 1px solid rgba(217,119,6,0.2);  }
body.mode-learn .theory-difficulty-badge.diff-hard,
body.mode-learn .theory-difficulty-badge.diff-advanced                                     { background: var(--lm-red-bg);   color: var(--lm-red);   border: 1px solid rgba(220,38,38,0.2);  }

body.mode-learn .theory-concepts-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.mode-learn .theory-concept-chip  { font-size: var(--fs-xss); font-weight: 600; padding: 3px 10px; border-radius: 4px; background: var(--lm-purple-bg); border: 1px solid rgba(124,58,237,0.18); color: var(--lm-purple); }

body.mode-learn .theory-arch-row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; padding: 7px 10px; background: var(--lm-surface-2); border: 1px solid var(--lm-border); border-radius: 7px; }
body.mode-learn .theory-arch-key { font-size: var(--fs-xss); font-weight: 600; color: var(--lm-text-dim); text-transform: capitalize; }
body.mode-learn .theory-arch-val { font-size: var(--fs-xs); color: var(--lm-text); }

body.mode-learn .theory-close-btn {
  background: var(--lm-surface-2);
  border: 1px solid var(--lm-border);
  color: var(--lm-text-dim);
  border-radius: 8px;
  padding: 5px 10px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
body.mode-learn .theory-close-btn:hover {
  background: var(--lm-accent-dim);
  color: var(--lm-accent);
  border-color: var(--lm-accent-ring);
}

/* ─── CANVAS — stage transition + bottleneck pulse ──────────────────────── */

@keyframes lm-node-arrive {
  from { opacity: 0; transform: scale(0.88) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

body.mode-learn.stage-transitioning .node.lm-new-node {
  animation: lm-node-arrive 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes lm-btk-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(220,38,38,0.3), 0 0 12px rgba(220,38,38,0.15); }
  50%       { box-shadow: 0 0 0 5px rgba(220,38,38,0.35), 0 0 24px rgba(220,38,38,0.25); }
}

body.mode-learn .node.btk-high {
  animation: lm-btk-pulse 0.9s ease-in-out infinite !important;
}

/* ── css/learn/design_and_fix/challenge.css ── */
/* Design & Fix - Learn Mode Variant */
/* Fits into #practice-content (right panel) alongside Learn mode presets */
/* Uses the same --lm-* design tokens defined in shared/learn-mode.css so this
   panel is visually consistent with the rest of Learn mode (e.g. the
   Progress/roadmap tab) instead of its own ad-hoc palette. */

#design-fix-container {
    display: none;
}

body.mode-learn #design-fix-container:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--lm-surface, #ffffff) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--lm-border, #e2e8f0) transparent;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--lm-text, #1e293b);
}

/* In Design & Fix mode the incident lives in #practice-content. LearnPanel
   (panels/right/index.js) may mount after Design & Fix opens (deep links)
   and re-hide it via its own tab sync, so pin visibility to the mode class
   instead of racing it from JS. Its own tab panes stay hidden. */
body.design-fix-mode .simulation-panel.prp-hidden,
body.design-fix-mode #practice-content.prp-hidden {
    display: flex !important;
}
body.design-fix-mode .prp-pane,
body.design-fix-mode #lrp-header-tabs {
    display: none !important;
}

/* ─── Right panel header label (shown while tab bar is hidden) ────────── */
/* Mirrors the canonical .panel-header h2 rule (base/style.css ~L10230) so
   "Design & Fix" reads identically to "COMPONENTS" in the left panel header:
   bold, sentence case, left-aligned in the header row. */

#df-panel-header-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 3rem);
    padding: 0;
    font-size: var(--t-heading);
    font-weight: 600;
    color: var(--lm-text, #1e293b);
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header row mirrors the left panel's "Building Blocks" header exactly:
   flush with the panel top (cancel #right-panel's 1rem padding from
   builder.css), same 3.5rem height and 1rem side padding, button inset 1rem. */
/* !important on padding: right-panel.css's "#right-panel .panel-header:has(#lrp-header-tabs)"
   (two IDs) zeroes it otherwise. */
body.design-fix-mode #right-panel .panel-header {
    height: 3.5rem;
    min-height: 3.5rem;
    margin: -1rem -1rem 0;
    padding: 0 1rem !important;
    justify-content: flex-start;
}
body.design-fix-mode #right-panel .panel-header #toggle-right-panel { right: 1rem; }
/* The header already draws the divider; drop the view's own top border so it isn't doubled. */
body.design-fix-mode #right-panel #simulate-view { border-top: 0; }
/* The Learn simulate tab's footer (empty here) drew a divider and 20px of dead
   space under the incident; hide it and trim the panel's bottom padding so the
   briefing's Start button sits near the panel's bottom edge. */
body.design-fix-mode #right-panel .lrp-sim-footer { display: none !important; }
body.design-fix-mode #right-panel { padding-bottom: 6px; }

/* Incident picker (top bar): incident titles are long, so the list is wider
   than its trigger and centred under it. Centred with a negative margin, not
   transform: the shared dropFadeIn animation animates transform, which made
   the list start at the trigger's left edge and jump to the centre. */
#wab-designfix-nav .custom-select-dropdown {
    --dfi-dd-w: min(600px, calc(100vw - 32px));
    width: var(--dfi-dd-w);
    max-height: min(70vh, 560px);
    left: 50%;
    right: auto;
    margin-left: calc(var(--dfi-dd-w) / -2);
}

/* ─── Incident flow (incident-ui.js) ──────────────────────────────────── */
/* Type: only the shared scale (base/type-scale.css), all sentence case: 12 caption
   labels, 13 meta, 14 body, 16 heading, 24 metric numbers.
   Spacing rhythm: 4 / 8 / 12 / 16 / 24. Flat sections like the Practice
   Problem tab, with colours from the --lm-* Learn tokens. */

.dfi {
    --dfi-ink: var(--lm-text, #1e293b);
    --dfi-body: #1e293b;
    --dfi-meta: var(--lm-text-dim, #64748b);
    --dfi-faint: var(--lm-text-muted, #94a3b8);
    --dfi-line: var(--lm-border, #e2e8f0);
    --dfi-hair: #f1f5f9;
    --dfi-accent: var(--lm-accent, #3b82f6);
    --dfi-red: var(--lm-red, #dc2626);
    --dfi-green: var(--lm-green, #16a34a);
    --dfi-amber: var(--lm-amber, #d97706);
    flex: 1 0 auto;  /* fill the panel so the briefing's Start bar can sit at the bottom */
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0 12px;
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--dfi-body);
}
.dfi > * { flex-shrink: 0; min-width: 0; }
.dfi p { margin: 0; }
.dfi-loading, .dfi-error { padding: 24px 0; text-align: center; color: var(--dfi-meta); }
.dfi-error { color: var(--dfi-red); }
.dfi-failed { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; }
.dfi-failed .dfi-error { padding: 0; }
.dfi-muted { color: var(--dfi-faint); }

/* Building blocks borrowed from the Learn right-panel tabs:
   gray section labels, light cards (#f8fafc +
   #e2e8f0), tinted status cards, and the purple "What happens if…" card. */

#design-fix-container .dfi-title {
    margin: 0;
    font-size: var(--t-heading);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--dfi-ink);
}
.dfi-brief-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

.dfi-label {
    margin: 4px 0 -4px;
    font-size: var(--t-caption);
    font-weight: 600;
    color: var(--dfi-faint);
}

.dfi-card, .dfi-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

/* Locked (Pro) incident */
.dfi-locked { align-items: flex-start; gap: 10px; }
.dfi-locked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4f46e5;
}

/* Status (event) cards */
.dfi-event { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }
.dfi-event--bad { background: #fef2f2; border-color: #fecaca; }
.dfi-event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;  /* never squeezed by a flex row (collapsed incident strip) */
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--dfi-red);
    color: #fff;
    font-size: var(--t-caption);
    font-weight: 700;
    line-height: 1;
}
.dfi-event-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dfi-event-title { font-weight: 600; color: #b91c1c; }
.dfi-event .dfi-symptoms li { color: #475569; }
.dfi-event .dfi-symptoms li::before { background: #f87171; }

/* Mission */
.dfi-plan { list-style: none; margin: 0; gap: 10px; }
.dfi-plan li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: #475569; }
.dfi-plan strong { color: var(--dfi-ink); font-weight: 600; }
.dfi-plan-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: var(--dfi-accent);
    font-size: var(--t-caption);
    font-weight: 700;
}

/* Sticky start bar on the briefing */
.dfi-cta-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;  /* bottom of the panel when the brief is short */
    padding: 16px 0 8px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--lm-surface, #fff) 30%);
}

/* Step header */
.dfi-stephead { display: flex; flex-direction: column; gap: 8px; }
.dfi-stephead-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dfi-kicker { font-size: var(--t-caption); font-weight: 600; color: var(--dfi-accent); }
.dfi-stephead .dfi-link { font-size: var(--t-caption); font-weight: 600; color: var(--dfi-accent); }
.dfi-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.dfi-steps li { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-caption); font-weight: 500; color: var(--dfi-faint); }
.dfi-steps li::before { content: ""; height: 4px; border-radius: 2px; background: #e2e8f0; }
.dfi-steps li.active { color: var(--dfi-accent); }
.dfi-steps li.active::before { background: var(--dfi-accent); }
.dfi-steps li.done { color: var(--dfi-green); }
.dfi-steps li.done::before { background: var(--dfi-green); }

/* Collapsed incident context above each step */
.dfi-mini { border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; }
.dfi-mini summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.dfi-mini summary::-webkit-details-marker { display: none; }
.dfi-mini-chevron { display: inline-flex; color: #b91c1c; transition: transform .15s ease; }
.dfi-mini[open] .dfi-mini-chevron { transform: rotate(180deg); }
.dfi-mini-title { flex: 1 1 auto; min-width: 0; font-size: var(--t-small); font-weight: 600; color: #b91c1c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dfi-mini-stat { flex: 0 0 auto; font-size: var(--t-caption); font-weight: 600; color: #b91c1c; }
.dfi-mini-body { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 12px; }
.dfi-mini .dfi-symptoms li { color: #475569; }
.dfi-mini .dfi-symptoms li::before { background: #f87171; }

/* Incident text */
.dfi-headline { font-weight: 600; color: var(--dfi-ink); }
.dfi-symptoms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dfi-symptoms li { position: relative; padding-left: 14px; color: var(--dfi-body); }
.dfi-symptoms li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 4px; height: 4px; border-radius: 50%; background: var(--dfi-faint); }

/* KPI strip */
.dfi-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #f8fafc; }
.dfi-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0; }
.dfi-kpi + .dfi-kpi { border-left: 1px solid #e2e8f0; }
.dfi-kpi-label { font-size: var(--t-caption); font-weight: 600; color: var(--dfi-faint); }
.dfi-kpi-value { font-size: var(--t-metric); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--dfi-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dfi-kpi-caption { font-size: var(--t-caption); color: var(--dfi-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dfi-kpi.bad .dfi-kpi-value { color: var(--dfi-red); }
.dfi-kpi.good .dfi-kpi-value { color: var(--dfi-green); }
.dfi-kpis--result { background: #fff; }
.dfi-kpis--result .dfi-kpi { padding: 10px; }
.dfi-kpis--result .dfi-kpi-caption { white-space: normal; overflow: visible; }

/* "What happens if…" style question card (debrief) */
.dfi-ask {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #6366f1;
}
.dfi-ask-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    font-size: var(--t-caption);
    font-weight: 700;
}

/* Step content */
.dfi-q, .dfi-goal { font-size: var(--t-body); font-weight: 600; line-height: 1.5; color: var(--dfi-ink); }
.dfi-ask .dfi-q { font-weight: 500; }
.dfi-q-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dfi-aside { font-size: var(--t-caption); color: var(--dfi-faint); }
.dfi-link--quiet { font-size: var(--t-caption); color: var(--dfi-meta); }
.dfi-help { font-size: var(--t-small); color: var(--dfi-meta); }
.dfi-choices { display: flex; flex-direction: column; border: 1px solid var(--dfi-line); border-radius: 10px; overflow: hidden; }
.dfi-choice {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 0;
    background: #fff;
    color: var(--dfi-ink);
    font: inherit;
    font-size: var(--t-body);
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}
.dfi-choice + .dfi-choice { border-top: 1px solid var(--dfi-line); }
.dfi-choice:hover:not(:disabled), .dfi-choice:focus-visible { background: var(--lm-accent-dim, rgba(59,130,246,0.08)); outline: none; }
.dfi-choice:disabled { cursor: default; }
.dfi-choice-mark { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--dfi-faint); background: #fff; }
.dfi-choice:hover:not(:disabled) .dfi-choice-mark { border-color: var(--dfi-accent); }
.dfi-option-name { font-weight: 500; min-width: 0; }
.dfi-option-type { font-size: var(--t-small); color: var(--dfi-faint); white-space: nowrap; }
.dfi-choices--text .dfi-choice { grid-template-columns: 16px 1fr; }
.dfi-choices--text .dfi-option-name { font-weight: 400; }
.dfi-choice.wrong { background: #fff; color: var(--dfi-faint); }
.dfi-choice.wrong .dfi-option-name { text-decoration: line-through; }
.dfi-choice.wrong .dfi-choice-mark { border-color: var(--dfi-red); background: var(--dfi-red); }
.dfi-choice.wrong .dfi-option-type { color: var(--dfi-red); }
.dfi-choice.right { background: var(--lm-green-bg, rgba(22,163,74,0.08)); }
.dfi-choice.right .dfi-choice-mark { border-color: var(--dfi-green); background: var(--dfi-green); }

/* Canvas spotlight while hovering a diagnosis option */
#canvas .node.dfi-spotlight, .node.dfi-spotlight { outline: 3px solid var(--lm-accent, #3b82f6); outline-offset: 4px; }

.dfi-explain { padding: 12px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--dfi-line); color: var(--dfi-body); }
.dfi-explain strong { color: var(--dfi-ink); font-weight: 600; }
.dfi-explain--ok { background: #f0fdf4; border-color: #bbf7d0; }
.dfi-explain--ok strong { color: #15803d; }
.dfi-explain--warn { background: #fffbeb; border-color: #fde68a; }

.dfi-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dfi-goals li { display: flex; align-items: flex-start; gap: 8px; color: var(--dfi-body); }
.dfi-goal-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--dfi-faint); }
.dfi-goals li.pass .dfi-goal-icon { border-color: var(--dfi-green); background: var(--dfi-green); }
.dfi-goals li.fail .dfi-goal-icon { border-color: var(--dfi-red); background: var(--dfi-red); }

.dfi-hints { display: flex; flex-direction: column; gap: 8px; }
.dfi-hints:empty { display: none; }
.dfi-hint { padding: 8px 12px; border-radius: 8px; background: var(--lm-amber-bg, rgba(217,119,6,0.08)); color: var(--dfi-body); }
.dfi-hint { font-size: var(--t-small); }
.dfi-hint span { display: block; font-size: var(--t-caption); font-weight: 600; color: var(--dfi-amber); }
.dfi-link { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: var(--t-small); font-weight: 600; color: var(--dfi-accent); cursor: pointer; }
.dfi-link:hover { text-decoration: underline; }

.dfi-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dfi-actions--center { justify-content: center; }
.dfi-btn {
    min-height: 36px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: var(--t-body);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.dfi-btn:focus-visible { outline: 2px solid var(--lm-accent-ring, rgba(59,130,246,0.35)); outline-offset: 2px; }
.dfi-btn:disabled { opacity: .6; cursor: progress; }
.dfi-btn--primary { background: var(--dfi-accent); color: #fff; }
.dfi-btn--primary:hover:not(:disabled) { background: #2563eb; }
.dfi-btn--ghost { background: #fff; border-color: var(--dfi-line); color: var(--dfi-ink); }
.dfi-btn--ghost:hover { border-color: var(--dfi-faint); }
.dfi-btn--block { width: 100%; }
.dfi-btn--grow { flex: 1 1 0; }

/* Run-check result: status header + before/after KPI strip */
.dfi-result { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }
.dfi-result.pass { background: #f0fdf4; border-color: #bbf7d0; }
.dfi-result.fail { background: #fef2f2; border-color: #fecaca; }
.dfi-result-head { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; }
.dfi-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; }
.dfi-result.pass .dfi-result-icon { background: var(--dfi-green); }
.dfi-result.fail .dfi-result-icon { background: var(--dfi-red); }
.dfi-result-title { font-weight: 600; color: var(--dfi-ink); }
.dfi-result-sub { font-size: var(--t-caption); color: var(--dfi-meta); }
.dfi-note { font-size: var(--t-small); color: var(--dfi-meta); }
.dfi-note--warn { color: var(--dfi-amber); }
.dfi-note--bad { color: var(--dfi-red); }
.dfi-also { font-size: var(--t-small); color: var(--dfi-meta); }
.dfi-also summary { cursor: pointer; font-weight: 600; }
.dfi-also ul { margin: 4px 0 0; padding-left: 16px; }

/* Completion */
.dfi-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 0 4px; }
.dfi-done-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: var(--dfi-green); color: #fff; box-shadow: 0 0 0 6px #dcfce7; }
.dfi-done-badge svg { width: 18px; height: 18px; }
.dfi-done-title { font-size: var(--t-heading); font-weight: 600; color: var(--dfi-ink); }
.dfi-done-sub { font-size: var(--t-small); color: var(--dfi-meta); }
.dfi-done-stars { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; font-size: var(--t-caption); color: var(--dfi-meta); }
.dfi-breakdown { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--dfi-line); border-radius: 10px; overflow: hidden; }
.dfi-breakdown li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; }
.dfi-breakdown li + li { border-top: 1px solid var(--dfi-line); }
.dfi-breakdown .dfi-goal-icon { margin-top: 0; }
.dfi-breakdown li.ok .dfi-goal-icon { background: var(--dfi-green); border-color: var(--dfi-green); }
.dfi-breakdown li.miss .dfi-goal-icon { background: var(--dfi-faint); border-color: var(--dfi-faint); }
.dfi-breakdown li.miss > span:nth-child(2) { color: var(--dfi-meta); }
.dfi-breakdown-star { font-size: var(--t-caption); font-weight: 600; color: var(--dfi-faint); }
.dfi-breakdown li.ok .dfi-breakdown-star { color: #b45309; }
.dfi-rewards { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.dfi-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: var(--t-caption); font-weight: 600; }
.dfi-chip--xp { background: #eef2ff; color: #4338ca; }
.dfi-stars { display: inline-flex; flex-shrink: 0; gap: 2px; font-size: var(--t-body); line-height: 1.35; color: var(--dfi-line); }
.dfi-stars .on { color: #f59e0b; }
.dfi-stars--lg { font-size: var(--t-metric); gap: 4px; }

/* Inline SVG icons */
.dfi-choice-mark, .dfi-goal-icon { display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.dfi-star { display: inline-flex; width: 1em; height: 1em; }
.dfi-star svg { width: 100%; height: 100%; }
.dfi-event-icon svg, .dfi-ask-icon svg { display: block; }
.dfi-company { display: flex; align-items: center; gap: 6px; margin: -6px 0 0 !important; font-size: var(--t-caption); font-weight: 500; color: var(--dfi-meta); }
.dfi-company svg { flex: 0 0 auto; color: var(--dfi-faint); }

/* ─── Motion ──────────────────────────────────────────────────────────────
   Short (180–450 ms), ease-out, and purposeful: screen entrance when the
   step changes, feedback on answers, result reveal, completion moment.
   incident-ui.js adds .dfi--enter / .just / .dfi-result--new only for the
   render where the thing actually happened, so nothing replays on re-render. */
@keyframes dfi-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dfi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dfi-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dfi-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes dfi-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes dfi-ring { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.35); } 100% { box-shadow: 0 0 0 14px rgba(22,163,74,0); } }
@keyframes dfi-star-in { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 70% { transform: scale(1.2) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes dfi-slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* Step entrance: sections rise in, staggered */
.dfi--enter > * { animation: dfi-rise .32s cubic-bezier(.2,.7,.2,1) both; }
.dfi--enter > *:nth-child(2) { animation-delay: .04s; }
.dfi--enter > *:nth-child(3) { animation-delay: .08s; }
.dfi--enter > *:nth-child(4) { animation-delay: .12s; }
.dfi--enter > *:nth-child(5) { animation-delay: .16s; }
.dfi--enter > *:nth-child(n+6) { animation-delay: .2s; }
.dfi--enter > .dfi-cta-bar { animation-name: dfi-fade; animation-delay: .25s; }
/* The active progress segment fills from the left on a new step */
.dfi--enter .dfi-steps li.active::before { transform-origin: left center; animation: dfi-fill .45s cubic-bezier(.2,.7,.2,1) .15s both; }

/* Answer feedback */
.dfi-choice.wrong.just { animation: dfi-shake .38s ease; }
.dfi-choice.just .dfi-choice-mark { animation: dfi-pop .35s cubic-bezier(.2,.8,.2,1.2) both; }
.dfi-choice.right.just { transition: background .3s ease; }
.dfi-explain { animation: dfi-rise .3s cubic-bezier(.2,.7,.2,1) both; }

/* Hover affordance on choices and buttons */
.dfi-choice { transition: background .12s ease, transform .12s ease; }
.dfi-choice:active:not(:disabled) { transform: scale(.99); }
.dfi-btn { transition: background .12s ease, border-color .12s ease, opacity .12s ease, transform .12s ease, box-shadow .12s ease; }
.dfi-btn--primary:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(59,130,246,.25); transform: translateY(-1px); }
.dfi-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }

/* Run-check result reveal */
.dfi-result--new { animation: dfi-rise .3s cubic-bezier(.2,.7,.2,1) both; }
.dfi-result--new .dfi-result-icon { animation: dfi-pop .4s cubic-bezier(.2,.8,.2,1.2) .1s both; }
.dfi-result--new .dfi-kpi { animation: dfi-rise .3s cubic-bezier(.2,.7,.2,1) both; }
.dfi-result--new .dfi-kpi:nth-child(2) { animation-delay: .06s; }
.dfi-result--new .dfi-kpi:nth-child(3) { animation-delay: .12s; }

/* Completion moment */
.dfi--enter .dfi-done-badge { animation: dfi-pop .45s cubic-bezier(.2,.8,.2,1.2) .1s both, dfi-ring .9s ease-out .45s; }
.dfi--enter .dfi-done-stars .dfi-star { animation: dfi-star-in .45s cubic-bezier(.2,.8,.2,1.2) both; }
.dfi--enter .dfi-done-stars .dfi-star:nth-child(1) { animation-delay: .35s; }
.dfi--enter .dfi-done-stars .dfi-star:nth-child(2) { animation-delay: .5s; }
.dfi--enter .dfi-done-stars .dfi-star:nth-child(3) { animation-delay: .65s; }
.dfi--enter .dfi-breakdown li { animation: dfi-slide-in .3s cubic-bezier(.2,.7,.2,1) both; }
.dfi--enter .dfi-breakdown li:nth-child(1) { animation-delay: .75s; }
.dfi--enter .dfi-breakdown li:nth-child(2) { animation-delay: .85s; }
.dfi--enter .dfi-breakdown li:nth-child(3) { animation-delay: .95s; }
.dfi--enter .dfi-rewards .dfi-chip { animation: dfi-pop .35s cubic-bezier(.2,.8,.2,1.2) 1.05s both; }

/* Collapsed incident strip: open/close */
.dfi-mini[open] .dfi-mini-body { animation: dfi-rise .25s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
    .dfi *, .dfi *::before, .dfi { animation: none !important; transition: none !important; }
}

/* ── css/evaluate/evaluation-report.css ── */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EVALUATION REPORT — MODERN REDESIGN
   Design System: Dark Navy SaaS Dashboard
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* ─── Color Palette — Light Modern Theme ───────────────────────────── */
  --bg-primary: #fafafa;
  --bg-secondary: #f5f5f5;
  --surface: #ffffff;
  --surface-hover: #f9fafb;
  --surface-elevated: #ffffff;
  
  --border-subtle: rgba(15, 23, 42, 0.06);
  --border-default: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.15);
  
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  
  --accent-primary: #3b82f6;
  --accent-secondary: #2563eb;
  --accent-light: #bfdbfe;
  
  /* Status colors */
  --status-success: #22c55e;
  --status-success-bg: #dcfce7;
  --status-success-border: #86efac;
  
  --status-warning: #f59e0b;
  --status-warning-bg: #fef3c7;
  --status-warning-border: #fcd34d;
  
  --status-error: #ef4444;
  --status-error-bg: #fee2e2;
  --status-error-border: #fca5a5;
  
  --status-neutral: #64748b;
  --status-neutral-bg: #f1f5f9;
  --status-neutral-border: #cbd5e1;
  
  /* ─── Spacing Scale ────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  
  /* ─── Border Radius ────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;
  
  /* ─── Typography Scale ─────────────────────────────────────────────── */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  
  /* ─── Shadows — Modern Light Theme ────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);
  
  /* Status glows */
  --glow-success: 0 0 0 3px rgba(34, 197, 94, 0.15);
  --glow-warning: 0 0 0 3px rgba(245, 158, 11, 0.15);
  --glow-error: 0 0 0 3px rgba(239, 68, 68, 0.15);
  --glow-accent: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* header.css / auth.css also declare generic --text-primary/--text-secondary
   (scoped to :root, but for a dark navbar) — whichever of these files loads
   LAST on a given page wins the :root cascade, which was silently turning
   this report's text (e.g. "Answer depth score:", "Feedback:", "Missed
   concepts:" labels built from .eval-modal-section strong / .meta) into
   near-white, unreadable text whenever header.css loaded after this file.
   Re-declare the handful of tokens this report relies on, scoped to the
   report's own containers, so they always win on specificity — regardless
   of stylesheet load order on any given page. */
#eval-report-page,
#evaluation-result-modal {
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE PAGE LAYOUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.eval-report-page {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.eval-report-page.hidden {
  display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.eval-rp-topbar {
  flex: 0 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  background: #172340;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.eval-rp-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.eval-rp-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}

.eval-rp-brand svg {
  flex-shrink: 0;
  color: #3b82f6;
  stroke: #60a5fa;
}

/* Breadcrumb/Meta text with separator */
.eval-rp-meta {
  font-size: var(--text-sm);
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.eval-rp-meta::before {
  content: '•';
  color: var(--text-subtle);
  font-weight: 600;
}

.eval-rp-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.eval-rp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.eval-rp-btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.eval-rp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.eval-rp-btn--primary {
  background: #2f67e8;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(47,103,232,0.25);
  border: 1px solid transparent;
}

.eval-rp-btn--primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(47,103,232,0.35);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLLABLE CONTENT AREA
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.eval-rp-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f8fafc;
  position: relative;
  z-index: 1;
}

.eval-rp-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
  position: relative;
  z-index: 2;
}

/* all direct card/accordion children of the JS-rendered content get vertical gap */
.eval-rp-content > *,
.eval-rp-content > .eval-modal-summary {
  margin-bottom:14px
}

.eval-rp-content > *:last-child {
  margin-bottom:0
}

/* .eval-rp-content — populated by JS, no styles needed */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.eval-rp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding: var(--space-6) var(--space-8);
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.eval-rp-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    var(--accent-primary) 0%, 
    var(--accent-secondary) 50%, 
    var(--accent-primary) 100%);
  opacity: 0.5;
}

.eval-rp-footer-hint {
  font-size: var(--text-sm);
  color: #475569;
  margin: 0;
}

@media(max-width:640px){
  .eval-rp-topbar { padding:0 14px; height:52px }
  .eval-rp-meta { display:none }
  .eval-rp-inner { padding:20px 14px 48px }
  .eval-rp-btn { padding:7px 12px; font-size: 12px }
  .eval-rp-footer { flex-direction:column; align-items:flex-start; gap:12px }
}

/* ── Legacy modal styles kept for back-compat ─────────────────────────────── */
:root {
  /* ── PRISM-aligned colours — replaces old indigo/violet palette ───── */
  --er-indigo:#3b82f6;
  --er-violet:#2563eb;
  --er-indigo-light:#eff6ff;
  --er-violet-light:#dbeafe;
  /* Neutral text tones — match PRISM's slate palette */
  --er-navy:#0f172a;
  --er-charcoal:#334155;
  --er-slate:#64748b;
  --er-muted:#94a3b8;
  --er-border:rgba(148,163,184,0.20);
  --er-glass-bg:rgba(248,250,252,0.98);
  --er-glass-blur:16px;
  --er-radius-lg:16px;
  --er-radius-md:12px;
  --er-radius-sm:10px;
  --er-shadow-card:0 1px 3px rgba(15,23,42,0.06),0 1px 2px rgba(15,23,42,0.04);
  --er-shadow-hover:0 10px 22px rgba(59,130,246,0.08),0 2px 6px rgba(15,23,42,0.05);
  --er-good:#22c55e;
  --er-good-bg:#dcfce7;
  --er-good-border:rgba(34,197,94,0.25);
  --er-okay:#f59e0b;
  --er-okay-bg:#fef3c7;
  --er-okay-border:rgba(245,158,11,0.25);
  --er-weak:#ef4444;
  --er-weak-bg:#fee2e2;
  --er-weak-border:rgba(239,68,68,0.25)
}

.eval-result-modal {
  width:min(880px,96vw)
}

#evaluation-result-modal .modal-content.eval-result-modal {
  height:88vh;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  background:#ffffff;
  border-radius:var(--er-radius-lg);
  border:1px solid #e2e8f0;
  box-shadow:0 20px 60px rgba(15,23,42,0.15),0 4px 16px rgba(15,23,42,0.08);
  padding:32px 32px 0;
  position:relative
}

/* SVG Background Pattern */
#evaluation-result-modal .modal-content.eval-result-modal::before {
  content:'';
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236495ed' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity:1;
  pointer-events:none;
  z-index:0
}

#evaluation-result-modal .modal-header {
  flex:0 0 auto;
  text-align:center;
  padding:0 0 24px;
  margin-bottom:20px;
  border-bottom:1px solid #e2e8f0;
  position:relative;
  z-index:1
}

#evaluation-result-modal .modal-header h2 {
  font-size: 28px;
  font-weight:800;
  letter-spacing:-0.03em;
  color:#0f172a;
  margin-bottom:8px
}

#evaluation-result-modal .modal-message {
  color:#475569;
  font-size: 14px;
  margin-top:0;
  font-weight:500
}

.eval-modal-content {
  display:flex;
  flex-direction:column;
  gap:4px
}

#evaluation-result-modal .eval-modal-content {
  flex:1 1 auto;
  min-height:0;
  overscroll-behavior:contain;
  overflow:auto;
  padding:8px 4px 120px;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,0.35) transparent;
  position:relative;
  z-index:1
}

#evaluation-result-modal .eval-modal-content::-webkit-scrollbar {
  width:6px
}

#evaluation-result-modal .eval-modal-content::-webkit-scrollbar-thumb {
  background:rgba(148,163,184,0.40);
  border-radius:99px
}

.eval-modal-summary {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:24px
}

@media (max-width:540px) {
  .eval-modal-summary {
    grid-template-columns:1fr
  }

}

.eval-modal-summary .eval-modal-section {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:0 20px 24px;
  background: #ffffff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(59, 130, 246, 0.2);
  border-radius:var(--radius-lg);
  box-shadow:0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
  overflow:hidden;
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
  cursor:default;
  gap:0;
  height:280px
}

/* Push ring + content to vertical centre of the card body area */
.eval-modal-summary .eval-modal-section > :not(.eval-kpi-title):first-of-type {
  margin-top:auto
}

.eval-modal-summary .eval-modal-section > :last-child {
  margin-bottom:auto
}

/* ── Full-page scorecard background SVG ─────────────────────────────────── */
.eval-rp-bg-deco {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0
}

/* ensure topbar + scroll sit above the bg deco */
.eval-report-page .eval-rp-topbar,
.eval-report-page .eval-rp-scroll {
  position:relative;
  z-index:1
}

.eval-modal-summary .eval-modal-section::before {
  content:'';
  position:absolute;
  top:48px;
  left:0;right:0;bottom:0;
  border-radius:0 0 var(--er-radius-md) var(--er-radius-md);
  background:linear-gradient(180deg,rgba(59,130,246,0.03) 0%,rgba(59,130,246,0.01) 100%);
  pointer-events:none;
  opacity:0;
  transition:opacity 0.25s ease
}

.eval-modal-summary .eval-modal-section:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-3px);
  border-color:var(--border-strong)
}

.eval-modal-summary .eval-modal-section:hover::before {
  opacity:1
}

.eval-modal-summary .eval-modal-section::after {
  display:none
}

.eval-modal-summary .eval-modal-section.kpi-good::before,
.eval-modal-summary .eval-modal-section.kpi-okay::before,
.eval-modal-summary .eval-modal-section.kpi-weak::before {
  display:none /* Remove gradient overlays */
}

.eval-modal-summary .eval-modal-section.kpi-good:hover,
.eval-modal-summary .eval-modal-section.kpi-okay:hover,
.eval-modal-summary .eval-modal-section.kpi-weak:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(59, 130, 246, 0.1);
  border-color:rgba(59, 130, 246, 0.4)
}

.er-score-ring-wrap {
  position:relative;
  width:100px;
  height:100px;
  margin:0 auto 16px;
  flex-shrink:0
}

.er-score-ring {
  width:100px;
  height:100px;
  transform:rotate(-90deg);
  overflow:visible
}

.er-score-ring-track {
  fill:none;
  stroke:var(--border-default);
  stroke-width:8
}

.er-score-ring-fill {
  fill:none;
  stroke:var(--er-indigo);
  stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:251;
  stroke-dashoffset:251;
  transition:stroke-dashoffset 1.2s cubic-bezier(0.34,1.2,0.64,1)
}

.kpi-good .er-score-ring-fill {
  stroke:#22c55e
}

.kpi-okay .er-score-ring-fill {
  stroke:#f59e0b
}

.kpi-weak .er-score-ring-fill {
  stroke:#ef4444
}

.er-ring-number {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:32px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-0.04em;
  line-height:1
}

.er-ring-label {
  font-size: 12px;
  font-weight:600;
  color:#475569;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-top:4px
}

.eval-modal-summary .eval-kpi-title {
  width:calc(100% + 40px);
  margin-left:-20px;
  margin-right:-20px;
  margin-top:0;
  padding:14px 20px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color:#ffffff;
  font-size: 12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:24px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink:0;
  border-bottom:1px solid rgba(37, 99, 235, 0.3)
}

/* header tints matched to each card state - uniform blue gradient */
.eval-modal-summary .eval-modal-section.kpi-good  .eval-kpi-title,
.eval-modal-summary .eval-modal-section.kpi-okay  .eval-kpi-title,
.eval-modal-summary .eval-modal-section.kpi-weak  .eval-kpi-title { 
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color:#ffffff;
  border-bottom-color:rgba(37, 99, 235, 0.3)
}

.eval-modal-summary .kpi {
  font-size: 28px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-0.04em;
  line-height:1
}

.eval-modal-summary .meta {
  color:#475569;
  font-size: 14px;
  margin-top:8px;
  line-height:1.5;
  font-weight:500
}

.er-score-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  border-radius:999px;
  font-size: 12px;
  font-weight:700;
  letter-spacing:0.02em;
  margin-top:12px;
  border:1.5px solid transparent;
  transition:all 0.2s ease
}

.er-score-pill.good {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  border-color: #22c55e;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

.er-score-pill.okay {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  border-color: #f59e0b;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.er-score-pill.weak {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.progress {
  position:relative;
  background:rgba(71,85,105,0.20);
  border-radius:999px;
  height:6px;
  overflow:visible;
  margin-top:12px
}

.progress-bar {
  height:100%;
  background:linear-gradient(90deg,var(--er-indigo) 0%,var(--er-violet) 100%);
  width:0%;
  transition:width 800ms cubic-bezier(0.34,1.2,0.64,1);
  border-radius:999px;
  position:relative
}

.progress-bar::after {
  content:attr(data-pct);
  position:absolute;
  right:0;
  top:-22px;
  font-size: 11px;
  font-weight:700;
  color:var(--er-indigo);
  white-space:nowrap;
  transform:translateX(50%)
}

.kpi-good .progress-bar {
  background:linear-gradient(90deg,#4ADE80 0%,#16A34A 100%)
}

.kpi-good .progress-bar::after {
  color:var(--er-good)
}

.kpi-okay .progress-bar {
  background:linear-gradient(90deg,#FCD34D 0%,#D97706 100%)
}

.kpi-okay .progress-bar::after {
  color:var(--er-okay)
}

.kpi-weak .progress-bar {
  background:linear-gradient(90deg,#FCA5A5 0%,#DC2626 100%)
}

.kpi-weak .progress-bar::after {
  color:var(--er-weak)
}

.eval-modal-section {
  background:var(--surface);
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  height:fit-content;
  padding:24px 26px;
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
  gap:14px;
  transition:all 0.2s ease
}

.eval-modal-section:hover {
  border-color:var(--border-strong);
  box-shadow:var(--shadow-lg)
}

/* no left-edge bar on content section cards */

/* ── Empty-state placeholder for sections with no AI data ─────────────── */
.eval-section-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:32px 20px;
  color:var(--er-muted);
  font-size: 14px;
  text-align:center
}

.eval-section-empty svg {
  opacity:0.30;
  color:var(--er-indigo)
}

.eval-modal-section h4 {
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
  color:var(--text-primary);
  font-size: 16px;
  font-weight:700;
  letter-spacing:-0.02em;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-default);
  margin-bottom:14px
}

.eval-modal-section h4::before {
  content:'';
  display:inline-block;
  width:4px;
  height:18px;
  background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%);
  border-radius:99px;
  flex-shrink:0
}

.eval-modal-section .meta {
  color:var(--text-secondary);
  font-size: 14px;
  line-height:1.6;
  font-weight:500
}

.eval-modal-section strong {
  color:var(--text-primary);
  font-size: 14px;
  font-weight:700
}

#evaluation-result-modal .eval-modal-section {
  margin:8px 0
}

#evaluation-result-modal .eval-modal-section h4 {
  font-size: 16px;
  text-align:left;
  padding-bottom:12px
}

#evaluation-result-modal .meta {
  line-height:1.6
}

#evaluation-result-modal hr {
  border:0;
  border-top:1.5px solid rgba(148,163,184,0.20);
  margin:14px 0
}

.eval-rec-list,.eval-modal-section ul {
  margin:8px 0 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:4px
}

.eval-modal-section li,.eval-rec-list li {
  font-size:var(--fs-sm);
  line-height:1.6;
  color:#000;
  padding:2px 0 2px 18px;
  position:relative;
  background:none;
  border:none;
  border-radius:0
}

.eval-modal-section li::before,.eval-rec-list li::before {
  content:'–';
  position:absolute;
  left:0;
  top:2px;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--er-indigo);
  line-height:1.6;
  opacity:0.55
}

[data-strengths] li::before,[data-req-strengths] li::before {
  content:'✓';
  color:var(--er-good);
  opacity:1
}

[data-improve] li::before {
  content:'↑';
  color:var(--er-okay);
  opacity:1
}

[data-missing] li {
  background:rgba(220,38,38,0.04);
  border-color:rgba(220,38,38,0.10)
}

[data-missing] li::before {
  content:'⚬';
  color:var(--er-weak)
}

[data-sim-insights] li::before {
  content:'◆';
  color:var(--er-indigo);
  opacity:0.7
}

[data-arch-insights] li::before {
  content:'◈';
  color:var(--er-violet);
  opacity:0.7
}

.er-section-tag {
  display:inline-flex;
  align-items:center;
  font-size: 11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.07em;
  padding:2px 9px;
  border-radius:999px;
  margin-left:auto;
  background:var(--er-indigo-light);
  color:var(--er-indigo);
  border:1px solid rgba(99,102,241,0.18)
}

[data-arch-mentor],[data-req-mentor],[data-to-mentor] {
  padding:10px 14px;
  border-radius:var(--er-radius-sm);
  background:#f0f7ff;
  border:1px solid rgba(59,130,246,0.15);
  margin-top:8px;
  font-style:italic;
  color:#334155;
  line-height:1.55;
  font-size:var(--fs-sm)
}

.eval-acc {
  border:1px solid rgba(30, 41, 59, 0.3);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  transition:all 0.25s ease
}

.eval-acc[open] {
  box-shadow:var(--shadow-lg);
  border-color:rgba(30, 41, 59, 0.5)
}

.eval-acc-summary {
  cursor:pointer;
  list-style:none;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-bottom:1px solid transparent;
  transition:all 0.2s ease
}

.eval-acc[open] .eval-acc-summary {
  border-bottom-color:rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.eval-acc-summary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.eval-acc-summary * {
  pointer-events:none
}

.eval-acc-summary::after {
  content:'▾';
  color:var(--er-indigo);
  font-size: 16px;
  margin-left:10px;
  transition:transform 0.25s cubic-bezier(0.34,1.3,0.64,1);
  flex-shrink:0
}

.eval-acc[open] .eval-acc-summary::after {
  transform:rotate(180deg)
}

.eval-acc summary::-webkit-details-marker {
  display:none
}

.eval-acc-title {
  font-weight:700;
  font-size: 16px;
  color:#ffffff;
  letter-spacing:-0.01em;
  display:flex;
  align-items:center;
  gap:12px
}

.eval-acc-icon {
  width:32px;
  height:32px;
  border-radius:10px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: 13px;
  font-weight:800;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(59, 130, 246, 0.4), 0 0 0 1px rgba(96, 165, 250, 0.3)
}

.eval-acc-sub {
  font-size: 13px;
  font-weight:600;
  color:rgba(255, 255, 255, 0.9);
  text-align:right;
  flex-shrink:0
}

@media (max-width:640px) {
  .eval-acc-summary {
    align-items:flex-start;
    flex-direction:column
  }
  .eval-acc-sub {
    text-align:left
  }

}

.eval-acc-body {
  padding:20px 20px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  background:var(--bg-secondary)
}

#evaluation-result-modal details.eval-acc[open] .eval-acc-body {
  padding-bottom:24px
}

#evaluation-result-modal details.eval-acc .eval-modal-section {
  background:var(--surface);
  border-color:var(--border-default);
  border-radius:var(--radius-md)
}

#evaluation-result-modal details.eval-acc[open] .eval-modal-section {
  margin:10px 0
}

#evaluation-result-modal details.eval-acc[open] .eval-tradeoff-item,#evaluation-result-modal details.eval-acc[open] .eval-qa-item {
  margin-right:2px
}

#evaluation-result-modal details.eval-acc {
  display:block
}

.center-gradient-line {
  height:1px;
  margin:14px 0;
  border-radius:999px;
  background:linear-gradient(to right,transparent 0%,rgba(59,130,246,0.10) 20%,rgba(59,130,246,0.25) 50%,rgba(59,130,246,0.10) 80%,transparent 100%)
}

.eval-kpis {
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:7px
}

.er-stat-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  border-radius:999px;
  font-size:var(--fs-xss);
  font-weight:800;
  border:1px solid rgba(99,102,241,0.14);
  background:var(--er-indigo-light);
  color:var(--er-indigo);
  white-space:nowrap
}

.eval-qa-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:none;
  overflow:visible
}

.eval-qa-item {
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:var(--er-radius-sm);
  padding:12px 14px;
  position:relative;
  overflow:hidden;
  transition:box-shadow 0.18s ease
}

.eval-qa-item::before { display:none }

.eval-qa-item.correct {
  border-color:rgba(22,163,74,0.18);
  background:rgba(240,253,244,0.70)
}

.eval-qa-item.correct::before { display:none }

.eval-qa-item.incorrect {
  border-color:rgba(220,38,38,0.15);
  background:rgba(254,242,242,0.70)
}

.eval-qa-item.incorrect::before { display:none }

.eval-qa-item.okay {
  border-color:rgba(234,88,12,0.18);
  background:rgba(255,247,237,0.70)
}

.eval-qa-item.okay::before { display:none }

.eval-qa-item .qa-title {
  font-weight:700;
  font-size:var(--fs-base);
  color:var(--er-navy);
  line-height:1.4
}

.eval-qa-item .qa-sub {
  font-size:var(--fs-sm);
  color:#334155;
  line-height:1.45;
  margin-top:3px
}

.eval-qa-item .qa-explanation {
  font-size:var(--fs-sm);
  color:#334155;
  line-height:1.5;
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed rgba(99,102,241,0.12)
}

.eval-qa-item .qa-note {
  font-size:var(--fs-sm);
  line-height:1.5;
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(148,163,184,0.08);
  color:#334155
}

.eval-qa-item.correct .qa-note {
  background:rgba(34,197,94,0.10);
  color:#86efac
}

.eval-qa-item.incorrect .qa-note {
  background:rgba(239,68,68,0.10);
  color:#fca5a5
}

.qa-pill {
  display:inline-flex;
  align-items:center;
  font-size:var(--fs-micro);
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  background:var(--er-indigo-light);
  color:var(--er-indigo);
  border:1px solid rgba(99,102,241,0.16);
  white-space:nowrap;
  text-transform:capitalize
}

.qa-pill-diff {
  background:rgba(238,242,255,0.9);
  color:#3730A3;
  border-color:rgba(99,102,241,0.25)
}

.eval-tradeoff-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:visible
}

.eval-tradeoff-item {
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:var(--er-radius-sm);
  padding:14px 16px;
  width:100%;
  position:relative;
  overflow:hidden
}

.eval-tradeoff-item::before { display:none }

.eval-tradeoff-item .to-title {
  font-weight:700;
  font-size:var(--fs-sm);
  color:var(--er-navy);
  line-height:1.4;
  width:100%
}

.eval-tradeoff-item .to-answer {
  font-size:var(--fs-sm);
  color:#334155;
  line-height:1.5;
  margin-top:6px
}

.eval-tradeoff-item .to-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 10px;
  border-radius:999px;
  font-size:var(--fs-micro);
  font-weight:800;
  line-height:1;
  border:1px solid transparent;
  flex-shrink:0;
  letter-spacing:0.02em
}

[data-scoring-row] {
  background:#f0f7ff;
  border-color:rgba(59,130,246,0.15)
}

#evaluation-result-modal .modal-actions {
  flex-shrink:0;
  position:sticky;
  bottom:0;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid #e2e8f0;
  padding:20px 32px;
  margin-top:0;
  z-index:2;
  display:flex;
  gap:12px;
  justify-content:flex-end
}

#evaluation-result-modal .modal-actions .button {
  padding:12px 24px;
  font-size: 16px;
  font-weight:700;
  border-radius:12px;
  background:#2f67e8;
  color:#ffffff;
  border:none;
  box-shadow:0 2px 8px rgba(47,103,232,0.25);
  transition:all 0.2s ease;
  cursor:pointer
}

#evaluation-result-modal .modal-actions .button:hover {
  background:#1d4ed8;
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(47,103,232,0.35)
}

#evaluation-result-modal .modal-close {
  position:absolute;
  top:24px;
  right:24px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#64748b;
  font-size: 20px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s ease;
  z-index:10
}

#evaluation-result-modal .modal-close:hover {
  background:#e2e8f0;
  border-color:#cbd5e1;
  color:#1e293b;
  transform:scale(1.05)
}

.eval-result {
  padding:0.9rem
}

.eval-large {
  font-size:var(--fs-xxl);
  font-weight:900;
  margin:0.4rem 0 0.9rem;
  color:var(--er-navy)
}

.eval-result h4 {
  padding:5px
}

.eval-result ul {
  margin-top:0.25rem;
  margin-left:0.9rem;
  margin-bottom:0.4rem
}

.eval-result-card {
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:12px;
  flex-direction:column
}

.eval-summary {
  display:flex;
  gap:12px;
  width:100%
}

.eval-summary .eval-score {
  flex:0 0 50%;
  min-width:0
}

.eval-score-label {
  font-size:var(--fs-sm);
  color:var(--er-slate);
  margin-bottom:6px;
  font-weight:600
}

.eval-score-value {
  font-size:var(--fs-sm);
  color:var(--er-navy);
  margin-top:6px;
  font-weight:700
}

.eval-analysis {
  width:100%;
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}

.eval-analysis .used {
  font-size:var(--fs-sm);
  color:var(--er-charcoal);
  margin-bottom:0;
  font-weight:600
}

.missing-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:0
}

.chip {
  background:var(--er-indigo-light);
  padding:5px 12px;
  border-radius:999px;
  font-size:var(--fs-sm);
  color:var(--er-indigo);
  border:1px solid rgba(99,102,241,0.15);
  font-weight:600
}

.component-missing {
  color:var(--er-weak);
  margin-top:0;
  font-weight:700
}

.eval-details-row td {
  border-bottom:1px solid #CBD5E1;
  padding-bottom:12px;
  background:#FBFDFF
}

.assessment-table {
  width:100%;
  border-collapse:collapse;
  font-family:inherit
}

.assessment-table thead th {
  text-align:left;
  padding:12px 8px;
  color:var(--er-slate);
  font-weight:700;
  font-size:var(--fs-sm);
  border-bottom:1px solid #CBD5E1;
  vertical-align:middle
}

.assessment-table tbody td {
  padding:10px 8px;
  vertical-align:middle;
  border-bottom:1px solid #CBD5E1;
  font-size:var(--fs-sm);
  color:var(--er-charcoal)
}

.assessment-table .open-button {
  background:var(--er-indigo);
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700
}

.assessment-table .open-button:hover {
  background:var(--er-violet)
}

.assessment-table tbody tr:has(+ .eval-details-row) td {
  border-bottom:none
}

@media (max-width:640px) {
  .eval-summary {
    flex-direction:column
  }
  .eval-summary .eval-score {
    flex:1 1 100%
  }
  .eval-analysis {
    width:100%
  }

}

/* Scoring Modal - must be above eval-report-page (z-index: 9000) */
#evaluation-scoring-modal {
  z-index: 10000 !important;
}

/* Ensure modal shows when not hidden */
#evaluation-scoring-modal:not(.hidden) {
  display: flex !important;
}

.scoring-modal {
  width:min(520px,92vw);
  text-align:center;
  padding:3rem 2.5rem;
  border-radius:var(--radius-xl);
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.1);
  box-shadow:0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  position:relative;
  overflow:hidden
}

/* Add animated background to scoring modal - lighter for light theme */
.scoring-modal::before {
  content:'';
  position:absolute;
  inset:0;
  background-image: 
    radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(124, 58, 237, 0.03) 0%, transparent 50%);
  pointer-events:none;
  z-index:0
}

.scoring-modal-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-5);
  position:relative;
  z-index:1
}

.scoring-spinner {
  position:relative;
  width:88px;
  height:88px;
  filter:drop-shadow(0 0 20px rgba(59,130,246,0.4))
}

.scoring-spinner-svg {
  width:88px;
  height:88px;
  animation:scoring-rotate 1.4s linear infinite
}

.scoring-spinner-svg circle {
  stroke:#3b82f6;
  stroke-dasharray:90,150;
  stroke-dashoffset:0;
  animation:scoring-dash 1.4s ease-in-out infinite
}

.scoring-spinner-icon {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  color:#64748b;
  animation:spin 2s linear infinite;
  margin:auto;
}

@keyframes spin {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

@keyframes scoring-rotate {
  100% {
    transform:rotate(360deg)
  }

}

@keyframes scoring-dash {
  0% {
    stroke-dasharray:1,150;
    stroke-dashoffset:0
  }
  50% {
    stroke-dasharray:90,150;
    stroke-dashoffset:-35
  }
  100% {
    stroke-dasharray:90,150;
    stroke-dashoffset:-124
  }

}

@keyframes scoring-pulse {
  0%,100% {
    transform:scale(1)
  }
  50% {
    transform:scale(1.15)
  }

}

.scoring-modal-title {
  font-size:var(--text-2xl);
  font-weight:800;
  color:#0f172a;
  margin:0;
  letter-spacing:-0.02em
}

.scoring-modal-sub {
  font-size:var(--text-base);
  color:#334155;
  margin:0;
  max-width:380px;
  line-height:1.6
}

.scoring-fact-card {
  background:#f8fafc;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6);
  width:100%;
  box-sizing:border-box;
  text-align:left;
  animation:scoring-fadeIn 0.5s ease;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:var(--space-5);
}

.scoring-fact-logo-box {
  flex-shrink:0;
  width:56px;
  height:56px;
  border-radius:var(--radius-md);
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.scoring-fact-logo-box:empty,
.scoring-fact-logo-box:has(.scoring-fact-logo[src=""]) {
  display:none;
}

.scoring-fact-logo {
  width:32px;
  height:32px;
  object-fit:contain;
}

.scoring-fact-divider {
  flex-shrink:0;
  width:1px;
  align-self:stretch;
  background:rgba(15,23,42,0.1);
}

.scoring-fact-body {
  flex:1 1 auto;
  min-width:0;
}

.scoring-fact-icon {
  flex-shrink:0;
  width:20px;
  height:20px;
  color:#3b82f6;
  margin-bottom:8px;
}

/* Add subtle gradient top bar to fact card */
.scoring-fact-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  opacity:0.8
}

.scoring-fact-label {
  font-size:var(--text-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#3b82f6;
  display:block;
  margin-bottom:var(--space-2)
}

.scoring-fact-text {
  font-size:var(--text-sm);
  color:#0f172a;
  line-height:1.65;
  margin:0
}

@keyframes scoring-fadeIn {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }

}

.scoring-progress-dots {
  display:flex;
  gap:var(--space-2)
}

.scoring-progress-dots span {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#3b82f6;
  box-shadow:0 0 12px rgba(59,130,246,0.5);
  animation:scoring-bounce 1.4s ease-in-out infinite
}

.scoring-progress-dots span:nth-child(2) {
  animation-delay:0.16s
}

.scoring-progress-dots span:nth-child(3) {
  animation-delay:0.32s
}

@keyframes scoring-bounce {
  0%,80%,100% {
    transform:scale(0.6);
    opacity:0.3
  }
  40% {
    transform:scale(1);
    opacity:1
  }
}

/* ── Tradeoff Q&A items (My Evaluations report view) ───────────────────── */
.eval-tq-item {
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:var(--er-radius-sm);
  padding:14px 16px;
  position:relative;
  overflow:hidden
}
.eval-tq-item+.eval-tq-item { margin-top:8px }
.eval-tq-item::before { display:none }
.eval-tq-question {
  font-weight:700;
  font-size:var(--fs-base);
  color:var(--er-navy);
  line-height:1.4;
  margin-bottom:6px
}
.eval-tq-answer {
  font-size:var(--fs-sm);
  color:#475569;
  line-height:1.55;
  padding:8px 10px;
  background:#f0f7ff;
  border-radius:6px;
  margin-bottom:8px;
  white-space:pre-wrap
}
.eval-tq-no-answer {
  font-size:var(--fs-sm);
  color:var(--er-muted);
  font-style:italic;
  margin-bottom:8px
}
.eval-tq-feedback-row {
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap
}
.eval-tq-score-pill {
  display:inline-flex;
  align-items:center;
  font-size:var(--fs-micro);
  font-weight:800;
  padding:3px 11px;
  border-radius:999px;
  white-space:nowrap;
  flex-shrink:0
}
.eval-tq-score-pill.high { background:#dcfce7; color:#166534; border:1px solid rgba(22,163,74,0.22) }
.eval-tq-score-pill.mid  { background:#fff7ed; color:#9a3412; border:1px solid rgba(234,88,12,0.22)  }
.eval-tq-score-pill.low  { background:#fee2e2; color:#991b1b; border:1px solid rgba(220,38,38,0.20) }
.eval-tq-feedback {
  font-size:var(--fs-sm);
  color:var(--er-slate);
  line-height:1.5;
  flex:1
}
.eval-tq-overall-feedback {
  background:#f0f7ff;
  border:1.5px solid rgba(59,130,246,0.18);
  border-radius:var(--er-radius-sm);
  padding:14px 16px;
  margin-bottom:12px;
  font-size:var(--fs-sm);
  color:#475569;
  line-height:1.55
}
.eval-tq-overall-feedback strong {
  display:block;
  font-size:var(--fs-base);
  color:#3b82f6;
  margin-bottom:6px
}
.eval-tq-overall-feedback p { margin:0 }

/* ── MCQ: richer header layout (icon + question text) ──────────────────── */
.eval-qa-header {
  display:flex;
  align-items:flex-start;
  gap:10px
}
.eval-qa-icon {
  font-size: 14px;
  font-weight:900;
  flex-shrink:0;
  margin-top:1px
}
.eval-qa-icon.correct   { color:#16a34a }

/* ──────────────────────────────────────────────────────────────────────────
   Evaluation Report V2 — Premium SaaS overrides
   ────────────────────────────────────────────────────────────────────────── */

.eval-rp-scroll {
  background: #f8fafc;
}

.eval-rp-topbar {
  background: #172340;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.eval-rp-brand,
.eval-rp-meta {
  color: #ffffff;
}

.eval-rp-btn--ghost {
  background: rgba(148,163,184,0.15);
  color: #ffffff;
  border: 1px solid rgba(148,163,184,0.3);
}

.eval-rp-btn--ghost:hover {
  background: rgba(148,163,184,0.28);
  border-color: rgba(148,163,184,0.5);
}

.eval-rp-bg-deco {
  display: none;
}

.eval-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.eval-section-title {
  margin: 0 0 16px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
}

.eval-hero-card {
  padding: 24px;
  margin-bottom: 24px;
}

.eval-hero-grid {
  display: grid;
  grid-template-columns: 220px repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: center;
}

.eval-hero-score {
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.eval-hero-label {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.eval-hero-meta {
  grid-column: 2 / -1;
  color: #334155;
  font-size: 14px;
  margin-bottom: 4px;
}

.eval-hero-kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: #f8fafc;
}

.eval-hero-kv span {
  color: #475569;
  font-size: 12px;
}

.eval-hero-kv strong {
  color: #1e293b;
  font-size: 14px;
}

.eval-perf-card {
  padding: 20px;
  margin-bottom: 24px;
}

.eval-perf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.eval-perf-item > div:first-child {
  display: flex;
  justify-content: space-between;
  color: #0f172a;
  font-size: 13px;
  margin-bottom: 6px;
}

.eval-perf-item span {
  color: #334155;
  font-weight: 600;
}

.eval-perf-bar {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.eval-perf-bar > div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  width: 0%;
  transition: width 450ms ease;
}

.eval-perf-meta {
  margin-top: 12px;
  color: #64748b;
  font-size: 12px;
}

.eval-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.eval-grid-two > .eval-card,
.eval-card + .eval-card {
  padding: 20px;
}

.eval-strength-cards,
.eval-improve-cards,
.eval-learning-path {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.eval-strength-card,
.eval-improve-card,
.eval-learning-card {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
}

.eval-strength-card {
  border-left: 4px solid #22c55e;
}

.eval-improve-card {
  border-left: 4px solid #f59e0b;
}

.eval-learning-card {
  border-left: 4px solid #3b82f6;
}

.eval-learning-card .meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.eval-lp-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 8px;
  background: #eff6ff;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.eval-lp-link:hover {
  background: #dbeafe;
  border-color: rgba(59,130,246,0.55);
  color: #1e40af;
}

.eval-acc {
  margin-bottom: 16px;
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.35);
}

.eval-acc-summary {
  background: #ffffff;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.eval-acc-title,
.eval-acc-sub {
  color: #0f172a;
}

.eval-acc-icon {
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: none;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.eval-acc-body {
  background: #f8fafc;
}

.eval-modal-section {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.eval-qa-list details,
.eval-tradeoff-list details {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}

.eval-rp-footer {
  margin-top: 24px;
  padding: 20px;
}

.eval-rp-footer h3 {
  margin: 0 0 6px;
  color: #0f172a;
}

.eval-rp-footer-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.eval-rp-btn--secondary {
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.eval-rp-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .eval-hero-grid {
    grid-template-columns: 1fr 1fr;
  }

  .eval-hero-score {
    grid-row: auto;
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }

  .eval-hero-meta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px), (max-width: 1023px) and (max-height: 500px) {
  .eval-grid-two {
    grid-template-columns: 1fr;
  }

  .eval-rp-topbar {
    height: auto;
    min-height: 64px;
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .eval-rp-topbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  .eval-rp-footer-actions {
    position: sticky;
    bottom: 8px;
    background: #f8fafc;
    padding-top: 8px;
  }
}
.eval-qa-icon.incorrect { color:#dc2626 }
.eval-qa-icon.unanswered { color:#94a3b8 }
.eval-qa-icon.okay { color:#c2410c }
.eval-qa-q {
  font-weight:600;
  font-size:var(--fs-sm);
  color:var(--er-navy);
  line-height:1.45;
  flex:1
}
.eval-qa-answers {
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed rgba(99,102,241,0.12);
  display:flex;
  flex-direction:column;
  gap:4px
}
.eval-qa-tag {
  display:inline-block;
  font-size:var(--fs-micro);
  padding:3px 10px;
  border-radius:6px;
  line-height:1.45
}
.eval-qa-tag.right    { background:#dcfce7; color:#166534 }
.eval-qa-tag.wrong    { background:#fee2e2; color:#991b1b }
.eval-qa-tag.unanswered { background:#f1f5f9; color:#64748b }
.eval-qa-explanation {
  font-size:var(--fs-micro);
  color:var(--er-muted);
  line-height:1.5;
  margin-top:5px;
  padding-top:5px;
  border-top:1px dashed rgba(99,102,241,0.10)
}

/* ── FRNFR pills container ──────────────────────────────────────────────── */
[data-frnfr-pills] {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:10px
}

/* ── Arch analysis blocks (dimension breakdown) ─────────────────────────── */
/* ── Arch analysis overrides — handled by block below */
[data-arch-analysis] .to-title {
  font-weight:700;
  font-size:var(--fs-sm);
  color:var(--er-navy);
  margin-bottom:4px
}
[data-arch-analysis] .to-answer {
  font-size:var(--fs-sm);
  color:var(--er-slate);
  line-height:1.5;
  margin-top:4px
}
[data-arch-analysis] .eval-tradeoff-item {
  background:none;
  border:none;
  border-top:1px solid rgba(99,102,241,0.09);
  border-radius:0;
  padding:14px 0 4px 0;
  box-shadow:none
}
[data-arch-analysis] .eval-tradeoff-item::before { display:none }
[data-arch-analysis] .eval-tradeoff-item:first-child { border-top:none; padding-top:6px }
/* sub-heading labels: Strengths / Risks / Recommendations */
[data-arch-analysis] .to-answer > strong {
  display:inline-block;
  font-size: 12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--er-indigo);
  opacity:0.75;
  margin-top:8px;
  margin-bottom:2px
}
[data-arch-analysis] .eval-rec-list {
  margin:4px 0 0 0;
  padding:0;
  list-style:none
}
[data-arch-analysis] .eval-rec-list li {
  font-size:var(--fs-sm);
  color:var(--er-slate);
  line-height:1.6;
  padding:2px 0 2px 18px;
  background:none;
  border:none
}
[data-arch-analysis] .eval-rec-list li::before {
  font-size:var(--fs-sm);
  top:2px
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRISM DESIGN SYSTEM ALIGNMENT — final token pass
   Ensures all residual indigo/purple rgba values use PRISM blue palette
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Dashed dividers inside QA / tradeoff items */
.eval-qa-item .qa-explanation,
.eval-qa-answers,
.eval-qa-explanation {
  border-top-color: rgba(59,130,246,0.12) !important;
}

/* Pill/chip border: indigo → blue */
.er-section-tag {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: rgba(59,130,246,0.18);
}

.er-stat-chip {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: rgba(59,130,246,0.14);
}

.chip {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: rgba(59,130,246,0.15);
}

.qa-pill {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: rgba(59,130,246,0.16);
}

.qa-pill-diff {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: rgba(59,130,246,0.25);
}

/* Arch analysis sub-heading divider */
[data-arch-analysis] .eval-tradeoff-item {
  border-top-color: rgba(59,130,246,0.09) !important;
}

/* Section tag in section headers */
.eval-modal-section h4 .er-section-tag {
  background: #eff6ff;
  color: #1d4ed8;
}

/* Progress bar on perf section — PRISM blue */
.progress-bar {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}
.progress-bar::after {
  color: #3b82f6;
}

/* ══ Report polish (scoped) ══════════════════════════════════════════════════
   The report is shown inside My Evaluations (dark page, white body text) and
   after an evaluation. Give it its own text colour, respect [hidden], and keep
   one clean card language: white cards, slate text, one blue accent. */
#eval-report-page { color: #0f172a; }
#eval-report-page [hidden] { display: none !important; }
#eval-report-page [data-strengths-title],
#eval-report-page [data-improve-title] { display: none !important; }   /* duplicates the card heading */

/* Top bar */
#eval-report-page .eval-rp-brand { gap: 10px; }
#eval-report-page .eval-rp-brand-name:not(:empty)::before { content: "·"; margin: 0 8px 0 0; opacity: 0.5; }
#eval-report-page .eval-rp-brand-name { font-weight: 500; opacity: 0.85; }

/* Cards */
#eval-report-page .eval-card { padding: 24px; border-radius: 14px; border: 1px solid #e5eaf2; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
#eval-report-page .eval-section-title { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: #0f172a; letter-spacing: -0.01em; }

/* Hero */
#eval-report-page .eval-hero-meta { display: grid; gap: 2px; }
#eval-report-page .eval-hero-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; }
#eval-report-page .eval-hero-title { font-size: 24px; font-weight: 700; color: #0f172a; letter-spacing: -0.015em; }
#eval-report-page .eval-hero-kv { background: #f8fafc; border: 1px solid #e5eaf2; border-radius: 10px; }
#eval-report-page .eval-hero-kv span { color: #64748b; font-size: 12px; }
#eval-report-page .eval-hero-kv strong { color: #0f172a; }
#eval-report-page .er-score-pill { box-shadow: none; font-size: 12px; padding: 5px 12px; }

/* Performance bars */
#eval-report-page .eval-perf-item strong { font-weight: 500; color: #0f172a; }
#eval-report-page .eval-perf-item span { font-variant-numeric: tabular-nums; color: #334155; font-weight: 600; }
#eval-report-page .eval-perf-meta { color: #64748b; }

/* Strengths / improvements: simple rows */
#eval-report-page .eval-strength-cards,
#eval-report-page .eval-improve-cards { display: grid; gap: 8px; }
#eval-report-page .eval-strength-card,
#eval-report-page .eval-improve-card {
  display: block; min-height: 0; height: auto; padding: 12px 14px 12px 38px; position: relative;
  background: #f8fafc; border: 1px solid #e5eaf2; border-left-width: 1px; border-radius: 10px; box-shadow: none;
}
#eval-report-page .eval-strength-card::before,
#eval-report-page .eval-improve-card::before {
  position: absolute; left: 13px; top: 12px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1;
}
#eval-report-page .eval-strength-card::before { content: "✓"; background: #dcfce7; color: #15803d; }
#eval-report-page .eval-improve-card::before { content: "↑"; background: #fef3c7; color: #b45309; }
#eval-report-page .eval-strength-card .meta,
#eval-report-page .eval-improve-card .meta { color: #1e293b; font-size: 14px; line-height: 1.5; margin: 0; }

/* Learning path: one row per lesson */
#eval-report-page .eval-learning-path { display: grid; gap: 10px; }
#eval-report-page .eval-learning-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title link" "meta link";
  align-items: center; gap: 2px 16px; padding: 14px 16px; background: #fff;
  border: 1px solid #e5eaf2; border-left: 3px solid #2563eb; border-radius: 10px; box-shadow: none;
}
#eval-report-page .eval-learning-card strong { grid-area: title; color: #0f172a; font-size: 14px; font-weight: 600; }
#eval-report-page .eval-learning-card .meta { grid-area: meta; color: #64748b; font-size: 13px; }
#eval-report-page .eval-learning-card .eval-lp-link {
  grid-area: link; justify-self: end; padding: 7px 12px; border-radius: 8px; border: 1px solid #dbe4f3; background: #f5f8ff;
  color: #1d4ed8; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
#eval-report-page .eval-learning-card .eval-lp-link:hover { background: #eaf1ff; }
@media (max-width: 640px) {
  #eval-report-page .eval-learning-card { grid-template-columns: 1fr; grid-template-areas: "title" "meta" "link"; }
  #eval-report-page .eval-learning-card .eval-lp-link { justify-self: start; margin-top: 8px; }
}

/* Module sections: white headers, readable text, real chevron */
#eval-report-page .eval-acc { border: 1px solid #e5eaf2; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); overflow: hidden; }
#eval-report-page .eval-acc .eval-acc-summary,
#eval-report-page .eval-acc[open] .eval-acc-summary,
#eval-report-page .eval-acc .eval-acc-summary:hover {
  background: #fff; box-shadow: none; padding: 16px 20px; border-bottom: 1px solid transparent;
}
#eval-report-page .eval-acc .eval-acc-summary:hover { background: #f8fafc; }
#eval-report-page .eval-acc[open] .eval-acc-summary { border-bottom-color: #eef2f7; }
#eval-report-page .eval-acc-title { color: #0f172a; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
#eval-report-page .eval-acc-sub { color: #64748b; font-size: 13px; font-weight: 500; margin-left: auto; text-align: right; }
#eval-report-page .eval-acc-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 700; border: 0; }
#eval-report-page .eval-acc-summary::after {
  content: ""; width: 8px; height: 8px; margin: 0 4px 3px 8px; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b;
  transform: rotate(45deg); transition: transform .2s ease; font-size: 0;
}
#eval-report-page .eval-acc[open] .eval-acc-summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
#eval-report-page .eval-acc-body { background: #fafbfd; padding: 16px 20px 20px; }
#eval-report-page .eval-modal-section { background: #fff; border: 1px solid #e5eaf2; border-radius: 12px; box-shadow: none; padding: 20px; }
#eval-report-page .eval-modal-section + .eval-modal-section { margin-top: 12px; }
#eval-report-page .eval-modal-section h4 { color: #0f172a; font-size: 16px; font-weight: 600; margin: 0 0 12px; padding-left: 10px; border-left: 3px solid #2563eb; }
#eval-report-page [data-req-mentor], #eval-report-page [data-to-mentor], #eval-report-page [data-arch-mentor] { font-style: normal; color: #1e293b; }
#eval-report-page .eval-section-empty { color: #64748b; }

/* Footer */
#eval-report-page .eval-rp-footer { align-items: center; }
#eval-report-page .eval-rp-footer h3 { font-size: 16px; font-weight: 600; color: #0f172a; margin: 0; }

/* Hero: score + 2×2 detail tiles; section headings keep their own single bar */
#eval-report-page .eval-hero-grid { grid-template-columns: 220px repeat(2, minmax(0, 1fr)); }
#eval-report-page .eval-hero-meta { grid-column: 2 / -1; }
#eval-report-page .eval-modal-section h4 { border-left: 0; padding-left: 0; }
@media (max-width: 860px) {
  #eval-report-page .eval-hero-grid { grid-template-columns: 1fr 1fr; }
  #eval-report-page .eval-hero-meta { grid-column: 1 / -1; }
}

/* ══ PRISM theme for the report ══════════════════════════════════════════════
   Same language as the Evaluate intro + problem picker: navy panels with ring
   decoration, light white→blue cards, one blue→cyan accent. */
#eval-report-page {
  --rp-navy: #172340;
  --rp-navy-2: #1e2d52;
  --rp-blue: #2563eb;
  --rp-cyan: #38bdf8;
  --rp-card-grad: linear-gradient(145deg, #ffffff 0%, #f5f9ff 60%, #eaf2ff 100%);
  --rp-border: rgba(59, 130, 246, 0.14);
  --rp-ink: #0f172a;
  --rp-muted: #5b6b84;
}
#eval-report-page .eval-rp-scroll { background: linear-gradient(160deg, #fafcff 0%, #f2f6ff 100%); }
#eval-report-page .eval-card { border-color: var(--rp-border); box-shadow: 0 1px 3px rgba(30, 58, 138, 0.06); }

/* Section titles get a small blue→cyan marker */
#eval-report-page .eval-section-title { display: flex; align-items: center; gap: 10px; }
#eval-report-page .eval-section-title::before {
  content: ""; width: 4px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, var(--rp-blue), var(--rp-cyan));
}

/* ── Hero: navy band with rings (mirrors the Evaluate intro panel) ─────── */
#eval-report-page .eval-hero-card {
  position: relative; overflow: hidden; padding: 28px 28px 28px 24px; border: 0;
  background:
    radial-gradient(circle at 92% -10%, rgba(96, 165, 250, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 0% 110%, rgba(56, 189, 248, 0.12) 0%, transparent 40%),
    linear-gradient(160deg, var(--rp-navy) 0%, var(--rp-navy-2) 100%);
  box-shadow: 0 10px 30px rgba(23, 35, 64, 0.22);
  color: #fff;
}
#eval-report-page .eval-hero-card::before,
#eval-report-page .eval-hero-card::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; border: 1px solid rgba(147, 197, 253, 0.16);
}
#eval-report-page .eval-hero-card::before { width: 420px; height: 420px; right: -150px; top: -230px; }
#eval-report-page .eval-hero-card::after { width: 280px; height: 280px; right: -80px; top: -160px; border-color: rgba(147, 197, 253, 0.12); }
#eval-report-page .eval-hero-grid { position: relative; z-index: 1; }
#eval-report-page .eval-hero-label { color: #93c5fd; letter-spacing: 0.1em; }
#eval-report-page .er-score-ring-track { stroke: rgba(255, 255, 255, 0.12); }
#eval-report-page .eval-hero-card .er-ring-number,
#eval-report-page .eval-hero-card .er-ring-number span:first-child { color: #fff; }
#eval-report-page .eval-hero-card .er-ring-label { color: #94a3b8; }
#eval-report-page .eval-hero-eyebrow {
  justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: 0.1em;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #dbeafe;
}
#eval-report-page .eval-hero-title { color: #fff; font-size: 24px; margin-top: 8px; }
#eval-report-page .eval-hero-kv {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; backdrop-filter: blur(2px);
}
#eval-report-page .eval-hero-kv span { color: #94a3b8; }
#eval-report-page .eval-hero-kv strong { color: #fff; font-size: 14px; }

/* ── Performance: one tile per area ───────────────────────────────────── */
#eval-report-page .eval-perf-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
#eval-report-page .eval-perf-item {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 16px;
  background: var(--rp-card-grad); border: 1px solid var(--rp-border); border-radius: 12px;
}
#eval-report-page .eval-perf-item > div:first-child { display: flex; flex-direction: column; gap: 4px; }
#eval-report-page .eval-perf-item strong { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rp-muted); }
#eval-report-page .eval-perf-item span { font-size: 24px; font-weight: 700; color: var(--rp-ink); letter-spacing: -0.02em; }
#eval-report-page .eval-perf-bar { height: 6px; border-radius: 999px; background: rgba(37, 99, 235, 0.1); overflow: hidden; }
#eval-report-page .eval-perf-bar > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rp-blue), var(--rp-cyan)); }
#eval-report-page .eval-perf-meta { margin-top: 14px; }
@media (max-width: 900px) { #eval-report-page .eval-perf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Strengths / improvements ─────────────────────────────────────────── */
#eval-report-page .eval-strength-card { background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%); border-color: rgba(22, 163, 74, 0.18); }
#eval-report-page .eval-improve-card { background: linear-gradient(145deg, #ffffff 0%, #fffbeb 100%); border-color: rgba(217, 119, 6, 0.2); }

/* ── Learning path: problem-card style ────────────────────────────────── */
#eval-report-page .eval-learning-card { background: var(--rp-card-grad); border: 1px solid var(--rp-border); border-left: 1px solid var(--rp-border); position: relative; padding-left: 52px; }
#eval-report-page .eval-learning-card::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 7px;
  background: linear-gradient(135deg, var(--rp-blue), var(--rp-cyan)) center / 100% 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h7a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M22 4h-7a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h8z'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
                linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
#eval-report-page .eval-learning-card .eval-lp-link { background: var(--rp-blue); border-color: var(--rp-blue); color: #fff; }
#eval-report-page .eval-learning-card .eval-lp-link:hover { background: #1d4ed8; }

/* ── Module sections ──────────────────────────────────────────────────── */
#eval-report-page .eval-acc { border-color: var(--rp-border); box-shadow: 0 1px 3px rgba(30, 58, 138, 0.06); }
#eval-report-page .eval-acc-icon { background: linear-gradient(145deg, var(--rp-navy) 0%, #2b4a8f 100%); color: #fff; box-shadow: 0 2px 6px rgba(23, 35, 64, 0.25); }
#eval-report-page .eval-acc[open] { box-shadow: 0 6px 20px rgba(30, 58, 138, 0.08); }
#eval-report-page .eval-acc[open] .eval-acc-summary { background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%); }
#eval-report-page .eval-acc-body { background: #f5f8ff; }
#eval-report-page .eval-modal-section { border-color: var(--rp-border); }
#eval-report-page [data-req-mentor], #eval-report-page [data-to-mentor] {
  background: linear-gradient(145deg, #eff6ff 0%, #e0ecff 100%); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 10px; padding: 12px 14px;
}

/* ── Footer: navy band like the hero ──────────────────────────────────── */
#eval-report-page .eval-rp-footer {
  border: 0; color: #fff; padding: 22px 24px;
  background: radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.2) 0%, transparent 50%), linear-gradient(160deg, var(--rp-navy) 0%, var(--rp-navy-2) 100%);
  box-shadow: 0 10px 30px rgba(23, 35, 64, 0.2);
}
#eval-report-page .eval-rp-footer h3 { color: #fff; }
#eval-report-page .eval-rp-footer .eval-rp-btn--secondary { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); }
#eval-report-page .eval-rp-footer .eval-rp-btn--secondary:hover { background: rgba(255, 255, 255, 0.16); }
#eval-report-page .eval-rp-footer .eval-rp-btn--primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border: 0; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35); }

/* ── MCQ review: one row per question, readable details ─────────────────── */
#eval-report-page .eval-qa-list, #evaluation-result-modal .eval-qa-list { gap: 8px; }
#eval-report-page .eval-qa-item, #evaluation-result-modal .eval-qa-item {
  padding: 0; border: 1px solid #e5eaf2; border-radius: 12px; background: #fff; box-shadow: none; overflow: hidden;
}
#eval-report-page .eval-qa-item.correct, #evaluation-result-modal .eval-qa-item.correct,
#eval-report-page .eval-qa-item.incorrect, #evaluation-result-modal .eval-qa-item.incorrect,
#eval-report-page .eval-qa-item.okay, #evaluation-result-modal .eval-qa-item.okay,
#eval-report-page .eval-qa-item.unanswered, #evaluation-result-modal .eval-qa-item.unanswered { background: #fff; }
#eval-report-page .eval-qa-item[open], #evaluation-result-modal .eval-qa-item[open] { border-color: #cdd9ec; box-shadow: 0 4px 14px rgba(30, 58, 138, 0.06); }
#eval-report-page .eval-qa-header, #evaluation-result-modal .eval-qa-header {
  display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
#eval-report-page .eval-qa-header::-webkit-details-marker, #evaluation-result-modal .eval-qa-header::-webkit-details-marker { display: none; }
#eval-report-page .eval-qa-header:hover, #evaluation-result-modal .eval-qa-header:hover { background: #f8fafc; }
#eval-report-page .eval-qa-icon, #evaluation-result-modal .eval-qa-icon {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
#eval-report-page .eval-qa-icon.correct, #evaluation-result-modal .eval-qa-icon.correct { background: #dcfce7; color: #15803d; }
#eval-report-page .eval-qa-icon.incorrect, #evaluation-result-modal .eval-qa-icon.incorrect { background: #fee2e2; color: #b91c1c; }
#eval-report-page .eval-qa-icon.okay, #evaluation-result-modal .eval-qa-icon.okay { background: #ffedd5; color: #9a3412; }
#eval-report-page .eval-qa-icon.unanswered, #evaluation-result-modal .eval-qa-icon.unanswered { background: #f1f5f9; color: #64748b; }
#eval-report-page .eval-qa-num, #evaluation-result-modal .eval-qa-num { font-size: 13px; font-weight: 600; color: #0f172a; white-space: nowrap; }
#eval-report-page .eval-qa-preview, #evaluation-result-modal .eval-qa-preview { font-size: 14px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eval-report-page .eval-qa-item[open] .eval-qa-preview, #evaluation-result-modal .eval-qa-item[open] .eval-qa-preview { visibility: hidden; }
#eval-report-page .eval-qa-status, #evaluation-result-modal .eval-qa-status { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
#eval-report-page .eval-qa-status.correct, #evaluation-result-modal .eval-qa-status.correct { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
#eval-report-page .eval-qa-status.incorrect, #evaluation-result-modal .eval-qa-status.incorrect { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
#eval-report-page .eval-qa-status.okay, #evaluation-result-modal .eval-qa-status.okay { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
#eval-report-page .eval-qa-status.unanswered, #evaluation-result-modal .eval-qa-status.unanswered { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
#eval-report-page .eval-qa-body, #evaluation-result-modal .eval-qa-body { padding: 4px 16px 16px 54px; display: grid; gap: 12px; }
#eval-report-page .eval-qa-text, #evaluation-result-modal .eval-qa-text { margin: 0; font-size: 16px; line-height: 1.55; font-weight: 600; color: #0f172a; }
#eval-report-page .eval-qa-rows, #evaluation-result-modal .eval-qa-rows { display: grid; gap: 6px; }
#eval-report-page .eval-qa-row, #evaluation-result-modal .eval-qa-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; }
#eval-report-page .eval-qa-k, #evaluation-result-modal .eval-qa-k { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
#eval-report-page .eval-qa-v, #evaluation-result-modal .eval-qa-v { font-size: 14px; line-height: 1.5; color: #0f172a; font-weight: 500; }
#eval-report-page .eval-qa-v.is-right, #evaluation-result-modal .eval-qa-v.is-right { color: #15803d; }
#eval-report-page .eval-qa-v.is-wrong, #evaluation-result-modal .eval-qa-v.is-wrong { color: #b91c1c; text-decoration: line-through; text-decoration-color: rgba(185, 28, 28, 0.4); }
#eval-report-page .eval-qa-v.is-empty, #evaluation-result-modal .eval-qa-v.is-empty { color: #64748b; font-style: italic; }
#eval-report-page .eval-qa-why, #evaluation-result-modal .eval-qa-why { padding: 12px 14px; border-radius: 10px; background: #f5f8ff; border: 1px solid #dfe8f7; display: grid; gap: 4px; }
#eval-report-page .eval-qa-why p, #evaluation-result-modal .eval-qa-why p { margin: 0; font-size: 14px; line-height: 1.6; color: #1e293b; }
@media (max-width: 640px) {
  #eval-report-page .eval-qa-header, #evaluation-result-modal .eval-qa-header { grid-template-columns: 26px 1fr auto; }
  #eval-report-page .eval-qa-preview, #evaluation-result-modal .eval-qa-preview { display: none; }
  #eval-report-page .eval-qa-body, #evaluation-result-modal .eval-qa-body { padding-left: 16px; }
  #eval-report-page .eval-qa-row, #evaluation-result-modal .eval-qa-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Readable text inside module sections ────────────────────────────────── */
#eval-report-page .eval-modal-section .meta,
#eval-report-page .eval-modal-section .meta strong,
#eval-report-page .eval-modal-section li { color: #1e293b; }
#eval-report-page [data-to-avg] { font-size: 14px; }
#eval-report-page [data-to-avg] strong { color: #0f172a !important; font-weight: 600; }
#eval-report-page [data-to-avg-text] { color: #2563eb; font-weight: 700; }

/* AI Mentor panel with nothing in it gets an empty state, not a blank box */
#eval-report-page .eval-ai-mentor-panel:not(:has(li)):not(:has(.eval-section-empty)):not(:has(.er-rich))::before {
  content: "Mentor feedback appears here once your answers have been analysed.";
  display: block; text-align: center; color: #64748b; font-size: 14px; line-height: 1.55; padding: 18px 12px;
}

#eval-report-page .eval-hero-logo { position: absolute; top: 26px; right: 28px; z-index: 2; height: 26px; width: auto; display: block; pointer-events: none; }
#eval-report-page .eval-rp-topbar-right { align-items: center; }

#eval-report-page .eval-empty-note {
  margin: 0; padding: 14px 16px; border-radius: 10px; background: #f8fafc; border: 1px dashed #cbd5e1;
  color: #475569; font-size: 14px; line-height: 1.55;
}

/* Requirements are saved one per line ("1. …\n2. …"); keep the lines. */
#eval-report-page [data-fr-text],
#eval-report-page [data-nfr-text] { display: block; margin: 4px 0 10px; white-space: pre-line; line-height: 1.6; }

/* Hero header, one row: eyebrow left, PRISM logo centre, problem name right. */
#eval-report-page .eval-hero-head {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#eval-report-page .eval-hero-head > span:first-child { display: none; }
#eval-report-page .eval-hero-head .eval-hero-meta { display: contents; }
#eval-report-page .eval-hero-head .eval-hero-eyebrow { grid-column: 1; grid-row: 1; justify-self: start; font-size: 11px; }
#eval-report-page .eval-hero-head .eval-hero-logo {
  grid-column: 2; grid-row: 1; position: static; height: 40px; width: auto; display: block; pointer-events: none;
}
#eval-report-page .eval-hero-head .eval-hero-title {
  grid-column: 3; grid-row: 1; justify-self: end; margin: 0; font-size: 24px; line-height: 1.25; text-align: right; overflow-wrap: anywhere;
}

/* Body: score column beside a 2×2 of compact tiles */
#eval-report-page .eval-hero-grid { grid-template-columns: 200px repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: center; }
#eval-report-page .eval-hero-grid .eval-hero-score { grid-row: 1 / span 2; }
#eval-report-page .eval-hero-grid .eval-hero-kv { padding: 14px 16px; gap: 4px; }
@media (max-width: 860px) {
  #eval-report-page .eval-hero-head { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
  #eval-report-page .eval-hero-head .eval-hero-logo { grid-column: 1; grid-row: 1; height: 34px; }
  #eval-report-page .eval-hero-head .eval-hero-eyebrow { grid-column: 1; grid-row: 2; justify-self: center; }
  #eval-report-page .eval-hero-head .eval-hero-title { grid-column: 1; grid-row: 3; justify-self: center; text-align: center; font-size: 20px; }
  #eval-report-page .eval-hero-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
  #eval-report-page .eval-hero-grid .eval-hero-score { grid-row: auto; grid-column: 1 / -1; }
}

/* ── Rich architecture review + AI mentor debrief (report-sections.js) ── */
#eval-report-page [data-arch-mentor].is-rich { padding: 0; background: none; border: 0; font-style: normal; }
#eval-report-page .er-rich { display: grid; gap: 18px; font-size: 14px; line-height: 1.65; color: #334155; }
#eval-report-page .er-rich p { margin: 0; }
#eval-report-page .er-lead { font-size: 14px; line-height: 1.65; color: #1e293b; }
#eval-report-page .er-sec { display: grid; gap: 8px; }
#eval-report-page .er-sec h5 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b;
}
#eval-report-page .er-sec--good h5 { color: #15803d; }
#eval-report-page .er-sec--gap h5 { color: #b45309; }
#eval-report-page .er-list,
#eval-report-page .er-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
#eval-report-page .er-list li::marker { color: #94a3b8; }
#eval-report-page .er-steps li { padding-left: 4px; }
#eval-report-page .er-steps li::marker { font-weight: 700; color: #2563eb; }
#eval-report-page .er-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#eval-report-page .er-items li {
  padding: 12px 14px; border: 1px solid #e5eaf2; border-radius: 10px; background: #f8fafc; display: grid; gap: 4px;
}
#eval-report-page .er-items li strong { font-size: 14px; font-weight: 600; color: #0f172a; }
#eval-report-page .er-items li p { color: #475569; }
#eval-report-page .er-study { font-size: 13px; font-weight: 500; color: #2563eb; }
#eval-report-page .er-callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
#eval-report-page .er-callouts:empty { display: none; }
#eval-report-page .er-callout { padding: 12px 14px; border-radius: 10px; border: 1px solid; display: grid; gap: 4px; }
#eval-report-page .er-callout strong { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#eval-report-page .er-callout p { color: #1e293b; }
#eval-report-page .er-callout--risk { background: #fef2f2; border-color: #fecaca; }
#eval-report-page .er-callout--risk strong { color: #b91c1c; }
#eval-report-page .er-callout--next { background: #eff6ff; border-color: #bfdbfe; }
#eval-report-page .er-callout--next strong { color: #1d4ed8; }
#eval-report-page .er-overview { display: grid; gap: 10px; justify-items: start; }
#eval-report-page .er-chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid #dbe3ee;
  background: #f8fafc; font-size: 13px; font-weight: 600; color: #334155;
}
#eval-report-page .er-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#eval-report-page .er-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
#eval-report-page .er-pair-card { padding: 12px 14px; border-radius: 10px; border: 1px solid; display: grid; gap: 4px; }
#eval-report-page .er-pair-card span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#eval-report-page .er-pair-card p { color: #1e293b; }
#eval-report-page .er-pair-card--good { background: #f0fdf4; border-color: #bbf7d0; }
#eval-report-page .er-pair-card--good span { color: #15803d; }
#eval-report-page .er-pair-card--gap { background: #fffbeb; border-color: #fde68a; }
#eval-report-page .er-pair-card--gap span { color: #b45309; }
#eval-report-page .er-areas { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; }
#eval-report-page .er-areas dt { font-weight: 600; color: #0f172a; }
#eval-report-page .er-areas dd { margin: 0; color: #334155; }
@media (max-width: 640px) {
  #eval-report-page .er-areas { grid-template-columns: 1fr; gap: 2px; }
  #eval-report-page .er-areas dd { margin-bottom: 8px; }
}
/* Inside the rich sections, use real list markers at body size. */
#eval-report-page .er-rich li { position: static; padding-left: 0; margin: 0; font-size: 14px; line-height: 1.6; color: #334155; }
#eval-report-page .er-rich li::before { content: none; display: none; }
#eval-report-page .er-rich .er-list li { list-style: disc; }
#eval-report-page .er-rich .er-steps li { list-style: decimal; padding-left: 4px; }
#eval-report-page .er-rich .er-items li { list-style: none; padding: 12px 14px; }

/* ── css/shared/simulation-output.css ── */
#simulation-content .output {
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border-radius: 12px;
}

/* zoom removed — caused sub-pixel gap between .panel-header and tab bar */

.layout {
  --right-panel-w: clamp(277px, 22.7vw, 378px);
}

@media (max-width: 1280px) {
  .layout {
    --right-panel-w: clamp(252px, 20.2vw, 327px);
  }
}

@media (max-width: 1100px) {
  .layout {
    --right-panel-w: clamp(227px, 18.9vw, 289px);
  }
}

.simout-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #0f172a;
}

#simulation-content:not(.hidden) .simout-panel {
  animation: simout-slide-in 280ms ease-out both;
}

@keyframes simout-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

.simout-sticky-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #0f172a;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

.simout-sticky-header strong {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.simout-close-btn {
  border: none;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 5px 8px;
}

.simout-scroll {
  overflow-y: auto;
  height: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simout-block {
  border: 1px solid #dbe5f3;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.simout-block-head {
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

.simout-block-title {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  color: #475569;
}

.simout-section-subtitle {
  margin: 0;
  padding: 10px 14px 8px;
  font-size: var(--fs-xss);
  color: var(--color-text-secondary, #6B7280);
  line-height: 1.5;
  font-style: italic;
}

.simout-block-caret {
  color: #64748b;
  font-size: var(--fs-sm);
  transition: transform 160ms ease;
}

.simout-block.is-open .simout-block-caret {
  transform: rotate(180deg);
}

.simout-block:not(.is-open) .simout-block-body {
  display: none;
}

.simout-tone-score { border-top: 4px solid #2563eb; background: linear-gradient(180deg, #f8fbff, #ffffff 45%); }
.simout-tone-issues { border-top: 4px solid #ef4444; background: linear-gradient(180deg, #fff8f8, #ffffff 45%); }
.simout-tone-performance { border-top: 4px solid #16a34a; background: linear-gradient(180deg, #f7fff9, #ffffff 45%); }
.simout-tone-nodes { border-top: 4px solid #0284c7; background: linear-gradient(180deg, #f6fcff, #ffffff 45%); }
.simout-tone-smells { border-top: 4px solid #d97706; background: linear-gradient(180deg, #fffbf2, #ffffff 45%); }
.simout-tone-recs { border-top: 4px solid #7c3aed; background: linear-gradient(180deg, #fbf8ff, #ffffff 45%); }
.simout-tone-risks { border-top: 4px solid #dc2626; background: linear-gradient(180deg, #fff5f5, #ffffff 45%); }

.simout-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.simout-score-hero {
  padding: 10px;
  background: #fff;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.simout-score-hero .simout-score-oneliner {
  font-size: var(--fs-md);
  color: var(--text);
  font-style: italic;
  line-height: 1.45;
}

.simout-score-main {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ── Dial ──────────────────────────────────────────── */
.simout-score-dial {
  position: relative;
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(59,130,246,0.18));
}

.simout-score-svg {
  width: 128px;
  height: 128px;
  transform: rotate(-90deg);
}

.simout-score-track,
.simout-score-zones,
.simout-score-fill {
  fill: none;
  cx: 61;
  cy: 61;
  r: 52;
}

.simout-score-track { stroke: #E2E8F0; stroke-width: 11; }
.simout-score-zones { stroke: #cbd5e1; stroke-width: 6; stroke-dasharray: 326.7; opacity: 0.4; }
.simout-score-fill {
  stroke-width: 11;
  stroke-linecap: round;
  stroke: #3B82F6;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1), stroke 0.5s;
}

/* Dial center label */
.simout-score-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}

.simout-score-num {
  font-size: var(--fs-xxl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0F172A;
}

.simout-score-den {
  font-size: var(--fs-xss);
  color: #94A3B8;
  font-weight: 600;
}

/* ── Meta (right of dial) ─────────────────────────── */
.simout-score-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.simout-score-verdict {
  font-size: var(--fs-xs);
  font-weight: 700;
}

.simout-score-sub {
  font-size: var(--fs-xs);
  color: #64748b;
  margin-top: 2px;
}

/* Verdict badge (overrides .simout-verdict inline) */
.simout-verdict {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  width: fit-content;
}

/* One-liner */
.simout-score-oneliner {
  font-size: var(--fs-xs);
  color: #475569;
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}

/* Issue pills */
.simout-pill-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.simout-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: var(--fs-xs);
  font-weight: 700;
  border: 1.5px solid transparent;
}

.simout-pill.sev-critical {
  background: #FEE2E2;
  color: #B91C1C;
}
.simout-pill.sev-serious {
  background: #FEF3C7;
  color: #B45309;
}
.simout-pill.sev-suggestion {
  background: #DBEAFE;
  color: #1D4ED8;
}

/* Legacy */
.simout-pill--critical { background: #fee2e2; color: #b91c1c; }
.simout-pill--serious { background: #fef3c7; color: #b45309; }
.simout-pill--suggestion { background: #dbeafe; color: #1d4ed8; }

.simout-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.simout-filter-tab {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  border-radius: 999px;
  font-size: var(--fs-xss);
  font-weight: 700;
  padding: 4px 9px;
  cursor: pointer;
}

.simout-filter-tab.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.simout-section-title {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.simout-issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}

.simout-issues .prism-skeleton-row,
.simout-issues .prism-skeleton-line,
.simout-issues .prism-skeleton-card {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.simout-issue-card {
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
  animation: simout-issue-in 180ms ease-out forwards;
  padding: 8px 10px;
}

#simulation-content .simout-issues .simout-issue-card,
#simulation-content .simout-issues .simout-issue-card * {
  color: #0f172a !important;
}

@keyframes simout-issue-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.simout-issue-card.sev-critical { border-left-color: #ef4444; }
.simout-issue-card.sev-serious { border-left-color: #f59e0b; }
.simout-issue-card.sev-suggestion { border-left-color: #3b82f6; }

.simout-issue-row { margin-bottom: 4px; }

.simout-issue-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.simout-issue-sev {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.simout-issue-cat {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: #1f2937;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 2px 7px;
}

.simout-issue-msg {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.simout-issue-impact {
  margin: 4px 0 0;
  color: #475569;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-sm);
}

.simout-issue-extra {
  margin-top: 6px;
  color: #475569;
  font-size: var(--fs-xss);
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.simout-issue-details-lite {
  margin-top: 4px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 4px;
}

.simout-issue-details-lite summary {
  cursor: pointer;
  color: #2563eb;
  font-size: var(--fs-xss);
  font-weight: 700;
  list-style: none;
}

.simout-issue-details-lite summary::-webkit-details-marker {
  display: none;
}

.simout-issue-details-lite summary::before {
  content: "▸ ";
}

.simout-issue-details-lite[open] summary::before {
  content: "▾ ";
}

.simout-jump-btn {
  margin-top: 6px;
  border: none;
  border-radius: 7px;
  background: #e2e8f0;
  color: #0f172a;
  padding: 3px 7px;
  font-size: var(--fs-xss);
  cursor: pointer;
}

.simout-jump-btn:hover { background: #cbd5e1; }

.simout-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.simout-metric-tile {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 10px 8px;
}

.simout-metric-value {
  font-weight: 800;
  font-size: var(--fs-subhead);
  color: #0f172a;
}

.simout-metric-label {
  font-size: var(--fs-xss);
  color: #64748b;
}

.simout-metric-tile.lat-ok .simout-metric-value { color: #16a34a; }
.simout-metric-tile.lat-warn .simout-metric-value { color: #d97706; }
.simout-metric-tile.lat-bad .simout-metric-value { color: #dc2626; }

.simout-sparkline {
  width: 100%;
  height: 18px;
  margin-top: 6px;
}

.simout-node-table-wrap {
  overflow: auto;
}

.simout-node-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}

.simout-node-table th,
.simout-node-table td {
  padding: 7px 6px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: middle;
}

.simout-node-table th button {
  border: none;
  background: transparent;
  color: #475569;
  font-size: var(--fs-xss);
  font-weight: 700;
  cursor: pointer;
}

.simout-node-row {
  cursor: pointer;
}

.simout-node-row:hover {
  background: #eff6ff;
}

.simout-util-bar {
  width: 54px;
  height: 7px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.simout-util-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
}

.simout-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xss);
}

.simout-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.simout-status--healthy .simout-status-dot { background: #22c55e; }
.simout-status--warning .simout-status-dot { background: #f59e0b; }
.simout-status--critical .simout-status-dot { background: #ef4444; }

.simout-smells {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simout-smell-card {
  border-radius: 8px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #78350f;
  padding: 10px;
}

.simout-smell-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.simout-rec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.simout-rec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: #334155;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

.simout-rec-item.done {
  opacity: 0.65;
  text-decoration: line-through;
}

.simout-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  font-size: var(--fs-sm);
  padding: 10px;
  background: #ffffff;
}

.node.pulse-highlight {
  animation: simout-pulse 620ms ease-in-out 3;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);
}

@keyframes simout-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.48); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.22); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* ===== Simulation Output Dashboard v3 (SRE cockpit overrides) ===== */
.simout-panel {
  --bg: #ffffff;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --line: #E5E7EB;
  --text: #111827;
  --muted: #6B7280;
  --critical: #E63946;
  --warning: #F5A623;
  --good: #2563EB;
  --info: #4CC9F0;
  background: var(--bg);
  color: var(--text);
  max-width: 420px;
  width: 100%;
  border-left: 1px solid var(--line);
  font-size: var(--fs-base);
}

.simout-panel[data-theme="light"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef4fb;
  --line: #cdd9e6;
  --text: #142033;
  --muted: #4f6077;
}

.simout-scroll {
  overflow-x: hidden;
  background: var(--bg);
}

.simout-score-track {
  stroke: #E5E7EB;
}

.simout-sticky-header {
  z-index: 10;
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding: 8px;
}

.simout-head-actions {
  display: inline-flex;
  gap: 6px;
}

.simout-icon-btn {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 4px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.simout-summary-bar {
  position: sticky;
  top: 0;
  z-index: 8;
  background: #FFFFFF;
  border: none;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.simout-summary-critical { color: var(--critical); font-weight: 700; }

.simout-block {
  border-color: var(--line);
  background: var(--surface);
  border-radius: 4px;
}

.simout-block-head {
  border-bottom: 1px solid var(--line);
  background: #FFFFFF;
  color: var(--text);
  min-height: 34px;
  padding: 8px 10px;
}

.simout-block-title,
.simout-block-caret {
  color: var(--text);
}


.simout-mono,
.simout-metric-value,
.simout-score-num,
.simout-fix-command code,
.simout-node-table td:nth-child(2),
.simout-node-table td:nth-child(3) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.simout-score-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* verdict color overrides (band-specific) applied via JS class on .simout-verdict */
.simout-pill-row { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.simout-pill.sev-critical { background:#FEE2E2; color:#B91C1C; }
.simout-pill.sev-serious  { background:#FEF3C7; color:#B45309; }
.simout-pill.sev-suggestion { background:#DBEAFE; color:#1D4ED8; }

.simout-issues-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.simout-filter-tab,
.simout-fixall-btn,
.simout-copy-btn,
.simout-jump-btn {
  border: 1px solid var(--line);
  background: #F3F4F6;
  color: var(--text);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: var(--fs-xs);
}

.simout-filter-tab.active {
  color: #FFFFFF;
  border-color: #374151;
  background: #374151;
}

.simout-filter-tab[data-filter="critical"].active {
  background: var(--critical);
  border-color: var(--critical);
}

.simout-filter-tab[data-filter="serious"].active {
  background: var(--warning);
  border-color: var(--warning);
  color: #111827;
}

.simout-filter-tab[data-filter="suggestion"].active {
  background: var(--info);
  border-color: var(--info);
  color: #111827;
}

.simout-fixall-btn {
  background: #FFFFFF;
  border: 1px solid #93C5FD;
  color: #2563EB;
}

.simout-issues {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 6px;
}

.simout-issue-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-left: 4px solid var(--info);
  border-radius: 4px;
  padding: 8px;
  box-shadow: none;
}

#simulation-content .simout-issues .simout-issue-card,
#simulation-content .simout-issues .simout-issue-card * {
  color: var(--text) !important;
}

.simout-issue-card.sev-critical { border-left-color: var(--critical); }
.simout-issue-card.sev-serious { border-left-color: var(--warning); }
.simout-issue-card.sev-suggestion { border-left-color: var(--info); }
.simout-issue-card.is-resolved { opacity: 0.45; }

.simout-issue-headline {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
  font-size: var(--fs-sm);
}

.simout-sev-badge,
.simout-rule-tag,
.simout-chip,
.simout-effort,
.simout-delta {
  border: 1px solid var(--line);
  background: #FFFFFF;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: var(--fs-xss);
}

.simout-sev-badge.sev-critical { color: var(--critical); }
.simout-sev-badge.sev-serious { color: var(--warning); }
.simout-sev-badge.sev-suggestion { color: var(--info); }

.simout-issue-title,
.simout-issue-impact,
.simout-smell-item,
.simout-trade-card,
.simout-rec-item label {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.simout-affected-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.simout-fix-details summary { cursor: pointer; color: var(--info); }
.simout-fix-command { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.simout-bottleneck-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.simout-bottleneck-list li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid var(--line);
  padding: 6px 8px;
  background: #FFFFFF;
}

.simout-bottleneck-list li.is-hot { border-left: 3px solid var(--critical); }

.simout-metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.simout-metric-tile {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 8px;
}

.simout-metric-label,
.simout-score-sub,
.simout-empty { color: var(--muted); }

.simout-node-table th,
.simout-node-table td { border-bottom-color: var(--line); }

.simout-node-table th button,
.simout-empty {
  color: var(--text);
  background: transparent;
}

.simout-node-row:hover { background: color-mix(in oklab, var(--surface-2) 80%, #ffffff); }
.simout-node-row:hover { background: #F9FAFB; }

.simout-node-row.is-outlier td:first-child::after {
  content: " ⚠";
  color: var(--warning);
}

.simout-util-bar { background: color-mix(in oklab, var(--surface-2) 70%, #ffffff); }
.simout-util-fill { background: linear-gradient(90deg, var(--info), #3b82f6); }

.simout-trade-grid { display: grid; gap: 6px; }

.simout-trade-card {
  border: 1px solid var(--line);
  background: #FFFFFF;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.simout-trade-card .gain strong { color: var(--good); }
.simout-trade-card .cost strong { color: var(--warning); }

.simout-smells { gap: 6px; }

.simout-smell-item {
  border: 1px solid var(--line);
  background: #FFFFFF;
  padding: 8px;
}

.simout-smell-item .smell-title { font-weight: 700; margin-bottom: 4px; }

.simout-rec-list { gap: 6px; }

.simout-rec-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  color: var(--text);
  border-radius: 4px;
  font-size: var(--fs-xs);
}

.simout-rec-item.done { opacity: 0.65; text-decoration: line-through; }
.simout-effort { color: var(--warning); }
.simout-delta { color: var(--good); }

@media (max-width: 520px) {
  .simout-panel { max-width: 420px; }
  .simout-metrics-grid { grid-template-columns: 1fr; }
  .simout-trade-card { grid-template-columns: 1fr; }
}

/* ===== Section refactor overrides (issues/bottlenecks/violations/smells/recs) ===== */
.simout-panel {
  --color-background-primary: #FFFFFF;
  --color-background-secondary: #FFFFFF;
  --color-surface-muted: #F9FAFB;
  --color-border-tertiary: #E5E7EB;
  --color-border-secondary: #D1D5DB;
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-critical: #E63946;
  --color-serious: #F5A623;
  --color-suggestion: #4CC9F0;
  --color-success: #3B6D11;
  --color-success-bg: #EAF3DE;
  --color-tab-inactive-bg: #F3F4F6;
  --color-tab-active-bg: #111827;
  --color-button-outline: #4CC9F0;
  --color-info: #185FA5;
  color: var(--color-text-primary);
}

.simout-panel,
.simout-panel button,
.simout-panel input,
.simout-panel label,
.simout-panel td,
.simout-panel th {
  font-size: var(--fs-md);
}

.simout-summary-bar {
  background: var(--color-background-primary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
}

.simout-scroll {
  background: #FFFFFF;
}

.simout-summary-bar,
.simout-block,
.simout-issue-card,
.simout-violation-card,
.simout-smell-item,
.simout-rec-item,
.simout-bottleneck-legend {
  box-shadow: none;
}

.simout-block {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 12px;
  background: var(--color-background-primary);
  background-image: none;
}

.simout-block-head {
  background: #FFFFFF;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  padding: 10px 12px;
}

.simout-head-left,
.simout-head-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.simout-head-left {
  min-width: 0;
  flex: 1;
}

.simout-head-right {
  flex-shrink: 0;
}

.simout-block-title {
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simout-block-summary {
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  font-weight: 400;
}

.simout-block-caret {
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
}

.simout-health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.simout-health-dot.dot-issues { background: var(--color-critical); }
.simout-health-dot.dot-bottlenecks { background: var(--color-serious); }
.simout-health-dot.dot-smells { background: var(--color-suggestion); }
.simout-health-dot.dot-security { background: #7C3AED; }
.simout-health-dot.dot-recs,
.simout-health-dot.dot-readiness,
.simout-health-dot.dot-performance { background: #14B8A6; }
.simout-health-dot.dot-risks { background: #dc2626; }

/* All block bodies use zero base padding — each child component owns its own
   14px horizontal gutter so the left edge is perfectly consistent. */

.simout-issue-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
}

.simout-issue-summary {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 8px;
  padding: 8px;
  display: grid;
  gap: 4px;
  background: var(--color-background-primary);
}

.simout-issue-summary .label {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.simout-issue-summary .count {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.simout-issue-summary.sev-critical .label,
.simout-issue-summary.sev-critical .count { color: var(--color-critical); }
.simout-issue-summary.sev-serious .label,
.simout-issue-summary.sev-serious .count { color: var(--color-serious); }
.simout-issue-summary.sev-suggestion .label,
.simout-issue-summary.sev-suggestion .count { color: var(--color-suggestion); }

.simout-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.simout-filter-tab {
  border: 0.5px solid var(--color-border-tertiary);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  border-radius: 20px;
  font-size: var(--fs-sm);
  font-weight: 400;
}

.simout-filter-tab.active {
  background: var(--color-tab-active-bg);
  border-color: var(--color-tab-active-bg);
  color: var(--color-background-primary);
}

.simout-issues-list {
  display: grid;
  gap: 8px;
}

.simout-issue-card {
  border: 0.5px solid var(--color-border-tertiary);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--color-background-primary);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.simout-sev-badge,
.simout-rule-tag,
.simout-chip,
.simout-b-blast {
  border-radius: 20px;
  font-size: var(--fs-sm);
  font-weight: 400;
  border: 0.5px solid var(--color-border-tertiary);
  padding: 2px 8px;
}

.simout-sev-badge {
  font-weight: 700;
}

.simout-sev-badge.sev-critical { background: #FCEBEB; color: #A32D2D; }
.simout-sev-badge.sev-serious { background: #FAEEDA; color: #854F0B; }
.simout-sev-badge.sev-suggestion { background: #E6F1FB; color: #185FA5; }

.simout-rule-tag,
.simout-chip {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.simout-rule-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.simout-issue-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.simout-fix-panel {
  display: none;
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 8px;
  background: var(--color-surface-muted);
  padding: 8px;
}

.simout-fix-panel.is-open {
  display: block;
}

.simout-issue-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.simout-view-fix-btn {
  border: none;
  background: #185FA5;
  color: var(--color-info);
  font-size: var(--fs-md);
  font-weight: 500;
}

.simout-bottleneck-list {
  display: grid;
  gap: 8px;
}

.simout-impact-group {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 8px;
  background: var(--color-background-primary);
  overflow: hidden;
}

.simout-bottleneck-hint {
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  margin: 0 0 10px 0;
  line-height: 1.5;
}

.simout-impact-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--color-surface-muted);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.simout-impact-group summary::-webkit-details-marker {
  display: none;
}

.simout-impact-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.simout-impact-tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.simout-impact-tier-dot.tier-high   { background: #A32D2D; }
.simout-impact-tier-dot.tier-medium { background: #854F0B; }
.simout-impact-tier-dot.tier-low    { background: #3B6D11; }

.simout-impact-tier-name {
  font-weight: 600;
  font-size: var(--fs-md);
  flex-shrink: 0;
}

.simout-impact-tier-sub {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simout-impact-group-count {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 20px;
  padding: 1px 8px;
  color: var(--color-text-secondary);
}

.simout-impact-group-body {
  padding: 0 10px;
}

.simout-bottleneck-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}

.simout-bottleneck-row:last-child {
  border-bottom: none;
}

.simout-b-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.simout-b-name {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simout-b-sub {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  font-weight: 400;
}

.simout-b-tier-badge {
  flex-shrink: 0;
  border-radius: 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 2px 10px;
  letter-spacing: 0.03em;
}
.simout-b-tier-badge.tier-high   { background: #FCEBEB; color: #A32D2D; }
.simout-b-tier-badge.tier-medium { background: #FAEEDA; color: #854F0B; }
.simout-b-tier-badge.tier-low    { background: #EAF3DE; color: #3B6D11; }

.simout-bolt {
  color: var(--color-serious);
  margin-right: 4px;
}

.simout-btable-group {
  margin: 0 0 12px;
  border-radius: 0;
  overflow: hidden;
  border: none;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  box-shadow: none;
}

.simout-btable-group:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.simout-btable-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-md);
  font-weight: 600;
  margin-bottom: 6px;
}

.simout-btable-group-header.tier-high   { color: #A32D2D; }
.simout-btable-group-header.tier-medium { color: #854F0B; }
.simout-btable-group-header.tier-low    { color: #3B6D11; }

.simout-btable-tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.simout-btable-tier-dot.tier-high   { background: #A32D2D; }
.simout-btable-tier-dot.tier-medium { background: #854F0B; }
.simout-btable-tier-dot.tier-low    { background: #3B6D11; }

.simout-btable-group-count {
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 20px;
  padding: 1px 7px;
  color: var(--color-text-secondary);
  margin-left: 2px;
}

.simout-btable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  table-layout: fixed;
}

/* Tier accent stripe on left edge of each group */
.simout-btable-group[data-tier="high"]   > .simout-btable tbody tr td:first-child { border-left: 3px solid #E24B4A; }
.simout-btable-group[data-tier="medium"] > .simout-btable tbody tr td:first-child { border-left: 3px solid #EF9F27; }
.simout-btable-group[data-tier="low"]    > .simout-btable tbody tr td:first-child { border-left: 3px solid #5C9E2E; }

.simout-btable thead tr {
  background: var(--color-surface-muted, #F7F8FA);
  border-bottom: 1px solid var(--color-border-tertiary);
}

.simout-btable th {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary, #000000);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simout-btable th.simout-btable-connections,
.simout-btable td.simout-btable-connections {
  text-align: center;
  width: 110px;
  vertical-align: middle;
}

.simout-btable-row {
  border-bottom: 1px solid var(--color-border-tertiary);
  transition: background 0.1s;
}

.simout-btable-row:last-child {
  border-bottom: none;
}

.simout-btable-row:hover {
  background: var(--color-background-secondary, #F9FAFB);
}

.simout-btable-name {
  padding: 10px 14px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.simout-btable td.simout-btable-connections {
  padding: 8px 14px;
  vertical-align: middle;
  text-align: center;
}

.simout-btable-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 4px 12px;
  min-width: 58px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.simout-btable-count.tier-high   { background: #FCEBEB; color: #A32D2D; border: 1px solid #F5C5C5; }
.simout-btable-count.tier-medium { background: #FEF3E2; color: #854F0B; border: 1px solid #F5D99A; }
.simout-btable-count.tier-low    { background: #EDFAE8; color: #3B6D11; border: 1px solid #B3DDA0; }

.simout-tone-score,
.simout-tone-issues,
.simout-tone-security,
.simout-tone-performance,
.simout-tone-nodes,
.simout-tone-smells,
.simout-tone-recs {
  background: var(--color-background-primary) !important;
}

.simout-security-list {
  display: grid;
  gap: 8px;
}

.simout-security-card {
  border-left: 0 !important;
  background: #FBF7FF;
}

.simout-security-list {
  display: grid;
  gap: 8px;
}

.simout-security-card {
  border-left: 0 !important;
  background: #FBF7FF;
}

.simout-bottleneck-legend .legend-title {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.simout-bottleneck-legend .legend-scale {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}

.simout-bottleneck-legend .blast-1,
.simout-bottleneck-legend .blast-2,
.simout-bottleneck-legend .blast-4 {
  border-radius: 20px;
  padding: 2px 8px;
}

.simout-bottleneck-legend .blast-1 { background: #EAF3DE; color: #3B6D11; }
.simout-bottleneck-legend .blast-2 { background: #FAEEDA; color: #854F0B; }
.simout-bottleneck-legend .blast-4 { background: #FCEBEB; color: #A32D2D; }

.simout-trade-grid {
  display: grid;
  gap: 8px;
}

.simout-trade-card {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 12px;
  background: var(--color-background-primary);
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.simout-trade-component {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 20px;
  padding: 2px 8px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.simout-comp-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  border: 0.5px solid var(--color-border-tertiary);
}

.simout-comp-icon.tone-db {
  background: #E6F1FB;
  color: #185FA5;
}

.simout-comp-icon.tone-queue {
  background: #FAEEDA;
  color: #854F0B;
}

.simout-comp-icon.tone-cache {
  background: #EAF3DE;
  color: #3B6D11;
}

.simout-comp-icon.tone-worker,
.simout-comp-icon.tone-gateway,
.simout-comp-icon.tone-service {
  background: #F3F4F6;
  color: #4B5563;
}

.simout-violations-stack {
  display: grid;
  gap: 8px;
}

.simout-violation-card {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 8px;
  background: var(--color-background-primary);
  padding: 10px;
}

.simout-violation-card .v-title,
.simout-smell-item .smell-title,
.simout-rec-title {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--color-text-primary);
}

.simout-violation-card .v-copy,
.simout-smell-item,
.simout-rec-desc {
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--color-text-secondary);
}

.simout-smell-item {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 8px;
  background: var(--color-background-primary);
}

.simout-smell-item strong {
  font-weight: 500;
  color: var(--color-text-primary);
}

.simout-smell-item div:last-child {
  color: var(--color-info);
}

.simout-rec-list {
  display: grid;
  gap: 8px;
}

.simout-rec-item {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 8px;
  background: var(--color-background-primary);
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: 8px;
}

.simout-rec-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.simout-rec-icon--healthy {
  background: #EAF3DE;
  color: #3B6D11;
}

.simout-rec-icon--warning {
  background: #FAEEDA;
  color: #854F0B;
}

.simout-rec-copy {
  display: grid;
  gap: 4px;
}

.simout-rec-desc {
  line-height: 1.35;
}

.simout-rec-check {
  margin-top: 2px;
}

/* ===== Dynamic panel resilience + section color coding ===== */
.simout-panel {
  container-type: inline-size;
}

.simout-panel .simout-block {
  overflow: hidden;
}

.simout-panel .simout-tone-score {
  background: #F2FBF5 !important;
  border-left: 3px solid #22C55E;
}

.simout-panel .simout-tone-issues {
  background: #FFF6F7 !important;
  border-left: 3px solid #E63946;
}

.simout-panel .simout-tone-security {
  background: #F8F4FF !important;
  border-left: 3px solid #7C3AED;
}

.simout-panel .simout-tone-performance {
  background: #FFF9EE !important;
  border-left: 3px solid #F5A623;
}

.simout-panel .simout-tone-nodes {
  background: #F4F8FF !important;
  border-left: 3px solid #4C6FFF;
}

.simout-panel .simout-tone-tradeoffs {
  background: #F7F5FF !important;
  border-left: 3px solid #7C3AED;
}

.simout-panel .simout-tone-smells {
  background: #F2FAFF !important;
  border-left: 3px solid #4CC9F0;
}

.simout-panel .simout-tone-recs {
  background: #F4FBF8 !important;
  border-left: 3px solid #14B8A6;
}

.simout-panel .simout-block-head {
  background: rgba(255, 255, 255, 0.82);
}

.simout-issue-summary-row {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.simout-rule-tag {
  max-width: min(64%, 230px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simout-issue-footer {
  flex-wrap: wrap;
}

.simout-view-fix-btn {
  margin-left: auto;
  white-space: nowrap;
}

.simout-node-table {
  min-width: 0;
}

.simout-issue-card,
.simout-issue-card.sev-critical,
.simout-issue-card.sev-serious,
.simout-issue-card.sev-suggestion,
.simout-security-card {
  border-left: 0 !important;
}

@container (max-width: 380px) {
  .simout-block-head {
    padding: 8px 9px;
  }

  .simout-issue-summary-row {
    grid-template-columns: 1fr 1fr;
  }

  .simout-filter-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .simout-issue-headline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .simout-rule-tag {
    max-width: 100%;
  }

  .simout-issue-footer {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .simout-bottleneck-row {
    grid-template-columns: 1fr auto;
  }

  .simout-b-bar,
  .simout-b-pct {
    grid-column: 1 / -1;
  }

  .simout-trade-card {
    grid-template-columns: 1fr;
  }

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

/* ===== Requested neutral section shell + Issues Feed card redesign ===== */
.simout-panel {
  --border-radius-lg: 12px;
  --border-radius-md: 8px;
  background: var(--color-background-primary) !important;
}

.simout-scroll {
  background: var(--color-background-primary) !important;
}

.simout-block {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  overflow: hidden;
}

.simout-panel .simout-tone-score,
.simout-panel .simout-tone-issues,
.simout-panel .simout-tone-security,
.simout-panel .simout-tone-performance,
.simout-panel .simout-tone-nodes,
.simout-panel .simout-tone-tradeoffs,
.simout-panel .simout-tone-smells,
.simout-panel .simout-tone-recs {
  background: var(--color-background-primary) !important;
  border-left: 0 !important;
}

.simout-block-head {
  background: transparent !important;
  border-left: 0 !important;
  border-bottom: 0.5px solid transparent !important;
}

.simout-block.is-open .simout-block-head {
  border-bottom-color: var(--color-border-tertiary) !important;
}

.simout-block-head:hover {
  background: var(--color-background-secondary) !important;
}

/* Issues Feed: structure and styling only */
.simout-tone-issues .simout-block-body {
  padding: 0;
}

.simout-tone-issues .simout-issue-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-bottom: none;
  margin: 0;
  padding: 10px 0 8px;
}

.simout-tone-issues .simout-issue-summary-cell {
  padding: 8px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}

/* Resting tint — always visible, never looks disabled */
.simout-tone-issues .simout-issue-summary-cell.sev-critical  { background: #FEF6F6; border-color: #F5C5C5; }
.simout-tone-issues .simout-issue-summary-cell.sev-serious   { background: #FFFDF5; border-color: #F5E0A0; }
.simout-tone-issues .simout-issue-summary-cell.sev-suggestion { background: #F0F6FF; border-color: #BDD5F5; }

.simout-tone-issues .simout-issue-summary-cell:last-child {
  border-right: 1px solid transparent;
}

.simout-tone-issues .simout-issue-summary-cell:hover {
  filter: brightness(0.96);
}

/* Active / selected state — stronger tint + solid border */
.simout-tone-issues .simout-issue-summary-cell.sev-critical.on   { border-color: #E24B4A; background: #FEF2F2; box-shadow: 0 1px 4px rgba(226,75,74,0.15); }
.simout-tone-issues .simout-issue-summary-cell.sev-serious.on    { border-color: #EF9F27; background: #FFFBEB; box-shadow: 0 1px 4px rgba(239,159,39,0.15); }
.simout-tone-issues .simout-issue-summary-cell.sev-suggestion.on { border-color: #378ADD; background: #EFF6FF; box-shadow: 0 1px 4px rgba(55,138,221,0.15); }

/* Dim zero-count inactive cells */
.simout-tone-issues .simout-issue-summary-cell.count-zero:not(.on) { opacity: 0.55; }

.simout-tone-issues .simout-issue-summary-cell .label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  margin-bottom: 5px;
}

.simout-tone-issues .simout-issue-summary-cell .count {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
}

.simout-tone-issues .simout-issue-summary-cell .bar {
  display: block;
  height: 2px;
  border-radius: 2px;
}

/* Inactive — muted tier-colored text (same as security) */
.simout-tone-issues .simout-issue-summary-cell .label { color: var(--color-text-secondary, #6B7280); }
.simout-tone-issues .simout-issue-summary-cell .count { color: var(--color-text-primary, #111827); }
.simout-tone-issues .simout-issue-summary-cell.sev-critical .label  { color: #C96060; }
.simout-tone-issues .simout-issue-summary-cell.sev-critical .count  { color: #C96060; }
.simout-tone-issues .simout-issue-summary-cell.sev-critical .bar    { background: #E24B4A; }
.simout-tone-issues .simout-issue-summary-cell.sev-serious .label   { color: #B07820; }
.simout-tone-issues .simout-issue-summary-cell.sev-serious .count   { color: #B07820; }
.simout-tone-issues .simout-issue-summary-cell.sev-serious .bar     { background: #EF9F27; }
.simout-tone-issues .simout-issue-summary-cell.sev-suggestion .label { color: #4A7DC0; }
.simout-tone-issues .simout-issue-summary-cell.sev-suggestion .count { color: #4A7DC0; }
.simout-tone-issues .simout-issue-summary-cell.sev-suggestion .bar  { background: #378ADD; }

/* Active — full saturated color */
.simout-tone-issues .simout-issue-summary-cell.sev-critical.on .label   { color: #A32D2D; }
.simout-tone-issues .simout-issue-summary-cell.sev-critical.on .count   { color: #E24B4A; }
.simout-tone-issues .simout-issue-summary-cell.sev-serious.on .label    { color: #854F0B; }
.simout-tone-issues .simout-issue-summary-cell.sev-serious.on .count    { color: #EF9F27; }
.simout-tone-issues .simout-issue-summary-cell.sev-suggestion.on .label { color: #185FA5; }
.simout-tone-issues .simout-issue-summary-cell.sev-suggestion.on .count { color: #378ADD; }

/* Dim inactive zero-count cells */
.simout-tone-issues .simout-issue-summary-cell.count-zero:not(.on) { opacity: 0.45; }

/* Security panel — mirrors issue panel button style */
.simout-tone-security .simout-security-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  padding: 10px 0 8px;
}

.simout-tone-security .simout-security-summary-cell {
  padding: 8px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}

/* Resting tint — always visible, never looks disabled */
.simout-tone-security .simout-security-summary-cell.sev-critical  { background: #FEF6F6; border-color: #F5C5C5; }
.simout-tone-security .simout-security-summary-cell.sev-serious   { background: #FFFDF5; border-color: #F5E0A0; }
.simout-tone-security .simout-security-summary-cell.sev-suggestion { background: #F0F6FF; border-color: #BDD5F5; }

.simout-tone-security .simout-security-summary-cell:hover {
  filter: brightness(0.96);
}

/* Active / selected state */
.simout-tone-security .simout-security-summary-cell.sev-critical.on  { border-color: #E24B4A; background: #FEF2F2; box-shadow: 0 1px 4px rgba(226,75,74,0.15); }
.simout-tone-security .simout-security-summary-cell.sev-serious.on   { border-color: #EF9F27; background: #FFFBEB; box-shadow: 0 1px 4px rgba(239,159,39,0.15); }
.simout-tone-security .simout-security-summary-cell.sev-suggestion.on { border-color: #378ADD; background: #EFF6FF; box-shadow: 0 1px 4px rgba(55,138,221,0.15); }

.simout-tone-security .simout-security-summary-cell .label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  margin-bottom: 5px;
}

.simout-tone-security .simout-security-summary-cell .count {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
}

.simout-tone-security .simout-security-summary-cell .bar {
  display: block;
  height: 2px;
  border-radius: 2px;
}

/* Inactive — neutral text, just a tinted bg */
.simout-tone-security .simout-security-summary-cell .label { color: var(--color-text-secondary, #6B7280); }
.simout-tone-security .simout-security-summary-cell .count { color: var(--color-text-primary, #111827); }
.simout-tone-security .simout-security-summary-cell.sev-critical .bar  { background: #E24B4A; }
.simout-tone-security .simout-security-summary-cell.sev-serious .bar   { background: #EF9F27; }
.simout-tone-security .simout-security-summary-cell.sev-suggestion .bar { background: #378ADD; }

/* Active — colored text */
.simout-tone-security .simout-security-summary-cell.sev-critical.on .label   { color: #A32D2D; }
.simout-tone-security .simout-security-summary-cell.sev-critical.on .count   { color: #E24B4A; }
.simout-tone-security .simout-security-summary-cell.sev-serious.on .label    { color: #854F0B; }
.simout-tone-security .simout-security-summary-cell.sev-serious.on .count    { color: #EF9F27; }
.simout-tone-security .simout-security-summary-cell.sev-suggestion.on .label { color: #185FA5; }
.simout-tone-security .simout-security-summary-cell.sev-suggestion.on .count { color: #378ADD; }

/* Dim inactive zero-count cells */
.simout-tone-security .simout-security-summary-cell.count-zero:not(.on) { opacity: 0.45; }

.simout-tone-issues .simout-issues-toolbar {
  margin: 0;
}

.simout-tone-issues .simout-issues-tabs {
  display: flex;
  padding: 0 14px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  overflow-x: auto;
}

.simout-tone-issues .simout-issues-tab {
  font-size: var(--fs-xs);
  padding: 8px 10px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.simout-tone-issues .simout-issues-tab.on[data-filter="critical"] { color: #E24B4A; border-bottom-color: #E24B4A; font-weight: 500; }
.simout-tone-issues .simout-issues-tab.on[data-filter="serious"] { color: #EF9F27; border-bottom-color: #EF9F27; font-weight: 500; }
.simout-tone-issues .simout-issues-tab.on[data-filter="suggestion"] { color: #378ADD; border-bottom-color: #378ADD; font-weight: 500; }

.simout-tone-issues .simout-fixall-row {
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}

.simout-tone-issues .simout-fixall-suggestions-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #E6F1FB;
  border: none;
  border-radius: var(--border-radius-md);
  padding: 7px 11px;
  cursor: pointer;
}

.simout-tone-issues .simout-fixall-suggestions-btn:hover {
  background: #B5D4F4;
}

.simout-tone-issues .fixall-left {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #185FA5;
}

.simout-tone-issues .fixall-right {
  font-size: var(--fs-xss);
  color: #185FA5;
  opacity: 0.65;
}

.simout-tone-issues .simout-issues-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.simout-tone-issues .simout-issues-list .simout-issue-card {
  padding: 12px 14px 11px;
  border: none;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  border-radius: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.simout-tone-issues .simout-issues-list .simout-issue-card:last-child {
  border-bottom: none;
}

.simout-tone-issues .simout-issues-list .simout-issue-card.sev-serious { border-left: 3px solid #EF9F27 !important; }
.simout-tone-issues .simout-issues-list .simout-issue-card.sev-critical { border-left: 3px solid #E24B4A !important; }
.simout-tone-issues .simout-issues-list .simout-issue-card.sev-suggestion { border-left: 3px solid #378ADD !important; }

.simout-tone-issues .simout-issues-list .simout-issue-card:hover {
  background: var(--color-background-secondary);
}

.simout-tone-issues .simout-issue-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.simout-tone-issues .simout-issue-headline .simout-issue-title {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.simout-tone-issues .simout-rule-tag {
  display: none;
}

.simout-tone-issues .simout-sev-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.simout-tone-issues .simout-sev-badge.sev-serious { background: #FAEEDA; color: #854F0B; }
.simout-tone-issues .simout-sev-badge.sev-critical { background: #FCEBEB; color: #A32D2D; }
.simout-tone-issues .simout-sev-badge.sev-suggestion { background: #E6F1FB; color: #185FA5; }

.simout-tone-issues .simout-issue-friendly {
  font-size: var(--fs-xss);
  color: var(--color-text-secondary);
}

.simout-tone-issues .simout-issue-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}

.simout-tone-issues .simout-issue-impact {
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.simout-tone-issues .simout-issue-impact strong {
  font-weight: 500;
  color: var(--color-text-primary);
}

.simout-tone-issues .simout-issue-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.simout-tone-issues .simout-chip {
  font-size: var(--fs-xss);
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  color: var(--color-text-secondary);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simout-tone-issues .simout-view-fix-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #185FA5;
  background: none;
  border: none;
  cursor: pointer;
}

.simout-tone-issues .simout-view-fix-btn:hover {
  text-decoration: underline;
}

.simout-security-list .simout-security-card {
  border: none !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 12px 14px 11px !important;
  box-shadow: none !important;
}

.simout-security-list .simout-security-card:last-child {
  border-bottom: none !important;
}

.simout-security-list .simout-issue-headline {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 6px;
}

.simout-security-list .simout-issue-headline .simout-issue-title {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.simout-security-list .simout-rule-tag {
  max-width: calc(100% - 92px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Final UI consistency adjustments ===== */
.simout-impact-group summary {
  background: var(--color-background-secondary) !important;
}

.simout-metric-tile,
.simout-smell-item,
.simout-trade-card,
.simout-rec-item,
.simout-bottleneck-legend {
  padding: 10px !important;
}

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

.simout-node-table-wrap {
  overflow-x: auto;
}

.simout-node-table {
  min-width: 560px !important;
}


.simout-node-table td,
.simout-node-table th {
  white-space: nowrap;
}

/* ===== Final visual polish (style-only, no behavior changes) ===== */
.simout-panel {
  --border-radius-lg: 12px;
  --border-radius-md: 8px;
  background: var(--color-background-primary) !important;
}

.simout-scroll {
  background: var(--color-background-primary) !important;
}

.simout-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg);
}

.simout-summary-score {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.simout-summary-score .simout-mono,
.simout-summary-score strong,
.simout-summary-score b {
  font-weight: 500;
  color: var(--color-text-primary);
}

.simout-summary-critical {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #A32D2D !important;
}

.simout-block {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  overflow: hidden;
}

.simout-panel .simout-tone-score,
.simout-panel .simout-tone-issues,
.simout-panel .simout-tone-security,
.simout-panel .simout-tone-performance,
.simout-panel .simout-tone-nodes,
.simout-panel .simout-tone-tradeoffs,
.simout-panel .simout-tone-smells,
.simout-panel .simout-tone-recs {
  background: var(--color-background-primary) !important;
  border-left: 0 !important;
}

.simout-block-head {
  padding: 12px 14px !important;
  background: transparent !important;
  border-bottom: 0.5px solid transparent !important;
}

.simout-block.is-open .simout-block-head {
  border-bottom-color: var(--color-border-tertiary) !important;
}

.simout-block-head:hover {
  background: var(--color-background-secondary) !important;
}

.simout-health-dot {
  width: 8px !important;
  height: 8px !important;
}

.simout-health-dot.dot-readiness,
.simout-health-dot.dot-performance,
.simout-health-dot.dot-tradeoffs,
.simout-health-dot.dot-recs {
  background: #1D9E75 !important;
}

.simout-health-dot.dot-issues,
.simout-health-dot.dot-archviolations {
  background: #E24B4A !important;
}

.simout-health-dot.dot-security {
  background: #7F77DD !important;
}

.simout-health-dot.dot-bottlenecks {
  background: #EF9F27 !important;
}

.simout-health-dot.dot-nodes {
  background: #EF9F27 !important;
}

.simout-health-dot.dot-smells {
  background: #854F0B !important;
}

.simout-block-summary,
.simout-head-right,
.simout-head-right span {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.simout-block-caret {
  font-size: var(--fs-micro) !important;
  color: var(--color-text-secondary) !important;
}

.simout-block-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simout-violation-card,
.simout-metric-tile,
.simout-smell-item,
.simout-rec-item,
.simout-trade-card,
.simout-security-card {
  padding: 12px 14px !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
}

.simout-violation-card .v-title,
.simout-rec-title,
.simout-smell-item .smell-title,
.simout-issue-title,
.simout-b-name {
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
}

.simout-violation-card .v-copy,
.simout-rec-desc,
.simout-smell-item,
.simout-trade-card p,
.simout-b-pct,
.simout-node-table td {
  font-weight: 400 !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.55 !important;
}

.simout-issue-impact strong,
.simout-smell-item strong,
.simout-violation-card strong,
.simout-rec-desc strong,
.simout-trade-card strong {
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
}

.simout-score-dial,
.simout-score-svg {
  width: 72px !important;
  height: 72px !important;
}

.simout-score-track,
.simout-score-fill {
  stroke-width: 6 !important;
  stroke: var(--color-border-tertiary);
}

.simout-score-fill {
  stroke: #E24B4A;
}

.simout-verdict {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--fs-xss) !important;
  font-weight: 500 !important;
  background: #FCEBEB !important;
  color: #A32D2D !important;
}

.simout-verdict[style*="#22c55e"],
.simout-verdict[style*="#22C55E"] {
  background: #EAF3DE !important;
  color: #3B6D11 !important;
}

.simout-score-num {
  font-size: var(--fs-lg) !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
}

.simout-score-label span:last-child {
  font-size: var(--fs-micro) !important;
  color: var(--color-text-secondary) !important;
}

.simout-tone-score .simout-pill-row {
  display: block;
  margin-top: 6px;
}

.simout-tone-score .simout-pill {
  display: block;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.simout-tone-score .simout-pill.sev-critical { color: #E24B4A; }
.simout-tone-score .simout-pill.sev-serious { color: #EF9F27; }
.simout-tone-score .simout-pill.sev-suggestion { color: #378ADD; }

/* Issues + Security */
.simout-tone-issues .simout-block-body,
.simout-tone-security .simout-block-body {
  padding: 0 !important;
}

.simout-tone-issues .simout-issues-list,
.simout-tone-security .simout-security-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.simout-tone-issues .simout-issues-list .simout-issue-card,
.simout-tone-security .simout-security-list .simout-security-card {
  padding: 14px 14px 12px !important;
  border: none !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.simout-tone-issues .simout-issues-list .simout-issue-card:last-child,
.simout-tone-security .simout-security-list .simout-security-card:last-child {
  border-bottom: none !important;
}

.simout-tone-issues .simout-issues-list .simout-issue-card.sev-serious { border-left: 3px solid #EF9F27 !important; }
.simout-tone-issues .simout-issues-list .simout-issue-card.sev-critical { border-left: 3px solid #E24B4A !important; }
.simout-tone-issues .simout-issues-list .simout-issue-card.sev-suggestion { border-left: 3px solid #378ADD !important; }
.simout-tone-security .simout-security-list .simout-security-card { border-left: 3px solid #7F77DD !important; }

/* ── Security card: code badge ─────────────────────────────────────── */
.simout-code-badge {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--color-background-secondary, #F3F4F6);
  border: 0.5px solid var(--color-border-tertiary, #E5E7EB);
  color: var(--color-text-secondary, #6B7280);
  letter-spacing: 0.03em;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* ── Security card: affected components row ────────────────────────── */
.simout-sec-affected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 8px 0 2px;
}

.simout-sec-affected-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  margin-right: 2px;
}

.simout-sec-comp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-micro);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  white-space: nowrap;
  line-height: 1.4;
}
.simout-sec-comp-chip:hover {
  background: #DBEAFE;
  border-color: #93C5FD;
}
.simout-sec-comp-chip::before {
  content: "↗";
  font-size: var(--fs-micro);
  opacity: 0.7;
}

/* ── Security card: structured fix steps ──────────────────────────── */
.simout-fix-steps {
  margin: 6px 0 4px 16px; 
  font-size: var(--fs-sm);
  padding-left: 18px;
  list-style: decimal;
}
.simout-fix-steps li {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary, #374151);
  line-height: 1.6;
  margin-bottom: 3px;
}
.simout-fix-steps li:last-child {
  margin-bottom: 0;
}
.simout-fix-text {
  font-size: var(--fs-micro);
  color: var(--color-text-secondary, #374151);
  line-height: 1.55;
  margin: 4px 0 0;
}

.simout-tone-issues .simout-issues-list .simout-issue-card:hover,
.simout-tone-security .simout-security-list .simout-security-card:hover {
  background: var(--color-background-secondary) !important;
}

.simout-tone-issues .simout-sev-badge,
.simout-tone-security .simout-sev-badge {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.simout-tone-issues .simout-issue-title,
.simout-tone-security .simout-issue-title {
  font-size: var(--fs-sm) !important;
  line-height: 1.45 !important;
  margin-bottom: 6px !important;
}

.simout-tone-issues .simout-issue-impact,
.simout-tone-security .simout-issue-impact {
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
}

.simout-tone-issues .simout-chip,
.simout-tone-security .simout-chip {
  font-size: var(--fs-xss);
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  color: var(--color-text-secondary);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Issues feed: component chips use an amber/orange accent to match the issues tone */
.simout-tone-issues .simout-sec-comp-chip {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}
.simout-tone-issues .simout-sec-comp-chip:hover {
  background: #FEF3C7;
  border-color: #FCD34D;
}

.simout-tone-issues .simout-view-fix-btn,
.simout-tone-security .simout-view-fix-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #185FA5;
  border: none;
  background: none;
}

.simout-tone-issues .simout-view-fix-btn:hover,
.simout-tone-security .simout-view-fix-btn:hover {
  text-decoration: underline;
}

/* Bottlenecks */
.simout-impact-group {
  border: none;
  border-radius: 0;
}

.simout-impact-group + .simout-impact-group {
  border-top: 0.5px solid var(--color-border-tertiary);
}

.simout-impact-group summary {
  padding: 10px 14px 6px !important;
  font-size: var(--fs-xss) !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  background: transparent !important;
  border-bottom: none !important;
}

.simout-impact-group-body {
  padding: 0 !important;
}

.simout-bottleneck-row {
  display: block;
  padding: 10px 14px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}

.simout-bottleneck-row:last-child {
  border-bottom: none;
}

.simout-b-name {
  margin-bottom: 6px;
}

.simout-b-bar {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 46px);
  height: 4px;
  border-radius: 2px;
  background: var(--color-border-tertiary);
  margin-bottom: 5px;
}

.simout-b-pct {
  display: inline-block;
  vertical-align: middle;
  width: 36px;
  margin-left: 10px;
  font-size: var(--fs-xss) !important;
  text-align: right;
}

.simout-impact-group.impact-high .simout-b-bar-fill { background: #E24B4A; }
.simout-impact-group.impact-medium .simout-b-bar-fill { background: #EF9F27; }
.simout-impact-group.impact-low .simout-b-bar-fill { background: #1D9E75; }

.simout-b-blast {
  display: inline-block;
  margin-top: 5px;
  font-size: var(--fs-xss);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
}

.simout-bottleneck-legend {
  margin: 10px 14px;
  padding: 10px 12px !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 8px !important;
}

.simout-bottleneck-legend .legend-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

/* Performance */
.simout-tone-performance .simout-metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px;
  padding: 12px 14px;
}

.simout-tone-performance .simout-metric-tile {
  padding: 12px 14px !important;
}

.simout-tone-performance .simout-metric-label {
  font-size: var(--fs-xss) !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 5px;
}

.simout-tone-performance .simout-metric-value {
  font-size: var(--fs-lg) !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
}

.simout-tone-performance .simout-metric-tile.lat-bad .simout-metric-value,
.simout-tone-performance .simout-metric-tile.lat-warn .simout-metric-value {
  color: #EF9F27 !important;
}

/* Node metrics table */
.simout-tone-nodes .simout-node-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0 !important;
}

.simout-tone-nodes .simout-node-table th {
  font-size: var(--fs-xss);
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  text-align: left;
}

.simout-tone-nodes .simout-node-table td {
  font-size: var(--fs-xs);
  padding: 9px 14px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  color: var(--color-text-secondary);
}

.simout-tone-nodes .simout-node-table tbody tr:last-child td {
  border-bottom: none;
}

.simout-tone-nodes .simout-node-table th:nth-child(2),
.simout-tone-nodes .simout-node-table th:nth-child(3),
.simout-tone-nodes .simout-node-table th:nth-child(4),
.simout-tone-nodes .simout-node-table td:nth-child(2),
.simout-tone-nodes .simout-node-table td:nth-child(3),
.simout-tone-nodes .simout-node-table td:nth-child(4) {
  text-align: right;
}

.simout-tone-nodes .simout-node-table td:first-child {
  color: var(--color-text-primary);
}

.simout-tone-nodes .simout-util-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--color-border-tertiary);
}

.simout-tone-nodes .simout-util-fill {
  background: #378ADD;
}

.simout-tone-nodes .simout-status-dot {
  width: 7px;
  height: 7px;
  background: #1D9E75 !important;
  margin-right: 4px;
}

.simout-tone-nodes .simout-status {
  color: var(--color-text-secondary);
}

/* Trade-offs and smells fine-grain labels */
.simout-tone-tradeoffs .gain strong,
.simout-tone-smells .smell-title strong,
.simout-tone-smells .smell-improve strong {
  color: #185FA5 !important;
  font-size: var(--fs-xss);
  font-weight: 500;
}

.simout-tone-tradeoffs .cost strong {
  color: #854F0B !important;
  font-size: var(--fs-xss);
  font-weight: 500;
}

.simout-tone-smells .simout-smell-item div,
.simout-tone-smells .simout-smell-item p {
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* ===== Requested final tweak: card parity + font scale ===== */
.simout-tone-issues .simout-issues-list .simout-issue-card,
.simout-tone-issues .simout-issues-list .simout-issue-card:hover {
  background: transparent !important;
}

.simout-tone-issues .simout-issues-list .simout-issue-card:hover,
.simout-tone-issues .simout-issues-list .simout-issue-card:focus-within,
.simout-tone-issues .simout-issues-list .simout-issue-card:active,
.simout-tone-security .simout-security-list .simout-security-card:hover,
.simout-tone-security .simout-security-list .simout-security-card:focus-within,
.simout-tone-security .simout-security-list .simout-security-card:active,
.simout-tone-tradeoffs .simout-trade-card:hover,
.simout-tone-smells .simout-smell-item:hover,
.simout-tone-recs .simout-rec-item:hover,
.simout-violations-stack .simout-violation-card:hover {
  background: var(--color-background-secondary) !important;
}

.simout-tone-tradeoffs .simout-trade-card,
.simout-tone-smells .simout-smell-item,
.simout-tone-recs .simout-rec-item,
.simout-violations-stack .simout-violation-card {
  padding: 12px 14px !important;
  border: none !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.simout-violations-stack,
.simout-tone-tradeoffs .simout-trade-grid,
.simout-tone-smells .simout-smells,
.simout-tone-recs .simout-rec-list {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

.simout-violations-stack .simout-violation-card:last-child,
.simout-tone-tradeoffs .simout-trade-grid .simout-trade-card:last-child,
.simout-tone-smells .simout-smells .simout-smell-item:last-child,
.simout-tone-recs .simout-rec-list .simout-rec-item:last-child {
  border-bottom: none !important;
}

/* Per-type accent: structural → red, violations → orange, smells → amber */
.simout-violations-stack .simout-violation-card.v-structural { border-left: 3px solid #E24B4A !important; }
.simout-violations-stack .simout-violation-card.v-violations { border-left: 3px solid #EF9F27 !important; }
.simout-violations-stack .simout-violation-card.v-smells     { border-left: 3px solid #D97706 !important; }

.simout-tone-tradeoffs .simout-trade-grid .simout-trade-card {
  border-left: 3px solid #1D9E75 !important;
}

.simout-tone-smells .simout-smells .simout-smell-item {
  border-left: 3px solid #854F0B !important;
}

.simout-tone-recs .simout-rec-list .simout-rec-item {
  border-left: 3px solid #14B8A6 !important;
}

/* ===== Typography bump + black text (style only) ===== */
.simout-panel,
.simout-panel * {
  color: #111111;
}

.simout-block-title,
.simout-issue-title,
.simout-violation-card .v-title,
.simout-rec-title,
.simout-smell-item .smell-title,
.simout-b-name,
.simout-trade-card .gain p,
.simout-trade-card .cost p,
.simout-metric-value {
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  color: #111111 !important;
}

.simout-issue-impact,
.simout-violation-card .v-copy,
.simout-rec-desc,
.simout-smell-item div,
.simout-smell-item p,
.simout-trade-card p,
.simout-b-pct,
.simout-chip,
.simout-view-fix-btn,
.simout-metric-label,
.simout-node-table td,
.simout-node-table th,
.simout-status,
.simout-summary-score,
.simout-summary-critical,
.simout-block-summary,
.simout-issues-tab,
.simout-issue-summary-cell .label,
.simout-issue-summary-cell .count {
  font-size: var(--fs-sm) !important;
  font-weight: 400 !important;
  color: #111111 !important;
}

.simout-violations-stack .v-title,
.simout-tone-tradeoffs .simout-trade-card .gain p,
.simout-tone-tradeoffs .simout-trade-card .cost p,
.simout-tone-smells .simout-smell-item .smell-title,
.simout-tone-recs .simout-rec-title {
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
}

.simout-violations-stack .v-copy,
.simout-tone-smells .simout-smell-item div,
.simout-tone-smells .simout-smell-item p,
.simout-tone-recs .simout-rec-desc,
.simout-tone-tradeoffs .simout-trade-card p,
.simout-tone-tradeoffs .simout-trade-component,
.simout-tone-tradeoffs .simout-trade-card .gain,
.simout-tone-tradeoffs .simout-trade-card .cost {
  font-size: var(--fs-xs) !important;
  font-weight: 400 !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.55 !important;
}

.simout-tone-tradeoffs .simout-trade-card .gain strong,
.simout-tone-smells .simout-smell-item strong,
.simout-tone-recs .simout-rec-copy strong,
.simout-violations-stack .simout-violation-card strong {
  font-size: var(--fs-xss) !important;
  font-weight: 500 !important;
}

/* ===== Requested polish tweaks ===== */
.simout-chip {
  background: #EAF2FF !important;
  border: 0.5px solid #BFD2F4 !important;
  color: #1C3E72 !important;
}

.simout-view-fix-btn {
  background: #185FA5 !important;
  color: #FFFFFF !important;
  border: 1px solid #185FA5 !important;
  border-radius: 8px;
  padding: 4px 10px;
  font-weight: 500 !important;
}

.simout-view-fix-btn:hover {
  background: #134d85 !important;
  border-color: #134d85 !important;
  text-decoration: none !important;
}

.simout-bottleneck-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-bottom: none;
  padding: 10px 0 8px;
  margin: 0;
}

.simout-bottleneck-summary-cell {
  padding: 8px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}

/* Resting tint — very light, same color family but low contrast (inactive feel) */
.simout-bottleneck-summary-cell.sev-high   { background: #FEF6F6; border-color: #FACACA; }
.simout-bottleneck-summary-cell.sev-medium { background: #FFFDF5; border-color: #F5E0A0; }
.simout-bottleneck-summary-cell.sev-low    { background: #F3FCF0; border-color: #C3E6B0; }

.simout-bottleneck-summary-cell:hover {
  filter: brightness(0.96);
}

/* Active / selected state — stronger border + warm tint + shadow */
.simout-bottleneck-summary-cell.sev-high.on   { border-color: #E24B4A; background: #FEF2F2; box-shadow: 0 1px 4px rgba(226,75,74,0.15); }
.simout-bottleneck-summary-cell.sev-medium.on { border-color: #EF9F27; background: #FFFBEB; box-shadow: 0 1px 4px rgba(239,159,39,0.15); }
.simout-bottleneck-summary-cell.sev-low.on    { border-color: #3B6D11; background: #F0FDF4; box-shadow: 0 1px 4px rgba(59,109,17,0.15); }

.simout-bottleneck-summary-cell .label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  margin-bottom: 5px;
}

.simout-bottleneck-summary-cell .count {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
}

.simout-bottleneck-summary-cell .bar {
  display: block;
  height: 2px;
  border-radius: 2px;
}

/* Inactive — muted, color-tinted text (same family, low contrast) */
.simout-bottleneck-summary-cell .label { color: var(--color-text-secondary, #6B7280); }
.simout-bottleneck-summary-cell .count { color: var(--color-text-primary, #111827); }
.simout-bottleneck-summary-cell.sev-high .bar   { background: #E24B4A; opacity: 0.35; }
.simout-bottleneck-summary-cell.sev-medium .bar { background: #EF9F27; opacity: 0.35; }
.simout-bottleneck-summary-cell.sev-low .bar    { background: #3B6D11; opacity: 0.35; }
.simout-bottleneck-summary-cell.count-zero .bar { opacity: 0.12 !important; }

/* Active — dark colored text + full-opacity bar */
.simout-bottleneck-summary-cell.sev-high.on .label   { color: #A32D2D; }
.simout-bottleneck-summary-cell.sev-high.on .count   { color: #E24B4A; }
.simout-bottleneck-summary-cell.sev-high.on .bar     { background: #E24B4A; opacity: 1; }

.simout-bottleneck-summary-cell.sev-medium.on .label { color: #854F0B; }
.simout-bottleneck-summary-cell.sev-medium.on .count { color: #EF9F27; }
.simout-bottleneck-summary-cell.sev-medium.on .bar   { background: #EF9F27; opacity: 1; }

.simout-bottleneck-summary-cell.sev-low.on .label    { color: #2D5A0F; }
.simout-bottleneck-summary-cell.sev-low.on .count    { color: #3B6D11; }
.simout-bottleneck-summary-cell.sev-low.on .bar      { background: #3B6D11; opacity: 1; }

/* Dim zero-count inactive cells */
.simout-bottleneck-summary-cell.count-zero:not(.on) { opacity: 0.45; }

.simout-impact-group summary {
  font-size: var(--fs-sm) !important;
}

.simout-bottleneck-row {
  font-size: var(--fs-xs);
}

.simout-b-name {
  font-size: var(--fs-base) !important;
}

.simout-b-pct,
.simout-b-blast {
  font-size: var(--fs-xs) !important;
}

.simout-bottleneck-legend {
  margin: 10px 0 !important;
  width: 100%;
}

.simout-violations-stack .simout-violation-card.v-structural {
  border-left: 3px solid #E24B4A !important;
}

.simout-violations-stack .simout-violation-card.v-violations {
  border-left: 3px solid #EF9F27 !important;
}

.simout-violations-stack .simout-violation-card.v-smells {
  border-left: 3px solid #378ADD !important;
}

/* ===== Security severity filter UI + inner card font baseline ===== */
.simout-tone-security .simout-block-body {
  padding: 0 !important;
}

.simout-tone-security .simout-security-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-bottom: none;
  margin-bottom: 10px;
  padding: 10px 14px 0;
}

.simout-tone-security .simout-security-summary-cell {
  padding: 8px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}

.simout-tone-security .simout-security-summary-cell:last-child {
  border-right: 1px solid transparent;
}

.simout-tone-security .simout-security-summary-cell:hover {
  background: var(--color-background-secondary);
  border-color: var(--color-border-tertiary);
}

.simout-tone-security .simout-security-summary-cell.sev-critical.on  { border-color: #E24B4A; background: #FEF2F2; }
.simout-tone-security .simout-security-summary-cell.sev-serious.on   { border-color: #EF9F27; background: #FFFBEB; }
.simout-tone-security .simout-security-summary-cell.sev-suggestion.on { border-color: #378ADD; background: #EFF6FF; }

.simout-tone-security .simout-security-summary-cell .label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  margin-bottom: 5px;
}

.simout-tone-security .simout-security-summary-cell .count {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
}

.simout-tone-security .simout-security-summary-cell .bar {
  display: block;
  height: 2px;
  border-radius: 2px;
}

.simout-tone-security .simout-security-summary-cell.sev-critical .bar { background: #E24B4A; }
.simout-tone-security .simout-security-summary-cell.sev-serious .bar  { background: #EF9F27; }
.simout-tone-security .simout-security-summary-cell.sev-suggestion .bar { background: #378ADD; }

.simout-tone-security .simout-security-tabs {
  display: flex;
  padding: 0 14px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  overflow-x: auto;
}

.simout-tone-security .simout-security-tab {
  font-size: var(--fs-xs);
  padding: 8px 10px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  white-space: nowrap;
}

.simout-tone-security .simout-security-tab.on[data-filter="critical"] { color: #E24B4A; border-bottom-color: #E24B4A; font-weight: 500; }
.simout-tone-security .simout-security-tab.on[data-filter="serious"] { color: #EF9F27; border-bottom-color: #EF9F27; font-weight: 500; }
.simout-tone-security .simout-security-tab.on[data-filter="suggestion"] { color: #378ADD; border-bottom-color: #378ADD; font-weight: 500; }

.simout-tone-security .simout-security-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.simout-tone-security .simout-security-list .simout-security-card {
  padding: 14px 14px 12px !important;
  border: none !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.simout-tone-security .simout-security-list .simout-security-card:last-child {
  border-bottom: none !important;
}

.simout-tone-security .simout-security-list .simout-security-card.sev-critical { border-left: 3px solid #E24B4A !important; }
.simout-tone-security .simout-security-list .simout-security-card.sev-serious { border-left: 3px solid #EF9F27 !important; }
.simout-tone-security .simout-security-list .simout-security-card.sev-suggestion { border-left: 3px solid #378ADD !important; }

/* 0.8rem standard for inner-card text */
.simout-issue-impact,
.simout-violation-card .v-copy,
.simout-rec-desc,
.simout-smell-item div,
.simout-smell-item p,
.simout-trade-card p,
.simout-b-pct,
.simout-chip,
.simout-view-fix-btn,
.simout-metric-label,
.simout-node-table td,
.simout-node-table th,
.simout-status,
.simout-trade-component,
.simout-b-blast,
.simout-bottleneck-legend .legend-title,
.simout-bottleneck-legend .legend-scale {
  font-size: var(--fs-sm) !important;
}

.simout-issue-title,
.simout-violation-card .v-title,
.simout-rec-title,
.simout-smell-item .smell-title,
.simout-b-name,
.simout-trade-card .gain p,
.simout-trade-card .cost p,
.simout-metric-value {
  font-size: var(--fs-sm) !important;
}

.simout-block[data-section="performance"] .simout-metrics-grid {
  gap: 8px !important;
}

.simout-block[data-section="performance"] .simout-metric-tile {
  padding: 8px 10px !important;
}

.simout-block[data-section="performance"] .simout-metric-label {
  font-size: var(--fs-base) !important;
  font-weight: 700 !important;
  color: #111111 !important;
}

.simout-block[data-section="performance"] .simout-metric-value {
  font-size: var(--fs-md) !important;
  font-weight: 800 !important;
  color: #111111 !important;
}

.simout-bottleneck-summary-cell.sev-low .label { color: #3B6D11 !important; }
.simout-bottleneck-summary-cell.sev-low .count { color: #3B6D11 !important; }
.simout-bottleneck-summary-cell.sev-low .bar { background: #3B6D11; opacity: 0.5; }

/* Final tweak: Architectural Smells typography at 0.8rem */
.simout-tone-smells .simout-smell-item,
.simout-tone-smells .simout-smell-item .smell-title,
.simout-tone-smells .simout-smell-item div,
.simout-tone-smells .simout-smell-item p,
.simout-tone-smells .simout-smell-item strong {
  font-size: var(--fs-xs) !important;
}

/* Final tweak: Readiness score layout */
.simout-block[data-section="readiness"] .simout-block-body {
  padding: 10p 5px !important;
}

.simout-block[data-section="readiness"] .simout-score-wrap {
  display: flex !important;
  align-items: center;
  gap: 20px;
}

.simout-block[data-section="readiness"] .simout-score-dial,
.simout-block[data-section="readiness"] .simout-score-svg {
  width: 128px !important;
  height: 128px !important;
}

.simout-block[data-section="readiness"] .simout-score-dial {
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(59,130,246,0.22));
}

.simout-block[data-section="readiness"] .simout-score-track {
  stroke: #e2e8f0 !important;
  stroke-width: 11 !important;
  opacity: 1 !important;
}

.simout-block[data-section="readiness"] .simout-score-label {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px;
  line-height: 1;
  white-space: nowrap;
}

.simout-block[data-section="readiness"] .simout-score-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.simout-block[data-section="readiness"] .simout-score-num {
  font-size: var(--fs-xxl) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  color: #0F172A;
}

.simout-block[data-section="readiness"] .simout-score-den {
  font-size: var(--fs-xss) !important;
  color: #94A3B8 !important;
  font-weight: 600;
}

.simout-block[data-section="readiness"] .simout-score-label span:not(.simout-score-num):not(.simout-score-den) {
  display: none !important;
}

.simout-block[data-section="readiness"] .simout-verdict {
  display: inline-block;
  font-size: var(--fs-xs) !important;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  width: fit-content;
  margin-bottom: 0;
}

/* Verdict band colours */
.simout-verdict.band-excellent { color: #15803D; background: #DCFCE7; }
.simout-verdict.band-good      { color: #1D4ED8; background: #DBEAFE; }
.simout-verdict.band-fair      { color: #B45309; background: #FEF3C7; }
.simout-verdict.band-poor,
.simout-verdict.band-not-ready { color: #B91C1C; background: #FEE2E2; }
.simout-verdict:not([class*="band-"]) { color: var(--warning); background: #FEF3C7; }

.simout-block[data-section="readiness"] .simout-score-oneliner {
  font-size: var(--fs-xs) !important;
  color: #475569;
  font-style: italic;
  line-height: 1.45;
  margin: 0;
}

.simout-block[data-section="readiness"] .simout-pill-row {
  margin-top: 0;
  gap: 5px;
}

.simout-block[data-section="readiness"] .simout-pill {
  font-size: var(--fs-xs) !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
  font-weight: 700;
}
/* Final alignment fix: keep left accent rails consistent across summary card sections */
.simout-block[data-section="archViolations"] .simout-block-body,
.simout-block[data-section="tradeoffs"] .simout-block-body,
.simout-block[data-section="smells"] .simout-block-body,
.simout-block[data-section="recs"] .simout-block-body,
.simout-block[data-section="bottlenecks"] .simout-block-body{
  padding: 0 !important;
}

.simout-block[data-section="archViolations"] .simout-violations-stack,
.simout-block[data-section="tradeoffs"] .simout-trade-grid,
.simout-block[data-section="smells"] .simout-smells,
.simout-block[data-section="recs"] .simout-rec-list,
.simout-block[data-section="bottlenecks"] .simout-block-body{
  margin: 0 !important;
  padding: 0 !important;
}

.simout-block[data-section="archViolations"] .simout-violation-card,
.simout-block[data-section="tradeoffs"] .simout-trade-card,
.simout-block[data-section="smells"] .simout-smell-item,
.simout-block[data-section="recs"] .simout-rec-item{
  margin: 0 !important;
  border-left-width: 3px !important;
  border-left-style: solid !important;
}

/* ── Production Risks section ─────────────────────────────────────────── */

/* "not scored" inline tag inside subtitle */
.simout-not-scored-inline {
  display: inline-block;
  font-size: var(--fs-xss);
  font-weight: 700;
  color: #9CA3AF;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  padding: 0px 5px;
  vertical-align: middle;
  font-style: normal;
  letter-spacing: 0.02em;
}

/* Severity filter row — mirrors bottleneck/security summary rows */
.simout-risk-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 14px 8px;
}

.simout-risk-summary-cell {
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  user-select: none;
}

.simout-risk-summary-cell.sev-critical { background: #FEF6F6; border-color: #FACACA; }
.simout-risk-summary-cell.sev-major    { background: #FFF8F2; border-color: #FDDBB8; }
.simout-risk-summary-cell.sev-minor    { background: #FEFDF0; border-color: #F5E8A0; }

.simout-risk-summary-cell .label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--color-text-secondary, #6B7280);
  margin-bottom: 5px;
}

.simout-risk-summary-cell .count {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
}

.simout-risk-summary-cell .bar {
  display: block;
  height: 2px;
  border-radius: 2px;
}

.simout-risk-summary-cell.sev-critical .bar { background: #E24B4A; }
.simout-risk-summary-cell.sev-major .bar    { background: #F97316; }
.simout-risk-summary-cell.sev-minor .bar    { background: #EAB308; }
.simout-risk-summary-cell.count-zero        { opacity: 0.45; }

/* Risk feed — flat list like Issues Feed */
.simout-risks-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.simout-risk-item {
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--color-border-tertiary, #E5E7EB);
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 3px solid transparent;
}

.simout-risk-item:last-child { border-bottom: none; }
.simout-risk-item.sev-critical { border-left-color: #E24B4A; }
.simout-risk-item.sev-major    { border-left-color: #F97316; }
.simout-risk-item.sev-minor    { border-left-color: #EAB308; }

.simout-risk-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.simout-risk-sev-badge {
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.simout-risk-sev-badge.sev-critical { background: #FEE2E2; color: #B91C1C; border: 1px solid #FCA5A5; }
.simout-risk-sev-badge.sev-major    { background: #FFF0E6; color: #C2410C; border: 1px solid #FDBA74; }
.simout-risk-sev-badge.sev-minor    { background: #FEFCE8; color: #92400E; border: 1px solid #FDE68A; }

.simout-risk-item-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #111827;
}

.simout-risk-item-row {
  font-size: var(--fs-xs);
  color: #475569;
  line-height: 1.5;
}

.simout-risk-item-row strong { color: #334155; }

/* ── Mode Banner ────────────────────────────────────────── */
.simout-mode-banner { display:flex; flex-direction:column; gap:4px; padding:10px 16px; background:#F0F4FF; border-bottom:1px solid #D0DBFF; }
.simout-mode-label { font-size: 12px; font-weight:700; color:#3B5BDB; text-transform:uppercase; letter-spacing:0.05em; }
.simout-mode-sub { font-size:var(--fs-xs); color:#6B7280; }

/* ── Score Breakdown Grid ───────────────────────────────── */
.simout-breakdown-grid { display:flex; flex-direction:column; gap:0; border:1px solid var(--color-border-tertiary,#E5E7EB); border-radius:8px; overflow:hidden; }
.simout-breakdown-row { display:flex; justify-content:space-between; align-items:center; padding:8px 14px; border-bottom:1px solid var(--color-border-tertiary,#E5E7EB); font-size:var(--fs-xs); }
.simout-breakdown-row:last-child { border-bottom:none; }
.simout-breakdown-base { background:#F9FAFB; font-weight:500; }
.simout-breakdown-penalty { background:#FFF8F8; }
.simout-breakdown-sim { background:#F9FAFB; }
.simout-breakdown-total { background:#F0F4FF; font-weight:700; border-top:2px solid #D0DBFF; }
.simout-breakdown-pts { font-weight:700; font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.simout-breakdown-pts.positive { color:#16A34A; }
.simout-breakdown-pts.negative { color:#DC2626; }
.simout-breakdown-pts.zero { color:#9CA3AF; }
.simout-breakdown-pts.total { color:#1D4ED8; font-size:var(--fs-base); }
.simout-breakdown-hint { font-size:var(--fs-micro); color:#000; margin-top:8px; font-style:italic; }

/* ── Bottleneck Cards ───────────────────────────────────── */
.simout-btk-cards { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.simout-btk-card { border-radius:8px; padding:12px 14px; border:1px solid; }
.simout-btk-card.tier-high { border-color:#F5C5C5; background:#FFF5F5; }
.simout-btk-card.tier-medium { border-color:#F5D99A; background:#FFFBF0; }
.simout-btk-card.tier-low { border-color:#B3DDA0; background:#F4FBF0; }
.simout-btk-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.simout-btk-name { font-weight:600; font-size:var(--fs-xs); }
.simout-btk-problem { font-size:var(--fs-xs); font-weight:600; color:#DC2626; margin-bottom:6px; }
.simout-btk-row { font-size:var(--fs-xs); color:#4B5563; margin-top:4px; }

/* ── How To Improve Score ───────────────────────────────── */
.simout-improve-list { display:flex; flex-direction:column; gap:8px; }
.simout-improve-item { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:8px; border:1px solid var(--color-border-tertiary,#E5E7EB); background:#FAFAFA; }
.simout-improve-item.priority-high { border-color:#F5C5C5; background:#FFF5F5; }
.simout-improve-item.priority-medium { border-color:#F5D99A; background:#FFFBF0; }
.simout-improve-tag { font-size:var(--fs-micro); font-weight:800; padding:2px 7px; border-radius:4px; white-space:nowrap; letter-spacing:0.06em; flex-shrink:0; margin-top:1px; }
.tag-high { background:#DC2626; color:#fff; }
.tag-medium { background:#EF9F27; color:#fff; }
.tag-low { background:#5C9E2E; color:#fff; }
.simout-improve-body { display:flex; flex-direction:column; gap:2px; }
.simout-improve-action { font-size:var(--fs-xs); font-weight:600; color:var(--color-text-primary,#111); }
.simout-improve-why { font-size:var(--fs-xs); color:#6B7280; margin-top:2px; }

/* ── Non-scoring Tag ────────────────────────────────────── */
.simout-non-scoring-tag { font-size:var(--fs-micro); font-weight:600; color:#9CA3AF; background:#F3F4F6; border:1px solid #E5E7EB; border-radius:4px; padding:1px 6px; vertical-align:middle; margin-left:6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODERNISATION PASS — matches "Run Simulation" card aesthetic
   Overrides dated 1999-era styles: dark header, heavy borders, harsh shadows.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kill the dark sticky header — replace with clean white ─────────────── */
.simout-sticky-header {
  background: #ffffff;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  padding: 10px 14px;
}
.simout-sticky-header strong {
  font-size: var(--fs-xss);
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.08em;
}
.simout-close-btn {
  background: #f1f5f9;
  color: #475569;
  border-radius: 6px;
  font-size: var(--fs-xs);
  padding: 4px 8px;
}
.simout-close-btn:hover { background: #e2e8f0; color: #1e293b; }

/* ── Scroll area — tighter gap, lighter bg ──────────────────────────────── */
.simout-scroll {
  padding: 10px;
  gap: 6px;
  background: #f8fafc;
}

/* ── Blocks — drop heavy top border, use clean left accent + soft card ──── */
.simout-block {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  border-top: none;          /* remove the 4px accent — replaced by left-border */
  background: #ffffff;
  box-shadow: none;
  overflow: hidden;
  border-left: 3px solid #e2e8f0; /* default neutral left accent */
}

/* Per-tone left-border accents (replaces heavy top borders) */
.simout-tone-score       { border-left-color: #3b82f6; background: #ffffff; }
.simout-tone-issues      { border-left-color: #ef4444; background: #ffffff; }
.simout-tone-performance { border-left-color: #22c55e; background: #ffffff; }
.simout-tone-nodes       { border-left-color: #0ea5e9; background: #ffffff; }
.simout-tone-smells      { border-left-color: #f59e0b; background: #ffffff; }
.simout-tone-recs        { border-left-color: #8b5cf6; background: #ffffff; }
.simout-tone-risks       { border-left-color: #dc2626; background: #ffffff; }
.simout-tone-security    { border-left-color: #6366f1; background: #ffffff; }

/* ── Block header — lightweight, matches sim-section-hd style ───────────── */
.simout-block-head {
  padding: 10px 12px 9px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 120ms;
}
.simout-block-head:hover { background: #f8fafc; }
.simout-block.is-open .simout-block-head {
  border-bottom-color: #f1f5f9;
}

.simout-block-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #475569;
  text-transform: uppercase;
}

.simout-block-summary {
  font-size: var(--fs-xss);
  font-weight: 600;
  color: #94a3b8;
}

.simout-block-caret {
  font-size: var(--fs-xss);
  color: #94a3b8;
}

.simout-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Health dots — slightly larger, crisper ─────────────────────────────── */
.simout-health-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-readiness  { background: #22c55e; }
.dot-bottlenecks { background: #f59e0b; }
.dot-issues     { background: #ef4444; }
.dot-recs       { background: #8b5cf6; }
.dot-risks      { background: #dc2626; }
.dot-security   { background: #6366f1; }

/* ── Block body — consistent padding ───────────────────────────────────── */
.simout-block-body {
  padding: 0 12px 12px;
}
.simout-section-subtitle {
  padding: 8px 0 6px;
  font-size: var(--fs-xss);
  color: #64748b;
  font-style: italic;
}

/* ── Score hero — clean, no grey bg ────────────────────────────────────── */
.simout-score-hero {
  padding: 10px 0 4px;
  background: transparent;
  gap: 12px;
}
.simout-score-oneliner {
  font-size: var(--fs-sm);
  color: #475569;
  font-style: italic;
}
.simout-score-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ── Issue cards — match sim-event look: no drop-shadow, left border ─────── */
.simout-issue-card {
  border: 1px solid #e2e8f0;
  border-left: 3px solid #94a3b8;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: none;
  padding: 10px 12px;
  animation: simout-issue-in 180ms ease-out forwards;
}
.simout-issue-card.sev-critical {
  border-left-color: #ef4444;
  background: #fff8f8;
  border-color: #fecdd3;
  border-left-color: #ef4444;
}
.simout-issue-card.sev-serious {
  border-left-color: #f59e0b;
  background: #fffbeb;
  border-color: #fde68a;
  border-left-color: #f59e0b;
}
.simout-issue-card.sev-suggestion {
  border-left-color: #3b82f6;
  background: #f0f7ff;
  border-color: #bfdbfe;
  border-left-color: #3b82f6;
}

/* Issue headline row */
.simout-issue-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.simout-issue-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}
.simout-view-fix-btn {
  font-size: var(--fs-xss);
  font-weight: 700;
  color: #3b82f6;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
  flex-shrink: 0;
}
.simout-view-fix-btn:hover { color: #1d4ed8; }
.simout-issue-impact {
  font-size: var(--fs-xs);
  color: #64748b;
  line-height: 1.5;
}

/* ── Bottleneck cards — match sim-event tint style ──────────────────────── */
.simout-btk-card {
  border-radius: 8px;
  padding: 10px 12px;
  border-width: 1px;
  border-style: solid;
}
.simout-btk-card.tier-high   { border-color: #fecdd3; background: #fff8f8; border-left: 3px solid #ef4444; }
.simout-btk-card.tier-medium { border-color: #fde68a; background: #fffbeb; border-left: 3px solid #f59e0b; }
.simout-btk-card.tier-low    { border-color: #bbf7d0; background: #f0fdf4; border-left: 3px solid #22c55e; }
.simout-btk-name  { font-size: var(--fs-sm); font-weight: 700; color: #1e293b; }
.simout-btk-row   { font-size: var(--fs-xs); color: #64748b; margin-top: 4px; line-height: 1.5; }
.simout-btk-problem { font-size: var(--fs-xs); font-weight: 700; color: #dc2626; margin-bottom: 4px; }

/* ── Summary cells (bottleneck / issue filter rows) ─────────────────────── */
.simout-bottleneck-summary-row,
.simout-issue-summary-row,
.simout-security-summary-row {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
.simout-bottleneck-summary-cell,
.simout-issue-summary-cell,
.simout-security-summary-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.simout-bottleneck-summary-cell.on,
.simout-issue-summary-cell.on,
.simout-security-summary-cell.on { background: #eff6ff; border-color: #3b82f6; }
.simout-bottleneck-summary-cell .label,
.simout-issue-summary-cell .label,
.simout-security-summary-cell .label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}
.simout-bottleneck-summary-cell .count,
.simout-issue-summary-cell .count,
.simout-security-summary-cell .count {
  font-size: var(--fs-subhead);
  font-weight: 800;
  color: #1e293b;
}

/* ── Improve list ───────────────────────────────────────────────────────── */
.simout-improve-item {
  border-radius: 8px;
  padding: 10px 12px;
  border-width: 1px;
  border-style: solid;
  background: #f8fafc;
  border-color: #e2e8f0;
}
.simout-improve-item.priority-high   { border-color: #fecdd3; background: #fff8f8; border-left: 3px solid #ef4444; }
.simout-improve-item.priority-medium { border-color: #fde68a; background: #fffbeb; border-left: 3px solid #f59e0b; }
.simout-improve-item.priority-low    { border-color: #bbf7d0; background: #f0fdf4; border-left: 3px solid #22c55e; }
.simout-improve-action { font-size: var(--fs-sm); font-weight: 700; color: #1e293b; }
.simout-improve-why    { font-size: var(--fs-xs); color: #64748b; margin-top: 2px; }

/* ── Score breakdown grid ───────────────────────────────────────────────── */
.simout-breakdown-grid {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.simout-breakdown-row { font-size: var(--fs-sm); padding: 8px 12px; }
.simout-breakdown-total { background: #f0f7ff; border-top: 2px solid #bfdbfe; }
.simout-breakdown-pts.total { color: #1d4ed8; font-size: var(--fs-base); }

/* ── Empty states ───────────────────────────────────────────────────────── */
.simout-empty {
  font-size: var(--fs-xs);
  color: #94a3b8;
  padding: 16px 0;
  text-align: center;
  font-style: italic;
}

/* ── Score verdict badge ────────────────────────────────────────────────── */
.simout-verdict {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
}
.band-ready     { color: #16a34a; }
.band-caution   { color: #b45309; }
.band-not_ready,
.band-poor      { color: #dc2626; }

/* ── Issue / security list spacing ─────────────────────────────────────── */
.simout-issues-list,
.simout-security-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

/* ── Risk items (Production Risks section) ──────────────────────────────── */
.simout-risk-item {
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
  border-radius: 8px;
  padding: 10px 12px;
}
.simout-risk-item.sev-critical {
  border-color: #fecdd3;
  border-left-color: #ef4444;
  background: #fff8f8;
}


/* ── css/shared/left-panel.css ── */
:root {
	--left-panel-default-w: 280px;
	--left-panel-max-w: 294px; /* +5% from 280 */
}

.layout {
	--left-panel-w: clamp(var(--left-panel-default-w), 16vw, var(--left-panel-max-w));
}

#left-panel .component-grid .palette {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

#left-panel .component-grid .palette-item {
	min-height: auto;
}

#left-panel .component-grid .palette-item .icon {
	--icon-base: 26px;
	--icon-growth: calc((var(--left-panel-w, 280px) - var(--left-panel-default-w)) * 0.18);
	width: clamp(var(--icon-base), calc(var(--icon-base) + var(--icon-growth)), 32px);
	height: clamp(var(--icon-base), calc(var(--icon-base) + var(--icon-growth)), 32px);
}



/* ── css/shared/left-panel-v2.css ── */
/* ─── Left panel v2 — component list + full-height inspector ─────────────────
   Active only when #left-panel has .lp-v2 (see js/shared/left-panel/left-panel.js).
   Without it, every .lp2-only element is hidden and the old layout is untouched. */

#left-panel {
  --lp2-ink: #1e293b;
  --lp2-muted: #64748b;
  --lp2-dim: #94a3b8;
  --lp2-line: #e2e8f0;
  --lp2-line-2: #cbd5e1;
  --lp2-inset: #eef2f8;
  --lp2-blue: #2563eb;
  --lp2-blue-soft: #eaf1ff;
  --lp2-crit: #dc2626;
  --lp2-crit-soft: #fdecec;
  --lp2-warn: #b45309;
  --lp2-warn-dot: #f59e0b;
  --lp2-warn-soft: #fef3e2;
  --lp2-info-soft: #f1f5f9;
  --lp2-ok: #15803d;
  --lp2-ok-soft: #e8f7ee;
  --lp2-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
#left-panel:not(.lp-v2) .lp2-only { display: none !important; }
#left-panel.lp-v2 .lp2-hidden { display: none !important; }

/* ── Which view fills the panel ─────────────────────────────────────────── */
#left-panel.lp-v2 .inspector-section { display: none; }
#left-panel.lp-v2 .components-section {
  flex: 1 1 auto; max-height: none; min-height: 0; padding: 0;
  display: flex; flex-direction: column;
}
#left-panel.lp-v2 .components-section .section-body {
  flex: 1 1 auto; min-height: 0; max-height: none; display: flex; flex-direction: column;
}
#left-panel.lp-v2 .components-section .component-container { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#left-panel.lp-v2.lp2-inspecting .components-section { display: none; }
#left-panel.lp-v2.lp2-inspecting .inspector-section {
  display: flex; flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden;
}
#left-panel.lp-v2 .inspector-section > h2 { display: none; }
#left-panel.lp-v2 .inspector-section .section-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#left-panel.lp-v2 #inspector {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: 0; margin: 0; background: #fff; color: var(--lp2-ink); font-size: 14px; line-height: 1.45;
}

/* ── Component list ─────────────────────────────────────────────────────── */
#left-panel.lp-v2 .lp2-search {
  display: flex; align-items: center; gap: 8px; margin: 10px 12px 6px;
  background: var(--lp2-inset); border: 1px solid transparent; border-radius: 8px; padding: 7px 10px;
  color: var(--lp2-dim); flex: none;
}
#left-panel.lp-v2 .lp2-search:focus-within { border-color: var(--lp2-blue); background: #fff; }
#left-panel.lp-v2 .lp2-search input {
  border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--lp2-ink);
}
#left-panel.lp-v2 .components-section .palette {
  display: flex; flex-direction: column; gap: 1px; padding: 2px 8px 8px; justify-items: stretch;
  height: auto; max-height: none; overflow: visible;
}
#left-panel.lp-v2 .palette > * { order: var(--lp2-order, 9000); flex: none; }
#left-panel.lp-v2 .lp2-group-h {
  display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 6px; padding: 7px 6px;
  background: none; border: 0; border-radius: 6px; cursor: pointer; text-align: left;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--lp2-muted);
}
#left-panel.lp-v2 .lp2-group-h:hover { background: var(--lp2-inset); }
#left-panel.lp-v2 .lp2-group-h .lp2-count { margin-left: auto; font-family: var(--lp2-mono); font-size: 11px; letter-spacing: 0; color: var(--lp2-dim); }
#left-panel.lp-v2 .lp2-chev { transition: transform .15s; flex: none; }
#left-panel.lp-v2 .lp2-group-h.lp2-collapsed .lp2-chev,
#left-panel.lp-v2 .lp2-sec[data-open="false"] .lp2-chev { transform: rotate(-90deg); }

#left-panel.lp-v2 .components-section .palette-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  width: 100%; min-height: 0; height: auto; padding: 6px 8px; margin: 0;
  border: 1px solid transparent; border-radius: 8px; background: transparent; box-shadow: none;
  cursor: grab; text-align: left; aspect-ratio: auto; min-width: 0; font-size: 13px; line-height: 1.3;
}
#left-panel.lp-v2 .components-section .palette-item::before,
#left-panel.lp-v2 .components-section .palette-item::after { content: none !important; display: none !important; }
#left-panel.lp-v2 .components-section .palette-item:hover,
#left-panel.lp-v2 .components-section .palette-item:focus-visible { background: var(--lp2-blue-soft); border-color: #d6e3ff; transform: none; }
#left-panel.lp-v2 .components-section .palette-item .icon { width: 28px; height: 28px; margin: 0; }
#left-panel.lp-v2 .lp2-text { display: flex; flex-direction: column; min-width: 0; }
#left-panel.lp-v2 .lp2-cname { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--lp2-ink); }
#left-panel.lp-v2 .lp2-crole { font-size: 12px; line-height: 1.3; color: var(--lp2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#left-panel.lp-v2 .lp2-grip { color: var(--lp2-dim); font-size: 13px; opacity: 0; transition: opacity .15s; }
#left-panel.lp-v2 .palette-item:hover .lp2-grip { opacity: 1; }
#left-panel.lp-v2 .lp2-empty { margin: 8px 16px; color: var(--lp2-muted); font-size: 13px; }
#left-panel.lp-v2 .lp2-foot {
  flex: none; margin: 0; padding: 10px 14px; border-top: 1px solid var(--lp2-line); font-size: 12px; color: var(--lp2-muted);
}

/* ── Inspector ──────────────────────────────────────────────────────────── */
#left-panel.lp-v2 #inspector,
#left-panel.lp-v2 #inspector button,
#left-panel.lp-v2 #inspector input,
#left-panel.lp-v2 #inspector textarea { font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; }

#left-panel.lp-v2 .lp2-head { flex: none; padding: 12px 16px 12px; border-bottom: 1px solid var(--lp2-line); display: grid; gap: 6px; }
#left-panel.lp-v2 .lp2-headrow { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
#left-panel.lp-v2 .lp2-back {
  display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 4px 8px 4px 4px; border: 0; border-radius: 6px;
  background: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--lp2-muted);
}
#left-panel.lp-v2 .lp2-back:hover { background: var(--lp2-inset); color: var(--lp2-ink); }
#left-panel.lp-v2 .lp2-back:focus-visible,
#left-panel.lp-v2 .lp2-add-desc:focus-visible,
#left-panel.lp-v2 .lp2-sec-h:focus-visible,
#left-panel.lp-v2 .lp2-delete:focus-visible { outline: 2px solid var(--lp2-blue); outline-offset: 1px; }
#left-panel.lp-v2 .lp2-typechip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  background: var(--lp2-inset); font-size: 11px; font-weight: 600; color: #334155; letter-spacing: 0.01em;
}
#left-panel.lp-v2 .lp2-typechip i { width: 8px; height: 8px; border-radius: 2px; display: block; }
#left-panel.lp-v2 input.lp2-name {
  width: calc(100% + 16px); margin: 0 -8px; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--lp2-ink);
}
#left-panel.lp-v2 input.lp2-name:hover { border-color: var(--lp2-line); }
#left-panel.lp-v2 input.lp2-name:focus { outline: 0; border-color: var(--lp2-blue); background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
#left-panel.lp-v2 .lp2-add-desc {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; margin-left: -6px;
  border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--lp2-muted);
}
#left-panel.lp-v2 .lp2-add-desc:hover { background: var(--lp2-inset); color: var(--lp2-blue); }
#left-panel.lp-v2 .lp2-desc {
  width: 100%; min-height: 52px; resize: none; padding: 8px 10px; border: 1px solid var(--lp2-line); border-radius: 8px;
  background: #fff; font-size: 13px; line-height: 1.45; color: var(--lp2-ink);
}
#left-panel.lp-v2 .lp2-desc:focus { outline: 0; border-color: var(--lp2-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
#left-panel.lp-v2 .lp2-desc::placeholder { color: var(--lp2-dim); }

#left-panel.lp-v2 .lp2-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0 16px; }

/* Sections */
#left-panel.lp-v2 .lp2-sec { border-bottom: 1px solid #eef2f6; }
#left-panel.lp-v2 .lp2-sec-h {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 16px 8px; border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp2-muted); text-align: left;
}
#left-panel.lp-v2 .lp2-sec-h:hover { color: var(--lp2-ink); }
#left-panel.lp-v2 .lp2-sec[data-open="false"] .lp2-sec-h { padding-bottom: 12px; }
#left-panel.lp-v2 .lp2-sec[data-open="false"] .lp2-sec-b { display: none; }
#left-panel.lp-v2 .lp2-sec-b { display: grid; gap: 2px; padding: 0 16px 12px; }

/* Rows */
#left-panel.lp-v2 .lp2-field {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 48%); align-items: center; gap: 10px;
  min-height: 40px; margin: 0 -8px; padding: 4px 8px; border-radius: 8px; transition: background-color .3s, box-shadow .3s;
}
#left-panel.lp-v2 .lp2-field.lp2-pulse { background: var(--lp2-blue-soft); box-shadow: 0 0 0 2px var(--lp2-blue); }
#left-panel.lp-v2 .lp2-label {
  display: flex; align-items: center; gap: 6px; min-width: 0; cursor: default;
  font-size: 13px; font-weight: 450; color: #334155;
}
#left-panel.lp-v2 .lp2-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The flag dot is never shown — it would visually hint at exactly which
   field has an issue, which gives away the answer to the security/capacity
   challenge the Inspector is supposed to be testing. The underlying flag
   state still drives the Simulate tab's "Issues to fix" list and jump-to-fix
   navigation; it's just not rendered here. */
#left-panel.lp-v2 .lp2-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lp2-warn-dot); flex: none; }
#left-panel.lp-v2 .lp2-ctl { display: flex; justify-content: flex-end; min-width: 0; }

/* Number input */
#left-panel.lp-v2 .lp2-num {
  display: flex; align-items: center; width: 100%; height: 32px; border: 1px solid var(--lp2-line-2); border-radius: 8px;
  background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
#left-panel.lp-v2 .lp2-num:hover { border-color: #94a3b8; }
#left-panel.lp-v2 .lp2-num:focus-within { border-color: var(--lp2-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
#left-panel.lp-v2 .lp2-num input {
  width: 100%; min-width: 0; height: 100%; padding: 0 10px; border: 0; outline: 0; background: transparent; text-align: right;
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--lp2-ink);
  -moz-appearance: textfield; appearance: textfield;
}
#left-panel.lp-v2 .lp2-num input::-webkit-outer-spin-button,
#left-panel.lp-v2 .lp2-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#left-panel.lp-v2 .lp2-unit {
  align-self: stretch; display: flex; align-items: center; padding: 0 10px; border-left: 1px solid var(--lp2-line);
  background: #f8fafc; color: var(--lp2-muted); font-size: 12px; font-weight: 500;
}

/* Dropdown trigger */
#left-panel.lp-v2 .lp2-dd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 32px; padding: 0 8px 0 10px;
  border: 1px solid var(--lp2-line-2); border-radius: 8px; background: #fff; cursor: pointer; text-align: left;
  font-size: 13px; font-weight: 500; color: var(--lp2-ink); transition: border-color .15s, box-shadow .15s;
}
#left-panel.lp-v2 .lp2-dd:hover { border-color: #94a3b8; }
#left-panel.lp-v2 .lp2-dd:focus-visible,
#left-panel.lp-v2 .lp2-dd.is-open { outline: 0; border-color: var(--lp2-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
#left-panel.lp-v2 .lp2-dd-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#left-panel.lp-v2 .lp2-dd-val.is-empty { color: var(--lp2-dim); font-weight: 400; }
#left-panel.lp-v2 .lp2-dd-caret { flex: none; color: var(--lp2-muted); transition: transform .15s; }
#left-panel.lp-v2 .lp2-dd.is-open .lp2-dd-caret { transform: rotate(180deg); }

/* Toggle */
#left-panel.lp-v2 .lp2-tgl { position: relative; width: 36px; height: 20px; flex: none; }
#left-panel.lp-v2 .lp2-tgl input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
#left-panel.lp-v2 .lp2-tgl span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background .15s; }
#left-panel.lp-v2 .lp2-tgl span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: transform .15s;
}
#left-panel.lp-v2 .lp2-tgl:hover span { background: #b8c3d3; }
#left-panel.lp-v2 .lp2-tgl input:checked + span { background: var(--lp2-blue); }
#left-panel.lp-v2 .lp2-tgl input:checked + span::after { transform: translateX(16px); }
#left-panel.lp-v2 .lp2-tgl input:focus-visible + span { outline: 2px solid var(--lp2-blue); outline-offset: 2px; }

#left-panel.lp-v2 .lp2-note { margin: 14px 16px 0; font-size: 12px; color: var(--lp2-dim); }
#left-panel.lp-v2 .lp2-delete {
  display: block; width: calc(100% - 32px); height: 34px; margin: 12px 16px 0; border: 1px solid #f3d0d0; border-radius: 8px;
  background: #fff; color: #b91c1c; cursor: pointer; font-size: 13px; font-weight: 500;
}
#left-panel.lp-v2 .lp2-delete:hover { background: var(--lp2-crit-soft); border-color: #eab0b0; }

/* Dropdown menu (rendered in <body>) */
.lp2-dd-menu {
  position: fixed; z-index: 100000; margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; animation: lp2DdIn .12s ease-out;
}
.lp2-dd-opt { display: grid; gap: 1px; padding: 7px 10px; border-radius: 7px; cursor: pointer; color: #1e293b; }
.lp2-dd-opt.is-active { background: #f1f5f9; }
.lp2-dd-opt.is-selected { background: #eff6ff; }
.lp2-dd-opt.is-selected .lp2-dd-label { color: #1d4ed8; font-weight: 600; }
.lp2-dd-label { font-size: 13px; font-weight: 500; }
.lp2-dd-hint { font-size: 11px; color: #64748b; line-height: 1.35; }
@keyframes lp2DdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #left-panel.lp-v2 *, .lp2-dd-menu { transition: none !important; animation: none !important; }
}

#left-panel.lp-v2 .components-section,
#left-panel.lp-v2 .components-section button,
#left-panel.lp-v2 .components-section input { font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; }

/* Override the legacy `.inspector label` (column flex) and input rules. */
#left-panel.lp-v2 #inspector label.lp2-label {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; padding: 0; text-align: left;
  font-size: 13px; font-weight: 450; color: #334155;
}
#left-panel.lp-v2 #inspector label.lp2-tgl { display: block; padding: 0; gap: 0; }
#left-panel.lp-v2 #inspector .lp2-num input { padding: 0 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 13px; font-weight: 500; }
#left-panel.lp-v2 #inspector textarea.lp2-desc { padding: 8px 10px; font-size: 13px; }
#left-panel.lp-v2 #inspector input.lp2-name { padding: 5px 8px; font-size: 16px; font-weight: 600; border-color: transparent; background: transparent; }
#left-panel.lp-v2 #inspector input.lp2-name:hover { border-color: var(--lp2-line); }
#left-panel.lp-v2 #inspector input.lp2-name:focus { border-color: var(--lp2-blue); background: #fff; }

/* ── Readable text: no truncation, near-black ───────────────────────────── */
#left-panel.lp-v2 { --lp2-ink: #0f172a; --lp2-muted: #334155; }
#left-panel.lp-v2 #inspector label.lp2-label { color: #0f172a; font-weight: 500; align-items: flex-start; }
#left-panel.lp-v2 .lp2-label > span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.35; }
#left-panel.lp-v2 .lp2-label .lp2-dot { margin-top: 5px; }
#left-panel.lp-v2 .lp2-sec-h { color: #0f172a; }
#left-panel.lp-v2 .lp2-dd { color: #0f172a; }
#left-panel.lp-v2 .lp2-dd-val { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; padding: 6px 0; }
#left-panel.lp-v2 .lp2-dd { height: auto; min-height: 32px; }
#left-panel.lp-v2 .lp2-field.lp2-stack { grid-template-columns: 1fr; gap: 6px; padding-top: 6px; padding-bottom: 6px; }
#left-panel.lp-v2 .lp2-field.lp2-stack .lp2-ctl { justify-content: stretch; }
#left-panel.lp-v2 .lp2-num input, #left-panel.lp-v2 #inspector .lp2-num input { color: #0f172a; }
#left-panel.lp-v2 .lp2-unit { color: #334155; }
#left-panel.lp-v2 .lp2-back, #left-panel.lp-v2 .lp2-add-desc { color: #334155; }
#left-panel.lp-v2 .lp2-typechip { color: #0f172a; }
#left-panel.lp-v2 .lp2-note { color: #475569; }
#left-panel.lp-v2 .lp2-cname { color: #0f172a; }
#left-panel.lp-v2 .lp2-crole { color: #334155; white-space: normal; overflow: visible; text-overflow: clip; }
#left-panel.lp-v2 .components-section .palette-item { align-items: start; }
#left-panel.lp-v2 .components-section .palette-item .icon { margin-top: 2px; }
#left-panel.lp-v2 .lp2-group-h { color: #0f172a; }
#left-panel.lp-v2 .lp2-group-h .lp2-count { color: #475569; }
#left-panel.lp-v2 .lp2-foot { color: #334155; }
#left-panel.lp-v2 .lp2-search input::placeholder { color: #64748b; }
.lp2-dd-hint { color: #334155; }

/* Learn: "About this block" */
#left-panel.lp-v2 .lp2-about { margin: 12px 16px 4px; padding: 12px; border-radius: 10px; background: #f5f8ff; border: 1px solid #e0e9ff; display: grid; gap: 8px; }
#left-panel.lp-v2 .lp2-about p { margin: 0; font-size: 13px; line-height: 1.5; color: #0f172a; }
#left-panel.lp-v2 .lp2-about-role { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #1d4ed8; }
#left-panel.lp-v2 .lp2-about-why strong { font-weight: 600; }
#left-panel.lp-v2 .lp2-about-pairs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #334155; }
#left-panel.lp-v2 .lp2-about-pairs em { font-style: normal; font-weight: 500; color: #0f172a; background: #fff; border: 1px solid #dbe4f3; border-radius: 999px; padding: 2px 8px; }

/* Learn mode forces both sections visible with !important (style.css,
   "left panel identical to Practice"); match it so one view shows at a time. */
body.learn-mode-active #left-panel.lp-v2 .inspector-section { display: none !important; }
body.learn-mode-active #left-panel.lp-v2.lp2-inspecting .components-section { display: none !important; }
body.learn-mode-active #left-panel.lp-v2.lp2-inspecting .inspector-section { display: flex !important; }

#left-panel.lp-v2 .lp2-add-desc[hidden], #left-panel.lp-v2 .lp2-desc[hidden] { display: none !important; }

/* The head scrolls with the settings so a long description never squeezes them. */
#left-panel.lp-v2 #inspector { overflow-y: auto; }
#left-panel.lp-v2 .lp2-body { overflow: visible; flex: none; }
#left-panel.lp-v2 #inspector textarea.lp2-desc { overflow: hidden; }

/* ── Evaluate mode ───────────────────────────────────────────────────────
   style.css sizes the old palette/inspector split with !important; match it.
   The muted grey palette styling there is replaced by the readable list. */
body.evaluation-mode #left-panel.lp-v2 .components-section { flex: 1 1 auto !important; min-height: 0; }
body.evaluation-mode #left-panel.lp-v2 .inspector-section { display: none !important; }
body.evaluation-mode #left-panel.lp-v2.lp2-inspecting .components-section { display: none !important; }
body.evaluation-mode #left-panel.lp-v2.lp2-inspecting .inspector-section { display: flex !important; flex: 1 1 auto !important; }
#left-panel.lp-v2 .palette-item .icon,
body.evaluation-mode #left-panel.lp-v2 .palette-item:hover .icon { filter: brightness(0) saturate(0) opacity(0.85); }
#left-panel.lp-v2 .palette-item:hover .icon { filter: brightness(0) saturate(100%) invert(27%) sepia(80%) saturate(800%) hue-rotate(220deg) brightness(95%); }
body.evaluation-mode #left-panel.lp-v2 .palette-item:hover { background: var(--lp2-blue-soft) !important; }

#left-panel.lp-v2 .lp2-desc-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: #334155; }
#left-panel.lp-v2 .lp2-cc { white-space: nowrap; font-variant-numeric: tabular-nums; }
#left-panel.lp-v2 .lp2-cc[data-level="low"] { color: #b91c1c; }
#left-panel.lp-v2 .lp2-cc[data-level="mid"] { color: #b45309; }
#left-panel.lp-v2 .lp2-cc[data-level="ok"] { color: #15803d; }
#left-panel.lp-v2 .lp2-fixed-note {
  margin: 14px 16px 0; padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0;
  font-size: 13px; line-height: 1.5; color: #334155;
}
#left-panel.lp-v2 #inspector input.lp2-name[readonly], #left-panel.lp-v2 #inspector textarea.lp2-desc[readonly] { background: #f8fafc; cursor: default; }


/* Evaluate: name, description, delete. */
#left-panel.lp-v2 .lp2-simple { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
#left-panel.lp-v2 .lp2-simple .lp2-flabel { font-size: 13px; font-weight: 600; color: var(--lp2-ink); }
#left-panel.lp-v2 .lp2-simple .lp2-flabel + .lp2-name,
#left-panel.lp-v2 .lp2-simple .lp2-flabel + .lp2-desc { margin-bottom: 8px; }
#left-panel.lp-v2 .lp2-simple .lp2-flabel:not(:first-child) { margin-top: 2px; }
#left-panel.lp-v2 #inspector input.lp2-name.lp2-name--boxed {
  width: 100%; margin: 0; padding: 8px 10px; border: 1px solid var(--lp2-line); border-radius: 8px; background: #fff;
  font-size: 14px; font-weight: 500; letter-spacing: 0;
}
#left-panel.lp-v2 .lp2-simple .lp2-desc { margin-bottom: 0; }
#left-panel.lp-v2 .lp2-simple .lp2-hint { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--lp2-muted); }
#left-panel.lp-v2 .lp2-simple .lp2-delete { margin: 6px 0 0; width: 100%; }

/* Type roles (css/base/type-scale.css): panel title = heading, block name =
   body, one-line description = small. */
#left-panel #left-panel-title { font-size: var(--t-heading); font-weight: 600; text-transform: none; letter-spacing: -0.01em; }
#left-panel.lp-v2 .lp2-cname { font-size: var(--t-body); font-weight: 500; }
#left-panel.lp-v2 .lp2-crole { font-size: var(--t-small); font-weight: 400; color: #64748b; }

/* ── What it stores (data components, Practice) — see _storesHtml in left-panel.js ── */
#left-panel.lp-v2 .lp2-stores-wrap { display: grid; gap: 6px; padding: 12px 16px 14px; border-bottom: 1px solid #eef2f6; }
#left-panel.lp-v2 .lp2-stores-wrap .lp2-flabel {
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0f172a;
}
#left-panel.lp-v2 .lp2-stores-list { display: grid; gap: 6px; }
#left-panel.lp-v2 .lp2-stores-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
#left-panel.lp-v2 #inspector input.lp2-stores-in {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--lp2-line-2); border-radius: 8px;
  background: #fff; font: inherit; font-size: var(--t-small); color: var(--lp2-ink); transition: border-color .15s, box-shadow .15s;
}
#left-panel.lp-v2 #inspector input.lp2-stores-in:hover { border-color: #94a3b8; }
#left-panel.lp-v2 #inspector input.lp2-stores-in:focus { outline: 0; border-color: var(--lp2-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
#left-panel.lp-v2 #inspector input.lp2-stores-in::placeholder { color: var(--lp2-dim); }
#left-panel.lp-v2 #inspector input.lp2-stores-in[readonly] { background: #f8fafc; cursor: default; }
#left-panel.lp-v2 .lp2-stores-rm {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px;
  border: 0; border-radius: 6px; background: none; color: var(--lp2-dim); cursor: pointer; transition: color .15s, background-color .15s;
}
#left-panel.lp-v2 .lp2-stores-rm:hover { color: var(--lp2-crit); background: var(--lp2-crit-soft); }
#left-panel.lp-v2 .lp2-stores-rm:focus-visible { outline: 2px solid var(--lp2-blue); outline-offset: 1px; }
#left-panel.lp-v2 .lp2-stores-add {
  justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 4px 6px 4px 2px;
  border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: var(--t-small); font-weight: 600; color: var(--lp2-blue);
}
#left-panel.lp-v2 .lp2-stores-add:hover { background: var(--lp2-blue-soft); }
#left-panel.lp-v2 .lp2-stores-add:focus-visible { outline: 2px solid var(--lp2-blue); outline-offset: 1px; }

/* ── css/shared/panel-textures.css ── */
/* =============================================================================
   PANEL TEXTURES — panel-textures.css
   Non-decorative structural tweaks for left/right panels.
   (Previously also drew decorative SVG backgrounds — blueprint grid / radar
   arcs / telemetry curves — behind both panels. Removed per feedback: the
   wavy/dashed line artwork read as an obvious AI-generated decorative
   cliché. The flattening/transparency rules below are unrelated to that
   artwork and are kept as-is.)
   ============================================================================= */

#left-panel { position: relative; }
#right-panel { position: relative; }

/* Ensure panel content sits above (now-empty) z-index stacking context */
#left-panel > * { position: relative; z-index: 1; }
#right-panel > * { position: relative; z-index: 1; }

/* ─── LEFT PANEL CONTENT — flattened, no nested card borders ──────────────── */
#left-panel .components-section,
#left-panel .inspector-section,
#left-panel .panel-section,
#left-panel .component-grid,
#left-panel .palette,
.inspector,
.inspector-extra,
.inspector-extra-title,
.inspector-extra-body {
  background: transparent !important;
}

.inspector {
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 4px 0;
}

/* ─── RIGHT PANEL CONTENT — flattened, no nested card borders ──────────────── */
#right-panel .simulation-panel,
#right-panel #practice-content,
#right-panel #simulate-view,
#right-panel #faq-view,
#right-panel .stage-theory,
#right-panel #stage-theory,
#right-panel #lrp-pane-problem,
#right-panel #lrp-pane-simulate,
#right-panel #lrp-pane-discuss,
#right-panel .panel-view,
#right-panel #simulate-panel-actions {
  background: transparent !important;
}

/* ── css/roadmap/roadmap.css ── */
#roadmap-view {
  /* ── Design tokens — premium light theme ── */
  --rp-bg:           #EEF3FB;
  --rp-surface:      #FFFFFF;
  --rp-surface-2:    #EFF2F8;
  --rp-panel-bg:     #EEF3FB;          /* left + right panel tinted background */
  --rp-panel-header: #E4EBF7;          /* panel header rows — slightly deeper */
  --rp-border:       #D5E0F0;
  --rp-border-soft:  #DDE6F4;
  --rp-accent:       #2563EB;
  --rp-accent-light: #EEF4FF;
  --rp-accent-mid:   #BFDBFE;
  --rp-text:         #0D1526;
  --rp-text-2:       #111827;
  --rp-muted:        #374151;
  --rp-dim:          #64748B;
  --rp-success:      #059669;
  --rp-warn:         #D97706;
  --rp-danger:       #DC2626;
  --rp-panel-w:      clamp(270px, 19vw, 430px);
  /* Right "Topic-wise progress" panel removed — reading area takes its space. */
  --rp-right-panel-w:0px;
  --rp-radius:       10px;
  --rp-font:         "Inter","Segoe UI",system-ui,sans-serif;

  /* ── TYPE SCALE — single source of truth for all roadmap text ──────
     Every font-size in roadmap panels must use one of these tokens.
     Nothing hardcoded. Nothing below --rp-fs-label (11px).
     ──────────────────────────────────────────────────────────────── */
  --rp-fs-label:  var(--t-caption);   /* caps, badges, pill labels      */
  --rp-fs-meta:   var(--t-small);     /* timestamps, secondary metadata */
  --rp-fs-body:   var(--t-body);   /* panel body text, list items    */
  --rp-fs-ui:     var(--t-body);    /* buttons, subtopic titles       */
  --rp-fs-sub:    var(--t-heading);   /* section headings, card titles  */
  --rp-fs-title:  var(--t-heading);      /* topic names in lists           */
  --rp-fs-h2:     var(--t-title);    /* topic detail H2                */
  --rp-fs-h1:     var(--t-display);    /* main topic heading H1          */


  /* Topic list name size — left panel */
  --fs-topic: var(--t-body);

  display:none;
  position:fixed;
  top:calc(var(--header-height,90px) + var(--topbar-height,44px) + var(--wab-height,0px));
  left:0; right:0;
  bottom:calc(var(--footer-height,30px) + var(--footer-gap,10px));
  grid-template-columns:var(--rp-panel-w) 1fr var(--rp-right-panel-w);
  grid-template-rows:1fr;
  background:var(--rp-bg);
  z-index:10;
  overflow:hidden;
  font-family:var(--rp-font);
  color:var(--rp-text);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
}


#rp-left {
  background: var(--rp-panel-bg);
  border-right: 1px solid var(--rp-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

#rp-left-header {
  padding: 10px 14px 10px;
  border-bottom: 1px solid var(--rp-border);
  background: var(--rp-panel-header);
  flex-shrink: 0;
}

#rp-left-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.rp-left-panel-title {
  font-size: var(--rp-fs-label);
  font-weight: 700;
  color: var(--rp-text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 1;
  padding-left: 6px;
}

.rp-left-count-badge {
  font-size: var(--rp-fs-label);
  font-weight: 700;
  color: var(--rp-accent);
  background: var(--rp-accent-light);
  border: 1px solid var(--rp-accent-mid);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.6;
  min-width: 20px;
  text-align: center;
  display: none;
}

.rp-left-count-badge.visible { display: inline-block; }

/* ── Phase Context Panel (left panel) — orientation only, no navigation ── */
#rp-phase-context {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rp-pc-phase-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rp-pc-phase-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-accent);
}

#rp-pc-phase-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--rp-text);
  line-height: 1.3;
}

.rp-pc-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rp-pc-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xss);
  font-weight: 600;
  color: var(--rp-text-2);
}

#rp-pc-progress-pct { color: var(--rp-accent); }

.rp-pc-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--rp-accent-light);
  overflow: hidden;
}

.rp-pc-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rp-accent) 0%, #6366f1 100%);
  transition: width 0.3s ease;
}

.rp-pc-topic-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  padding: 2px;
  min-height: 0;
}

.rp-pc-topic-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  padding: 10px 10px;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.rp-pc-topic-option:hover {
  background: var(--rp-surface-2, #fff);
  border-color: var(--rp-border-soft);
}

.rp-pc-topic-option.is-active {
  background: var(--rp-accent-light);
  border-color: var(--rp-accent);
  color: var(--rp-text);
  border-left: 3px solid var(--rp-accent);
}

.rp-pc-topic-option.is-locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.rp-pc-lock {
  flex-shrink: 0;
  color: var(--rp-dim);
}

.rp-pc-topic-empty {
  padding: 10px 12px;
  font-size: var(--fs-base);
  color: var(--rp-dim);
}

/* ── Collapsible Topics Tree ────────────────────────────── */

.rp-pc-topic-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
}

.rp-pc-topic-option.has-subtopics {
  cursor: pointer;
  border-radius: 8px 8px 0 0;
}

.rp-pc-topic-option.has-subtopics:hover {
  background: rgba(255, 255, 255, 0.08);
}

.rp-pc-chevron {
  flex-shrink: 0;
  color: var(--rp-text-2);
  transition: transform 0.2s ease;
  margin-left: auto;
}

.rp-pc-subtopics-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px 8px 28px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0 0 8px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  animation: slideDown 0.2s ease-out;
  max-height: 500px;
  overflow-y: auto;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  to {
    opacity: 1;
    max-height: 400px;
  }
}

.rp-pc-subtopic-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #ffffff;
  padding: 8px 8px;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  transition: all 0.15s ease;
}

.rp-pc-subtopic-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
}

.rp-pc-subtopic-option.is-active {
  background: transparent;
  border-color: transparent;
  color: var(--rp-accent);
  font-weight: 500;
}


#rp-overall-progress {
  flex-shrink: 0;
}

#rp-overall-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--rp-dim);
  margin-bottom: 5px;
}

#rp-overall-pct {
  color: var(--rp-accent);
  font-weight: 700;
}

#rp-overall-track {
  height: 3px;
  background: var(--rp-surface-2);
  border-radius: 999px;
  overflow: hidden;
}

#rp-overall-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--rp-accent) 0%, #6366f1 100%);
  border-radius: 999px;
  width: 0%;
  transition: width 0.4s ease;
}

#rm-spa-filter-wrap {
  position: relative;
  margin-top: 10px;
}

#rm-spa-filter-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 11px;
  border: 1px solid var(--rp-border-soft);
  border-radius: 8px;
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
  font-size: var(--fs-xss);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--rp-font);
}

#rm-spa-filter-btn:hover {
  border-color: var(--rp-accent-mid);
  background: var(--rp-accent-light);
}

#rm-spa-filter-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}

#rm-spa-filter-wrap.open #rm-spa-filter-btn svg {
  transform: rotate(180deg);
}

#rm-spa-filter-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--rp-surface);
  border: 1px solid var(--rp-border-soft);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.10);
  z-index: 40;
  overflow: hidden;
}

#rm-spa-filter-wrap.open #rm-spa-filter-dropdown {
  display: block;
}

.rm-filter-option {
  display: block;
  width: 100%;
  padding: 8px 13px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: var(--fs-xss);
  font-weight: 600;
  color: var(--rp-text-2);
  cursor: pointer;
  font-family: var(--rp-font);
  transition: background 0.12s;
}

.rm-filter-option:hover {
  background: var(--rp-surface-2);
}

.rm-filter-option.selected {
  color: var(--rp-accent);
  background: var(--rp-accent-light);
}

#rp-topic-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 20px;
}

.rm-topic-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s, transform 0.1s;
  border-left: 2px solid transparent;
  font-family: var(--rp-font);
  margin-bottom: 1px;
}

.rm-topic-item--beginner  { border-left-color: transparent; }
.rm-topic-item--intermediate { border-left-color: transparent; }
.rm-topic-item--advanced  { border-left-color: transparent; }

.rm-topic-item--beginner .rm-topic-num  { color: var(--rp-success); border-color: rgba(5,150,105,0.18); }
.rm-topic-item--intermediate .rm-topic-num { color: var(--rp-warn); border-color: rgba(217,119,6,0.18); }
.rm-topic-item--advanced .rm-topic-num  { color: var(--rp-danger); border-color: rgba(220,38,38,0.18); }

.rm-topic-item:hover {
  background: var(--rp-surface-2);
}

.rm-topic-item.active {
  background: var(--rp-accent-light);
  border-left-color: var(--rp-accent);
}

.rm-topic-item.rm-topic-locked {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Hide subtopic count meta for inactive items — only show on active */
.rm-topic-item:not(.active) .rm-topic-meta-row {
  display: none;
}

.rm-topic-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
  background: var(--rp-surface-2);
  color: var(--rp-muted);
  font-size: var(--fs-micro);
  font-weight: 700;
  border: 1px solid var(--rp-border-soft);
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s;
}

.rm-topic-item.active .rm-topic-num {
  background: var(--rp-accent);
  color: #fff;
  border-color: var(--rp-accent);
  box-shadow: 0 2px 6px rgba(37,99,235,0.3);
}

.rm-topic-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rm-topic-name {
  font-size: var(--fs-topic);
  font-weight: 500;
  color: var(--rp-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.rm-topic-item.active .rm-topic-name {
  color: var(--rp-text);
  font-weight: 600;
}

.rm-topic-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rm-topic-sub-count {
  font-size: 11px;
  color: var(--rp-dim);
  font-weight: 500;
}

.rm-topic-lock-icon {
  flex-shrink: 0;
  color: var(--rp-dim);
  margin-left: auto;
}

/* ── Topic group / topic-list / search bar — REMOVED (topics.list.js retains
   guarded dead code for these ids; left panel is now #rp-phase-context) ── */

.rm-diff-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rm-diff-pill--beginner    { background: #F0FDF4; color: #166534; }
.rm-diff-pill--intermediate { background: #FFFBEB; color: #92400E; }
.rm-diff-pill--advanced    { background: #FFF1F2; color: #9F1239; }

#rp-center {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rp-bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(37,99,235,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 85% 105%, rgba(99,102,241,0.03) 0%, transparent 55%);
  align-items: stretch;
}

#rp-center-scroll {
  flex: 1;
  overflow-y: auto;
  padding: clamp(20px, 2.5vw, 48px) clamp(18px, 3.5vw, 56px);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

#rp-center-footer {
  border-top: 1px solid var(--rp-border-soft);
  background: inherit;
  padding: 10px 0px;
  box-sizing: border-box;
}

#roadmap-breadcrumb {
  display:none;
  align-items:center;
  gap:5px;
  font-size:var(--fs-xs);
  color:var(--rp-muted);
  font-weight:500;
  margin-bottom:14px;
}

#roadmap-breadcrumb svg { flex-shrink:0; }

#roadmap-breadcrumb-topic {
  color:var(--rp-accent);
  font-weight:600;
}

.rm-topic-header { margin-bottom: 32px; }

.rm-topic-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.rm-topic-title-row .rm-topic-title { margin-bottom: 0; }
.rm-topic-title-row .rm-difficulty-badge { margin-bottom: 0; flex-shrink: 0; }

.rm-difficulty-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.rm-difficulty-badge--beginner {
  background: #D1FAE5;
  color: #065F46;
}

.rm-difficulty-badge--intermediate {
  background: #FEF3C7;
  color: #92400E;
}

.rm-difficulty-badge--advanced {
  background: #FEE2E2;
  color: #7F1D1D;
}

.rm-topic-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--rp-text);
  line-height: 1.18;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}

.rm-topic-description {
  font-size: var(--fs-base);
  color: #111827;
  line-height: 1.8;
  margin-bottom: 16px;
  width: 100%;
  max-width: 860px;
}

.rm-mission-box {
  background: rgba(99, 102, 241, 0.05);
  border-left: 3px solid #6366F1;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.rm-mission-box .rm-topic-description {
  margin-bottom: 0;
  color: var(--text-primary);
  font-weight: 500;
}

.rm-topic-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rm-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--rp-muted);
  font-weight: 500;
}

.rm-level-section { margin-bottom: 40px; }

.rm-level-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--rp-surface-2);
  border-radius: 8px;
  border: none;
}

.rm-level-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rm-level-label--beginner    { color: var(--rp-success); }
.rm-level-label--intermediate { color: var(--rp-warn); }
.rm-level-label--advanced    { color: var(--rp-danger); }

.rm-level-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: var(--fs-xss);
  font-weight: 600;
}

.rm-level-count-badge--beginner    { background: #F0FDF4; color: #166534; }
.rm-level-count-badge--intermediate { background: #FFFBEB; color: #92400E; }
.rm-level-count-badge--advanced    { background: #FFF1F2; color: #9F1239; }

/* ── Concept card — editorial, spacious, premium ── */
.rm-concept-card {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border-soft);
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.rm-concept-card:hover {
  box-shadow: 0 2px 10px rgba(15,23,42,0.07);
  transform: none;
}

.rm-concept-card[open] {
  border-color: rgba(37,99,235,0.20);
  box-shadow: 0 4px 20px rgba(37,99,235,0.08);
}

.rm-card-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--rp-surface);
  transition: background 0.14s;
}

.rm-card-summary::-webkit-details-marker { display: none; }

.rm-card-summary:hover { background: var(--rp-surface-2); }

.rm-concept-card[open] > .rm-card-summary {
  background: var(--rp-surface);
  border-bottom: 1px solid var(--rp-border-soft);
}

.rm-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  font-size: var(--fs-base);
}

.rm-card-icon--beginner    { background: #F0FDF4; }
.rm-card-icon--intermediate { background: #FFFBEB; }
.rm-card-icon--advanced    { background: #FFF1F2; }

.rm-card-title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rm-card-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rp-text);
  white-space: normal;
  overflow-wrap: break-word;
}

.rm-card-subtitle {
  font-size: var(--fs-xss);
  color: var(--rp-muted);
  font-weight: 500;
}

.rm-card-chevron {
  width: 14px;
  height: 14px;
  color: var(--rp-dim);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.rm-concept-card[open] .rm-card-chevron { transform: rotate(90deg); }

.rm-card-body {
  padding: 14px 18px 16px;
  color: var(--rp-text-2);
}

/* ── Prev/Next footer for single-subtopic view ── */
.rm-subtopic-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.rm-subtopic-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.rm-footer-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--rp-border);
  border-radius: 12px;
  background: var(--rp-surface);
  color: var(--rp-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08);
  transition: background 0.14s, border-color 0.14s, transform 0.1s, box-shadow 0.14s;
}

.rm-footer-nav:hover {
  background: var(--rp-surface-2);
  border-color: var(--rp-accent-mid);
  box-shadow: 0 4px 14px rgba(15,23,42,0.12);
  transform: translateY(-1px);
}

.rm-footer-nav:active,
.rm-footer-nav:focus-visible {
  border-color: var(--rp-accent);
  box-shadow: 0 0 0 3px var(--rp-accent-light);
  outline: none;
}

.rm-footer-nav--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rm-footer-nav--disabled:hover,
.rm-footer-nav--disabled:active,
.rm-footer-nav--disabled:focus-visible {
  background: var(--rp-surface);
  border-color: var(--rp-border);
  box-shadow: none;
  transform: none;
}

.rm-footer-nav-label {
  font-size: var(--fs-sm);
  color: var(--rp-text);
  font-weight: 600;
}

.rm-card-summary--expanded {
  cursor: default;
}

.rm-card-summary--expanded:hover {
  background: var(--rp-surface);
}

.rm-concept-card--expanded {
  border-color: rgba(37,99,235,0.20);
  box-shadow: 0 4px 20px rgba(37,99,235,0.06);
}

.rm-card-divider {
  height: 1px;
  background: var(--rp-border-soft);
  margin: 12px 0;
}

.rm-section { padding-top: 10px; }

.rm-section-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--rp-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.rm-section-text {
  font-size: var(--fs-sm);
  color: var(--rp-text-2);
  line-height: 1.62;
}

/* Tradeoff comparison — table instead of pills */
.rm-tradeoffs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 4px;
}

.rm-tradeoff-pill {
  padding: 10px 12px;
  border-radius: 7px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid var(--rp-border-soft);
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rm-tradeoff-pill strong { font-weight: 600; }
.rm-tradeoff-pro { color: #166534; font-size: var(--fs-sm); }
.rm-tradeoff-con { color: #991B1B; font-size: var(--fs-sm); }

.rm-tradeoff-pill--a { border-left: 2px solid var(--rp-accent); }
.rm-tradeoff-pill--b { border-left: 2px solid var(--rp-muted); }

/* Checklist — clean list, no background blobs */
.rm-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rm-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-sm);
  color: var(--rp-text-2);
  line-height: 1.65;
  padding: 5px 0;
}

.rm-checklist li::before {
  content: "→";
  color: var(--rp-accent);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.75;
}

.rm-locked-level-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.6;
  color: #78350F;
  margin-top: 6px;
  letter-spacing: 0.005em;
}

.rm-locked-level-banner strong {
  font-weight: 800;
  color: inherit;
}

.rm-locked-level-banner .rm-locked-signin {
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: #b45309;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.rm-locked-level-banner .rm-locked-signin:hover { background: #92400e; }

.rm-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 9px;
  border: 1px solid var(--rp-border-soft);
  background: var(--rp-surface);
  color: var(--rp-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
  font-family: var(--rp-font);
}

.rm-nav-btn:hover {
  background: var(--rp-accent-light);
  border-color: var(--rp-accent-mid);
  box-shadow: 0 2px 8px rgba(37,99,235,0.12);
}

#rp-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid var(--rp-border-soft);
  background: var(--rp-surface);
  flex-shrink: 0;
}

#rp-nav-row .rm-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

#roadmap-empty-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 24px;
  color:var(--rp-muted);
}

#roadmap-empty-state h4 {
  font-size:var(--fs-lg);
  font-weight:600;
  color:var(--rp-text-2);
  margin-bottom:8px;
}

#roadmap-empty-state p {
  font-size:var(--fs-sm);
  line-height:1.6;
  max-width: min(360px, 80%);
}

#rp-right {
  background: var(--rp-panel-bg);
  border-left: 1px solid var(--rp-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

#rp-right-inner {
  padding: 12px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
}

.rp-card {
  background:var(--rp-surface);
  border:1px solid var(--rp-border-soft);
  border-radius:var(--rp-radius);
  overflow:hidden;
}

.rp-card-head {
  padding:10px 12px 8px;
  border-bottom:1px solid var(--rp-border-soft)
}

.rp-card-label {
  font-size: 12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--rp-muted)
}

.rp-card-body {
  padding:10px 12px
}

/* ── Right panel legacy ID compatibility (elements now inside insights widget) ── */

#rm-spa-xp-value {
  font-size:var(--fs-md);
  font-weight:800;
  color:var(--rp-accent);
  letter-spacing:-0.01em;
  line-height:1;
}

#rp-xp-track {
  height:3px;
  background:var(--rp-surface-2);
  border-radius:999px;
  overflow:hidden;
}

#rm-spa-xp-bar {
  height:100%;
  background:var(--rp-accent);
  border-radius:999px;
  width:0%;
  transition:width 0.4s ease;
}

/* #rp-overall-track / #rp-overall-bar — defined near left panel styles above */

#rm-spa-ring-sublabel {
  font-size:var(--fs-xss);
  color:var(--rp-muted);
  font-weight:500;
}

#rp-time-value {
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--rp-text);
  line-height:1.2;
}

#rp-time-sub {
  font-size:var(--fs-xss);
  color:var(--rp-dim);
  font-weight:500;
}

#rm-spa-checklist-title {
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--rp-text);
}

#rm-spa-check-list {
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:2px;
}

.rm-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 7px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: default;
  text-align: left;
  font-family: var(--rp-font);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--rp-text-2);
  transition: background 0.12s;
}

.rm-check-item:hover {
  background: var(--rp-surface-2);
}

.rm-check-item.active {
  background: var(--rp-accent-light);
  color: var(--rp-accent);
}

.rm-check-box {
  width:16px;
  height:16px;
  min-width:16px;
  border-radius:5px;
  border:1.5px solid var(--rp-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--rp-surface);
  flex-shrink:0;
  transition:background 0.13s,border-color 0.13s
}

.rm-check-item.checked .rm-check-box {
  background:var(--rp-accent);
  border-color:var(--rp-accent)
}

.rm-inline-check {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:20px;
  height:20px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  border-radius:4px;
  z-index:2;
  position:relative
}

.rm-inline-check:hover .rm-check-box {
  border-color:var(--rp-accent);
  background:var(--rp-accent-light)
}

.rm-inline-check.checked .rm-check-box {
  background:var(--rp-accent);
  border-color:var(--rp-accent)
}

/* Read-only "Completed" status badge shown once a subtopic's quiz has been
   passed (60%+). Not clickable — completion is earned via the quiz, not
   toggled by the user. Sits to the right of the title, before the chevron. */
.rm-subtopic-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xss);
  font-weight: 600;
  white-space: nowrap;
}

.rm-subtopic-status--done {
  color: #15803D;
  background: #F0FDF4;
}

.rm-subtopic-status--done svg {
  flex-shrink: 0;
}

.rm-concept-card.rm-concept-card--done>summary .rm-card-title {
  text-decoration:line-through;
  color:var(--rp-dim)
}

.rm-concept-card.rm-concept-card--done {
  opacity:0.75
}

/* streak/streak-day styles now defined in the insights widget block above */

#rp-left-collapse,#rp-right-collapse {
  flex-shrink:0;
}

#rp-right-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px 8px;
  border-bottom: 1px solid var(--rp-border);
  background: var(--rp-panel-header);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

.rp-right-header-label {
  font-size: var(--rp-fs-label);
  font-weight: 700;
  color: var(--rp-text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 1;
  text-align: left;
}

/* ── Compact Insights Widget ────────────────────────────────────────── */
.rp-insights-widget {
  background:var(--rp-surface);
  border:1px solid var(--rp-border-soft);
  border-radius:var(--rp-radius);
  overflow:hidden;
  padding:12px 12px 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rp-ins-row {
  display:flex;
  align-items:center;
  gap:10px;
}

.rp-ins-label {
  display:flex;
  align-items:center;
  gap:4px;
  font-size: 12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--rp-muted);
  margin-bottom:3px;
}

.rp-ins-value {
  font-size:var(--fs-md);
  font-weight:800;
  color:var(--rp-accent);
  letter-spacing:-0.01em;
  line-height:1;
  margin-left:auto;
}

.rp-ins-dim {
  font-size:var(--fs-xss);
  color:var(--rp-dim);
  font-weight:500;
}

.rp-ins-accent {
  font-weight:700;
  color:var(--rp-accent);
}

.rp-ins-xp { flex-direction:row; align-items:center; }

.rp-ins-xp-track {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.rp-ins-xp-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:var(--fs-xss);
  font-weight:600;
  color:var(--rp-muted);
}

.rp-ins-divider {
  height:1px;
  background:var(--rp-border-soft);
  margin:0 -2px;
}

/* Progress row */
.rp-ins-progress { align-items:flex-start; }

.rp-ins-ring-wrap {
  position:relative;
  width:56px;
  height:56px;
  flex-shrink:0;
}

#rp-ring-label {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

#rm-spa-ring-text {
  font-size:var(--fs-xss);
  font-weight:800;
  color:var(--rp-text);
  line-height:1;
}

#rp-ring-track {
  fill:none;
  stroke:var(--rp-surface-2);
  stroke-width:5;
}

#rm-spa-ring-fill {
  fill:none;
  stroke:var(--rp-accent);
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:220;
  stroke-dashoffset:220;
  transition:stroke-dashoffset 0.5s ease;
}

.rp-ins-progress-text {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.rp-ins-stat-title {
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--rp-text);
  line-height:1.2;
}

.rp-ins-overall-wrap {
  margin-top:2px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.rp-ins-overall-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:var(--fs-xss);
  font-weight:600;
  color:var(--rp-muted);
}

.rp-ins-track-bar {
  height:3px;
  background:var(--rp-surface-2);
  border-radius:999px;
  overflow:hidden;
}

.rp-ins-track-bar > div {
  height:100%;
  background:var(--rp-accent);
  border-radius:999px;
  width:0%;
  transition:width 0.4s ease;
}

/* Streak + time side by side */
.rp-ins-meta-row {
  align-items:flex-start;
  gap:14px;
}

.rp-ins-streak-col {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.rp-ins-streak-dots,
.rp-streak-dots {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:3px;
  flex-wrap:nowrap;
}

.rp-ins-time-col {
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-end;
}

.rp-ins-time-val {
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--rp-text);
  line-height:1.2;
}

/* Compact streak dots */
.rm-streak-day {
  display:flex;
  flex-direction:column;
  align-items:center;
}

.rm-streak-dot {
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--rp-surface-2);
  border:1px solid var(--rp-border-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-xss);
  color:var(--rp-dim);
  font-weight:700;
  transition:background 0.15s,border-color 0.15s;
}

.rm-streak-day.active .rm-streak-dot {
  border-color:var(--rp-accent-mid);
  background:var(--rp-accent-light);
  color:var(--rp-accent);
}

.rm-streak-day.done .rm-streak-dot {
  background:var(--rp-accent);
  border-color:var(--rp-accent);
  color:#fff;
}

/* Checklist card */
.rp-checklist-card { margin-top:0; }

#roadmap-view.rp-left-collapsed {
  grid-template-columns:0 1fr var(--rp-right-panel-w);
}

#roadmap-view.rp-left-collapsed #rp-left {
  overflow:hidden;
  width:0;
  border-right:none
}

#roadmap-view.rp-right-collapsed {
  grid-template-columns:var(--rp-panel-w) 1fr 0
}

#roadmap-view.rp-right-collapsed #rp-right {
  overflow:hidden;
  width:0;
  border-left:none
}

/* Ensure left/center/right panels occupy grid row 1 (sticky header removed) */
#rp-left, #rp-center, #rp-right {
  grid-row: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   MISSION BANNER
   ───────────────────────────────────────────────────────────────────────── */
#rp-mission-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: var(--rp-accent-light);
  border-bottom: 1px solid var(--rp-accent-mid);
  border-left: 3px solid var(--rp-accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--rp-text-2);
  flex-shrink: 0;
  transition: opacity 0.2s;
  box-shadow: 0 1px 3px rgba(37,99,235,0.06);
}

#rp-mission-banner.hidden {
  display: none;
}

#rp-mission-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rp-accent);
  flex-shrink: 0;
}

#rp-mission-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--rp-text);
}

#rp-mission-text::before {
  content: "Current Mission: ";
  font-weight: 500;
  color: var(--rp-muted);
}

.rp-mission-est {
  flex-shrink: 0;
  font-size: var(--fs-xss);
  font-weight: 600;
  color: var(--rp-accent);
  background: rgba(37,99,235,0.10);
  border: 1px solid var(--rp-accent-mid);
  border-radius: 99px;
  padding: 2px 9px;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE COMPLETION CEREMONY
   ───────────────────────────────────────────────────────────────────────── */
#rp-ceremony {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rp-ceremony.hidden {
  display: none;
}

#rp-ceremony-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 21, 38, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#rp-ceremony-card {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px) clamp(24px, 4vw, 40px);
  max-width: min(520px, 90vw);
  width: calc(100% - 48px);
  box-shadow: 0 32px 80px rgba(11,21,38,0.28), 0 0 0 1px rgba(37,99,235,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  transform: translateY(0) scale(1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

/* Entrance animation */
#rp-ceremony.rp-ceremony-in #rp-ceremony-card {
  animation: rp-cer-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes rp-cer-entrance {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Exit animation */
#rp-ceremony.rp-ceremony-out #rp-ceremony-card {
  animation: rp-cer-exit 0.35s ease forwards;
}

@keyframes rp-cer-exit {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.92) translateY(12px); }
}

#rp-ceremony-stamp {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(5,150,105,0.30);
  animation: rp-cer-stamp-pop 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes rp-cer-stamp-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

#rp-ceremony-phase-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #059669;
  background: #F0FDF4;
  border: 1px solid #A7F3D0;
  border-radius: 99px;
  padding: 3px 12px;
  margin-bottom: 16px;
}

#rp-ceremony-title {
  font-size: var(--fs-xl);
  font-weight: 750;
  color: var(--rp-text);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 10px;
}

#rp-ceremony-subtitle {
  font-size: var(--fs-sm);
  color: var(--rp-muted);
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: min(380px, 90%);
}

#rp-ceremony-capabilities {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

#rp-ceremony-capabilities li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-sm);
  color: var(--rp-text-2);
  line-height: 1.55;
  background: #F8FAFF;
  border: 1px solid var(--rp-border-soft);
  border-radius: 9px;
  padding: 10px 14px;
}

.rp-cer-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

#rp-ceremony-xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 99px;
  background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 28px;
  box-shadow: 0 4px 14px rgba(37,99,235,0.30);
}

#rp-ceremony-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#rp-ceremony-continue {
  padding: 13px 24px;
  border-radius: 11px;
  border: none;
  background: linear-gradient(90deg, #2563EB 0%, #4F46E5 100%);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.12s;
  font-family: var(--rp-font);
  box-shadow: 0 4px 14px rgba(37,99,235,0.30);
}

#rp-ceremony-continue:hover {
  box-shadow: 0 6px 20px rgba(37,99,235,0.40);
  transform: translateY(-1px);
}

#rp-ceremony-dismiss {
  padding: 10px 24px;
  border-radius: 11px;
  border: 1px solid var(--rp-border-soft);
  background: transparent;
  color: var(--rp-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  font-family: var(--rp-font);
}

#rp-ceremony-dismiss:hover {
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   ENGINEER TIER LABEL  (injected below arc by roadmap-features.js)
   ───────────────────────────────────────────────────────────────────────── */
.rp-tier-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin-top: 3px;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.rp-floating-restore {
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  width:28px;
  height:110px;
  border-radius:999px;
  border:1px solid #94a3b8;
  background:#cbd5e1;
  color:#0f172a;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-xl);
  font-weight:600;
  box-shadow:0 10px 18px rgba(15,23,42,0.12);
  transition:background 0.13s
}

.rp-floating-restore:hover {
  background:#b6c2d9;
  border-color:#64748b
}

.rp-floating-restore:not(.hidden) {
  display:flex
}

.rp-floating-restore--left {
  left:10px
}

.rp-floating-restore--right {
  right:10px
}

@media (max-width:900px) {
  #roadmap-view {
    grid-template-columns: 0 1fr 0;
  }
  #rp-left, #rp-right {
    display: none;
  }
}

@media (max-width:1200px) {
  #roadmap-view {
    --rp-panel-w: clamp(240px, 22vw, 330px);
    --rp-right-panel-w: 0px;
  }
}

@media (max-width:1400px) {
  #roadmap-view {
    --rp-panel-w: clamp(260px, 20vw, 370px);
    --rp-right-panel-w: 0px;
  }
}

/* -------------------------------------------------------------------------
   Blocks-v1 renderer styles (text / points / table / callout / case_study)
   ------------------------------------------------------------------------- */

.rm-blocks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  color: var(--rp-text-2, #CBD5E1);
}

.rm-blocks-table thead tr {
  background: var(--rp-surface-2, #1E293B);
}

.rm-blocks-table th {
  padding: 7px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rp-text-3, #94A3B8);
  border-bottom: 1px solid var(--rp-border, #334155);
  white-space: nowrap;
}

.rm-blocks-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--rp-border, #1E293B);
  vertical-align: top;
  line-height: var(--lh-normal);
}

.rm-blocks-table tbody tr:last-child td {
  border-bottom: none;
}

.rm-blocks-table tbody tr:hover {
  background: var(--rp-surface-2, #1E293B);
}

.rm-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid var(--rp-border, #334155);
}

.rm-callout {
  border-radius: 0 6px 6px 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.rm-case-study-card {
  border-radius: 8px;
  margin-top: 8px;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.rm-case-study-card strong {
  color: #F1F5F9;
}

.rm-case-study-card em {
  color: #93C5FD;
  font-style: italic;
}

.rm-blocks-table strong {
  color: var(--rp-text-1, #F1F5F9);
}

.rm-blocks-table em {
  color: #93C5FD;
  font-style: italic;
}

.rm-checklist li strong {
  color: var(--rp-text-1, #F1F5F9);
}

.rm-checklist li em {
  color: #93C5FD;
  font-style: italic;
}

/* =====================================================================
   BLOCKS-V2 — Clean, minimal renderer styles — LIGHT THEME
   Philosophy: whitespace over borders, type over decoration.
   Title: 0.85rem  |  Body text: 0.75rem  |  Color: #000000
   ===================================================================== */

/* ── Typography utilities ────────────────────────────────────────────── */
.rm-text-sm  { font-size: var(--fs-sm); line-height: 1.65; color: #000000; }
.rm-text-xs  { font-size: var(--fs-xs); line-height: 1.6;  color: #000000; }
.rm-w-medium { font-weight: 500; }
.rm-w-bold   { font-weight: 600; }

/* ── SVG icon baseline ───────────────────────────────────────────────── */
.rm-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #6B7280;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.rm-icon--chevron {
  transition: transform 0.18s ease;
  color: #9CA3AF;
}

details[open] > summary .rm-icon--chevron {
  transform: rotate(90deg);
}

/* ── Spacing primitives ──────────────────────────────────────────────── */
.rm-gap {
  height: 15px;
}

/* ── Section ─────────────────────────────────────────────────────────── */
.rm-section {
  padding: 0;
}

.rm-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--rp-fs-sub);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 10px 0;
}

.rm-section-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.rm-section-label--sub {
  font-size: var(--rp-fs-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #374151;
  margin: 14px 0 6px 0;
}
.rm-section-label--sub::before { display: none; }

/* Color-coded section blocks — subtle tints behind near-black text */
.rm-section[class*="rm-section--"] {
  padding: 14px 16px;
  border-radius: 0 12px 12px 0;
  margin: 6px 0;
  box-shadow: 0 1px 2px rgba(13,21,38,0.04);
}

.rm-section--building-blocks { background: #EEF4FF; border-left: 3px solid #2563EB; }
.rm-section-label--building-blocks { color: #1E3A8A; }

.rm-section--definitions { background: #F1F5F9; border-left: 3px solid #475569; }
.rm-section-label--definitions { color: #0F172A; }

.rm-section--patterns { background: #F5F3FF; border-left: 3px solid #7C3AED; }
.rm-section-label--patterns { color: #4C1D95; }

.rm-section--strategies { background: #ECFDF5; border-left: 3px solid #059669; }
.rm-section-label--strategies { color: #064E3B; }

.rm-section--bonus { background: #FFFBEB; border-left: 3px solid #D97706; }
.rm-section-label--bonus { color: #78350F; }

.rm-section--interview { background: #EEF2FF; border-left: 3px solid #6366F1; }
.rm-section-label--interview { color: #312E81; }

.rm-section--tradeoffs { background: #F0FDFA; border-left: 3px solid #0D9488; }
.rm-section-label--tradeoffs { color: #134E4A; }

.rm-section--real-world { background: #F0F9FF; border-left: 3px solid #0284C7; }
.rm-section-label--real-world { color: #0C4A6E; }

.rm-section--deep-dive { background: #F3F4F6; border-left: 3px solid #4B5563; }
.rm-section-label--deep-dive { color: #111827; }

.rm-section-text {
  font-size: var(--fs-base);
  color: #000000;
  margin: 0;
}

/* ── List ─────────────────────────────────────────────────────────────── */
.rm-list {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: disc;
  color: #000000;
  font-size: var(--fs-sm);
}

.rm-list li {
  margin-bottom: 7px;
  padding-left: 2px;
}

.rm-list li:last-child { margin-bottom: 0; }

.rm-list li strong { color: #000000; font-weight: 600; }
.rm-list li em     { color: #1D4ED8; font-style: italic; }

.rm-list--numbered {
  list-style: decimal;
  padding-left: 20px;
}

.rm-list--numbered li {
  margin-bottom: 7px;
  padding-left: 2px;
}

.rm-list--numbered li:last-child { margin-bottom: 0; }

.rm-list ol,
.rm-list ul {
  margin-top: 6px;
  margin-bottom: 6px;
  padding-left: 20px;
}

.rm-list ol { list-style: decimal; }
.rm-list ul { list-style: disc; }

.rm-list li li { margin-bottom: 4px; }
.rm-list li li:last-child { margin-bottom: 0; }

/* ── Level-aware content UI (topic-level blocks) ────────────────────────
   Renders the new content schema (intuition/mental_model/building_blocks/
   patterns/tradeoffs/real_world/interview) as a scannable set of collapsible
   sections. Intuition & Mental Model open by default — native <details>
   (no JS toggle library needed). */
.rm-level-details {
  margin-bottom: 12px;
  border: 1px solid var(--rp-border-soft);
  border-radius: 10px;
  background: var(--rp-surface-2, #fff);
  overflow: hidden;
}

.rm-level-details--intuition,
.rm-level-details--mental-model {
  border-color: var(--rp-accent-mid);
}

.rm-level-details--intuition > .rm-level-summary,
.rm-level-details--mental-model > .rm-level-summary {
  background: var(--rp-accent-light);
  color: var(--rp-accent);
}

.rm-level-summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 14px;
  font-size: var(--fs-xss);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rp-text-2);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.rm-level-summary::-webkit-details-marker { display: none; }

.rm-level-summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--rp-dim);
  transition: transform 0.15s ease;
}

.rm-level-details[open] > .rm-level-summary::after { transform: rotate(180deg); }

.rm-level-details-body {
  padding: 0 14px 14px;
}

.rm-level-details-body .rm-gap { display: none; }

/* ── Quick scan ───────────────────────────────────────────────────────── */
.rm-quick-scan {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 2px;
}

.rm-qs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #000000;
  font-size: var(--fs-sm);
  padding: 5px 10px;
}

.rm-qs-row .rm-icon {
  flex-shrink: 0;
  margin-top: 0;
  color: #6B7280;
}

.rm-qs-row strong { color: #000000; font-weight: 600; }

/* ── Definition card (replaces heavy card) ────────────────────────────── */
.rm-def-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 14px 16px;
  border-left: 2px solid #3B82F6;
  background: #EFF6FF;
  border-radius: 0 6px 6px 0;
  margin: 4px 0;
}

.rm-def-card--callout {
  border-left-color: #7C3AED;
  background: #F5F3FF;
}

.rm-def-card--warning {
  border-left-color: #D97706;
  background: #FFFBEB;
}

.rm-def-card__body {
  flex: 1;
  min-width: 0;
}

.rm-def-card__title {
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3B82F6;
}

.rm-def-card--callout .rm-def-card__title { color: #7C3AED; }
.rm-def-card--warning .rm-def-card__title { color: #D97706; }

.rm-def-card__text {
  font-size: var(--fs-sm);
  color: #000000;
  margin: 0;
}

.rm-def-card__text strong { color: #000000; font-weight: 600; }
.rm-def-card__text em     { color: #1D4ED8; font-style: italic; }

/* ── Definition card grid (visual cards instead of bullet wall) ─────── */
.rm-def-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) {
  .rm-def-grid { grid-template-columns: 1fr; }
}
.rm-def-card-v2 {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(13,21,38,0.04);
  transition: transform .12s ease, box-shadow .12s ease;
}
.rm-def-card-v2:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(13,21,38,0.07);
}
.rm-def-card-v2__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.rm-def-card-v2__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}
.rm-def-card-v2__icon svg { width: 20px; height: 20px; }
.rm-def-card-v2__term {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #0D1526;
  line-height: 1.25;
}
.rm-def-card-v2__definition {
  margin: 0 0 10px 0;
  font-size: var(--fs-sm);
  color: #111827;
  line-height: 1.6;
}
.rm-def-card-v2__details {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
  color: #111827;
  line-height: 1.55;
}
.rm-def-card-v2__details li { margin-bottom: 3px; }

/* ── Inline SVG diagrams (simple, no sparkles) ──────────────────────── */
.rm-diagram {
  margin: 0 0 18px;
  padding: 18px;
  background: var(--rp-surface);
  border: 1px solid var(--rp-border-soft);
  border-radius: var(--rp-radius);
}
.rm-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
}
.rm-diagram__caption {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--rp-fs-body);
  color: var(--rp-text-2);
  font-weight: 500;
}

/* ── Step badge (numbers the Why/Where/How/When narrative blocks) ────── */
.rm-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3B82F6;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.rm-def-card--callout .rm-step-badge { background: #7C3AED; }
.rm-def-card--warning .rm-step-badge { background: #D97706; }
.rm-section-label .rm-step-badge,
.rm-expand__trigger .rm-step-badge { background: #64748B; }

/* ── Icon badge (bigger illustrative diagram, reused per content type) ── */
.rm-icon-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

.rm-icon-badge svg { width: 26px; height: 26px; }

.rm-icon-badge--sm {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  margin-right: 2px;
}

.rm-icon-badge--sm svg { width: 15px; height: 15px; }

.rm-icon-badge--map,
.rm-icon-badge--bolt { background: rgba(124, 58, 237, 0.1); color: #7C3AED; }

.rm-icon-badge--chart { background: rgba(22, 163, 74, 0.1); color: #16A34A; }

.rm-icon-badge--scale { background: rgba(217, 119, 6, 0.1); color: #D97706; }

.rm-icon-badge--warning { background: rgba(217, 119, 6, 0.1); color: #D97706; }

.rm-icon-badge--chat { background: rgba(99, 102, 241, 0.1); color: #6366F1; }


/* ── Alert (left-border only, no colored background) ─────────────────── */
.rm-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0 10px 14px;
  background: transparent;
}

.rm-alert--warning {
  border-left: 2px solid #D97706;
}

.rm-alert--warning span { color: #000000; font-size: var(--fs-xs); }
.rm-alert--warning .rm-icon { color: #D97706; }
.rm-alert--warning strong { color: #000000; font-weight: 600; }

.rm-alert--info {
  border-left: 2px solid #3B82F6;
}

.rm-alert--info span { color: #000000; font-size: var(--fs-xs); }
.rm-alert--info .rm-icon { color: #3B82F6; }

.rm-alert--success {
  border-left: 2px solid #16A34A;
}
.rm-alert--success span { color: #000000; font-size: var(--fs-xs); }
.rm-alert--success .rm-icon { color: #16A34A; }

.rm-alert--danger {
  border-left: 2px solid #DC2626;
}
.rm-alert--danger span { color: #000000; font-size: var(--fs-xs); }
.rm-alert--danger .rm-icon { color: #DC2626; }

/* ── Story (collapsible real-world flow) ─────────────────────────────── */
.rm-story {
  border-top: 1px solid #E5E7EB;
  margin-top: 4px;
}

.rm-story__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.rm-story__header::-webkit-details-marker { display: none; }

.rm-story__company {
  font-size: var(--fs-xs);
  color: #000000;
  font-weight: 500;
}

.rm-story__badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 3px;
  padding: 1px 5px;
}

.rm-story__header .rm-icon--chevron { margin-left: auto; }

.rm-story__body {
  padding: 4px 0 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rm-story-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-xs);
  color: #000000;
}

.rm-story-idx {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border: 1px solid #D1D5DB;
  border-radius: 50%;
  font-size: var(--fs-xss);
  font-weight: 600;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.rm-story-step strong { color: #000000; font-weight: 600; }

.rm-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: #3B82F6;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.rm-link-btn:hover { color: #60A5FA; }
.rm-link-btn .rm-icon { color: currentColor; }

/* ── Expand / Accordion ──────────────────────────────────────────────── */
.rm-expand {
  border-top: 1px solid #E5E7EB;
  margin-top: 6px;
}

.rm-expand__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #1D4ED8;
  background: #EFF6FF;
  border-radius: 6px;
  border: 1px solid #BFDBFE;
  list-style: none;
  user-select: none;
  margin-top: 6px;
  transition: background 0.12s, border-color 0.12s;
}

.rm-expand__trigger:hover {
  background: #DBEAFE;
  border-color: #93C5FD;
}

.rm-expand__trigger::-webkit-details-marker { display: none; }
.rm-expand[open] > .rm-expand__trigger {
  color: #1E40AF;
  background: #DBEAFE;
  border-color: #93C5FD;
  border-radius: 6px 6px 0 0;
}
.rm-expand__trigger .rm-icon--chevron { margin-left: auto; color: #3B82F6; }

.rm-expand__body {
  padding: 10px 14px 12px 14px;
  border: 1px solid #BFDBFE;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: #FAFCFF;
}

.rm-expand__body--rows {
  padding: 4px 14px 8px 14px;
}

.rm-acc-bullet-list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm-acc-bullet {
  font-size: var(--fs-sm);
  color: #374151;
  line-height: 1.65;
  padding-left: 2px;
}

/* Nested accordion rows — flat (no collapse per item) */
.rm-acc-row {
  border-top: 1px solid #F3F4F6;
}

.rm-acc-row:first-child { border-top: none; }

.rm-acc-row__q {
  display: flex;
  align-items: center;
  padding: 10px 4px 4px 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #000000;
  gap: 8px;
}

.rm-acc-row__a {
  padding: 2px 4px 12px 4px;
  font-size: var(--fs-sm);
  color: #000000;
  line-height: 1.7;
}

.rm-acc-row__a strong { color: #000000; font-weight: 600; }

/* ── Tabs ────────────────────────────────────────────────────────────── */
.rm-tabs {
  margin-top: 4px;
  border-top: 1px solid #E5E7EB;
}

.rm-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #E5E7EB;
  overflow-x: auto;
}

.rm-tab-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 7px 12px 7px 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #374151;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.12s;
  white-space: nowrap;
}

.rm-tab-btn:hover { color: #000000; }

.rm-tab-btn.active {
  color: #1D4ED8;
  border-bottom-color: #3B82F6;
}

.rm-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rm-tab-panels { padding: 0; }

.rm-tab-panel { display: none; padding: 10px 0 4px; }
.rm-tab-panel.active { display: block; }

/* ── Table ───────────────────────────────────────────────────────────── */
.rm-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}

.rm-table {
  width: 100%;
  border-collapse: collapse;
}

.rm-table th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: #1D4ED8;
  text-align: center;
  padding: 8px 12px;
  border-bottom: none;
  white-space: nowrap;
}

.rm-table td {
  font-size: var(--fs-sm);
  color: #000000;
  padding: 8px 12px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: top;
  line-height: 1.6;
  text-align: center;
}

.rm-table tr:last-child td { border-bottom: none; }
.rm-table td strong { color: #000000; font-weight: 600; }
.rm-table tbody tr:nth-child(even) { background: #F9FAFB; }
.rm-table tbody tr:hover { background: #EFF6FF; }

.rm-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.rm-bullet-list li {
  padding: 4px 0 4px 16px;
  position: relative;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.rm-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
}


.rm-qs-item {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #000000;
}

.rm-qs-item strong {
  color: #1D4ED8;
  font-weight: 700;
}

/* ── card ───────────────────────────────────────────────────────────── */
.rm-block-card {
  border-radius: 6px;
  padding: 12px 14px;
  margin: 6px 0;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
}

.rm-block-card--high {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.rm-block-card--medium {
  background: #F9FAFB;
  border-color: #E5E7EB;
}

.rm-block-card--low {
  background: #FFFFFF;
  border-color: #F3F4F6;
}

.rm-block-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1D4ED8;
  margin-bottom: 6px;
}

.rm-block-card__body {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: #000000;
}

.rm-block-card__body strong { color: #000000; font-weight: 600; }
.rm-block-card__body em    { color: #1D4ED8; font-style: italic; }

/* ── alert (boxed) ──────────────────────────────────────────────────── */
.rm-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: var(--fs-md);
  line-height: 1.6;
  margin: 6px 0;
  background: transparent;
}

.rm-alert .rm-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rm-alert--warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.rm-alert--info {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}

.rm-alert--success {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}

.rm-alert--danger {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

.rm-alert strong { color: inherit; font-weight: 700; }

/* ── story ──────────────────────────────────────────────────────────── */
.rm-story-wrap {
  border: 1px solid #ECEEF3;
  border-radius: 6px;
  margin: 6px 0;
  overflow: hidden;
}

.rm-story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  cursor: pointer;
  background: #F8FAFC;
  border-bottom: 1px solid #ECEEF3;
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}

.rm-story-header:hover { background: #F0F4FF; }

.rm-story-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #000000;
  letter-spacing: 0.02em;
}

.rm-story-body {
  padding: 12px 14px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm-story-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #000000;
}

.rm-story-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1D4ED8;
  color: #fff;
  font-size: var(--fs-xss);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.rm-story-step strong { color: #000000; font-weight: 600; }

.rm-story-cta {
  margin-top: 6px;
  align-self: flex-start;
  font-size: var(--fs-xss) !important;
  padding: 6px 12px !important;
}

/* ── accordion ──────────────────────────────────────────────────────── */
.rm-accordion-wrap {
  border: 1px solid #ECEEF3;
  border-radius: 6px;
  margin: 6px 0;
  overflow: hidden;
}

.rm-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  cursor: pointer;
  background: #F8FAFC;
  border-bottom: 1px solid #ECEEF3;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rp-accent);
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}

.rm-accordion-trigger:hover { background: #F0F4FF; }
.rm-accordion-trigger::-webkit-details-marker { display: none; }

.rm-accordion-panel {
  padding: 10px 14px;
  background: #FFFFFF;
}

.rm-acc-item {
  border-bottom: 1px solid #F3F4F6;
  margin: 0;
}

.rm-acc-item:last-child { border-bottom: none; }

.rm-acc-item-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: #374151;
  list-style: none;
  user-select: none;
}

.rm-acc-item-trigger::-webkit-details-marker { display: none; }
.rm-acc-item[open] .rm-acc-item-trigger { color: #000000; }

.rm-acc-item-body {
  padding: 0 0 10px 8px;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: #000000;
}

.rm-acc-item-body strong { color: #000000; font-weight: 600; }

.rm-acc-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: #9CA3AF;
}

details[open] > summary .rm-acc-chevron,
.rm-accordion-wrap[open] > .rm-accordion-trigger .rm-acc-chevron {
  transform: rotate(90deg);
}

/* ── tabs (boxed) ───────────────────────────────────────────────────── */
.rm-tabs-wrap {
  margin: 6px 0;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
}

.rm-tab-bar {
  display: flex;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  gap: 0;
  overflow-x: auto;
}

.rm-tab-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #6B7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.rm-tab-btn:hover { color: #000000; }

.rm-tab-btn.active {
  color: #1D4ED8;
  border-bottom-color: #3B82F6;
}

.rm-tab-panels {
  background: #FFFFFF;
}

.rm-tab-panel {
  display: none;
  padding: 14px 14px;
}

.rm-tab-panel.active { display: block; }

/* ── table (enhanced) ───────────────────────────────────────────────── */
.rm-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
  border-radius: 6px;
}

.rm-blocks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.rm-blocks-table th {
  background: #1D4ED8;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  border-bottom: none;
  white-space: nowrap;
}

.rm-blocks-table td {
  padding: 8px 12px;
  color: #000000;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: top;
  line-height: 1.6;
  text-align: center;
}

.rm-blocks-table tr:last-child td { border-bottom: none; }
.rm-blocks-table tr:hover td      { background: #F9FAFB; }


/* ═══════════════════════════════════════════════════════════════════════
   DARK NAVY THEME OVERRIDES — scoped to #roadmap-view
   Overrides all hardcoded light-theme values in blocks-v2 / components
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Diff pills ── */
#roadmap-view .rm-diff-pill--beginner    { background: rgba(5,150,105,0.10); color: #059669; }
#roadmap-view .rm-diff-pill--intermediate { background: rgba(217,119,6,0.10); color: #D97706; }
#roadmap-view .rm-diff-pill--advanced    { background: rgba(220,38,38,0.10); color: #DC2626; }

/* ── Level count badges ── */
#roadmap-view .rm-level-count-badge--beginner    { background: rgba(5,150,105,0.10); color: #059669; }
#roadmap-view .rm-level-count-badge--intermediate { background: rgba(217,119,6,0.10); color: #D97706; }
#roadmap-view .rm-level-count-badge--advanced    { background: rgba(220,38,38,0.10); color: #DC2626; }

/* ── Concept card — dark ── */
#roadmap-view .rm-concept-card {
  background: var(--rp-surface);
  border-color: var(--rp-border-soft);
}
#roadmap-view .rm-concept-card:hover { box-shadow: 0 2px 10px rgba(15,23,42,0.10); transform: none; }
#roadmap-view .rm-concept-card[open] {
  border-color: var(--rp-accent-mid);
  box-shadow: 0 2px 16px rgba(37,99,235,0.08);
}
#roadmap-view .rm-card-summary { background: var(--rp-surface); }
#roadmap-view .rm-card-summary:hover { background: var(--rp-surface-2); }
#roadmap-view .rm-concept-card[open] > .rm-card-summary { border-bottom-color: var(--rp-border-soft); }
#roadmap-view .rm-card-title { color: var(--rp-text); }
#roadmap-view .rm-card-subtitle { color: var(--rp-muted); }
#roadmap-view .rm-card-body { color: var(--rp-text-2); }
#roadmap-view .rm-card-divider { background: var(--rp-border-soft); }

#roadmap-view .rm-concept-card--expanded {
  border-color: var(--rp-accent-mid);
  box-shadow: 0 2px 16px rgba(37,99,235,0.08);
}
#roadmap-view .rm-card-summary--expanded:hover { background: var(--rp-surface); }

/* ── Subtopic footer — dark ── */
#roadmap-view .rm-subtopic-footer {
  background: transparent;
}
#roadmap-view .rm-footer-nav {
  background: var(--rp-surface);
  border-color: var(--rp-border);
  color: var(--rp-text);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
#roadmap-view .rm-footer-nav:hover {
  background: var(--rp-surface-2);
  border-color: var(--rp-accent-mid);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
#roadmap-view .rm-footer-nav:active,
#roadmap-view .rm-footer-nav:focus-visible {
  border-color: var(--rp-accent);
  box-shadow: 0 0 0 3px var(--rp-accent-light);
  outline: none;
}
#roadmap-view .rm-footer-nav--disabled {
  opacity: 0.35;
}
#roadmap-view .rm-footer-nav--disabled:hover,
#roadmap-view .rm-footer-nav--disabled:active,
#roadmap-view .rm-footer-nav--disabled:focus-visible {
  background: var(--rp-surface);
  border-color: var(--rp-border);
  box-shadow: none;
  transform: none;
}
#roadmap-view .rm-footer-nav-label { color: var(--rp-text); }

/* ── Center footer bar — dark ── */
#roadmap-view #rp-center-footer {
  background: inherit;
  border-top-color: var(--rp-border-soft);
}

/* ── Card icons ── */
#roadmap-view .rm-card-icon--beginner    { background: rgba(5,150,105,0.10); }
#roadmap-view .rm-card-icon--intermediate { background: rgba(217,119,6,0.10); }
#roadmap-view .rm-card-icon--advanced    { background: rgba(220,38,38,0.10); }

/* ── Locked level banner ── */
#roadmap-view .rm-locked-level-banner {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #78350F;
}

/* ── Nav buttons — dark ── */
#roadmap-view .rm-nav-btn {
  background: var(--rp-surface);
  border-color: var(--rp-border);
  color: var(--rp-accent);
}
#roadmap-view .rm-nav-btn:hover {
  background: var(--rp-accent-light);
  border-color: var(--rp-accent-mid);
}
#roadmap-view #rp-nav-row {
  background: var(--rp-surface);
  border-top-color: var(--rp-border-soft);
}

/* ── Empty state — dark ── */
#roadmap-view #roadmap-empty-state h4 { color: var(--rp-text-2); }
#roadmap-view #roadmap-empty-state p  { color: var(--rp-muted); }

/* ── Section labels inside concept cards — dark ── */
#roadmap-view .rm-section-title { color: var(--rp-muted); }
#roadmap-view .rm-section-text  { color: var(--rp-text-2); }

/* ── Tradeoff pills — dark ── */
#roadmap-view .rm-tradeoff-pill {
  background: var(--rp-surface-2);
  border-color: var(--rp-border);
  color: var(--rp-text-2);
}
#roadmap-view .rm-tradeoff-pro { color: #166534; }
#roadmap-view .rm-tradeoff-con { color: #991B1B; }
[data-theme="dark"] #roadmap-view .rm-tradeoff-pro { color: #4ADE80; }
[data-theme="dark"] #roadmap-view .rm-tradeoff-con { color: #F87171; }

/* ── Checklist (inside right panel / subtopic nav) — dark ── */
#roadmap-view .rm-check-item { color: var(--rp-text-2); }
#roadmap-view .rm-check-item:hover { background: var(--rp-surface-2); }
#roadmap-view .rm-check-item.active { background: var(--rp-accent-light); color: var(--rp-accent); }
#roadmap-view .rm-check-box {
  background: var(--rp-surface-2);
  border-color: var(--rp-border);
}
#roadmap-view .rm-check-item.checked .rm-check-box,
#roadmap-view .rm-inline-check.checked .rm-check-box {
  background: var(--rp-accent);
  border-color: var(--rp-accent);
}
#roadmap-view .rm-concept-card.rm-concept-card--done>summary .rm-card-title { color: var(--rp-dim); }
#roadmap-view .rm-concept-card.rm-concept-card--done { opacity: 0.82; }
[data-theme="dark"] #roadmap-view .rm-subtopic-status--done {
  color: #4ADE80;
  background: rgba(74, 222, 128, 0.12);
}

/* ── Filter dropdown — dark ── */
#roadmap-view #rm-spa-filter-btn {
  background: var(--rp-surface);
  border-color: var(--rp-border);
  color: var(--rp-text-2);
}
#roadmap-view #rm-spa-filter-btn:hover { border-color: var(--rp-accent-mid); }
#roadmap-view #rm-spa-filter-dropdown {
  background: var(--rp-surface);
  border-color: var(--rp-border);
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
}
#roadmap-view .rm-filter-option { color: var(--rp-text-2); }
#roadmap-view .rm-filter-option:hover { background: var(--rp-surface-2); }
#roadmap-view .rm-filter-option.selected { color: var(--rp-accent); background: var(--rp-accent-light); }

/* ── Right panel header — dark ── */
#roadmap-view #rp-right-header {
  background: var(--rp-surface);
  border-bottom-color: var(--rp-border-soft);
}

/* ── Insights widget — dark ── */
#roadmap-view .rp-insights-widget {
  background: var(--rp-surface-2);
  border-color: var(--rp-border-soft);
}
#roadmap-view .rp-ins-track-bar > div { background: var(--rp-accent); }

/* ── Checklist card — dark ── */
#roadmap-view .rp-checklist-card,
#roadmap-view .rp-card {
  background: var(--rp-surface);
  border-color: var(--rp-border-soft);
}
#roadmap-view .rp-card-head { border-bottom-color: var(--rp-border-soft); }

/* ── Blocks-v2 dark overrides ── */
/* typography */
#roadmap-view .rm-text-sm,
#roadmap-view .rm-text-xs  { color: var(--rp-text-2); }
#roadmap-view .rm-w-bold   { color: var(--rp-text); }

/* icons */
#roadmap-view .rm-icon     { color: var(--rp-muted); }

/* list */
#roadmap-view .rm-list { color: var(--rp-text-2); }
#roadmap-view .rm-list li strong { color: var(--rp-text); }
#roadmap-view .rm-list li em     { color: var(--rp-accent); }

/* quick scan */
#roadmap-view .rm-qs-row { color: var(--rp-text-2); background: transparent; }
#roadmap-view .rm-qs-row strong { color: var(--rp-text); }
#roadmap-view .rm-qs-item { color: var(--rp-text-2); }
#roadmap-view .rm-qs-item strong { color: var(--rp-accent); }

/* definition card */
#roadmap-view .rm-def-card {
  background: var(--rp-accent-light);
  border-left-color: var(--rp-accent);
}
#roadmap-view .rm-def-card--callout {
  background: rgba(124, 58, 237, 0.08);
  border-left-color: #A78BFA;
}
#roadmap-view .rm-def-card__text,
#roadmap-view .rm-def-card__text strong { color: var(--rp-text-2); }
#roadmap-view .rm-def-card__title { color: var(--rp-accent); }
#roadmap-view .rm-def-card--callout .rm-def-card__title { color: #7C3AED; }
[data-theme="dark"] #roadmap-view .rm-def-card--callout .rm-def-card__title { color: #A78BFA; }
#roadmap-view .rm-icon-badge { background: rgba(96, 165, 250, 0.14); color: var(--rp-accent); }
#roadmap-view .rm-icon-badge--map,
#roadmap-view .rm-icon-badge--bolt { background: rgba(124, 58, 237, 0.12); color: #7C3AED; }
#roadmap-view .rm-icon-badge--chart { background: rgba(5, 150, 105, 0.12); color: #059669; }
#roadmap-view .rm-icon-badge--scale { background: rgba(217, 119, 6, 0.12); color: #D97706; }
[data-theme="dark"] #roadmap-view .rm-icon-badge--map,
[data-theme="dark"] #roadmap-view .rm-icon-badge--bolt { background: rgba(167, 139, 250, 0.14); color: #A78BFA; }
[data-theme="dark"] #roadmap-view .rm-icon-badge--chart { background: rgba(74, 222, 128, 0.14); color: #4ADE80; }
[data-theme="dark"] #roadmap-view .rm-icon-badge--scale { background: rgba(251, 191, 36, 0.14); color: #FBBF24; }
#roadmap-view .rm-def-grid { gap: 14px; }
#roadmap-view .rm-def-card-v2 {
  background: var(--rp-surface);
  border-color: var(--rp-border-soft);
}
#roadmap-view .rm-def-card-v2:hover {
  border-color: var(--rp-border);
  box-shadow: 0 6px 14px rgba(13,21,38,0.08);
}
#roadmap-view .rm-def-card-v2__term { color: var(--rp-text); }
#roadmap-view .rm-def-card-v2__definition { color: var(--rp-text-2); }
#roadmap-view .rm-def-card-v2__details { color: var(--rp-text-2); }

/* alert */
#roadmap-view .rm-alert--warning {
  background: rgba(217,119,6,0.06);
  border-color: rgba(217,119,6,0.2);
  color: var(--rp-warn);
}
#roadmap-view .rm-alert--info {
  background: rgba(37,99,235,0.06);
  border-color: rgba(37,99,235,0.2);
  color: var(--rp-text-2);
}
#roadmap-view .rm-alert--success {
  background: rgba(5,150,105,0.06);
  border-color: rgba(5,150,105,0.2);
  color: var(--rp-success);
}
#roadmap-view .rm-alert--danger {
  background: rgba(220,38,38,0.06);
  border-color: rgba(220,38,38,0.2);
  color: var(--rp-danger);
}
#roadmap-view .rm-alert span   { color: var(--rp-text-2); }
#roadmap-view .rm-alert strong { color: var(--rp-text); }

/* story */
#roadmap-view .rm-story,
#roadmap-view .rm-story-wrap { border-color: var(--rp-border); }
#roadmap-view .rm-story__header,
#roadmap-view .rm-story-header {
  background: var(--rp-surface-2);
  border-bottom-color: var(--rp-border);
  color: var(--rp-text-2);
}
#roadmap-view .rm-story__header:hover,
#roadmap-view .rm-story-header:hover { background: var(--rp-surface); }
#roadmap-view .rm-story__company,
#roadmap-view .rm-story-label { color: var(--rp-text); }
#roadmap-view .rm-story__badge {
  background: rgba(37,99,235,0.08);
  border-color: rgba(37,99,235,0.2);
  color: var(--rp-accent);
}
#roadmap-view .rm-story__body,
#roadmap-view .rm-story-body { background: var(--rp-surface); }
#roadmap-view .rm-story-step { color: var(--rp-text-2); }
#roadmap-view .rm-story-step strong { color: var(--rp-text); }
#roadmap-view .rm-story-idx {
  border-color: var(--rp-border);
  color: var(--rp-muted);
  background: var(--rp-surface-2);
}
#roadmap-view .rm-story-num { background: var(--rp-accent); }

/* expand */
#roadmap-view .rm-expand { border-top-color: var(--rp-border); }
#roadmap-view .rm-expand__trigger {
  color: var(--rp-accent);
  background: var(--rp-accent-light);
  border-color: var(--rp-accent-mid);
}
#roadmap-view .rm-expand__trigger:hover { background: var(--rp-accent-light); border-color: var(--rp-accent); }
#roadmap-view .rm-expand[open] > .rm-expand__trigger { background: var(--rp-accent-light); border-color: var(--rp-accent); }
#roadmap-view .rm-expand__body {
  background: var(--rp-surface);
  border-color: var(--rp-accent-mid);
}
#roadmap-view .rm-acc-bullet { color: var(--rp-text-2); }
#roadmap-view .rm-acc-row { border-top-color: var(--rp-border); }
#roadmap-view .rm-acc-row__q { color: var(--rp-text); }
#roadmap-view .rm-acc-row__a { color: var(--rp-text-2); }
#roadmap-view .rm-acc-row__a strong { color: var(--rp-text); }

/* accordion */
#roadmap-view .rm-accordion-wrap { border-color: var(--rp-border); }
#roadmap-view .rm-accordion-trigger {
  background: var(--rp-surface-2);
  border-bottom-color: var(--rp-border);
  color: var(--rp-accent);
}
#roadmap-view .rm-accordion-trigger:hover { background: var(--rp-surface); }
#roadmap-view .rm-accordion-panel { background: var(--rp-surface); }
#roadmap-view .rm-acc-item { border-bottom-color: var(--rp-border); }
#roadmap-view .rm-acc-item-trigger { color: var(--rp-text-2); }
#roadmap-view .rm-acc-item[open] .rm-acc-item-trigger { color: var(--rp-text); }
#roadmap-view .rm-acc-item-body { color: var(--rp-text-2); }
#roadmap-view .rm-acc-item-body strong { color: var(--rp-text); }
#roadmap-view .rm-acc-chevron { color: var(--rp-muted); }

/* tabs */
#roadmap-view .rm-tabs { border-top-color: var(--rp-border); }
#roadmap-view .rm-tabs-wrap { border-color: var(--rp-border); }
#roadmap-view .rm-tab-bar { background: var(--rp-surface-2); border-bottom-color: var(--rp-border); }
#roadmap-view .rm-tab-btn { color: var(--rp-muted); }
#roadmap-view .rm-tab-btn:hover { color: var(--rp-text); }
#roadmap-view .rm-tab-btn.active { color: var(--rp-accent); border-bottom-color: var(--rp-accent); }
#roadmap-view .rm-tab-panels { background: var(--rp-surface); }
#roadmap-view .rm-tab-panel { color: var(--rp-text-2); }

/* table */
#roadmap-view .rm-table-wrap { border-color: var(--rp-border); }
#roadmap-view .rm-table th,
#roadmap-view .rm-blocks-table th {
  background: var(--rp-accent-mid);
  color: var(--rp-text);
}
#roadmap-view .rm-table td,
#roadmap-view .rm-blocks-table td {
  color: var(--rp-text-2);
  border-bottom-color: var(--rp-border);
}
#roadmap-view .rm-table td strong { color: var(--rp-text); }
#roadmap-view .rm-table tbody tr:nth-child(even) { background: var(--rp-surface-2); }
#roadmap-view .rm-table tbody tr:hover,
#roadmap-view .rm-blocks-table tbody tr:hover { background: var(--rp-accent-light); }
#roadmap-view .rm-blocks-table td strong { color: var(--rp-text); }
#roadmap-view .rm-blocks-table td em { color: var(--rp-accent); }

/* block card */
#roadmap-view .rm-block-card { background: var(--rp-surface-2); border-color: var(--rp-border); }
#roadmap-view .rm-block-card--high { background: var(--rp-accent-light); border-color: var(--rp-accent-mid); }
#roadmap-view .rm-block-card__label { color: var(--rp-accent); }
#roadmap-view .rm-block-card__body { color: var(--rp-text-2); }
#roadmap-view .rm-block-card__body strong { color: var(--rp-text); }

/* link btn */
#roadmap-view .rm-link-btn { color: var(--rp-accent); }

/* ── Center area — reading focus depth ── */
#roadmap-view #rp-center {
  background: var(--rp-bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37,99,235,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(99,102,241,0.02) 0%, transparent 60%);
}

/* Topic header in center */
#roadmap-view .rm-topic-title { color: var(--rp-text); }
#roadmap-view .rm-topic-description { color: var(--rp-text-2); }
#roadmap-view .rm-meta-item { color: var(--rp-muted); }

/* Level labels */
#roadmap-view .rm-level-label--beginner    { color: var(--rp-success); }
#roadmap-view .rm-level-label--intermediate { color: var(--rp-warn); }
#roadmap-view .rm-level-label--advanced    { color: var(--rp-danger); }

/* Overall progress / filter stays below subtopic nav */
#rp-left-secondary {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ─────────────────────────────────────────────────────────────────────────
   RIGHT PANEL — Journey track + XP Momentum
   ───────────────────────────────────────────────────────────────────────── */

/* Section label within right panel */
#roadmap-view .rp-panel-section-label {
  font-size: var(--rp-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

#roadmap-view .rp-panel-section-label svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--rp-accent);
  background: var(--rp-accent-light);
  border-radius: 4px;
  padding: 2px;
  box-sizing: content-box;
}

/* ── XP Momentum section ── */
#rp-momentum-section {
  padding: 12px 13px 11px;
  border: 1px solid var(--rp-border-soft);
  border-radius: 10px;
  background: var(--rp-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Level arc SVG */
.rp-arc-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rp-arc-svg-wrap {
  position: relative;
  width: 68px;
  height: 38px;  /* half-circle */
  flex-shrink: 0;
}

.rp-arc-svg {
  display: block;
  overflow: visible;
}

.rp-arc-track {
  fill: none;
  stroke: var(--rp-surface-2);
  stroke-width: 6;
  stroke-linecap: round;
}

.rp-arc-fill {
  fill: none;
  stroke: var(--rp-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 91.1;
  stroke-dashoffset: 91.1;
  transition: stroke-dashoffset 0.6s ease;
}

.rp-arc-center {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  text-align: center;
  line-height: 1;
}

.rp-arc-level {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--rp-text);
  line-height: 1;
}

.rp-arc-label-text {
  font-size: var(--fs-xss);
  color: var(--rp-muted);
  line-height: 1;
}

.rp-arc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* XP bar */
#rp-xp-momentum-bar-wrap {
  height: 4px;
  background: var(--rp-surface-2);
  border-radius: 999px;
  overflow: hidden;
}

#rp-xp-momentum-bar-wrap > div {
  height: 100%;
  background: linear-gradient(90deg, var(--rp-accent) 0%, #9b8af7 100%);
  border-radius: 999px;
  width: 0%;
  transition: width 0.5s ease;
  box-shadow: 0 0 6px rgba(37,99,235,0.3);
}

/* XP value row */
.rp-xp-val-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.rp-xp-val {
  font-size: var(--fs-subhead);
  font-weight: 800;
  color: var(--rp-accent);
  letter-spacing: -0.01em;
  line-height: 1;
}

.rp-xp-val-label {
  font-size: var(--fs-micro);
  color: var(--rp-muted);
  font-weight: 500;
}

/* Session XP badge */
.rp-session-xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--rp-success);
  background: rgba(5,150,105,0.07);
  border: 1px solid rgba(5,150,105,0.18);
  align-self: flex-start;
}

/* Streak row */
.rp-streak-row-new {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rp-streak-flame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #F97316;
  flex-shrink: 0;
}

.rp-streak-count-new {
  font-size: var(--fs-subhead);
  font-weight: 800;
  color: var(--rp-text);
  line-height: 1;
}

.rp-streak-unit-new {
  font-size: var(--fs-xss);
  color: var(--rp-muted);
  font-weight: 500;
}

/* Day dots row */
#rp-streak-dots-new {
  display: flex;
  align-items: center;
  gap: 3px;
}

.rp-sd-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.rp-sd-dot-new {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rp-surface-2);
  border: 1px solid var(--rp-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xss);
  color: var(--rp-muted);
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s;
}

.rp-sd-new.done .rp-sd-dot-new {
  background: var(--rp-accent);
  border-color: var(--rp-accent);
  color: #fff;
}

.rp-sd-new.today .rp-sd-dot-new {
  background: var(--rp-accent-light);
  border-color: var(--rp-accent-mid);
  color: var(--rp-accent);
}

/* Motivational cue */
#rp-motivational-cue {
  padding: 9px 11px;
  background: var(--rp-accent-light);
  border-radius: 8px;
  border-left: 3px solid var(--rp-accent);
  font-size: var(--fs-xss);
  color: var(--rp-text-2);
  line-height: 1.55;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────
   Sidebar collapse animation for subtopic focus mode
   ───────────────────────────────────────────────────────────────────────── */
#rp-left.rp-left-reading-mode #rp-left-header {
  padding-bottom: 8px;
}

/* Scrollspy active highlight on check items */
#roadmap-view .rm-check-item.rp-spy-active {
  background: var(--rp-accent-light);
  border-left: 2px solid var(--rp-accent);
  color: var(--rp-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1 — Feature 1 · Mission Banner (injected into topic detail)
   ═══════════════════════════════════════════════════════════════════════════ */

.rm-mission-banner {
  margin: 0 0 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(37,99,235,0.09) 0%, rgba(124,58,237,0.07) 100%);
  border: 1px solid rgba(37,99,235,0.28);
  border-radius: var(--rp-radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rm-mission-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rm-mission-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rp-accent);
}

.rm-mission-title {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--rp-text);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

.rm-mission-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rm-mission-skill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--fs-xss);
  font-weight: 600;
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
  border: 1px solid var(--rp-border-soft);
  white-space: nowrap;
}

.rm-mission-outcome {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid rgba(37,99,235,0.1);
}

.rm-mission-outcome-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-2);
}

.rm-mission-outcome-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rp-text);
  line-height: 1.62;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1 — Feature 5 · Context Strip (used at / impact / interview)
   ═══════════════════════════════════════════════════════════════════════════ */

.rm-context-strip {
  margin: 0 0 14px;
  border: 1px solid var(--rp-border-soft);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  overflow: hidden;
}

.rm-ctx-row {
  display: flex;
  align-items: stretch;
  min-height: 40px;
}

.rm-ctx-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  flex: 1;
  min-width: 0;
}

.rm-ctx-divider {
  width: 1px;
  background: var(--rp-border-soft);
  flex-shrink: 0;
}

.rm-ctx-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rp-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.rm-ctx-companies {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.rm-ctx-company {
  font-size: var(--fs-xss);
  font-weight: 600;
  color: var(--rp-text-2);
  white-space: nowrap;
}

.rm-ctx-company + .rm-ctx-company::before {
  content: '·';
  margin-right: 5px;
  color: var(--rp-dim);
  font-weight: 400;
}

.rm-ctx-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xss);
  font-weight: 700;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.rm-ctx-impact {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 14px 9px;
  border-top: 1px solid var(--rp-border-soft);
  background: var(--rp-surface-2);
}

.rm-ctx-impact-icon {
  color: var(--rp-muted);
  flex-shrink: 0;
  margin-top: 1px;
}

.rm-ctx-impact-text {
  font-size: var(--fs-xss);
  font-weight: 500;
  color: var(--rp-muted);
  line-height: 1.55;
}
/* ── Mode Action Bar ───────────────────────────────────────────────────── */
.rm-mode-action-bar {
  position: relative;
  margin-top: 20px;
  padding: 16px 18px 18px;
  background: linear-gradient(135deg, rgba(79,110,247,0.07) 0%, rgba(16,185,129,0.05) 100%);
  border: 1.5px solid rgba(79,110,247,0.22);
  border-radius: 14px;
  overflow: hidden;
}
.rm-mode-action-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(79,110,247,0.06) 0%, transparent 60%);
  pointer-events: none;
}
/* left accent stripe */
.rm-mode-action-bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #4f6ef7 0%, #10b981 100%);
  border-radius: 14px 0 0 14px;
}

.rm-mode-bar-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.rm-mode-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: rgba(79,110,247,0.12);
  border-radius: 7px;
  flex-shrink: 0;
  color: #4f6ef7;
}
.rm-mode-bar-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--rp-fg, #1e293b);
  letter-spacing: 0.01em;
}
.rm-mode-bar-sub {
  font-size: var(--fs-xss);
  color: var(--rp-dim, #64748b);
  margin-top: 1px;
}

.rm-mode-bar-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rm-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  white-space: nowrap;
  line-height: 1;
  flex: 1 1 clamp(120px, 15%, 220px);
  justify-content: center;
  max-width: min(220px, 18vw);
}
.rm-mode-btn svg { flex-shrink: 0; }
.rm-mode-btn:hover  { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,0.13); }
.rm-mode-btn:active { transform: translateY(0); box-shadow: none; }

.rm-mode-btn--learn {
  background: #4f6ef7;
  color: #fff;
  border: 1.5px solid #4f6ef7;
  box-shadow: 0 2px 8px rgba(79,110,247,0.25);
}
.rm-mode-btn--learn:hover { background: #3d5ce8; border-color: #3d5ce8; }

.rm-mode-btn--practice {
  background: #fff;
  color: #059669;
  border: 1.5px solid rgba(16,185,129,0.4);
  box-shadow: 0 2px 8px rgba(16,185,129,0.12);
}
.rm-mode-btn--practice:hover { background: rgba(16,185,129,0.06); border-color: #10b981; }

/* Dark mode overrides */
[data-theme="dark"] .rm-mode-action-bar {
  background: linear-gradient(135deg, rgba(79,110,247,0.1) 0%, rgba(16,185,129,0.07) 100%);
  border-color: rgba(79,110,247,0.28);
}
[data-theme="dark"] .rm-mode-btn--learn {
  background: #4f6ef7; color: #fff; border-color: #4f6ef7;
}
[data-theme="dark"] .rm-mode-btn--practice {
  background: rgba(16,185,129,0.12); color: #34d399; border-color: rgba(52,211,153,0.35);
}
[data-theme="dark"] .rm-mode-bar-icon { background: rgba(79,110,247,0.2); color: #7c9cff; }
[data-theme="dark"] .rm-mode-bar-title { color: #e2e8f0; }


/* ═══════════════════════════════════════════════════════════════════════════
   DARK NAVY PANEL THEME
   Left panel and right panel inherit the deep blue palette.
   The center content canvas keeps the white/light surface for readability.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Scoped token overrides — cascade to all children ── */
#rp-left,
#rp-right {
  --rp-surface:      #132035;
  --rp-surface-2:    #1a2e4a;
  --rp-panel-bg:     #0d1829;
  --rp-panel-header: #0b1526;
  --rp-border:       rgba(56,189,248,0.12);
  --rp-border-soft:  rgba(56,189,248,0.07);
  --rp-accent:       #3b82f6;
  --rp-accent-light: rgba(59,130,246,0.15);
  --rp-accent-mid:   rgba(59,130,246,0.35);
  --rp-text:         #e2e8f0;
  --rp-text-2:       #cbd5e1;
  --rp-muted:        #8faac4;
  --rp-dim:          #4a6480;
  --rp-success:      #34d399;
  --rp-warn:         #fbbf24;
  --rp-danger:       #f87171;

  /* rm-progress dark overrides scoped here */
  --rmp-blue-tint:      rgba(59,130,246,0.10);
  --rmp-blue-tint-mid:  rgba(59,130,246,0.18);
  --rmp-blue-tint-deep: rgba(59,130,246,0.28);
  --rmp-border:         rgba(56,189,248,0.14);
  --rmp-text:           #e2e8f0;
  --rmp-text-mid:       #94a3b8;
  --rmp-text-muted:     #64748b;
  --rmp-shadow-sm:      0 1px 3px rgba(0,0,0,0.35);
  --rmp-shadow-md:      0 3px 12px rgba(0,0,0,0.45);
  --rmp-green:          #34d399;
  --rmp-blue:           #3b82f6;

  color: #e2e8f0;
}

/* ── 2. Panel backgrounds — linear gradient ── */
#rp-left,
#rp-right {
  background: linear-gradient(180deg, #0d1829 0%, #0f1e38 100%);
  border-color: rgba(56,189,248,0.10);
}

/* ── 3. Left panel header + title ── */
#rp-left-header {
  background: rgba(11,21,38,0.70);
  border-bottom-color: rgba(56,189,248,0.10);
  backdrop-filter: blur(4px);
}

.rp-left-panel-title { color: #8faac4; }

.rp-left-count-badge {
  background: rgba(59,130,246,0.18);
  color: #93c5fd;
  border-color: rgba(59,130,246,0.30);
}

/* Overall progress label + bar */
#rp-overall-label { color: #4a6480; }
#rp-overall-pct   { color: #38bdf8; }
#rp-overall-track { background: rgba(255,255,255,0.08); }
#rp-overall-bar {
  background: linear-gradient(90deg, #3b82f6 0%, #38bdf8 100%);
}

/* ── 5. Filter dropdown ── */
#rm-spa-filter-btn {
  background: rgba(255,255,255,0.05);
  border-color: rgba(56,189,248,0.12);
  color: #cbd5e1;
}
#rm-spa-filter-btn:hover {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.35);
}
#rm-spa-filter-dropdown {
  background: #132035;
  border-color: rgba(56,189,248,0.12);
  box-shadow: 0 10px 32px rgba(0,0,0,0.45);
}
.rm-filter-option { color: #cbd5e1; }
.rm-filter-option:hover { background: rgba(255,255,255,0.05); }
.rm-filter-option.selected {
  color: #38bdf8;
  background: rgba(59,130,246,0.12);
}

/* ── 5b. Topic search bar / topic group chevrons — REMOVED (dead ids) ── */

/* ── 6. Topic list items ── */
#rp-topic-scroll {
  scrollbar-color: rgba(56,189,248,0.20) transparent;
}
#rp-topic-scroll::-webkit-scrollbar-track  { background: transparent; }
#rp-topic-scroll::-webkit-scrollbar-thumb  {
  background: rgba(56,189,248,0.18);
  border-radius: 4px;
}
#rp-topic-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(56,189,248,0.32);
}

.rm-topic-item { color: #cbd5e1; }

.rm-topic-item:hover { background: rgba(255,255,255,0.05); }

.rm-topic-item.active {
  background: rgba(59,130,246,0.15);
  border-left-color: #38bdf8;
  color: #e2e8f0;
}

/* Topic number badge */
.rm-topic-num {
  background: rgba(255,255,255,0.06);
  color: #4a6480;
}
.rm-topic-item.active .rm-topic-num {
  background: rgba(59,130,246,0.22);
  color: #93c5fd;
  border-color: rgba(59,130,246,0.30);
}

/* Difficulty colours on dark */
.rm-topic-item--beginner  .rm-topic-num { color: #34d399; border-color: rgba(52,211,153,0.22); }
.rm-topic-item--intermediate .rm-topic-num { color: #fbbf24; border-color: rgba(251,191,36,0.22); }
.rm-topic-item--advanced  .rm-topic-num { color: #f87171; border-color: rgba(248,113,113,0.22); }

/* Topic name + meta */
.rm-topic-name { color: #ffffff !important; font-size: var(--fs-topic) !important; }
.rm-topic-item.active .rm-topic-name { color: #ffffff !important; }
.rm-topic-meta-row { color: #ffffff !important; font-size: 11px !important; }
.rm-topic-item.active .rm-topic-meta-row { color: #ffffff !important; }
.rm-topic-sub-count { color: #ffffff !important; font-size: 11px !important; }

/* Check mark on completed */
.rm-topic-check svg { color: #34d399; opacity: 0.85; }

/* ── 7. Right panel cards ── */
#rp-right-inner {
  scrollbar-color: rgba(56,189,248,0.18) transparent;
}
#rp-right-inner::-webkit-scrollbar-track { background: transparent; }
#rp-right-inner::-webkit-scrollbar-thumb {
  background: rgba(56,189,248,0.16);
  border-radius: 4px;
}
#rp-right-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(56,189,248,0.30);
}

.rp-card {
  background: rgba(19,32,53,0.85);
  border-color: rgba(56,189,248,0.10);
  backdrop-filter: blur(4px);
}

.rp-card-head {
  border-bottom-color: rgba(56,189,248,0.08);
  background: rgba(11,21,38,0.40);
}

.rp-card-label { color: #4a6480; }

/* XP value in right panel */
#rm-spa-xp-value { color: #38bdf8; }

/* ── 8. Right panel header title ── */
#rp-right-header {
  background: rgba(11,21,38,0.70);
  border-bottom-color: rgba(56,189,248,0.10);
  backdrop-filter: blur(4px);
}

/* ── 9. rm-rank-card on dark panel ── */
.rm-rank-card {
  background: rgba(19,32,53,0.90);
  border-color: rgba(56,189,248,0.14);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.rm-rank-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.45), 0 0 0 1px rgba(59,130,246,0.20);
}

/* ── 10. Collapse toggle buttons ── */
#rp-left-collapse,
#rp-right-collapse {
  background: rgba(11,21,38,0.80);
  border-color: rgba(56,189,248,0.12);
  color: #c8ddf0;
}
#rp-left-collapse:hover,
#rp-right-collapse:hover {
  background: rgba(59,130,246,0.12);
  color: #ffffff;
  border-color: rgba(59,130,246,0.30);
}

/* ── 11. Subtle radial glow behind each panel (ambient) ── */
#rp-left::before,
#rp-right::before {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.06) 0%, transparent 65%);
  z-index: 0;
}

/* ensure children sit above the pseudo glow */
#rp-left > *,
#rp-right > * { position: relative; z-index: 1; }


/* ══════════════════════════════════════════════════════════
   12. Adaptive Learning Panels (Skill Profile, Recs, Readiness)
   ══════════════════════════════════════════════════════════ */

/* Base card shell */
.rp-adaptive-card {
  background: rgba(11,21,38,0.60);
  border: 1px solid rgba(56,189,248,0.10);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  margin-top: 0.65rem;
  font-size: var(--fs-xs, 0.78rem);
  color: var(--color-text-secondary, #94a3b8);
}
.rp-adaptive-card.hidden { display: none; }

.rp-adaptive-card__header {
  display: flex;
  align-items: center;
  gap: 0.40rem;
  font-size: var(--fs-xss, 0.72rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.65rem;
}
.rp-adaptive-card__header svg {
  flex-shrink: 0;
  opacity: 0.65;
}

/* ── Skill bars ── */
.rp-skill-bars {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.rp-skill-row {
  display: grid;
  grid-template-columns: 1fr 2.5fr auto;
  align-items: center;
  gap: 0.45rem;
}
.rp-skill-row__label {
  font-size: var(--fs-xs, 0.72rem);
  color: #c8ddf0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-skill-row__track {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.rp-skill-row__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.rp-skill-row__fill--weak  { background: linear-gradient(90deg, #ef4444, #f87171); }
.rp-skill-row__fill--mid   { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.rp-skill-row__fill--good  { background: linear-gradient(90deg, #10b981, #34d399); }
.rp-skill-row__pct {
  font-size: var(--fs-xs, 0.72rem);
  font-variant-numeric: tabular-nums;
  color: #c8ddf0;
  font-weight: 500;
  min-width: 2.4rem;
  text-align: right;
}

/* ── Recommendations ── */
.rp-rec-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rp-rec-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid #3b82f6;
  border-radius: 6px;
  padding: 0.50rem 0.65rem;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  display: block;
}
.rp-rec-item:hover { background: rgba(59,130,246,0.07); border-left-color: #60a5fa; }
.rp-rec-item--high  { border-left-color: #ef4444; }
.rp-rec-item--high:hover  { background: rgba(239,68,68,0.07); }
.rp-rec-item--medium { border-left-color: #f59e0b; }
.rp-rec-item--medium:hover { background: rgba(245,158,11,0.07); }
.rp-rec-item__title {
  font-size: var(--fs-xs, 0.78rem);
  font-weight: var(--fw-medium, 500);
  color: #cbd5e1;
  margin-bottom: 0.20rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-rec-item__reason {
  font-size: var(--fs-micro, 0.68rem);
  color: #64748b;
  line-height: 1.4;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rp-rec-item__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 0.22rem;
}
.rp-rec-item--high  .rp-rec-item__badge { background: rgba(239,68,68,0.15);  color: #f87171; }
.rp-rec-item--medium .rp-rec-item__badge { background: rgba(245,158,11,0.15); color: #fcd34d; }
.rp-rec-item--low   .rp-rec-item__badge { background: rgba(59,130,246,0.12); color: #93c5fd; }

/* ── Topic-wise Progress panel ── */
.rp-tp-here {
  font-size: var(--fs-micro, 0.68rem);
  font-weight: 600;
  color: var(--rp-dim, #94a3b8);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rp-tp-here:empty { display: none; }
.rp-tp-state { display: flex; flex-direction: column; gap: 0.6rem; }
.rp-tp-heading {
  font-size: var(--fs-sm, 0.85rem);
  font-weight: 700;
  color: #e8f0fe;
}
.rp-tp-lead {
  font-size: var(--fs-xs, 0.73rem);
  color: #94a3b8;
  margin: -0.25rem 0 0;
}
.rp-tp-section { display: flex; flex-direction: column; gap: 0.3rem; }
.rp-tp-section-label {
  font-size: var(--fs-micro, 0.68rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-top: 0.15rem;
}
.rp-tp-item {
  font-size: var(--fs-xs, 0.73rem);
  font-weight: 500;
  line-height: 1.4;
}
.rp-tp-item--strong { color: #34d399; }
.rp-tp-item--focus { color: #fcd34d; }
.rp-tp-item--weak { color: #f87171; font-weight: 600; }

/* ======================================================================
   §13  CAREER PROGRESSION SYSTEM — right panel cards + modals
   ====================================================================== */

/* ── Mock Interview Checklist ──────────────────────────────────────── */
.rp-mock-verdict {
  font-size: var(--fs-xs, 0.73rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 0.55rem;
}
.rp-mock-verdict--green  { background: rgba(16,185,129,0.14); color: #34d399; }
.rp-mock-verdict--blue   { background: rgba(59,130,246,0.14); color: #60a5fa; }
.rp-mock-verdict--yellow { background: rgba(245,158,11,0.14); color: #fcd34d; }
.rp-mock-verdict--dim    { background: rgba(148,163,184,0.1); color: #94a3b8; }

.rp-mock-concept-group { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 0.45rem; }
.rp-mock-pill {
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.rp-mock-pill--ready  { background: rgba(16,185,129,0.12); color: #34d399; }
.rp-mock-pill--almost { background: rgba(245,158,11,0.12);  color: #fcd34d; }
.rp-mock-pill--gap    { background: rgba(239,68,68,0.12);   color: #f87171; }
.rp-mock-rec-text {
  font-size: var(--fs-xss);
  color: #cccccc;
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

/* ── Architecture DNA ───────────────────────────────────────────────── */
.rp-dna-insight {
  font-size: var(--fs-micro);
  color: #cccccc;
  line-height: 1.5;
  margin-bottom: 0.55rem;
  font-style: italic;
}
.rp-dna-section { margin-bottom: 0.5rem; }
.rp-dna-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 5px;
}
.rp-dna-pill {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  margin: 0 4px 4px 0;
  white-space: nowrap;
}
.rp-dna-pill--strength { background: rgba(16,185,129,0.12); color: #34d399; }
.rp-dna-pill--gap      { background: rgba(239,68,68,0.10);  color: #f87171; }

/* ── Portfolio CTA card ─────────────────────────────────────────────── */
.rp-portfolio-cta .rp-portfolio-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-bottom: 0.65rem;
}
.rp-pf-stat {
  font-size: var(--fs-xss);
  color: var(--rp-dim, #64748b);
}
.rp-pf-stat strong { color: var(--rp-fg, #e2e8f0); font-weight: 700; }

.rp-portfolio-open-btn {
  width: 100%;
  padding: 7px 12px;
  font-size: var(--fs-xs, 0.73rem);
  font-weight: 600;
  color: #4f6ef7;
  background: rgba(79,110,247,0.10);
  border: 1px solid rgba(79,110,247,0.3);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
}
.rp-portfolio-open-btn:hover {
  background: rgba(79,110,247,0.18);
  border-color: rgba(79,110,247,0.5);
}

/* ── Next Action card — primary CTA with subtle glow ───────────────── */
.rp-next-action-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(79,110,247,0.22), rgba(99,102,241,0.12));
  border: 1px solid rgba(79,110,247,0.45);
  box-shadow: 0 0 0 1px rgba(79,110,247,0.08), 0 4px 16px rgba(79,110,247,0.22);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.rp-next-action-link:hover {
  background: linear-gradient(135deg, rgba(79,110,247,0.32), rgba(99,102,241,0.18));
  border-color: rgba(79,110,247,0.65);
  box-shadow: 0 0 0 1px rgba(79,110,247,0.14), 0 6px 22px rgba(79,110,247,0.32);
  transform: translateY(-1px);
}
.rp-next-action-cta {
  font-size: var(--fs-xs, 0.73rem);
  font-weight: 700;
  color: #93a9ff;
}
.rp-next-action-topic {
  font-size: var(--fs-xss, 0.72rem);
  color: var(--rp-dim, #94a3b8);
}
.rp-next-action-topic strong {
  color: var(--rp-fg, #e2e8f0);
  font-weight: 600;
}

/* ── Shared Modal Overlay ───────────────────────────────────────────── */
.rp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.rp-modal-overlay.hidden { display: none; }
.rp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}
.rp-modal-card {
  position: relative;
  background: #0f1c2e;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  max-height: 85vh;
  overflow-y: auto;
  width: 100%;
  max-width: min(580px, 92vw);
  scrollbar-width: thin;
  scrollbar-color: rgba(79,110,247,0.3) transparent;
}
.rp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: sticky;
  top: 0;
  background: #0f1c2e;
  z-index: 2;
}
.rp-modal-header h3 {
  font-size: var(--fs-sm, 0.82rem);
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
}
.rp-modal-close {
  background: none;
  border: none;
  color: #64748b;
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
}
.rp-modal-close:hover { color: #e2e8f0; background: rgba(255,255,255,0.07); }
body.rp-modal-open { overflow: hidden; }

/* ── Portfolio Modal body ───────────────────────────────────────────── */
.rp-portfolio-modal-body, .rp-summary-modal-body, .rp-company-modal-body {
  padding: 18px 22px 22px;
}
.rp-pf-modal-rank {
  font-size: var(--fs-md, 0.90rem);
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 12px;
}
.rp-pf-modal-coverage {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: var(--fs-micro);
  color: #94a3b8;
}
.rp-pf-modal-cov-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.rp-pf-modal-cov-bar {
  height: 100%;
  background: linear-gradient(90deg, #4f6ef7, #7c6af7);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.rp-pf-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.rp-pf-modal-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-pf-modal-stat span { font-size: var(--fs-micro); color: #64748b; }
.rp-pf-modal-stat-val { font-size: var(--fs-md, 0.90rem) !important; font-weight: 700; color: #e2e8f0 !important; }
.rp-pf-modal-areas {
  font-size: var(--fs-micro);
  color: #94a3b8;
  margin-bottom: 8px;
  line-height: 1.6;
}
.rp-pf-modal-area-label { font-weight: 600; color: #cbd5e1; }

/* ── Summary Modal body ─────────────────────────────────────────────── */
.rp-summary-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.rp-summary-pct {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: #4f6ef7;
}
.rp-summary-rank { font-size: var(--fs-sm, 0.82rem); font-weight: 700; color: #fbbf24; }
.rp-summary-row { font-size: var(--fs-micro); color: #94a3b8; margin-bottom: 12px; line-height: 1.6; }
.rp-summary-areas { font-size: var(--fs-micro); color: #94a3b8; margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; line-height: 1.6; }
.rp-summary-next {
  font-size: var(--fs-micro);
  background: rgba(79,110,247,0.10);
  border: 1px solid rgba(79,110,247,0.2);
  border-radius: 7px;
  padding: 8px 12px;
  color: #93c5fd;
}

/* ── Company Paths Modal body ───────────────────────────────────────── */
.rp-company-modal-card { max-width: min(660px, 94vw); }
.rp-company-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--company-color, #4f6ef7);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.rp-company-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.rp-company-emoji { font-size: var(--fs-lg); line-height: 1; }
.rp-company-name { font-size: var(--fs-sm, 0.82rem); font-weight: 700; color: #e2e8f0; }
.rp-company-levels { font-size: var(--fs-micro); color: #64748b; margin-top: 2px; }
.rp-company-prep {
  margin-left: auto;
  font-size: var(--fs-micro);
  font-weight: 600;
  background: rgba(79,110,247,0.12);
  color: #93c5fd;
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.rp-company-style { font-size: var(--fs-micro); color: #94a3b8; line-height: 1.5; margin: 0 0 8px; }
.rp-company-tip {
  font-size: var(--fs-xss);
  color: #64748b;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.rp-company-topics { display: flex; flex-wrap: wrap; gap: 5px; }
.rp-company-topic {
  font-size: var(--fs-micro);
  font-weight: 500;
  background: rgba(79,110,247,0.08);
  color: #93c5fd;
  border: 1px solid rgba(79,110,247,0.2);
  border-radius: 4px;
  padding: 2px 7px;
  text-decoration: none;
  text-transform: capitalize;
  transition: background 0.15s;
}
.rp-company-topic:hover { background: rgba(79,110,247,0.18); }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK NAVY PANELS — left sidebar, right panel
   Match the global site header palette (#172340)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Left sidebar ── */
#rp-left {
  background: #1D2E53 !important;
  border-right-color: #243560;
  font-size: var(--fs-md);
  color: #ffffff !important;
}
#rp-left-header {
  background: #182747 !important;
  border-bottom-color: #243560;
}
.rp-left-panel-title { color: #ffffff !important; font-size: var(--fs-xs) !important; font-weight: 700; letter-spacing: 0.06em; }
.rp-left-count-badge {
  color: #ffffff !important;
  background: #1e3a5f;
  border-color: #2a5080;
  font-size: var(--fs-xs) !important;
}
#rp-overall-label    { color: #ffffff !important; font-size: var(--fs-md); }
#rp-overall-pct      { color: #60a5fa !important; font-size: var(--fs-md); }
#rp-overall-track    { background: #243560; }

/* Level filter select */
#rp-level-filter {
  background: #243560;
  border-color: #2e4070;
  color: #ffffff !important;
  font-size: var(--fs-sm);
}

/* Topic list items */
#rp-topic-list { background: transparent; }
.rp-topic-item {
  border-bottom-color: #243560;
  color: #ffffff !important;
  font-size: var(--fs-sm);
}
.rp-topic-item:hover  { background: #22366a; color: #ffffff !important; }
.rp-topic-item.active { background: #1e3a5f; color: #ffffff !important; border-left-color: #4f6ef7; }
.rp-topic-num         { color: #ffffff !important; font-size: var(--fs-sm); background: #1e3a5f; }
.rp-topic-name        { color: #ffffff !important; font-size: var(--fs-sm); }
.rp-topic-meta-row    { color: #c8d8f0 !important; font-size: var(--rp-fs-meta); }
.rp-topic-done-check  { color: #34d399 !important; }

/* ── Right panel ── */
#rp-right {
  background: #1C2D51 !important;
  border-left-color: #243560;
  font-size: var(--fs-sm);
  color: #ffffff !important;
}
#rp-right-header {
  background: #182747 !important;
  border-bottom-color: #243560;
}
.rp-right-header-label { color: #ffffff !important; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; }

/* Cards inside right panel */
.rp-card {
  background: #243560;
  border-color: #2e4070;
  font-size: var(--fs-xs) !important;
  color: #e8f0fe !important;
}
.rp-card-head {
  background: #182747;
  border-bottom-color: #2e4070;
}
.rp-card-head-title,
.rp-card-title   { color: #ffffff !important; font-size: var(--fs-xs) !important; font-weight: 700; letter-spacing: 0.06em; }
.rp-card-value,
.rp-stat-value   { color: #e8f0fe !important; font-size: var(--fs-xs) !important; font-weight: 600; }
.rp-stat-label,
.rp-card-label   { color: #a8c8e8 !important; font-size: var(--fs-xss) !important; }
.rp-rank-value   { color: #60a5fa !important; }
.rp-progress-track { background: #2e4070; }

/* Streak / mastered / solved counts */
.rp-streak-val  { color: #fbbf24 !important; }
.rp-theory-pct  { color: #60a5fa !important; }

/* Adaptive cards in right panel — uniform font */
.rp-adaptive-card {
  background: #243560;
  border-color: #2e4070;
  font-size: var(--fs-xs) !important;
  color: #e8f0fe !important;
}
/* Card section header (INTERVIEW READINESS, ARCHITECTURE DNA…) */
.rp-adaptive-card__header {
  font-size: var(--fs-md) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

/* rm-rank-card in right panel */
.rm-rank-card {
  background: #243560;
  border-color: #2e4070;
  font-size: var(--fs-xs) !important;
  color: #e8f0fe !important;
}
/* Card section title (EXPERIENCE POINTS, WEEKLY STREAK) */
.rm-rank-card__label { color: #ffffff !important; font-size: var(--fs-md) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: none !important; }
/* Badge (0 XP) */
.rm-rank-card__badge { font-size: var(--fs-xs) !important; }
/* Hint text below bar */
.rm-rank-card__next  { color: #8fafc8 !important; font-size: var(--fs-xss) !important; }
/* "0 Mastered  0 Solved" row */
.rm-rank-card__stats { font-size: var(--fs-xs) !important; color: #a8c8e8 !important; }
.rm-rank-card__stats strong { color: #ffffff !important; }
/* Theory label / pct */
.rm-rank-card__theory-header { font-size: var(--fs-xss) !important; color: #a8c8e8 !important; font-weight: 600 !important; letter-spacing: 0.05em; }
.rm-rank-card__theory-pct    { font-size: var(--fs-xss) !important; color: #60a5fa !important; }

/* XP rows */
.rm-xp-row__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm) !important;
  color: #c8ddf0 !important;  /* light blue-white — secondary */
  font-weight: 500;
}
.rm-xp-row__val {
  font-size: var(--fs-sm) !important;
  font-weight: 700;
  color: #e8f0fe !important;  /* near-white for values */
}
.rm-xp-row__val--streak { color: #fb923c !important; }

/* Streak day labels + footer */
.rm-streak-day__label {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rm-streak-day.active .rm-streak-day__label { color: #ffffff !important; }
.rm-streak-footer {
  margin-top: 8px;
  font-size: var(--fs-xss);
  color: #ffffff !important;
  text-align: center;
}
.rm-streak-count {
  margin-left: auto;
  font-size: var(--fs-xss);
  font-weight: 700;
  color: #fb923c !important;
}

/* ── Nav row (Prev / Next) — center panel, untouched ── */
#rp-nav-row {
  background: #f8fafc;
  border-top-color: #e2e8f0;
}
.rm-nav-btn {
  background: #ffffff;
  border-color: #dde6f4;
  color: #2563eb;
  font-size: var(--rp-fs-body);
}
.rm-nav-btn:hover {
  background: #eef4ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* ── XP Calculator card ── */
.rm-xp-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #1e2e4a;
}
.rm-xp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
.rm-xp-row__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: #ffffff;
  font-weight: 500;
}
.rm-xp-row__val {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #ffffff;
}
.rm-xp-row__val--streak { color: #fb923c; }

/* ── Weekly Streak Bar ── */
.rm-streak-week {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 12px;
}
.rm-streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}
.rm-streak-day__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1e2e4a;
  border: 2px solid #253550;
  display: block;
  transition: background 0.2s, border-color 0.2s;
}
.rm-streak-day.active .rm-streak-day__dot {
  background: #f97316;
  border-color: #fb923c;
  box-shadow: 0 0 8px #f97316;
}
.rm-streak-day.today .rm-streak-day__dot {
  border-color: #60a5fa;
  box-shadow: 0 0 6px #3b82f6;
}
.rm-streak-day__label {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rm-streak-day.active .rm-streak-day__label { color: #ffffff; }
.rm-streak-footer {
  margin-top: 8px;
  font-size: var(--rp-fs-meta);
  color: #ffffff;
  text-align: center;
}
.rm-streak-count {
  margin-left: auto;
  font-size: var(--rp-fs-meta);
  font-weight: 700;
  color: #fb923c;
}

/* ══════════════════════════════════════════════════════════════════════
   RIGHT PANEL CARD OVERRIDES — white text, fs-xs/fs-xss, vivid colors
   ══════════════════════════════════════════════════════════════════════ */

/* ── Topic-wise Progress ── */
.rp-tp-heading {
  font-size: var(--fs-sm) !important;
  color: #e8f0fe !important;
}
.rp-tp-lead {
  font-size: var(--fs-xs) !important;
  color: #c8ddf0 !important;
}
.rp-tp-item {
  font-size: var(--fs-xs) !important;
}
.rp-tp-item--strong { color: #34d399 !important; }
.rp-tp-item--focus { color: #fbbf24 !important; }
.rp-tp-item--weak { color: #f87171 !important; font-weight: 700 !important; }

/* ── Rec items ── */
.rp-rec-item__name {
  font-size: var(--fs-xs) !important;
  color: #e8f0fe !important;
  font-weight: 600 !important;
}
.rp-rec-item__why {
  font-size: var(--fs-xss) !important;
  color: #8fafc8 !important;
  font-weight: 400 !important;
}
.rp-rec-item__badge {
  font-size: var(--fs-xss) !important;
}
.rp-rec-item--high   .rp-rec-item__badge { background: rgba(255,30,30,0.18) !important;  color: #ff3333 !important; }
.rp-rec-item--medium .rp-rec-item__badge { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; }
.rp-rec-item--low    .rp-rec-item__badge { background: rgba(59,130,246,0.18) !important; color: #60a5fa !important; }

/* ── Mock Interview Checklist ── */
.rp-mock-verdict {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.rp-mock-verdict--dim { background: rgba(255,255,255,0.08) !important; color: #e8f0fe !important; }
.rp-mock-rec-text {
  font-size: var(--fs-xss) !important;
  color: #8fafc8 !important;
  font-weight: 400 !important;
}
.rp-mock-pill {
  font-size: var(--fs-xss) !important;
  font-weight: 600 !important;
}
.rp-mock-pill--gap { background: rgba(255,30,30,0.18) !important; color: #ff3333 !important; }

/* ── Architecture DNA ── */
.rp-dna-insight {
  font-size: var(--fs-xs) !important;
  color: #c8ddf0 !important;
  font-weight: 500 !important;
  font-style: italic;
}
.rp-dna-label {
  font-size: var(--fs-xs) !important;
  color: #a8c8e8 !important;  /* section label — medium emphasis */
  font-weight: 700 !important;
  letter-spacing: 0.06em;
}
.rp-dna-pill {
  font-size: var(--fs-xss) !important;
  font-weight: 600 !important;
}
.rp-dna-pill--gap { background: rgba(255,30,30,0.18) !important; color: #ff3333 !important; }

/* ── "Keep Building" checklist button + body text ── */
.rp-checklist-verdict {
  font-size: var(--fs-xs) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.rp-checklist-body,
.rp-checklist-note {
  font-size: var(--fs-xss) !important;
  color: #8fafc8 !important;
  font-weight: 400 !important;
}

/* ── Mock Interview Checklist in LEFT panel ── */
#rp-left .rp-left-mock {
  background: #182747;
  border: 1px solid #243560;
  border-radius: 8px;
  font-size: var(--fs-xs) !important;
  color: #e8f0fe !important;
}
#rp-left .rp-left-mock .rp-adaptive-card__header {
  background: transparent !important;
  font-size: var(--fs-xs) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
#rp-left .rp-left-mock .rp-mock-verdict {
  font-size: var(--fs-xs) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
#rp-left .rp-left-mock .rp-mock-rec-text {
  font-size: var(--fs-xss) !important;
  color: #8fafc8 !important;
}
#rp-left .rp-left-mock .rp-mock-pill {
  font-size: var(--fs-xss) !important;
}

/* ── Left panel grouped subtopics (nested inside .rm-topic-group-subs) ── */
#roadmap-view .rp-left-sub-group {
  display: grid;
  gap: 8px;
}

#roadmap-view .rp-left-sub-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

#roadmap-view .rp-left-sub-head-end {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#roadmap-view .rp-left-sub-chevron {
  color: rgba(226, 232, 240, 0.72);
  font-size: 12px;
  line-height: 1;
  transition: transform .15s ease;
}

#roadmap-view .rp-left-sub-group.is-collapsed .rp-left-sub-chevron {
  transform: rotate(-90deg);
}

#roadmap-view .rp-left-sub-group.is-collapsed .rp-left-sub-items {
  display: none;
}

#roadmap-view .rp-left-sub-head--beginner { color: #059669; font-size: 14px; }
#roadmap-view .rp-left-sub-head--intermediate { color: #D97706; font-size: 14px;}
#roadmap-view .rp-left-sub-head--advanced { color: #DC2626; font-size: 14px;}
[data-theme="dark"] #roadmap-view .rp-left-sub-head--beginner { color: #34d399; }
[data-theme="dark"] #roadmap-view .rp-left-sub-head--intermediate { color: #fbbf24; }
[data-theme="dark"] #roadmap-view .rp-left-sub-head--advanced { color: #f87171; }

#roadmap-view .rp-left-sub-items {
  display: grid;
  gap: 7px;
}

#roadmap-view .rp-left-sub-item {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.16);
  color: #e2e8f0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px;
  cursor: pointer;
  transition: background .14s ease, transform .12s ease;
}

#roadmap-view .rp-left-sub-item:hover {
  background: rgba(30, 41, 59, 0.34);
}

#roadmap-view .rp-left-sub-item.is-active {
  background: transparent;
  color: #4F8CFF;
  font-weight: 600;
}

#roadmap-view .rp-left-sub-item.is-locked {
  cursor: not-allowed;
  opacity: 0.7;
}

#roadmap-view .rp-left-sub-title {
  font-weight: 500;
  color: #d7deea;
  line-height: 1.35;
  font-size: 13px;
}

#roadmap-view .rp-left-sub-lock {
  width: 12px;
  height: 12px;
  color: #fbbf24;
  display: inline-flex;
  flex-shrink: 0;
}

#roadmap-view .rp-left-sub-lock svg {
  width: 12px;
  height: 12px;
}





/* ── Quiz Component ────────────────────────────────────────────────────────── */
.rm-quiz-container {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border-soft);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}

.rm-quiz-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rp-border-soft);
}

.rm-quiz-header svg {
  color: var(--rp-accent);
  flex-shrink: 0;
}

.rm-quiz-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--rp-text);
  margin: 0;
  flex: 1;
}

.rm-quiz-count {
  font-size: var(--fs-xs);
  color: var(--rp-accent);
  background: var(--rp-accent-light);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.rm-quiz-body {
  min-height: 120px;
}

.rm-quiz-question {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: 10px;
  padding: 18px;
  animation: rm-fade-in 0.2s ease;
}

@keyframes rm-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rm-quiz-q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.rm-quiz-q-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--rp-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rm-quiz-q-text {
  font-size: var(--fs-base);
  color: var(--rp-text);
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.rm-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rm-quiz-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: var(--rp-bg);
  border: 1px solid var(--rp-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  font-family: inherit;
  font-size: inherit;
}

.rm-quiz-option:hover:not(:disabled) {
  background: var(--rp-surface-2);
  border-color: var(--rp-accent-mid);
}

.rm-quiz-option:disabled,
.rm-quiz-option--disabled {
  cursor: default;
  opacity: 0.95;
}

.rm-quiz-option-letter {
  flex-shrink: 0;
  width: 22px;
  font-weight: 600;
  color: var(--rp-accent);
}

.rm-quiz-option-text {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--rp-text);
  line-height: 1.5;
}

.rm-quiz-option--correct,
.rm-quiz-option--selected-correct {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: #22C55E !important;
}

.rm-quiz-option--incorrect,
.rm-quiz-option--selected-wrong {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: #EF4444 !important;
}

.rm-quiz-option--correct .rm-quiz-option-letter,
.rm-quiz-option--selected-correct .rm-quiz-option-letter { color: #16A34A; }

.rm-quiz-option--incorrect .rm-quiz-option-letter,
.rm-quiz-option--selected-wrong .rm-quiz-option-letter { color: #DC2626; }

.rm-quiz-feedback {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rp-border-soft);
}

.rm-quiz-feedback-result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.rm-quiz-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
}

.rm-quiz-result-text--correct { color: #16A34A; }
.rm-quiz-result-text--incorrect { color: #DC2626; }
.rm-quiz-result-icon:has(+ .rm-quiz-result-text--correct) { background: #22C55E; }
.rm-quiz-result-icon:has(+ .rm-quiz-result-text--incorrect) { background: #EF4444; }

.rm-quiz-explain-text {
  font-size: var(--fs-sm);
  color: var(--rp-text-2);
  line-height: 1.6;
  margin: 0 0 14px 0;
}

.rm-quiz-next,
.rm-quiz-retake {
  background: var(--rp-accent);
  color: #FFFFFF;
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.rm-quiz-next:hover,
.rm-quiz-retake:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
}

.rm-quiz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rp-border-soft);
}

.rm-quiz-progress-text {
  font-size: var(--fs-sm);
  color: var(--rp-muted);
  font-weight: 500;
}

.rm-quiz-score-final {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--rp-text);
  text-align: center;
  flex: 1;
}

/* ── Quiz result card (centered, SVG-only) ── */
.rm-quiz-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 32px 24px;
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: 12px;
  animation: rm-fade-in 0.25s ease;
}

.rm-quiz-result-ring {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid var(--rp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rp-accent);
  background: var(--rp-accent-light);
}

.rm-quiz-result-icon {
  display: none;
}

.rm-quiz-result-icon--pass,
.rm-quiz-result-icon--fail {
  display: block;
}

.rm-quiz-result-icon--small {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.rm-quiz-result-message {
  font-size: var(--rp-fs-h2);
  font-weight: 700;
  color: var(--rp-text);
  margin: 0;
}

.rm-quiz-result-score {
  font-size: var(--rp-fs-sub);
  color: var(--rp-text-2);
  margin: 0;
}

.rm-quiz-result-score strong {
  color: var(--rp-text);
  font-weight: 700;
}

.rm-quiz-result-pct {
  color: var(--rp-accent);
  font-weight: 700;
}

.rm-quiz-retake {
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Roadmap Mode (767px and below)
   Transforms 3-column layout to 2-column (tablet) and 1-column (phone)
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  /* Update font-size clamp minimums for better readability on mobile */
  #roadmap-view {
    --rp-panel-w: clamp(180px, 30vw, 280px);
    --rp-fs-label: clamp(0.7rem, 0.7vw, 0.72rem);     /* 11-11.5px */
    --rp-fs-meta: clamp(0.75rem, 0.8vw, 0.78rem);    /* 12-12.5px */
    --rp-fs-body: clamp(0.88rem, 0.9vw, 0.92rem);    /* 13-14px */
    --rp-fs-ui: clamp(0.92rem, 0.95vw, 0.98rem);     /* 14-15px */
    --rp-fs-sub: clamp(1rem, 1vw, 1.05rem);          /* 15-16px */
    --rp-fs-title: clamp(1.05rem, 1.1vw, 1.12rem);   /* 16-17px */
    --rp-fs-h2: clamp(1.3rem, 1.35vw, 1.45rem);      /* 19-21px */
    --rp-fs-h1: clamp(1.5rem, 1.65vw, 1.75rem);      /* 22-26px */
  }

  /* Left panel becomes a slide-over drawer (see responsive.css #rp-left);
     undo the max-width:900px display:none so it can be opened. */
  #rp-left {
    display: flex !important;
  }

  #rp-center {
    grid-column: 1;
  }

  /* Increase padding/spacing for touch targets */
  #rp-left-header,
  #rp-right-header {
    padding: 12px 16px;
  }

  /* Buttons and interactive elements need larger touch targets */
  button[class*="rp-"],
  button[class*="rm-"] {
    min-height: 40px;
    padding: 8px 12px;
  }

  /* Topic list items — larger touch targets */
  .rp-topic-item {
    padding: 10px 12px;
    min-height: 44px;
  }

  /* Quiz buttons */
  .rm-quiz-button-group button {
    min-height: 44px;
    padding: 12px;
  }
}

/* Hide prev/next carousel buttons on mobile — hard to use with touch */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  .rm-footer-nav {
    display: none !important;
  }
}

@media (max-width: 480px) {
  /* Extra small phones — single column layout */
  #roadmap-view {
    --rp-panel-w: 100%;
    --rp-fs-label: clamp(0.75rem, 0.75vw, 0.8rem);    /* 12-12.5px */
    --rp-fs-meta: clamp(0.8rem, 0.85vw, 0.88rem);    /* 12.5-14px */
    --rp-fs-body: clamp(0.92rem, 0.95vw, 1rem);      /* 14-15px */
    --rp-fs-ui: clamp(0.98rem, 1vw, 1.05rem);        /* 15-16px */
    --rp-fs-sub: clamp(1.05rem, 1.1vw, 1.15rem);     /* 16-17px */
    --rp-fs-title: clamp(1.1rem, 1.15vw, 1.25rem);   /* 17-18px */
    --rp-fs-h2: clamp(1.4rem, 1.45vw, 1.55rem);      /* 21-23px */
    --rp-fs-h1: clamp(1.6rem, 1.75vw, 1.85rem);      /* 24-27px */

    /* Single column layout */
    grid-template-columns: 1fr;
  }

  /* Hide right panel on small phones — stack vertically or use tabs */
  #rp-right {
    display: none;
  }

  /* Center content fills full width */
  #rp-center {
    grid-column: 1;
  }

  /* Larger padding for readability */
  #rp-center-inner {
    padding: 16px 12px;
  }

  #rp-left-header,
  #rp-right-header {
    padding: 14px 14px;
  }

  /* Phase title and progress — better spacing */
  #rp-phase-context {
    padding: 18px 14px 20px;
    gap: 16px;
  }

  /* Larger touch targets */
  button[class*="rp-"],
  button[class*="rm-"] {
    min-height: 48px;
    padding: 12px 14px;
    font-size: var(--rp-fs-ui);
  }

  /* Topic list items */
  .rp-topic-item {
    padding: 12px 14px;
    min-height: 48px;
  }

  /* Quiz buttons */
  .rm-quiz-button-group {
    gap: 10px;
    flex-direction: column;
  }

  .rm-quiz-button-group button {
    width: 100%;
    min-height: 48px;
    padding: 14px;
  }

  /* Collapse button positioning */
  #rp-left-collapse,
  #rp-right-collapse {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  /* Content cards — better spacing */
  .rm-topic-card,
  .rm-section,
  .rm-concept {
    padding: 16px 14px;
    margin-bottom: 12px;
  }

  /* List items */
  .rm-concept-item,
  .rm-checklist-item {
    padding: 10px 14px;
    min-height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Reading layout (topic-list.js → _rmRenderReading)
   Documentation-style: one readable column, real headings, plain paragraphs,
   whitespace instead of tinted cards. Reference sections fold under
   "Go deeper".
   ══════════════════════════════════════════════════════════════════════════ */
.rm-concept-card--expanded,
#roadmap-view .rm-concept-card--expanded {
  background: #fff;
  border: 1px solid var(--rp-border-soft, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.rm-concept-card--expanded > .rm-card-body { padding: 4px 28px 28px; }

.rm-reading {
  font-size: 14px;
  line-height: 1.7;
  color: var(--rp-text-2, #334155);
  -webkit-font-smoothing: antialiased;
}
.rm-reading p { margin: 0 0 14px; }
.rm-reading strong { color: var(--rp-text, #0f172a); font-weight: 650; }

.rm-r-section { margin: 0; }
.rm-r-section + .rm-r-section { margin-top: 32px; }
.rm-r-h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--rp-text, #0f172a);
}
.rm-r-h3 {
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--rp-text, #0f172a);
}

.rm-r-list { margin: 0 0 18px; padding-left: 1.25em; }
.rm-r-list li { margin: 0 0 8px; padding-left: 4px; }
.rm-r-list li::marker { color: var(--rp-muted, #94a3b8); }

.rm-r-terms { margin: 0; }
.rm-r-term { margin: 0 0 16px; }
.rm-r-term dt {
  margin: 0 0 4px;
  font-weight: 650;
  color: var(--rp-text, #0f172a);
}
.rm-r-term dd { margin: 0; }
.rm-r-term dd p { margin: 0 0 8px; }
.rm-r-term dd .rm-r-list { margin-top: 6px; }

.rm-r-analogy {
  margin: 8px 0 18px;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--rp-border-soft, #e2e8f0);
  color: var(--rp-text-2, #475569);
}
.rm-r-analogy p { margin: 0; }

.rm-r-table-wrap { overflow-x: auto; margin: 0 0 18px; }
.rm-r-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rm-r-table th,
.rm-r-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--rp-border-soft, #e5e7eb);
}
.rm-r-table th { font-weight: 650; color: var(--rp-text, #0f172a); }

/* Go deeper — quiet expandable rows, not cards */
.rm-r-deeper {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--rp-border-soft, #e5e7eb);
}
.rm-r-deeper-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--rp-muted, #64748b);
}
.rm-r-more { border-bottom: 1px solid var(--rp-border-soft, #eef0f3); }
.rm-r-more > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--rp-text, #0f172a);
}
.rm-r-more > summary::-webkit-details-marker { display: none; }
.rm-r-more > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--rp-muted, #94a3b8);
}
.rm-r-more[open] > summary::after { content: "\2212"; }
.rm-r-more > summary:hover .rm-r-more-title { text-decoration: underline; text-underline-offset: 3px; }
.rm-r-more-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--rp-muted, #94a3b8);
}
.rm-r-more-body { padding: 2px 2px 22px; }

.rm-r-section--quiz { margin-top: 44px; }

@media (max-width: 640px) {
  .rm-concept-card--expanded > .rm-card-body { padding: 4px 16px 20px; }
  .rm-r-h2 { font-size: 16px; }
}

/* One reading column: topic header, mission and lesson share a left edge now
   that the right panel is gone and the centre is wide. Anchored to the left
   edge (not auto-centered) so the freed-up space from the removed right
   panel doesn't just become a large dead gutter on both sides of the text. */
#rp-center #roadmap-detail {
  max-width: 1120px;
  margin-left: 0;
  margin-right: auto;
}

/* When the user manually collapses the left "Your Journey" panel, the centre
   column gains ~300px of freed width. Keeping the old 1040px/auto-centered
   cap there just floats the reading content in the middle of a much wider
   container, leaving a large dead gutter on the left where the panel used
   to be (and an equally large one on the right). Widen the cap and anchor
   it to the left edge instead so the freed space is actually used. */
#roadmap-view.rp-left-collapsed #rp-center #roadmap-detail {
  max-width: 1280px;
  margin-left: 0;
}

/* ── css/practice/right-panel.css ── */
/* ─── Practice Mode Right Panel — Tab System ────────────────────────────────
   Scope  : #right-panel  (practice-mode body class active)
   Extends: existing design tokens (--p-*) and .button utilities
   Rule   : All selectors prefixed .prp-* to avoid global collisions
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Visibility utility ───────────────────────────────────────────────────── */
.prp-hidden { display: none !important; }

/* ── Problem name pill in panel header ────────────────────────────────────── */
/* Matches #lrp-problem-name in learn mode exactly — no uppercase, dark text  */
#prp-problem-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
  pointer-events: none;
  user-select: none;
}
#prp-problem-name.prp-name-hidden { display: none; }

/* Hide the description / difficulty card from the body when panel is mounted */
body.practice-mode #right-panel #practice-preset-info {
  display: none !important;
}

/* In practice mode the preset dropdown lives in the workspace action bar —
   hide the sticky-header from the panel header so the name pill is truly centred */
body.practice-mode #right-panel .panel-header #learn-sticky-header {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYSTEM INSIGHTS PANEL  (#practice-insights-panel)
   Real-time canvas analysis — driven by InsightsEngine + problem-tab.js
   Sits below #practice-tasks-panel as a separate section in the body.
   ═══════════════════════════════════════════════════════════════════════════ */

#practice-insights-panel {
  padding: 0px 5px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
#practice-insights-panel.pip-hidden {
  display: none;
}

@keyframes pip-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pip-badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ── Section divider + header row ── */
#practice-insights-panel .pip-header {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Exactly matches .practice-tasks-header */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 4px 7px;
  color: #1a2635;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-top: none;
  margin-bottom: 0;
}
#practice-insights-panel .pip-heading {
  font-size: inherit;
  font-weight: inherit;
    text-transform: uppercase;

  color: inherit;
  letter-spacing: normal;
  flex: 1 1 auto;
}
#practice-insights-panel .pip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e2e8f0;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.2s, color 0.2s;
}
#practice-insights-panel .pip-badge.pip-badge--pop {
  animation: pip-badge-pop 0.35s ease forwards;
  background: #3b82f6;
  color: #fff;
}

/* ── Insight card list ── */
#practice-insights-panel .pip-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Individual insight card ── */
#practice-insights-panel .pip-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 4px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  line-height: 1.4;
  animation: pip-card-in 0.22s ease both;
  transition: background 0.15s;
  color: #334155;
}
#practice-insights-panel .pip-card:last-child {
  border-bottom: none;
}

/* ── Type variants ── */
#practice-insights-panel .pip-card--success      { border-left-color: #22c55e; background: transparent; }
#practice-insights-panel .pip-card--warning      { border-left-color: #f5a623; background: transparent; }
#practice-insights-panel .pip-card--optimization { border-left-color: #f5a623; background: transparent; }
#practice-insights-panel .pip-card--info         { border-left-color: transparent; color: #94a3b8; font-style: italic; }

/* ── Icon ── */
#practice-insights-panel .pip-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  opacity: 0.85;
}
#practice-insights-panel .pip-card--success      .pip-icon { color: #22c55e; }
#practice-insights-panel .pip-card--warning      .pip-icon { color: #f59e0b; }
#practice-insights-panel .pip-card--optimization .pip-icon { color: #f59e0b; }
#practice-insights-panel .pip-card--info         .pip-icon { color: var(--p-dim, #aaa); }
#practice-insights-panel .pip-icon svg { width: 12px; height: 12px; display: block; }

/* ── Message text ── */
#practice-insights-panel .pip-msg { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs);}

/* ── Empty state ── */
#practice-insights-panel .pip-empty-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: var(--fs-xs);
  color: #94a3b8;
  font-style: normal;
}
#practice-insights-panel .pip-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px dashed #cbd5e1;
  color: #94a3b8;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-style: normal;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Dark mode overrides ── */
body.theme-dark #practice-insights-panel .pip-card--success      { background: rgba(34,  197,  94, 0.11); }
body.theme-dark #practice-insights-panel .pip-card--warning      { background: rgba(239,  68,  68, 0.11); }
body.theme-dark #practice-insights-panel .pip-card--optimization { background: rgba(245, 166,  35, 0.11); }
body.theme-dark #practice-insights-panel .pip-card--info         { background: rgba(255, 255, 255, 0.04); }

/* ── When mounted: sticky header lives in .panel-header (flex row) ─────────── */
#right-panel .panel-header #learn-sticky-header {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  /* override any top/bottom margins from the panel-section styles */
}
/* hide the label ("What are you designing?") in the header — space is too tight */
#right-panel .panel-header #learn-sticky-header label[for="practice-preset-select"] {
  display: none;
}
/* Make the custom select fill the header width */
#right-panel .panel-header #learn-sticky-header .preset-custom-select {
  width: 100%;
}
/* Compact trigger height to fit the header row */
#right-panel .panel-header #learn-sticky-header .pcs-trigger {
  font-size: var(--fs-base);
  font-weight: 600;
}

/* ── Preset info card — anchored at top of #practice-content ───────────────
   Shown/hidden by practice.js; floats just below the dropdown header.      */
#practice-content > #practice-preset-info {
  margin: 0 0 4px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Tab bar — inside #simulate-view (flex column), always visible ──────────── */
/* Remove the default section gap so the tab bar sits flush under the header */
body.practice-mode #right-panel #simulate-view {
  gap: 0;
}
/* Remove .simulation-panel's margin-top/gap so content starts flush below tab bar.
   flex:1 constrains it so #simulate-panel-actions stays visible at the bottom. */
body.practice-mode #right-panel #simulate-view .simulation-panel {
  margin-top: 0;
  gap: 0;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Make #practice-content a flex column whose children scroll independently  */
body.practice-mode #right-panel #practice-content {
  overflow: hidden;    /* clip at boundary — children scroll internally      */
  display: flex;
  flex-direction: column;
}

/* ── 75 / 25 preferred split — content-aware, responsive shrink/grow ─────────
   flex-basis: auto  → each panel starts at its natural content height
   flex-grow 3:1     → leftover space (after content) splits 75%/25%
   flex-shrink 1:1   → both yield equally when space is tight
   No max-height     → insights expands freely as tasks complete and shrink
   min-height: 0     → allows shrinking below natural size when necessary    */
body.practice-mode #right-panel #practice-tasks-panel {
  flex: 3 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
body.practice-mode #right-panel #practice-insights-panel {
  flex: 1 1 auto;
  min-height: 80px;   /* always show at least the score pills */
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 6px;
}
/* #simulation-content is the scrollable container — scroll here, NOT on #output,
   so accordion .result-block cards inside #output remain normal block elements. */
body.practice-mode #right-panel #simulation-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  position: relative;
}

#prp-header-tabs {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;       /* fill available width inside panel-header flex row */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  background: transparent;
  border-bottom: none;  /* panel-header already has border-bottom */
  /* NOT flex-shrink:0 — .panel-header centers its children, so an
     unshrinkable tab bar whose natural width exceeds a narrow panel
     overflows symmetrically left+right of center and gets clipped by
     #right-panel's overflow:hidden (first tab reduced to its last
     letter, last tab cut off before the ">" button). Letting it shrink
     (shorthand above already sets shrink:1) plus overflow-x:auto lets it
     compact and scroll instead. */
  z-index: 1;
  height: 100%;         /* fill panel-header height */
  margin-right: 4px;    /* small gap before the > collapse button */
}
#prp-header-tabs::-webkit-scrollbar { display: none; }

/* Panel-header loses its side padding when tabs are present */
#right-panel .panel-header:has(#prp-header-tabs) {
  padding: 0;
  /* > button is position:absolute right:1rem — no padding-right needed here */
}
/* Tab bar reserves its own right gap so the last tab isn't under the > button */
#right-panel .panel-header #prp-header-tabs {
  padding-right: 2.2rem;
}
/* First tab gets a small left inset */
#right-panel .panel-header #prp-header-tabs .prp-tab:first-child {
  padding-left: 10px;
}

/* Tabs inside panel-header — fill header height, active indicator on bottom border */
#right-panel .panel-header #prp-header-tabs .prp-tab {
  padding: 0 8px;
  font-size: var(--fs-xs);
  height: 100%;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
#right-panel .panel-header #prp-header-tabs .prp-tab.active {
  color: var(--p-primary);
  border-bottom-color: var(--p-primary);
}
#right-panel .panel-header #prp-header-tabs .prp-tab + .prp-tab::before {
  top: 20%; height: 60%;
}

/* No gap above simulate-view when practice panel is active */
body.practice-mode #right-panel #simulate-view { gap: 0; }

.prp-tab {
  flex: 1 1 0;
  /* No min-width:0 — flexbox's default "automatic minimum size" for a
     nowrap-text item is its content width, so a tab can grow to share
     extra space evenly on a wide panel but never shrinks below what its
     own label needs. On a narrow panel the row instead overflows the
     (overflow-x:auto) #prp-header-tabs container and scrolls, rather
     than squeezing each label until it overlaps its neighbor. */
  padding: 10px 6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--p-muted);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.prp-tab:hover { color: var(--p-text); }
.prp-tab.active {
  color: var(--p-primary);
  border-bottom-color: var(--p-primary);
}
/* thin vertical separator between tabs */
.prp-tab + .prp-tab::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; height: 56%;
  width: 1px;
  background: var(--p-border-soft);
}

/* Critical-issue count on the Simulate tab — visible from any other tab so
   problems surface without a click (see DesignIssues in index.js). */
.prp-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* ── Injected panes (Discuss / Submission / ARIA) ─────────────────────────── */
/* These live inside #simulate-view, sibling to .simulation-panel */
.prp-pane {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: hidden;   /* individual sections handle their own scroll */
  display: flex;
  flex-direction: column;
}

/* ── Custom-mode submission info card ─────────────────────────────────────── */
.prp-submission--custom-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  padding: 32px 16px;
}
.prp-custom-info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px;
  border: 1px solid var(--p-border, #e2e8f0);
  border-radius: 12px;
  background: var(--p-surface-alt, #f8fafc);
}
.prp-custom-info-icon { opacity: 0.55; margin-bottom: 8px; color: var(--p-text); }
.prp-custom-info-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--p-text); }
.prp-custom-info-body { margin: 0; font-size: 13px; color: var(--p-muted); line-height: 1.5; text-align: center; max-width: 260px; }

/* ── Custom-mode requirements form ────────────────────────────────────────── */
#prp-custom-requirements-root {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.prp-custom-req {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
}
.prp-custom-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 6px;
  max-width: 100%;
  box-sizing: border-box;
}
.prp-custom-actions {
  flex-shrink: 0;
  padding: 10px 6px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
.prp-custom-actions .button-primary {
  width: 100%; padding: 10px; border: none; border-radius: 8px;
  background: #4f46e5; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.prp-custom-actions .button-primary:hover { background: #4338ca; }
.prp-custom-started-badge {
  display: block;
  text-align: center;
  font-size: var(--fs-xs, 12px);
  font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 10px;
}
.prp-custom-req-header h3 { margin: 0 0 4px; font-size: var(--fs-base, 14px); font-weight: 700; }
.prp-custom-req-header p { margin: 0 0 14px; font-size: var(--fs-xs, 12px); color: #64748b; }
.prp-custom-errors { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; font-size: 11px; color: #dc2626; }
.prp-custom-upload-note {
  background: #eef2ff;
  font-size: var(--fs-sm, 15px);
  border: 1px solid #e0e7ff;
  border-radius: 8px; 
  padding: 8px 10px; 
  margin: 8px 6px 12px; 
  line-height: 1.5; 
  color: #4338ca; 
}
.prp-custom-upload-note strong { font-weight: 700; font-style: italic }
.prp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.prp-field span { font-size: var(--fs-sm); font-weight: 600; color: #334155; }
.prp-field strong { color: #dc2626; }
.prp-field input, .prp-field textarea {
  font-size: var(--fs-xs, 12px); padding: 7px 10px; border: 1px solid #e2e8f0;
  border-radius: 7px; background: #fff; color: #1e293b; resize: vertical; font-family: inherit;
  width: 100%; box-sizing: border-box; min-width: 0;
}
.prp-field input:focus, .prp-field textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }
.prp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; max-width: 100%; }
.prp-req-list { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.prp-req-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.prp-req-row-input { flex: 1; font-size: var(--fs-xs, 12px); padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 6px; min-width: 0; box-sizing: border-box; }
.prp-req-row-remove { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 14px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; }
.prp-req-row-remove:hover { color: #dc2626; background: #fef2f2; }
.prp-link-btn { background: none; border: none; color: #6366f1; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 0; text-align: left; }
.prp-link-btn:hover { text-decoration: underline; }

/* ── "Start Designing" confirmation — a one-off animation, not a view swap.
   Requirements is always the same form; this overlay just celebrates a
   successful validation without hiding the data or creating a second state
   ("started" vs "not started") that could disagree with the form or with
   what survives a refresh. ─────────────────────────────────────────────── */
.prp-rocket-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
/* Three-way split, on purpose: the outer wrap animates ONLY translateY (pure
   vertical motion, bottom of panel to top). The tilt applies a fixed
   rotation just to orient the rocket icon nose-up. Combining rotate +
   translateY in one animated transform makes the translation run along the
   rotated axis (i.e. diagonally) instead of straight up — in this narrow
   panel that meant the rocket exited the sides almost immediately instead
   of visibly climbing. The flame is a SEPARATE sibling of the tilt (not
   nested inside it) so it stays a straight vertical trail beneath the
   rocket — nested inside the rotated tilt, it inherited the same rotation
   and ended up trailing off diagonally instead of blasting straight down. */
.prp-rocket-launch-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 2.2s total: a slow 1.5s liftoff off the pad, then a fast 0.7s ascent —
     see the keyframe split below (0–68% ≈ 1.5s, 68–100% ≈ 0.7s). */
  animation: prp-rocket-launch 2.2s linear forwards;
}
.prp-rocket-tilt {
  display: flex;
  /* The icon's own nose sits at 45° above horizontal by default (traced from
     its path geometry), but the curved/arced outline doesn't rotate visually
     symmetric at a plain -45° — checked empirically against a vertical
     reference line across several candidate angles, and -40° is the one
     that actually lands nose-up and left/right symmetric. */
  transform: rotate(-40deg);
}
.prp-rocket-svg {
  display: block;
  /* Soft brand-gradient glow behind the rocket for a bit of "cool" factor
     beyond a flat outline. */
  filter: drop-shadow(0 0 10px rgba(99,102,241,0.45));
}
/* Layered flame — a wider, softer outer flame plus a narrower, brighter
   inner core, each flickering independently (different speeds/timing) so
   they don't move in lockstep. A single flat gradient blob read as "plain";
   two offset layers plus a blur on the outer one gives it actual depth. */
.prp-rocket-flame {
  position: relative;
  width: 59px;
  height: 105px;
  margin-top: -64px;
}
.prp-rocket-flame::before,
.prp-rocket-flame::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  border-radius: 0 0 50% 50%;
}
.prp-rocket-flame::before {
  width: 44px;
  height: 105px;
  background: radial-gradient(ellipse at top, #fed7aa 0%, #fb923c 35%, #ea580c 62%, rgba(234,88,12,0) 85%);
  filter: blur(1.5px);
  animation: prp-flame-outer 0.16s ease-in-out infinite alternate;
}
.prp-rocket-flame::after {
  width: 20px;
  height: 57px;
  background: radial-gradient(ellipse at top, #fffbeb 0%, #fde047 40%, #fbbf24 68%, rgba(251,191,36,0) 92%);
  animation: prp-flame-inner 0.11s ease-in-out infinite alternate;
}
@keyframes prp-flame-outer {
  0%   { transform: translateX(-50%) scaleY(1) scaleX(1); opacity: 0.75; }
  100% { transform: translateX(-50%) scaleY(1.3) scaleX(0.82); opacity: 1; }
}
@keyframes prp-flame-inner {
  0%   { transform: translateX(-50%) scaleY(0.88) scaleX(0.9); opacity: 0.85; }
  100% { transform: translateX(-50%) scaleY(1.18) scaleX(1.05); opacity: 1; }
}
/* Two-phase liftoff: 0–57% (~2s) is a slow, heavy climb off the pad; 57–100%
   (~1.5s) covers most of the remaining distance — the rocket visibly
   accelerates partway through instead of climbing at one constant speed. */
@keyframes prp-rocket-launch {
  0%   { transform: translateY(40px) scale(0.85); opacity: 0; }
  6%   { opacity: 1; transform: translateY(20px) scale(0.9); }
  68%  { transform: translateY(-100px) scale(0.95); opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(-780px) scale(1.1); opacity: 0; }
}

/* Blur the form out of focus and fade it mostly away while the rocket is in
   flight, rather than just dimming it — makes the rocket the clear visual
   focus instead of a slightly-faded form sitting behind it. */
.prp-custom-req { transition: opacity 0.4s ease, filter 0.4s ease; }
.prp-rocket-active .prp-custom-req { opacity: 0.2; filter: blur(14px); }

/* ═══════════════════════════════════════════════════════════════════════════
   SIMULATE TAB — empty state (shown before any simulation has been run)
   ═══════════════════════════════════════════════════════════════════════════ */
.prp-sim-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  color: var(--p-muted);
  text-align: center;
  pointer-events: none;
}
.prp-sim-empty-icon { opacity: 0.3; }
.prp-sim-empty-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
}
.prp-sim-empty-sub {
  font-size: var(--fs-sm);
  color: var(--p-muted);
  margin: 0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DISCUSS TAB
   ═══════════════════════════════════════════════════════════════════════════ */
.prp-discuss {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
}

/* Toolbar: sort pills + ask button */
.prp-discuss-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 7px;
  border-bottom: 1px solid var(--p-border-soft);
  flex-shrink: 0;
  gap: 8px;
}
.prp-sort-group {
  display: flex;
  align-items: center;
  background: var(--p-surface-2);
  border: 1px solid var(--p-border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.prp-sort-btn {
  padding: 4px 9px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--p-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.prp-sort-btn.active {
  background: var(--p-surface);
  color: var(--p-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.prp-ask-btn {
  padding: 5px 10px;
  border: 1px solid var(--p-primary);
  background: transparent;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--p-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.prp-ask-btn:hover { background: var(--p-primary); color: #fff; }

/* Search box — filters threads server-side by title/body (?q=) */
.prp-discuss-search {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--p-border);
  border-radius: 6px;
  background: var(--p-surface-2);
  color: var(--p-muted);
}
.prp-discuss-search:focus-within {
  border-color: var(--p-primary);
  color: var(--p-text);
}
.prp-discuss-search svg { flex: 0 0 auto; }
.prp-discuss-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--fs-xs);
  font-family: inherit;
  color: var(--p-text);
}
.prp-discuss-search input::placeholder { color: var(--p-muted); }
.prp-discuss-search input::-webkit-search-cancel-button { cursor: pointer; }

/* Thread list */
.prp-thread-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.prp-thread-item {
  padding: 10px 10px 9px;
  border-bottom: 1px solid var(--p-border-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background 0.1s;
}
.prp-thread-item:hover { background: var(--p-surface-2); }
.prp-thread-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text);
  line-height: 1.3;
  margin: 0;
}
.prp-thread-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--p-muted);
  flex-wrap: wrap;
}
.prp-thread-author { font-weight: 700; color: var(--p-text); }
.prp-thread-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.prp-vote-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prp-vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--p-border);
  border-radius: 6px;
  font-size: var(--fs-xss);
  font-weight: 600;
  color: var(--p-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1;
}
.prp-vote-btn:hover { background: var(--p-surface-2); color: var(--p-text); }
.prp-upvote-btn.voted   { color: #22c55e; border-color: #22c55e; background: rgba(34,197,94,0.08); }
.prp-downvote-btn.downvoted { color: #e57373; border-color: #e57373; background: rgba(229,115,115,0.08); }
.prp-upcount, .prp-downcount { font-size: var(--fs-xs); }
.prp-view-btn {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--p-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  white-space: nowrap;
}
.prp-action-btn {
  font-size: var(--fs-xss);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--p-border);
  background: transparent;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.prp-edit-btn { color: var(--p-muted); }
.prp-edit-btn:hover { background: var(--p-surface-2); color: var(--p-text); }
.prp-delete-btn { color: #e57373; border-color: rgba(229,115,115,0.3); }
.prp-delete-btn:hover { background: rgba(229,115,115,0.12); color: #e57373; }
.prp-discuss-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  font-size: var(--fs-sm);
  color: var(--p-muted);
}
/* Inline page-load spinner (appended while fetching next page) */
.prp-load-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  font-size: var(--fs-xs);
  color: var(--p-dim);
}
/* IntersectionObserver sentinel — invisible 1px trigger */
.prp-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
}
.prp-question-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--p-muted);
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Thread detail */
.prp-thread-detail {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.prp-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--p-border-soft);
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--p-muted);
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
  width: 100%;
  transition: color 0.12s;
}
.prp-back-btn:hover { color: var(--p-text); }
.prp-thread-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prp-question-block {
  background: var(--p-surface-2);
  border: 1px solid var(--p-border-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.prp-question-title {
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--p-text);
  margin: 0 0 5px;
  line-height: 1.3;
}
.prp-question-body {
  font-size: var(--fs-sm);
  color: var(--p-muted);
  margin: 0;
  line-height: 1.5;
}
.prp-replies-heading {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p-muted);
  margin: 4px 0 0;
}
.prp-reply-item {
  border-left: 2px solid var(--p-border-soft);
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prp-reply-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.prp-reply-author {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--p-text);
}
.prp-reply-time {
  font-size: var(--fs-xs);
  color: var(--p-dim);
}
.prp-reply-body {
  font-size: var(--fs-sm);
  color: var(--p-text);
  line-height: 1.45;
  margin: 0;
}
.prp-reply-footer {
  display: flex;
  gap: 4px;
  margin-top: 1px;
}

/* Reply composer — always pinned to bottom of thread view */
.prp-reply-compose {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.prp-reply-input {
  flex: 1;
  border: 1px solid var(--p-border);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: var(--fs-xs);
  font-family: inherit;
  color: var(--p-text);
  background: var(--p-surface-2);
  resize: none;
  min-height: 38px;
  max-height: 80px;
  transition: border-color 0.15s;
  line-height: 1.4;
}
.prp-reply-input:focus { outline: none; border-color: var(--p-primary); }
.prp-reply-post {
  padding: 9px 16px;
  border: 1px solid #3b82f6;
  background: #3b82f6;
  color: #fff;
  border-radius: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(59,130,246,0.35);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.prp-reply-post:hover {
  background: #2563eb;
  box-shadow: 0 6px 20px rgba(59,130,246,0.45);
  transform: translateY(-1px);
}
.prp-reply-post:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* When reply composer is inline in the pane (both Practice and Learn mode) */
#prp-reply-actions {
  flex-shrink: 0;
  padding: 10px 10px 14px;
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
}

/* Ask-question form */
.prp-ask-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
}
.prp-ask-form-body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
/* Ask form footer always inline in the form (both Practice and Learn mode) */
.prp-ask-form > .prp-ask-form-footer {
  flex-shrink: 0;
  padding: 10px 10px 14px;
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
}
.prp-ask-form label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--p-text);
  margin-bottom: 4px;
  display: block;
}
.prp-ask-form input,
.prp-ask-form textarea {
  width: 100%;
  border: 1px solid var(--p-border);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--p-text);
  background: var(--p-surface-2);
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.prp-ask-form input:focus,
.prp-ask-form textarea:focus { outline: none; border-color: var(--p-primary); }
.prp-ask-form textarea { resize: vertical; min-height: 70px; }
/* .prp-ask-form-footer is rendered inside #simulate-panel-actions */
.prp-ask-form-footer {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}
.prp-ask-cancel {
  flex: 0 0 25%;
  padding: 9px 16px;
  border: 1px solid var(--p-border);
  background: transparent;
  border-radius: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  color: var(--p-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  line-height: 1.4;
}
.prp-ask-cancel:hover { border-color: var(--p-text); color: var(--p-text); }
.prp-ask-submit {
  flex: 1;
  padding: 9px 16px;
  border: 1px solid #3b82f6;
  background: #3b82f6;
  color: #fff;
  border-radius: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
  line-height: 1.4;
}
.prp-ask-submit:hover { background: #2563eb; box-shadow: 0 6px 20px rgba(59,130,246,0.45); }

/* Inline edit (thread title/body & reply body) */
.prp-inline-edit-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 6px;
}
.prp-inline-edit-input,
.prp-inline-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--p-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: var(--fs-xs);
  font-family: inherit;
  background: var(--p-surface);
  color: var(--p-text);
  resize: vertical;
  outline: none;
}
.prp-inline-edit-input:focus,
.prp-inline-edit-textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.prp-inline-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.prp-inline-edit-label {
  font-size: var(--fs-xss);
  font-weight: 600;
  color: var(--p-muted);
  margin-bottom: 2px;
}

/* SVG icon buttons for owner edit/delete on posts & replies */
.prp-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.prp-card-header > div:first-child { flex: 1; min-width: 0; }
.prp-owner-icons {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.prp-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--p-border);
  background: transparent;
  cursor: pointer;
  color: var(--p-muted);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.prp-icon-btn:hover { background: var(--p-surface-2); color: var(--p-text); }
.prp-icon-delete { color: #e57373; border-color: rgba(229,115,115,0.3); }
.prp-icon-delete:hover { background: rgba(229,115,115,0.12); color: #e57373; border-color: rgba(229,115,115,0.5); }
.prp-reply-header-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Discuss empty */
.prp-discuss-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  color: var(--p-muted);
  text-align: center;
}
.prp-discuss-empty-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
}
.prp-discuss-empty-sub {
  font-size: var(--fs-sm);
  color: var(--p-muted);
  margin: 0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBMISSION TAB
   ═══════════════════════════════════════════════════════════════════════════ */
.prp-submission {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.prp-submission-header {
  padding: 10px 10px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--p-border-soft);
}
.prp-submission-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p-muted);
  margin: 0;
}
.prp-submission-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  /* padding: 4px 4px 12px; */
}
.prp-submission-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prp-submission-table th {
  text-align: center;
  padding: 6px 6px 5px;
  color: var(--p-muted);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--p-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--p-surface);
  z-index: 1;
}
.prp-submission-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--p-border-soft);
  color: var(--p-text);
  vertical-align: middle;
  text-align: center;
}
.prp-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 800;
}
.prp-score-high { background: rgba(34,197,94,0.12);  color: #16a34a; }
.prp-score-mid  { background: rgba(234,179,8,0.12);   color: #b45309; }
.prp-score-low  { background: rgba(239,68,68,0.12);   color: #dc2626; }
.prp-status-passed   { color: #16a34a; font-weight: 700; }
.prp-status-accepted { color: #16a34a; font-weight: 700; }
.prp-status-review   { color: #b45309; font-weight: 700; }
.prp-status-fail     { color: #dc2626; font-weight: 700; }
.prp-submission-time    { color: var(--p-dim); font-size: var(--fs-xss); white-space: nowrap; }
.prp-submission-metric  { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.prp-submission-row     { cursor: pointer; transition: background 0.12s ease; }
.prp-submission-row:hover { background: var(--p-surface-hover, rgba(0,0,0,0.03)); }
.prp-submission-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  color: var(--p-muted);
  text-align: center;
}
.prp-submission-empty-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
}
.prp-submission-empty-sub {
  font-size: var(--fs-sm);
  color: var(--p-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Submission footer — total count ───────────────────────────────────── */
.prp-submission-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 16px;
  border-top: 1px solid var(--p-border, rgba(0,0,0,0.07));
  flex-shrink: 0;
  background: var(--p-surface, #fff);
}
.prp-sub-total-label {
  font-size: var(--fs-sm);
  color: var(--p-muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ── Persistent Problem Header ─────────────────────────────────────────── */
#prp-problem-header {
  display: none; /* shown by JS only when content is available */
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.prp-ph-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.prp-ph-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text, #e8e8e8);
  line-height: 1.3;
}
.prp-ph-desc {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--p-dim, #888);
  line-height: 1.5;
}
.prp-difficulty-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.prp-diff-easy   { background: rgba(34,197,94,0.15);  color: #22c55e; }
.prp-diff-medium { background: rgba(245,166,35,0.15); color: #f5a623; }
.prp-diff-hard   { background: rgba(239,68,68,0.15);  color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════════════════
   LEARN MODE RIGHT PANEL (LearnPanel)
   Reuses .prp-* tab tokens; adds lrp-* scoped styles for learn-only content.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Force-hide utility used by LearnPanel to hide the old Simulate/FAQ toggle */
.lrp-force-hidden { display: none !important; }

/* When tab bar is in the panel-header, remove side padding so tabs go edge-to-edge */
#right-panel .panel-header:has(#lrp-header-tabs) {
  padding: 0;
  /* > button is position:absolute right:1rem — no padding-right needed here */
}
/* Tab bar reserves its own right gap so the last tab isn't under the > button */
#right-panel .panel-header #lrp-header-tabs {
  padding-right: 2.75rem;
}
/* First tab gets a small left inset */
#right-panel .panel-header #lrp-header-tabs .prp-tab:first-child {
  padding-left: 14px;
}

/* Tab bar — same visual style as practice, separate id to avoid conflicts */
#lrp-header-tabs {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;       /* fill available width inside panel-header flex row */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  background: transparent;
  border-bottom: none;  /* panel-header already has border-bottom */
  flex-shrink: 0;
  z-index: 1;
  height: 100%;         /* fill panel-header height */
}
#lrp-header-tabs::-webkit-scrollbar { display: none; }

/* Tabs inside panel-header — active indicator on bottom of the header border */
#right-panel .panel-header #lrp-header-tabs .prp-tab {
  padding: 0 10px;
  font-size: var(--fs-xs);
  height: 100%;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
#right-panel .panel-header #lrp-header-tabs .prp-tab.active {
  color: var(--p-primary);
  border-bottom-color: var(--p-primary);
}
#right-panel .panel-header #lrp-header-tabs .prp-tab + .prp-tab::before {
  top: 20%; height: 60%;
}

/* Ensure #simulate-view has no gap when learn panel is active */
body.learn-mode-active #right-panel #simulate-view { gap: 0; }

/* ── Empty state (no preset selected) ── */
.lrp-empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--p-muted, #94a3b8);
}
.lrp-empty-title {
  margin: 0 0 6px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-dim, #888);
}
.lrp-empty-sub {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* ── Problem pane — scrollable ── */
#lrp-pane-problem {
  overflow-y: auto;
}

.lrp-problem {
  padding: 6px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lrp-problem-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto; /* make the header horizontally scrollable if content overflows */
  overflow-y: hidden; /* prevent vertical overflow */
}
.lrp-problem-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text, #1e293b);
  flex: 1 1 0;
  min-width: 0;
}
.lrp-problem-desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--p-dim, #555);
  line-height: 1.6;
}

/* ── Requirements sections ── */
.lrp-req-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lrp-req-heading {
  margin: 0px 10px 10px 0px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p-primary, #3b82f6);
}
.lrp-req-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lrp-req-list li {
  font-size: var(--fs-sm);
  color: var(--p-text, #1e293b);
  line-height: 1.5;
}

/* ── Simulate pane — scrollable output + sticky button footer ── */
#lrp-pane-simulate {
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* inner #simulation-content scrolls, not the pane */
}
#lrp-pane-simulate #simulation-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: block !important;
  position: relative;
}
/* ── Discuss pane — form + pinned footer ── */
#lrp-pane-discuss {
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* form-body scrolls; footer stays pinned */
}
.lrp-sim-footer {
  flex-shrink: 0;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem 0.6rem;
  background: var(--p-surface, #fff);
}
.lrp-sim-footer .button {
  flex: 1;
  padding: 0.8rem 1.4rem;
  font-size: var(--fs-base);
  border-radius: 12px;
}

/* ─── Architecture Health Bar ────────────────────────────────────────────── */
#practice-insights-panel .pip-health-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 5px;
  background: transparent;
}

#practice-insights-panel .pip-health-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 4px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  min-width: 0;
}

#practice-insights-panel .phm-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1e293b;
  white-space: nowrap;
}

#practice-insights-panel .phm-value {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: #1e293b;
}

/* strength levels */
#practice-insights-panel .pip-health-metric.arch-strong  { border-color: #bbf7d0; background: #f0fdf4; }
#practice-insights-panel .pip-health-metric.arch-strong  .phm-value { color: #15803d; }
#practice-insights-panel .pip-health-metric.arch-moderate { border-color: #fde68a; background: #fefce8; }
#practice-insights-panel .pip-health-metric.arch-moderate .phm-value { color: #92400e; }
#practice-insights-panel .pip-health-metric.arch-weak    { border-color: #fecaca; background: #fff1f2; }
#practice-insights-panel .pip-health-metric.arch-weak    .phm-value { color: #b91c1c; }

/* ─── Component Intelligence (inspector) ───────────────────────────────── */
.insp-intel-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 10px 12px;
  margin-top: 2px;
  border-top: 1px solid #f1f5f9;
  background: #fafbff;
  border-radius: 0 0 10px 10px;
}

.insp-role-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  width: fit-content;
}

.insp-intel-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insp-intel-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #031a3b;
}

.insp-intel-body {
  font-size: var(--fs-sm);
  color: #10315e;
  line-height: 1.5;
}

.insp-pairings {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.insp-pairing-chip {
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.insp-why-matters {
  padding: 8px 10px;
  border-radius: 8px;
  margin-top: 4px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.insp-why-matters .insp-intel-label {
  color: #b45309;
}

.insp-why-matters .insp-intel-body {
  color: #78350f;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 5 — INTELLIGENT SIMULATION TAB
   Scope: #prp-sim-root  (inside .prp-pane[data-tab=simulate])
   ═══════════════════════════════════════════════════════════════════════════ */

.prp-sim-root {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 20px;
  overflow-y: auto;
  height: 100%;
}

/* ── Scenario selector bar ─────────────────────────────────────────────── */
/* Wrapper: there are 5 scenarios but only ~3 fit the visible width, so the
   bar scrolls horizontally. The fade elements hint there's more off-screen —
   shown/hidden based on actual scroll position (see _bindScenarioScroll). */
.sim-scenario-wrap {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
}
.sim-scenario-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 5;
}
.sim-scenario-fade--l {
  left: 0;
  background: linear-gradient(to right, #ffffff, rgba(255,255,255,0));
}
.sim-scenario-fade--r {
  right: 0;
  background: linear-gradient(to left, #ffffff, rgba(255,255,255,0));
}
.sim-scenario-wrap.can-scroll-l .sim-scenario-fade--l { opacity: 1; }
.sim-scenario-wrap.can-scroll-r .sim-scenario-fade--r { opacity: 1; }

.sim-scenario-bar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding: 5px 0px;
  min-height: 65px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sim-scenario-bar::-webkit-scrollbar { display: none; }

.sim-scenario-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 18px;
  min-height: 58px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
  font-family: inherit;
  flex: 0 0 auto;
  white-space: nowrap;
}
.sim-scenario-btn:hover {
  background: #f0f4ff;
  border-color: #c7d4ff;
}
.sim-scenario-btn.active {
  background: #eff6ff;
  border-color: #3b82f6;
}
.sim-scenario-btn:active { transform: scale(0.96); }

/* Per-scenario idle tints */
.sim-scenario-btn[data-sc="normal"]  .ssb-icon { color: #3b82f6; }
.sim-scenario-btn[data-sc="spike"]   .ssb-icon { color: #f59e0b; }
.sim-scenario-btn[data-sc="failure"] .ssb-icon { color: #ef4444; }
.sim-scenario-btn[data-sc="global"]  .ssb-icon { color: #8b5cf6; }
.sim-scenario-btn[data-sc="async"]   .ssb-icon { color: #14b8a6; }

/* Per-scenario hover — same bg/border as active */
.sim-scenario-btn[data-sc="normal"]:hover  { background: #eff6ff; border-color: #3b82f6; }
.sim-scenario-btn[data-sc="spike"]:hover   { background: #fffbeb; border-color: #f59e0b; }
.sim-scenario-btn[data-sc="failure"]:hover { background: #fff1f2; border-color: #ef4444; }
.sim-scenario-btn[data-sc="global"]:hover  { background: #f5f3ff; border-color: #8b5cf6; }
.sim-scenario-btn[data-sc="async"]:hover   { background: #f0fdfa; border-color: #14b8a6; }

/* Per-scenario active color-coding */
.sim-scenario-btn[data-sc="normal"].active  { background: #eff6ff; border-color: #3b82f6; }
.sim-scenario-btn[data-sc="normal"].active .ssb-icon  { color: #2563eb; }
.sim-scenario-btn[data-sc="normal"].active .ssb-label { color: #1d4ed8; }

.sim-scenario-btn[data-sc="spike"].active   { background: #fffbeb; border-color: #f59e0b; }
.sim-scenario-btn[data-sc="spike"].active .ssb-icon   { color: #d97706; }
.sim-scenario-btn[data-sc="spike"].active .ssb-label  { color: #b45309; }

.sim-scenario-btn[data-sc="failure"].active { background: #fff1f2; border-color: #ef4444; }
.sim-scenario-btn[data-sc="failure"].active .ssb-icon { color: #dc2626; }
.sim-scenario-btn[data-sc="failure"].active .ssb-label { color: #991b1b; }

.sim-scenario-btn[data-sc="global"].active  { background: #f5f3ff; border-color: #8b5cf6; }
.sim-scenario-btn[data-sc="global"].active .ssb-icon  { color: #7c3aed; }
.sim-scenario-btn[data-sc="global"].active .ssb-label { color: #6d28d9; }

.sim-scenario-btn[data-sc="async"].active   { background: #f0fdfa; border-color: #14b8a6; }
.sim-scenario-btn[data-sc="async"].active .ssb-icon   { color: #0d9488; }
.sim-scenario-btn[data-sc="async"].active .ssb-label  { color: #0f766e; }

.ssb-icon {
  font-size: var(--fs-lg);
  line-height: 1;
}
/* icon color handled per-scenario via data-sc rules above */

.ssb-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
/* label color handled per-scenario via data-sc rules above */

/* ── Section wrapper ───────────────────────────────────────────────────── */
.sim-section {
  padding: 14px 14px 4px;
  /* .prp-sim-root is a flex column; without this, flexbox's default
     flex-shrink:1 can compress these sections below their content's
     natural height whenever space is tight, and overflow:hidden (needed
     to clip the rounded corners) then silently cuts text off instead of
     the section growing / the root scrolling. Never shrink below content. */
  flex-shrink: 0;
}

.sim-section-hd {
  display: flex;
  align-items: baseline;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 10px;
}

/* ── Production Risks / Security Fixes / Issues to Fix — "Issues to Fix" tab,
   Practice > Interview Qs only. Each is a collapsible section (<details>):
   the bar (label + count) is the <summary> — click it to show/hide every
   card inside. Starts collapsed so three sections' worth of findings don't
   force a page of scrolling the moment Submit unlocks them. No outer border
   — a thin bottom divider between stacked sections is enough separation. */
.sim-section--risks,
.sim-section--security,
.sim-section--issues {
  margin: 0;
  border-bottom: 1px solid #eef1f5;
}
.sim-section--issues { border-bottom: none; }

.sim-section-hd-risks,
.sim-section-hd-security,
.sim-section-hd-issues {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 0;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sim-section-hd-risks::-webkit-details-marker,
.sim-section-hd-security::-webkit-details-marker,
.sim-section-hd-issues::-webkit-details-marker { display: none; }
.sim-section-hd-risks    { color: #b45309; }
.sim-section-hd-security { color: #92400e; }
.sim-section-hd-issues   { color: #4338ca; }
.sim-section-hd-label { flex: 1; }
.sim-section-count {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.07);
  font-size: var(--fs-xss);
  letter-spacing: normal;
}
.sim-section .sim-row-chevron { flex-shrink: 0; color: currentColor; opacity: 0.6; transition: transform 0.15s ease; }
.sim-section[open] > summary .sim-row-chevron { transform: rotate(180deg); }

/* ── Card — one per risk/finding. Always fully expanded; only the section
   around it collapses (see above). ───────────────────────────────────────── */
.sim-rows { display: flex; flex-direction: column; gap: 8px; padding: 0 0 10px; }
.sim-row {
  border-radius: 8px;
  background: transparent;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}
.sim-row--critical { background: #fff1f2; border-color: #fecdd3; }
.sim-row--warn      { background: #fffbeb; border-color: #fde68a; }
.sim-row--info      { background: #f8fafc; border-color: #e2e8f0; }

.sim-row-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #1e293b;
}
.sim-row--critical .sim-row-icon { color: #dc2626; }
.sim-row--warn      .sim-row-icon { color: #b45309; }
.sim-row--info      .sim-row-icon { color: #1d4ed8; }
.sim-row-icon { display: flex; flex-shrink: 0; }
.sim-row-title { flex: 1; min-width: 0; }
.sim-row-sev {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
}

.sim-row-body { padding: 0 12px 12px 34px; }
.sim-row-desc { font-size: var(--fs-xs); color: #475569; line-height: 1.55; }
.sim-row-fix {
  margin-top: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #334155;
  line-height: 1.5;
}

/* ── "Issues to Fix" tab button — reflects locked/unlocked state ────────── */
.sim-scenario-btn--issues .ssb-icon { color: #64748b; }
.sim-scenario-btn--issues.active .ssb-icon { color: #4338ca; }

.sim-issues-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin: 14px;
  padding: 36px 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.sim-issues-lock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
}
.sim-issues-locked-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #1e293b;
}
.sim-issues-locked-sub {
  max-width: 320px;
  font-size: var(--fs-xs);
  color: #64748b;
  line-height: 1.5;
}
.sim-issues-empty {
  margin: 14px;
  padding: 16px;
  text-align: center;
  font-size: var(--fs-xs);
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}

/* ── Live event cards ──────────────────────────────────────────────────── */
.sim-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sim-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.sim-event--critical {
  background: #fff1f2;
  border-color: #fecdd3;
}
.sim-event--warn {
  background: #fffbeb;
  border-color: #fde68a;
}
.sim-event--info {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.sim-event--good {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.sim-ev-icon {
  font-size: var(--fs-sm);
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.sim-event--critical .sim-ev-icon { color: #dc2626; }
.sim-event--warn     .sim-ev-icon { color: #d97706; }
.sim-event--info     .sim-ev-icon { color: #64748b; }
.sim-event--good     .sim-ev-icon { color: #16a34a; }

.sim-ev-body { flex: 1; min-width: 0; }

.sim-ev-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
  margin-bottom: 2px;
}
.sim-event--critical .sim-ev-title { color: #991b1b; }
.sim-event--warn     .sim-ev-title { color: #92400e; }
.sim-event--good     .sim-ev-title { color: #166534; }

.sim-ev-desc {
  font-size: var(--fs-xss);
  color: #475569;
  line-height: 1.45;
}

/* ── Challenge card ────────────────────────────────────────────────────── */
.sim-challenge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #6366f1;
  border-radius: 8px;
}

.sim-challenge-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #6366f1;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1;
  margin-top: 1px;
}

.sim-challenge-q {
  font-size: var(--fs-xs);
  color: #1e293b;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

/* ── Teaching insight ──────────────────────────────────────────────────── */
.sim-insight {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.ins--fails    { border-left: 3px solid #ef4444; background: #fff8f8; }
.ins--works    { border-left: 3px solid #22c55e; background: #f8fdf8; }
.ins--tradeoff { border-left: 3px solid #f59e0b; background: #fffcf0; }
.ins--scaling  { border-left: 3px solid #3b82f6; background: #f8fbff; }

.ins-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.7;
}
.ins--fails    .ins-tag { color: #dc2626; }
.ins--works    .ins-tag { color: #16a34a; }
.ins--tradeoff .ins-tag { color: #b45309; }
.ins--scaling  .ins-tag { color: #1d4ed8; }

.ins-head {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
  line-height: 1.3;
}

.ins-body {
  font-size: var(--fs-xss);
  color: #475569;
  line-height: 1.5;
}

/* ── Architecture Confidence ───────────────────────────────────────────── */
.sim-confidence {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.conf-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.conf-dim-label {
  font-size: var(--fs-xss);
  font-weight: 600;
  color: #475569;
  flex: 0 0 90px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.conf-dots {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.conf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  transition: background 200ms ease, border-color 200ms ease;
}
.conf-dot--on { background: #64748b; border-color: #475569; }

.conf-val-label {
  font-size: var(--fs-xss);
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 1;
  text-align: right;
}
.conf-strong   { color: #16a34a; }
.conf-moderate { color: #d97706; }
.conf-weak     { color: #dc2626; }

/* Dot colours by level */
.conf-strong   .conf-dot--on { background: #22c55e; border-color: #16a34a; }
.conf-moderate .conf-dot--on { background: #f59e0b; border-color: #d97706; }
.conf-weak     .conf-dot--on { background: #f87171; border-color: #ef4444; }

/* Target the dots inside the correct row via sibling relationship */
.conf-row:has(.conf-strong)   .conf-dot--on { background: #22c55e; border-color: #16a34a; }
.conf-row:has(.conf-moderate) .conf-dot--on { background: #f59e0b; border-color: #d97706; }
.conf-row:has(.conf-weak)     .conf-dot--on { background: #f87171; border-color: #ef4444; }

/* ── Empty state ───────────────────────────────────────────────────────── */
.sim-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
}

.sim-empty-icon {
  color: #cbd5e1;
  margin-bottom: 4px;
}

.sim-empty-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #475569;
  margin: 0;
}

.sim-empty-sub {
  font-size: var(--fs-xss);
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
  max-width: 240px;
}

/* ── Practice test-case mode: Simulate tab placeholder ─────────────────── */
.sim-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 24px;
  text-align: center;
  height: 100%;
}
.sim-placeholder-icon { color: #cbd5e1; }
.sim-placeholder-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #475569;
  margin: 0;
  max-width: 280px;
}
.sim-placeholder-sub {
  font-size: var(--fs-xss);
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
  max-width: 260px;
}

/* ── Practice test-case mode: Overall Summary block (Simulate tab) ─────── */
.sim-overall-summary {
  border: 1px solid var(--p-border, rgba(0,0,0,0.08));
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--p-surface, #fff);
}
.sim-ovs-score-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 10px;
}
.sim-ovs-total {
  font-size: 24px;
  font-weight: 800;
  color: var(--p-text);
}
.sim-ovs-total-max { font-size: var(--fs-xss); color: var(--p-muted); font-weight: 600; }
.sim-ovs-counts { font-size: var(--fs-xss); color: var(--p-muted); }
.sim-ovs-rows { display: flex; flex-direction: column; gap: 6px; }
.sim-ovs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.02);
  font-size: var(--fs-xss);
}
.sim-ovs-name  { font-weight: 600; color: var(--p-text); }
.sim-ovs-score { color: var(--p-muted); font-variant-numeric: tabular-nums; }
.sim-ovs-badge { font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.sim-ovs-pass  { background: rgba(34,197,94,0.12); color: #16a34a; }
.sim-ovs-fail  { background: rgba(239,68,68,0.12); color: #dc2626; }

/* ── Real score badge in confidence header ────────────────────────────────── */
.conf-real-score {
  margin-left: auto;
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: -0.02em;
}
.conf-real-score-max {
  font-size: var(--fs-micro);
  font-weight: 500;
  color: #64748b;
  margin-left: 1px;
}

/* ── Algorithm result divider ─────────────────────────────────────────────── */
.sim-algo-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 4px;
  padding: 0 2px;
}
.sim-algo-divider::before,
.sim-algo-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, 0.2);
}
.sim-algo-divider-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}

/* ── "Run Simulation" hint when no result yet ──────────────────────────────── */
.sim-algo-hint {
  margin: 16px 0 4px;
  padding: 10px 14px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  font-size: var(--fs-xss);
  color: #94a3b8;
  line-height: 1.5;
}
.sim-algo-hint-icon {
  color: #38bdf8;
  margin-right: 5px;
  font-size: var(--fs-micro);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 5 — CANVAS SIM OVERLAY CLASSES
   Applied by SimOverlay.js to .node elements on the canvas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Critical stress — node is under failure/overload pressure */
.node.sim-stress--critical {
  outline: 2px solid rgba(239, 68, 68, 0.65) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.10),
              0 4px 16px rgba(239, 68, 68, 0.18) !important;
}

/* Warn stress — node is a bottleneck risk */
.node.sim-stress--warn {
  outline: 2px solid rgba(245, 158, 11, 0.60) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10),
              0 4px 12px rgba(245, 158, 11, 0.14) !important;
}

/* Subtle pulsing warning indicator */
.node.sim-pulse {
  animation: sim-node-pulse 2.4s ease-in-out infinite;
}

@keyframes sim-node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50%       { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.18); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OLD SIMULATION OUTPUT — restyled to match new Phase 5 panel
   Scoped to #simulation-content so it never affects other views.
   ═══════════════════════════════════════════════════════════════════════════ */

#simulation-content #output {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Result-section (summary counts) — hide it, redundant with new panel */
#simulation-content .result-section {
  display: none;
}

/* Accordion blocks — match sim-event card style */
#simulation-content .result-block,
#simulation-content .result-block-blackbox {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: none;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 140ms ease;
}
#simulation-content .result-block:hover,
#simulation-content .result-block-blackbox:hover {
  box-shadow: none;
  border-color: #cbd5e1;
}

/* Headers — match .sim-section-hd style */
#simulation-content .result-block-header,
#simulation-content .result-block-blackbox-header {
  padding: 9px 12px;
  background: transparent;
  border-radius: 8px;
  gap: 6px;
}
#simulation-content .result-block-header:hover,
#simulation-content .result-block-blackbox-header:hover {
  background: rgba(241, 245, 249, 0.6);
}
#simulation-content .result-block-header h5,
#simulation-content .result-block-blackbox-header h5 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0;
  gap: 0;
}
/* Remove the coloured dot ::before injected by base style.css */
#simulation-content .result-block h5::before,
#simulation-content .result-block-blackbox h5::before {
  display: none;
}

/* Content area */
#simulation-content .result-block-content,
#simulation-content .result-block-blackbox-content {
  padding: 0 12px 10px;
  font-size: var(--fs-xss);
  color: #475569;
  line-height: 1.5;
}

/* Lists inside blocks */
#simulation-content .result-block-content ul,
#simulation-content .result-block-blackbox-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#simulation-content .result-block-content li,
#simulation-content .result-block-blackbox-content li {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  font-size: var(--fs-xss);
  color: #475569;
  line-height: 1.45;
}
#simulation-content .result-block-content li strong,
#simulation-content .result-block-blackbox-content li strong {
  display: block;
  font-size: var(--fs-xss);
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}

/* Violation / smell detail lines */
#simulation-content .violation-detail {
  font-size: var(--fs-micro);
  color: #64748b;
  margin-top: 3px;
  line-height: 1.45;
}
#simulation-content .violation-detail strong {
  display: inline;
  font-size: inherit;
  color: #475569;
}

/* Severity badge pill */
#simulation-content .violation-severity {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  margin-left: 5px;
  vertical-align: middle;
}

/* Toggle arrow */
#simulation-content .result-block-toggle {
  color: #94a3b8;
  font-size: var(--fs-micro);
}

/* Chip tags (missing component examples) */
#simulation-content .missing-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
#simulation-content .chip {
  display: inline-block;
  padding: 2px 7px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: #1d4ed8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROBLEM TAB v2 — PRACTICE MODE
   Scope: .prp-problem-container (inside #practice-content)
   Features: Problem statement, constraints, test case cards with status badges
   ═══════════════════════════════════════════════════════════════════════════ */

/* #practice-content is a flex column (see the "75/25 split" rule above)
   and .prp-problem-container's height:100% below only resolves against a
   parent with a *definite* height — #prp-problem-owned (its direct
   parent, created in problem-tab.js) had no sizing rule at all, so it
   defaulted to height:auto and grew to fit the problem text instead of
   being capped at the panel's available space. That silently broke
   .prp-problem-container's own internal scroll (nothing to scroll
   against, so #practice-content's overflow:hidden just clipped the tail
   of long problem statements instead of letting it scroll). */
#prp-problem-owned {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.prp-problem-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0;
  overflow-y: auto;
  height: 100%;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.prp-problem-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: 8px;
}
.prp-empty-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.prp-empty-sub {
  font-size: var(--fs-xss);
  color: #64748b;
  margin: 0;
  max-width: 220px;
}

/* ── Section container ────────────────────────────────────────────────── */
.prp-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prp-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a2635;
  margin: 0 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}

/* ── Problem statement (no title, just content) ─────────────────────── */
.prp-section-problem {
  background: none;
}
.prp-problem-text {
  font-size: var(--fs-sm);
  color: #334155;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
}

/* ── Constraints ──────────────────────────────────────────────────────── */
.prp-section-constraints {
  background: none;
}
.prp-constraints-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prp-constraint-item {
  font-size: var(--fs-sm);
  color: #475569;
  padding: 0;
  font-weight: 500;
  line-height: 1.6;
}
.prp-constraint-item::before {
  content: "• ";
  color: #3b82f6;
  font-weight: 700;
  margin-right: 8px;
}

/* ── Test cases grid ──────────────────────────────────────────────────── */
.prp-section-testcases {
  background: none;
}
.prp-testcases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 2px;
}

/* ── Test case card base ──────────────────────────────────────────────── */
.prp-testcase-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #ffffff;
  transition: all 140ms ease;
}
.prp-testcase-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.prp-tc-name {
  font-size: calc(var(--fs-sm) + 1px);
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.3;
}

/* ── Input — always visible, no collapse/expand ─────────────────────────── */
.prp-tc-input {
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}

.prp-tc-input-label {
  display: block;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: #000408;
}

.prp-tc-desc {
  font-size: var(--fs-xss);
  color: #475569;
  margin: 0;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Design Your Own System Form
   Fixes: font sizes, touch targets, layout for tablets/phones
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  /* Form labels — increase from 12px to 13px */
  .prp-field span {
    font-size: 13px;
    font-weight: 600;
  }

  /* Form inputs/textareas — increase from 12px to 13px, padding for touch target */
  .prp-field input,
  .prp-field textarea {
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 8px;
    min-height: 40px;
  }

  .prp-field input::placeholder,
  .prp-field textarea::placeholder {
    font-size: 12px;
    color: #a1a1a1;
  }

  .prp-field textarea {
    min-height: 100px;
  }

  /* Requirement input rows — increase padding for touch target */
  .prp-req-row-input {
    font-size: 13px;
    padding: 8px 10px;
    min-height: 40px;
    border-radius: 6px;
  }

  .prp-req-row-input::placeholder {
    font-size: 12px;
    color: #a1a1a1;
  }

  /* Remove button for requirements — larger touch target */
  .prp-req-row-remove {
    font-size: 16px;
    padding: 6px 8px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Link buttons (Add FR/NFR) — larger touch target */
  .prp-link-btn {
    font-size: 13px;
    padding: 8px 0;
    height: 40px;
    display: flex;
    align-items: center;
  }

  /* Two-column layout → single column */
  .prp-two-col {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Form field gap — increase spacing */
  .prp-custom-grid {
    gap: 16px;
    padding: 14px 8px;
  }

  /* Primary button — larger touch target */
  .prp-custom-actions .button-primary {
    font-size: 14px;
    padding: 12px;
    min-height: 44px;
    font-weight: 600;
  }

  /* Actions section — more padding */
  .prp-custom-actions {
    padding: 12px 8px;
  }

  /* Error messages — better readability */
  .prp-custom-errors {
    font-size: 12px;
    padding: 10px 12px;
  }

  /* Tab styling in header */
  #prp-header-tabs .prp-tab {
    padding: 0 12px;
    font-size: 13px;
  }

  #prp-header-tabs .prp-tab:first-child {
    padding-left: 16px;
  }
}

@media (max-width: 480px) {
  /* Extra small phones — even larger text */
  .prp-field span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
  }

  .prp-field input,
  .prp-field textarea {
    font-size: 14px;
    padding: 11px 12px;
    min-height: 44px;
  }

  .prp-field input::placeholder,
  .prp-field textarea::placeholder {
    font-size: 13px;
    color: #a1a1a1;
  }

  .prp-field textarea {
    min-height: 110px;
  }

  .prp-req-row-input {
    font-size: 14px;
    padding: 9px 10px;
    min-height: 44px;
  }

  .prp-req-row-input::placeholder {
    font-size: 13px;
    color: #a1a1a1;
  }

  .prp-req-row-remove {
    font-size: 18px;
    min-width: 36px;
    min-height: 36px;
  }

  .prp-link-btn {
    font-size: 13px;
    padding: 10px 0;
    height: 44px;
  }

  .prp-custom-grid {
    gap: 16px;
    padding: 16px 10px;
  }

  .prp-custom-actions .button-primary {
    font-size: 14px;
    padding: 14px;
    min-height: 48px;
  }

  .prp-custom-actions {
    padding: 14px 10px;
  }

  /* Tabs — stack better on extra small screens */
  #prp-header-tabs .prp-tab {
    padding: 0 10px;
    font-size: 12px;
  }

  #prp-header-tabs .prp-tab:first-child {
    padding-left: 14px;
  }

  /* Hide separator between tabs on extra small screens */
  #prp-header-tabs .prp-tab + .prp-tab::before {
    display: none;
  }
}

/* "Open this design on canvas" — Submissions tab detail view */
.prp-sub-open-design-btn {
  margin: 4px 0 12px;
  padding: 8px 12px;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #eef2ff;
  color: #3730a3;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.prp-sub-open-design-btn:hover { background: #e0e7ff; }
.prp-sub-open-design-btn:disabled { opacity: .6; cursor: progress; }

/* ── Issues to fix (live findings; see js/shared/left-panel/design-issues.js) ── */
.sim-hd-note { margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: #94a3b8; }

/* ── Submission Review Modal (Test Cases / Solution / Analysis) ─────────── */
.prp-review-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.prp-review-backdrop.hidden { display: none; }
.prp-review-modal {
  width: 100%;
  max-width: 760px;
  /* Fixed height (not content-driven) so switching tabs never resizes the
     box — Test Cases (long list) and Analysis (short/locked) used to make
     the modal visibly grow/shrink on every tab click. */
  height: min(720px, 88vh);
  background: var(--p-surface, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.prp-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 14px;
  flex-shrink: 0;
}
.prp-review-title { margin: 0; font-size: var(--t-title); font-weight: 600; color: var(--p-text); letter-spacing: -0.01em; }
.prp-review-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: var(--t-small); color: var(--p-muted); }
.prp-review-meta.is-hidden { display: none; }
.prp-review-problem { font-weight: 500; color: #475569; }
.prp-review-dot { width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; }
.prp-review-preview-chip {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: rgba(100,116,139,0.12);
  padding: 3px 10px;
  border-radius: 999px;
}
.prp-review-time { color: var(--p-muted); font-size: 13px; }
.prp-review-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.prp-review-open-design-btn {
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.prp-review-open-design-btn:hover { background: #e0e7ff; }
.prp-review-open-design-btn.is-hidden { display: none; }
.prp-review-close {
  border: none;
  background: transparent;
  color: var(--p-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.prp-review-close:hover { background: var(--p-surface-alt, rgba(0,0,0,0.05)); color: var(--p-text); }
.prp-review-body { padding: 10px 26px 22px; overflow-y: auto; flex: 1 1 auto; }
.prp-review-body::-webkit-scrollbar { width: 6px; }
.prp-review-body::-webkit-scrollbar-track { background: transparent; }
.prp-review-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
.prp-review-body::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
.prp-review-pane.is-hidden { display: none; }
.prp-review-empty { font-size: 14px; color: var(--p-muted); margin: 8px 0; }

/* "Check Simulate" hint — shown only right after a fresh Submit, since
   Issues to Fix now lives in the Simulate tab (gated by submission state)
   instead of a paywalled Analysis tab here. */
.prp-review-simulate-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 26px 0;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.prp-review-simulate-hint.is-hidden { display: none; }
.prp-review-simulate-hint svg { flex-shrink: 0; }

/* Column header row — mirrors the row layout below (name / score / result)
   so "Test Scenario", "Score" and "Result" line up with their columns. */
.prp-review-tc-colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 12px;
  background: var(--p-surface, #fff);
  border-bottom: 1px solid var(--p-border, rgba(0,0,0,0.08));
  margin-bottom: 4px;
}
.prp-review-tc-colhead-name,
.prp-review-tc-colhead-score,
.prp-review-tc-colhead-result {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p-muted);
}
.prp-review-tc-colhead-right { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.prp-review-tc-colhead-score { width: 34px; text-align: right; }
.prp-review-tc-colhead-result { width: 68px; text-align: center; }
.prp-review-tc-colhead-chevronspacer { width: 14px; flex-shrink: 0; }

.prp-review-tc-list { display: flex; flex-direction: column; }
.prp-review-tc-row { padding: 16px 4px; border-bottom: 1px solid var(--p-border, rgba(0,0,0,0.06)); }
.prp-review-tc-row:last-child { border-bottom: none; }
.prp-review-tc-row.is-expandable { cursor: pointer; }
.prp-review-tc-row.is-expandable:hover { background: var(--p-surface-alt, rgba(0,0,0,0.025)); }
.prp-review-tc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prp-review-tc-name { font-size: 16px; font-weight: 600; color: var(--p-text); letter-spacing: -0.005em; }
.prp-review-tc-right { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.prp-review-tc-score {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--p-muted);
  width: 34px;
  text-align: right;
}
.prp-review-tc-desc { margin: 10px 0 0; font-size: 14px; color: var(--p-muted); line-height: 1.6; }
.prp-review-tc-desc.is-hidden { display: none; }
.prp-review-tc-detail.is-hidden { display: none; }

/* Why a default scenario failed — causes only, never fixes. */
.prp-review-why {
  margin: 12px 0 2px;
  padding: 10px 14px;
  border-left: 3px solid #f87171;
  border-radius: 0 8px 8px 0;
  background: #fef6f6;
}
.prp-review-why-h {
  display: block;
  margin-bottom: 4px;
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b91c1c;
}
.prp-review-why ul { margin: 0; padding-left: 18px; }
.prp-review-why li { font-size: var(--t-body); line-height: 1.55; color: var(--p-text); }
.prp-review-why li + li { margin-top: 4px; }

/* Functional requirements — "does the design do what the problem asks?"
   A second dimension next to the scenarios: its own summary metric and tab. */
.prs-fr { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; border-radius: 6px; }
.prs-fr.is-hidden { display: none; }
.prs-fr:hover .prs-passed-text,
.prs-fr.is-active .prs-passed-text { color: #1e293b; }
.prs-fr:focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; }
.prs-segs i.partial { background: #f59e0b; }
.prp-review-summary .prs-passed + .prs-fr { padding-left: 16px; border-left: 1px solid var(--p-border, rgba(0,0,0,0.08)); }

.prp-review-tabs { display: flex; gap: 22px; margin: 2px 0 8px; border-bottom: 1px solid var(--p-border, rgba(0,0,0,0.08)); }
.prp-review-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 0 10px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-body); font-weight: 600; color: var(--p-muted);
  transition: color .15s ease, border-color .15s ease;
}
.prp-review-tab:hover { color: var(--p-text); }
.prp-review-tab[aria-selected="true"] { color: #2563eb; border-bottom-color: #2563eb; }
.prp-review-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
.prp-review-tab-n {
  min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: var(--t-micro); font-weight: 700; background: var(--p-surface-alt, rgba(0,0,0,0.05)); color: var(--p-muted);
}
.prp-review-tab[aria-selected="true"] .prp-review-tab-n { background: #eaf1ff; color: #2563eb; }
.prp-review-tabpane.is-hidden { display: none; }
.prp-review-tabpane[data-tabpane="requirements"] { animation: prv-backdrop .2s ease both; }
.prp-review-fr-sub { margin: 6px 0 4px; font-size: var(--t-small); color: var(--p-muted); }
.prp-review-fr-list { list-style: none; margin: 0; padding: 0; }
.prp-review-fr-row {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--p-border, rgba(0,0,0,0.06));
}
.prp-review-fr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
}
.prp-review-fr-row.is-pass .prp-review-fr-icon { background: rgba(34,197,94,0.12); color: #16a34a; }
.prp-review-fr-row.is-partial .prp-review-fr-icon { background: rgba(245,158,11,0.15); color: #b45309; }
.prp-review-fr-row.is-fail .prp-review-fr-icon { background: rgba(239,68,68,0.12); color: #dc2626; }
.prp-review-fr-text { min-width: 0; flex: 1; }
.prp-review-fr-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prp-review-fr-name { font-size: var(--t-body); font-weight: 600; color: var(--p-text); }
.prp-review-fr-core {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--p-surface-alt, rgba(0,0,0,0.05));
  color: var(--p-muted);
}
.prp-review-fr-status { margin-left: auto; font-size: var(--t-small); font-weight: 600; }
.prp-review-fr-row.is-pass .prp-review-fr-status { color: #16a34a; }
.prp-review-fr-row.is-partial .prp-review-fr-status { color: #b45309; }
.prp-review-fr-row.is-fail .prp-review-fr-status { color: #dc2626; }
.prp-review-fr-unrelated {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--p-surface-alt, rgba(0,0,0,0.035));
  font-size: var(--t-small);
  color: var(--p-text);
}
.prp-review-fr-unrelated span {
  display: block;
  margin-bottom: 2px;
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p-muted);
}
.prp-review-fr-reason { margin: 3px 0 0; font-size: var(--t-small); line-height: 1.5; color: var(--p-muted); }
.prp-review-tc-chevron { color: var(--p-muted); transition: transform 0.15s ease; flex-shrink: 0; }
.prp-review-tc-chevron.is-invisible { visibility: hidden; }
.prp-review-tc-row.is-open .prp-review-tc-chevron { transform: rotate(180deg); }
.prp-review-tc-badge {
  flex-shrink: 0;
  width: 68px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 0;
  border-radius: 999px;
}
.prp-review-tc-badge-pass { background: rgba(34,197,94,0.12); color: #16a34a; }
.prp-review-tc-badge-fail { background: rgba(239,68,68,0.12); color: #dc2626; }

.prp-review-section-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 10px;
}
.prp-review-section-hd:first-child { margin-top: 2px; }
.prp-review-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--p-text);
}
.prp-review-section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--p-muted);
  background: var(--p-surface-alt, rgba(0,0,0,0.05));
  border-radius: 999px;
  padding: 1px 8px;
}
.prp-review-finding-list { display: flex; flex-direction: column; gap: 8px; }
.prp-review-finding {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--p-border, rgba(0,0,0,0.07));
  background: var(--p-surface-alt, rgba(0,0,0,0.015));
}
.prp-review-finding--critical { border-left: 3px solid #dc2626; }
.prp-review-finding--warning  { border-left: 3px solid #d97706; }
.prp-review-finding--info,
.prp-review-finding--neutral  { border-left: 3px solid #64748b; }
.prp-review-finding-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prp-review-finding-sev {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.prp-review-finding-sev--critical { background: rgba(220,38,38,0.12); color: #b91c1c; }
.prp-review-finding-sev--warning  { background: rgba(217,119,6,0.14); color: #b45309; }
.prp-review-finding-sev--info,
.prp-review-finding-sev--neutral  { background: rgba(100,116,139,0.14); color: #475569; }
.prp-review-finding-title { font-size: 14px; font-weight: 600; color: var(--p-text); }
.prp-review-finding-text { margin: 6px 0 0; font-size: 13px; color: var(--p-muted); line-height: 1.5; }
.prp-review-finding-rec  {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--p-border, rgba(0,0,0,0.08));
  font-size: 13px;
  color: var(--p-text);
  line-height: 1.5;
}
.prp-review-finding-rec svg { flex-shrink: 0; margin-top: 3px; color: #16a34a; }

.prp-review-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 10px;
  color: var(--p-text);
}
.prp-review-locked svg { color: var(--p-muted); margin-bottom: 10px; }
.prp-review-locked h4 { margin: 0 0 6px; font-size: var(--fs-base); font-weight: 700; }
.prp-review-locked p { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--p-muted); max-width: 320px; }
.prp-review-locked--inline {
  padding: 22px 16px;
  background: var(--p-surface-alt, rgba(0,0,0,0.02));
  border: 1px dashed var(--p-border, rgba(0,0,0,0.12));
  border-radius: 12px;
}
.prp-review-upgrade-btn {
  border: none;
  background: #4f46e5;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
}
.prp-review-upgrade-btn:hover { background: #4338ca; }

.prp-review-subsection-title {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Headline-only signal rows for "What was right" / "What went wrong" — a
   single line each (icon/dot + title), deliberately lighter-weight than the
   detailed finding cards so these two free sections read as a quick summary
   rather than competing with the gated detail section below them. */
.prp-review-signal-list { display: flex; flex-direction: column; gap: 2px; }
.prp-review-signal {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
}
.prp-review-signal-title { font-size: 14px; color: var(--p-text); }
.prp-review-signal--good .prp-review-signal-icon { color: #16a34a; flex-shrink: 0; }
.prp-review-signal-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.prp-review-signal-dot--critical { background: #dc2626; }
.prp-review-signal-dot--warning  { background: #d97706; }
.prp-review-signal-dot--info     { background: #64748b; }

/* Type roles (css/base/type-scale.css) for the Practice right panel:
   tabs and card titles = body semibold, main content = body,
   supporting text = small, section labels = caption. */
#right-panel .panel-header .prp-tab, #right-panel .panel-header #prp-header-tabs .prp-tab, #right-panel .panel-header #lrp-header-tabs .prp-tab { font-size: var(--t-body); font-weight: 600; padding: 0 6px; white-space: nowrap; }
#right-panel .sim-ev-title,
#right-panel .ins-head { font-size: var(--t-body); font-weight: 600; }
#right-panel .sim-challenge-q { font-size: var(--t-body); line-height: 1.55; }
#right-panel .sim-ev-desc,
#right-panel .ins-body { font-size: var(--t-small); line-height: 1.55; }
#right-panel .conf-dim-label,
#right-panel .conf-val-label { font-size: var(--t-small); }

/* ── Submission result motion (submission-review-modal.js) ───────────────
   .prp-review--enter : modal entrance on every open
   .prp-review--run   : fresh Run/Submit while scenarios are "running"
   .prp-review--animated : this open plays the reveal (row/badge animations)
   .prp-review--done  : all rows resolved; verdict + score visible
   .prp-review--celebrate : verdict pops after an animated run            */
@keyframes prv-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes prv-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes prv-row { from { opacity: .45; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes prv-pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes prv-spin { to { transform: rotate(360deg); } }
@keyframes prv-ring { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.4); } 100% { box-shadow: 0 0 0 10px rgba(22,163,74,0); } }

.prp-review-backdrop.prp-review--enter { animation: prv-backdrop .2s ease both; }
.prp-review--enter .prp-review-modal { animation: prv-in .3s cubic-bezier(.2,.7,.2,1) both; }

/* Header: Score (left) · title (centre) · Status (right) */
.prp-review-header.prh {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid #f1f5f9;
}
.prh .prp-review-close { position: absolute; top: 10px; right: 10px; }
.prh-center { text-align: center; min-width: 0; }
.prh-center .prp-review-meta { justify-content: center; }
.prh-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prh-left { justify-self: start; align-items: flex-start; }
.prh-right { justify-self: end; align-items: flex-end; text-align: right; padding-right: 20px; }
.prs-label { font-size: var(--t-caption); font-weight: 600; color: #94a3b8; }
.prs-caption { font-size: var(--t-caption); color: #94a3b8; }
.prs-value { display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.prs-score-num { font-size: var(--t-metric); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #1e293b; }
.prs-of { font-size: var(--t-small); font-weight: 600; color: #94a3b8; }
.prs-final { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.prs-verdict-value { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-subtitle); font-weight: 700; line-height: 1.3; }
.prs-verdict-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; flex: 0 0 24px; }
.prs-verdict.is-accepted .prs-verdict-value { color: #15803d; }
.prs-verdict.is-accepted .prs-verdict-icon { background: #16a34a; }
.prs-verdict.is-rejected .prs-verdict-value { color: #b91c1c; }
.prs-verdict.is-rejected .prs-verdict-icon { background: #dc2626; }
.prs-verdict.is-preview .prs-verdict-value { color: #334155; }
.prs-verdict.is-preview .prs-verdict-icon { background: #64748b; }
.prs-bar { width: 120px; height: 6px; margin-top: 2px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.prs-bar i { display: block; height: 100%; border-radius: inherit; background: #94a3b8; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.prs-score.is-high .prs-bar i { background: #16a34a; }
.prs-score.is-mid .prs-bar i { background: #d97706; }
.prs-score.is-low .prs-bar i { background: #dc2626; }
.prs-score.is-high .prs-score-num { color: #15803d; }
.prs-score.is-low .prs-score-num { color: #b91c1c; }

/* Scenarios passed row (+ "Open this design" on history views) */
.prp-review-summary { display: flex; align-items: center; gap: 16px; margin: 14px 26px 4px; flex-shrink: 0; }
.prs-passed { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.prs-passed-text { font-size: var(--t-small); color: #64748b; }
.prs-passed-num { font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; }
.prs-segs { display: flex; gap: 3px; }
.prs-segs i { flex: 1 1 0; height: 6px; border-radius: 2px; background: #e2e8f0; transition: background .2s ease; }
.prs-segs i.pass { background: #16a34a; }
.prs-segs i.fail { background: #f87171; }

/* Running state: verdict shows a spinner; score and segments wait */
.prs-running { display: none; align-items: center; gap: 8px; font-size: var(--t-body); font-weight: 600; color: #3b82f6; padding: 4px 0; }
.prp-review--run .prs-running { display: inline-flex; }
.prp-review--run .prs-final { display: none; }
.prp-review--run .prs-score .prs-score-num { color: #cbd5e1; }
.prp-review--run .prs-bar i { width: 0 !important; opacity: 0; }
.prp-review--animated .prs-segs i:not(.is-in) { background: #e2e8f0; }
.prp-review-spinner { animation: prv-spin .8s linear infinite; }
.prp-review--celebrate .prs-final { animation: prv-pop .4s cubic-bezier(.2,.8,.2,1.2) both; }
.prp-review--celebrate.prp-review--accepted .prs-verdict-icon { animation: prv-ring .9s ease-out .35s; }

/* Rows: pending spinner until each scenario "finishes", then the result chip pops */
.prp-review-tc-pending { display: none; width: 68px; justify-content: center; color: #94a3b8; flex-shrink: 0; }
.prp-review--run .prp-review-tc-row:not(.is-revealed) { opacity: .45; }
.prp-review--run .prp-review-tc-row:not(.is-revealed) .prp-review-tc-pending { display: inline-flex; }
.prp-review--run .prp-review-tc-row:not(.is-revealed) .prp-review-tc-badge { display: none; }
.prp-review--run .prp-review-tc-row:not(.is-revealed) .prp-review-tc-score { visibility: hidden; }
.prp-review--animated .prp-review-tc-row.is-revealed { animation: prv-row .22s cubic-bezier(.2,.7,.2,1) both; }
.prp-review--animated .prp-review-tc-row.is-revealed .prp-review-tc-badge { animation: prv-pop .28s cubic-bezier(.2,.8,.2,1.2) both; }
.prp-review--animated .prp-review-tc-row.is-revealed .prp-review-tc-score { animation: prv-backdrop .3s ease both; }

@media (prefers-reduced-motion: reduce) {
  .prp-review-backdrop, .prp-review-backdrop * { animation: none !important; transition: none !important; }
}

/* Score breakdown under the summary (server-scored problems) */
.prs-dims { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 10px 26px 0; flex-shrink: 0; }
.prs-dims.is-hidden { display: none; }
.prs-dim { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--t-small); color: #64748b; }
.prs-dim-val { font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; }
.prs-dim-w { font-size: var(--t-micro); color: #94a3b8; }
.prs-dim-cap { font-size: var(--t-small); font-weight: 600; color: #b45309; }

/* Outage that doesn't apply to this design (it has no such component) */
.prp-review-tc-badge-na { background: rgba(100,116,139,0.12); color: #475569; }
.prp-review-tc-na { margin: 8px 0 0; font-size: var(--t-small); color: var(--p-muted); }

/* Over-provisioned components */
.prp-review-over {
  margin: 14px 0 4px;
  padding: 10px 14px;
  border-left: 3px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  background: #fffaf0;
}
.prp-review-over-h {
  display: block;
  margin-bottom: 4px;
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b45309;
}
.prp-review-over ul { margin: 0; padding-left: 18px; }
.prp-review-over li { font-size: var(--t-small); line-height: 1.55; color: var(--p-text); }

/* ── css/build-learn/builder.css ── */
/* ============================================================
   Learn Mode Builder — scoped styles
   Only rules actually referenced by learn_builder.html or
   dynamically injected by builder.js are kept here.
   ============================================================ */

/* ── CSS Variables ── */
:root {
  --builder-bg:          #f8f9fc;
  --builder-surface:     #ffffff;
  --builder-surface-2:   #f1f3f9;
  --builder-surface-3:   #e8ecf4;
  --builder-border:      rgba(0,0,0,0.08);
  --builder-border-2:    rgba(0,0,0,0.14);
  --builder-text:        #0f172a;
  --builder-text-muted:  #64748b;
  --builder-text-dim:    #94a3b8;
  --builder-accent:      #6366f1;
  --builder-accent-glow: rgba(99,102,241,0.2);
  --builder-accent-2:    #8b5cf6;
  --builder-green:       #16a34a;
  --builder-orange:      #d97706;
  --builder-red:         #dc2626;
  --builder-blue:        #2563eb;
  --builder-cyan:        #0891b2;
  --builder-radius:      10px;
  --builder-radius-sm:   6px;
  --builder-shadow:      0 2px 12px rgba(0,0,0,0.10);
  --builder-shadow-lg:   0 8px 32px rgba(0,0,0,0.14);
  --transition:          0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ════════════════════════════════════════════════════════════
   BUTTONS (.bldr-btn / .bldr-btn-primary)
   Used by: stage action buttons in right panel header
   ════════════════════════════════════════════════════════════ */
.bldr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--builder-radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--builder-border-2);
  background: var(--builder-surface-3);
  color: var(--builder-text);
  transition: all var(--transition);
  white-space: nowrap;
  flex: 1;
  justify-content: center;
}

.bldr-btn:hover {
  background: var(--builder-surface-2);
  border-color: rgba(99,102,241,0.3);
}

.bldr-btn-primary {
  background: linear-gradient(135deg, var(--builder-accent), var(--builder-accent-2));
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.3), 0 2px 8px rgba(99,102,241,0.25);
  flex: 1.2;
}

.bldr-btn-primary:hover {
  background: linear-gradient(135deg, #4f52e8, #7c3aed);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.5), 0 4px 16px rgba(99,102,241,0.35);
  transform: translateY(-1px);
}

.bldr-btn-primary:active { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   RIGHT PANEL — STICKY HEADER (preset selector + collapse btn)
   Mirrors practice right-panel layout from right-panel.css
   ════════════════════════════════════════════════════════════ */
.bldr-sticky-header {
  display: flex;
  align-items: center;
  gap: 8px;
  /* negative margin to counter .panel's padding so it sits flush at the top */
  margin: -1rem -1rem 0;
  padding: 10px 12px 10px;
  border-bottom: 1px solid var(--p-border, #e2e8f0);
  background: var(--p-surface, #fff);
  flex-shrink: 0;
  position: relative;
}

/* The custom dropdown wrapper fills remaining space */
.bldr-sticky-header .bldr-pcs {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Custom dropdown (bldr-pcs) — same visual as .preset-custom-select ── */
.bldr-pcs-native { display: none; }   /* hidden; builder.js uses it as data store */

.bldr-pcs {
  position: relative;
}

.bldr-pcs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  background: var(--p-surface, #fff);
  border: 1.5px solid var(--p-border, #e2e8f0);
  border-radius: 10px;
  color: var(--p-text, #1e293b);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
  gap: 8px;
}

.bldr-pcs-trigger:hover {
  border-color: var(--p-primary, #3b82f6);
}

.bldr-pcs-trigger:focus-visible {
  outline: 2px solid var(--p-primary, #3b82f6);
  outline-offset: 2px;
}

.bldr-pcs-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bldr-pcs-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--p-muted, #64748b);
  transition: transform 0.2s;
}

.bldr-pcs.open .bldr-pcs-chevron {
  transform: rotate(180deg);
}

.bldr-pcs-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--p-border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  z-index: 200;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}

.bldr-pcs.open .bldr-pcs-list {
  display: block;
}

.bldr-pcs-item {
  padding: 9px 12px;
  border-radius: 7px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--p-text, #1e293b);
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bldr-pcs-item:hover {
  background: var(--p-surface-2, #f8fafc);
}

.bldr-pcs-item.selected {
  color: var(--p-primary, #3b82f6);
  font-weight: 700;
  background: rgba(59,130,246,0.06);
}

/* ── Stage inline row (inside Stage Details tab) ── */
.bldr-stage-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
}

/* The stage dropdown fills remaining space */
.bldr-stage-inline .bldr-pcs--stage {
  flex: 1 1 0;
  min-width: 0;
}

.bldr-stage-inline .bldr-pcs-trigger {
  font-size: var(--fs-base);
  font-weight: 500;
  padding: 7px 10px;
  border-radius: 8px;
}

.bldr-stage-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Tab bar — same visual as #prp-header-tabs in right-panel.css ── */
.bldr-header-tabs {
  display: flex;
  align-items: stretch;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  border-bottom: 1px solid var(--p-border-soft, #e2e8f0);
  background: var(--p-surface, #fff);
  flex-shrink: 0;
  margin: 0 -1rem;
  width: calc(100% + 2rem);
}

.bldr-header-tabs::-webkit-scrollbar { display: none; }

.bldr-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--p-muted, #64748b);
  font-family: inherit;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  position: relative;
}

/* Vertical separator between every pair of tabs */
.bldr-tab + .bldr-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--p-border-soft, #e2e8f0);
}

/* Hide the separator when either the tab itself or its predecessor is active */
.bldr-tab.active::before,
.bldr-tab.active + .bldr-tab::before {
  display: none;
}

.bldr-tab:hover {
  color: var(--p-text, #1e293b);
}

.bldr-tab.active {
  color: var(--p-primary, #3b82f6);
  border-bottom-color: var(--p-primary, #3b82f6);
}

/* ── Bottom action bar ── */
.bldr-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto -1rem -1rem;
  padding: 10px 12px;
  border-top: 1px solid var(--p-border, #e2e8f0);
  background: var(--p-surface, #fff);
  flex-shrink: 0;
}

/* Ghost "Save Stage" button */
.bldr-save-btn {
  padding: 10px 14px;
  font-size: var(--fs-base);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Big "Simulate" button */
.bldr-simulate-btn {
  flex: 1;
  padding: 12px;
  font-size: var(--fs-md);
  font-weight: 700;
  border-radius: 12px;
}

/* ── Simulation output inside Simulate tab ── */
.bldr-simulate-body {
  display: flex;
  flex-direction: column;
}

.bldr-sim-output {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}

.bldr-sim-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  min-height: 180px;
  color: var(--p-text-muted, #94a3b8);
  text-align: center;
  padding: 2rem 1rem;
}

.bldr-sim-placeholder svg {
  opacity: 0.4;
}

.bldr-sim-placeholder p {
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0;
}


/* ════════════════════════════════════════════════════════════
   STAGE STRIP (bottom of canvas)
   ════════════════════════════════════════════════════════════ */
.bldr-stage-strip {
  height: 88px;
  flex-shrink: 0;
  background: var(--builder-surface);
  border-top: 1px solid var(--builder-border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 10px;
  overflow-x: auto;
}

.bldr-stage-strip::-webkit-scrollbar { height: 3px; }

/* Stage cards — dynamically injected by builder.js */
.bldr-stage-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 18px;
  min-width: 140px;
  max-width: 190px;
  background: var(--builder-surface-2);
  border: 1px solid var(--builder-border);
  border-radius: var(--builder-radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.bldr-stage-card:hover {
  border-color: rgba(99,102,241,0.35);
  background: var(--builder-surface-3);
}

.bldr-stage-card.active {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.45);
  box-shadow: 0 0 12px rgba(99,102,241,0.1);
}

.bldr-stage-card.active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--builder-accent), var(--builder-accent-2));
  border-radius: 99px;
}

.bldr-stage-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--builder-text-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bldr-stage-card.active .bldr-stage-num { color: var(--builder-accent); }

.bldr-stage-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--builder-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bldr-stage-status { display: flex; align-items: center; gap: 4px; }

.bldr-stage-check { width: 15px; height: 15px; color: var(--builder-green); }

.bldr-stage-actions { display: flex; gap: 5px; margin-top: 3px; }

.bldr-stage-action-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--builder-text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: all var(--transition);
  padding: 0;
}

.bldr-stage-action-btn svg {
  width: 14px;
  height: 14px;
}

.bldr-stage-action-btn:hover {
  background: rgba(0,0,0,0.06);
  color: var(--builder-text);
}

/* "+ New Stage" add button in the strip */
.bldr-stage-add-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--builder-border-2);
  border-radius: var(--builder-radius-sm);
  background: transparent;
  color: var(--builder-text-muted);
  font-size: var(--fs-lg);
  font-weight: 400;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1;
}

.bldr-stage-add-btn:hover {
  border-color: var(--builder-accent);
  color: var(--builder-accent);
  background: rgba(99,102,241,0.05);
}


/* ════════════════════════════════════════════════════════════
   RIGHT PANEL — flex column layout + tab show/hide
   ════════════════════════════════════════════════════════════ */

#right-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  /* Reduce panel padding so sticky header/tabs bleed edge-to-edge */
  padding: 1rem;
}

/* Override the global --right-panel-w clamp (max 285px) — builder needs more room.
   Scoped to body.builder-mode: unscoped "body .layout" leaked this onto every
   page that shares index.html (Practice/Learn/Evaluate), silently overriding
   their own --right-panel-w regardless of screen size. */
body.builder-mode .layout {
  --right-panel-w: clamp(320px, 26vw, 440px);
}

/* Tab panel sections: hidden by default — !important guards against right-panel.css overrides */
.bldr-right-panel { display: none !important; }

/* Active tab: flex col, fills remaining height, scrollable */
.bldr-right-panel.active {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.bldr-right-panel.active .section-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 0 24px;
}

/* ── Form fields ── */
.bldr-field { margin-bottom: 14px; }

.bldr-field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--builder-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.bldr-field-req { color: var(--builder-accent); font-size: var(--fs-xs); }

.bldr-input,
.bldr-textarea {
  width: 100%;
  background: var(--builder-surface-3);
  border: 1px solid var(--builder-border);
  border-radius: var(--builder-radius-sm);
  color: var(--builder-text);
  font-size: var(--fs-xs);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
  resize: none;
}

.bldr-input { height: 34px; padding: 0 10px; }

.bldr-textarea { padding: 8px 10px; min-height: 80px; line-height: 1.5; }

.bldr-input:focus,
.bldr-textarea:focus {
  border-color: rgba(99,102,241,0.55);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
}

.bldr-input::placeholder,
.bldr-textarea::placeholder { color: var(--builder-text-dim); }

/* ── Section headers ── */
.bldr-section { margin-bottom: 20px; }

.bldr-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bldr-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--builder-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bldr-section-title::before {
  content: '';
  width: 3px;
  height: 12px;
  background: var(--builder-accent);
  border-radius: 2px;
  display: inline-block;
}

.bldr-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: var(--builder-radius-sm);
  color: var(--builder-accent);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.bldr-add-btn:hover {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.45);
}

/* ── Components list (dynamically built by builder.js) ── */
.bldr-components-list { display: flex; flex-direction: column; gap: 6px; }

.bldr-comp-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--builder-surface-2);
  border: 1px solid var(--builder-border);
  border-radius: var(--builder-radius-sm);
  transition: border-color var(--transition);
}

.bldr-comp-item:hover { border-color: var(--builder-border-2); }

.bldr-comp-icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--builder-accent);
  margin-top: 4px;
  flex-shrink: 0;
}

.bldr-comp-body { flex: 1; min-width: 0; }

.bldr-comp-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--builder-text);
  margin-bottom: 2px;
}

.bldr-comp-desc { font-size: var(--fs-xs); color: var(--builder-text-muted); line-height: 1.45; }

.bldr-comp-delete {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--builder-text-dim);
  cursor: pointer;
  border-radius: 3px;
  transition: all var(--transition);
  flex-shrink: 0;
  padding: 0;
  font-size: var(--fs-xs);
}

.bldr-comp-delete:hover { background: rgba(239,68,68,0.15); color: var(--builder-red); }

/* ── Design decision cards (dynamically built by builder.js) ── */
.bldr-decisions { display: flex; flex-direction: column; gap: 8px; }

.bldr-decision-card {
  background: var(--builder-surface-2);
  border: 1px solid var(--builder-border);
  border-left: 3px solid var(--builder-accent);
  border-radius: var(--builder-radius-sm);
  overflow: hidden;
  transition: border-color var(--transition);
}

.bldr-decision-card.type-added   { border-left-color: var(--builder-green); }
.bldr-decision-card.type-missing { border-left-color: var(--builder-orange); }
.bldr-decision-card.type-risk    { border-left-color: var(--builder-red); }
.bldr-decision-card.type-scale   { border-left-color: var(--builder-blue); }
.bldr-decision-card.type-perf    { border-left-color: var(--builder-cyan); }
.bldr-decision-card.type-rely    { border-left-color: var(--builder-green); }
.bldr-decision-card.type-fault   { border-left-color: var(--builder-orange); }

.bldr-decision-header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  gap: 6px;
}

.bldr-decision-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bldr-decision-card.type-added   .bldr-decision-dot { background: var(--builder-green); }
.bldr-decision-card.type-missing .bldr-decision-dot { background: var(--builder-orange); }
.bldr-decision-card.type-risk    .bldr-decision-dot { background: var(--builder-red); }
.bldr-decision-card.type-scale   .bldr-decision-dot { background: var(--builder-blue); }
.bldr-decision-card.type-perf    .bldr-decision-dot { background: var(--builder-cyan); }
.bldr-decision-card.type-rely    .bldr-decision-dot { background: var(--builder-green); }
.bldr-decision-card.type-fault   .bldr-decision-dot { background: var(--builder-orange); }

.bldr-decision-type-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bldr-decision-card.type-added   .bldr-decision-type-label { color: var(--builder-green); }
.bldr-decision-card.type-missing .bldr-decision-type-label { color: var(--builder-orange); }
.bldr-decision-card.type-risk    .bldr-decision-type-label { color: var(--builder-red); }
.bldr-decision-card.type-scale   .bldr-decision-type-label { color: var(--builder-blue); }
.bldr-decision-card.type-perf    .bldr-decision-type-label { color: var(--builder-cyan); }
.bldr-decision-card.type-rely    .bldr-decision-type-label { color: var(--builder-green); }
.bldr-decision-card.type-fault   .bldr-decision-type-label { color: var(--builder-orange); }

.bldr-decision-textarea {
  width: 100%;
  padding: 6px 10px 8px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--builder-border);
  color: var(--builder-text-muted);
  font-size: var(--fs-xs);
  font-family: inherit;
  line-height: 1.55;
  resize: none;
  min-height: 56px;
  outline: none;
  transition: color var(--transition);
}

.bldr-decision-textarea:focus { color: var(--builder-text); }
.bldr-decision-textarea::placeholder { color: var(--builder-text-dim); font-style: italic; }

/* ── Notes textarea ── */
.bldr-notes-textarea {
  width: 100%;
  min-height: 300px;
  background: var(--builder-surface-2);
  border: 1px solid var(--builder-border);
  border-radius: var(--builder-radius-sm);
  color: var(--builder-text);
  font-size: var(--fs-xs);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  padding: 12px;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color var(--transition);
}

.bldr-notes-textarea:focus { border-color: rgba(99,102,241,0.5); }
.bldr-notes-textarea::placeholder { color: var(--builder-text-dim); font-style: italic; }

/* ── Tags ── */
.bldr-tags-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  background: var(--builder-surface-3);
  border: 1px solid var(--builder-border);
  border-radius: var(--builder-radius-sm);
  color: var(--builder-text);
  font-size: var(--fs-xs);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
}

.bldr-tags-input:focus { border-color: rgba(99,102,241,0.5); }
.bldr-tags-input::placeholder { color: var(--builder-text-dim); }

/* ── Divider ── */
.bldr-divider {
  height: 1px;
  background: var(--builder-border);
  margin: 12px 0;
}

/* ── Autosave indicator ── */
.bldr-autosave {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--builder-text-dim);
  padding: 8px 0 0;
}

.bldr-autosave-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--builder-text-dim);
  transition: background var(--transition);
}

.bldr-autosave.saved  .bldr-autosave-dot { background: var(--builder-green); }
.bldr-autosave.saving .bldr-autosave-dot {
  background: var(--builder-orange);
  animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ════════════════════════════════════════════════════════════
   EMPTY STATES
   ════════════════════════════════════════════════════════════ */
.bldr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 24px;
  text-align: center;
}

.bldr-empty-title { font-size: var(--fs-xs); font-weight: 600; color: var(--builder-text-muted); }
.bldr-empty-sub { font-size: var(--fs-xss); color: var(--builder-text-dim); line-height: 1.5; max-width: 200px; }

/* ════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS (dynamically injected by builder.js)
   ════════════════════════════════════════════════════════════ */
.bldr-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.bldr-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid var(--builder-border-2);
  border-radius: var(--builder-radius);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--builder-text);
  box-shadow: var(--builder-shadow-lg);
  animation: toast-in 0.25s cubic-bezier(0.4,0,0.2,1);
  pointer-events: auto;
  max-width: 340px;
}

.bldr-toast.success { border-color: rgba(34,197,94,0.3); }
.bldr-toast.error   { border-color: rgba(239,68,68,0.3); }
.bldr-toast.info    { border-color: rgba(99,102,241,0.3); }
.bldr-toast-icon    { font-size: var(--fs-sm); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   LOADING OVERLAY (dynamically injected by builder.js)
   ════════════════════════════════════════════════════════════ */
.bldr-loading {
  position: absolute;
  inset: 0;
  background: rgba(248,249,252,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(4px);
}

.bldr-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(99,102,241,0.2);
  border-top-color: var(--builder-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   MODAL (dynamically injected by builder.js)
   ════════════════════════════════════════════════════════════ */
.bldr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: fadein 0.2s ease;
}

.bldr-modal {
  background: var(--builder-surface-2);
  border: 1px solid var(--builder-border-2);
  border-radius: var(--builder-radius);
  padding: 24px;
  width: 380px;
  max-width: 90vw;
  box-shadow: var(--builder-shadow-lg);
  animation: slidein 0.2s cubic-bezier(0.4,0,0.2,1);
}

.bldr-modal-title { font-size: var(--fs-base); font-weight: 700; color: var(--builder-text); margin-bottom: 8px; }
.bldr-modal-sub   { font-size: var(--fs-xs); color: var(--builder-text-muted); line-height: 1.5; margin-bottom: 20px; }
.bldr-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slidein {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════
   BUILDER MODE — LAYOUT FIXES (index.html SPA)
   ════════════════════════════════════════════════════════════ */

/* 1. Canvas wrapper: flex column so #canvas takes remaining space
      and #bldr-stage-strip sits pinned at the bottom */
body.builder-mode .canvas-wrapper {
  display: flex;
  flex-direction: column;
}

body.builder-mode #canvas {
  flex: 1;
  min-height: 0;
  height: auto; /* override any fixed height */
}

/* 2. Right panel: #builder-right-view must be a flex column that fills
      the full panel height so .bldr-panel-actions is pushed to the bottom */
#builder-right-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* When hidden, override display:flex back to none */
#builder-right-view.hidden {
  display: none !important;
}

/* Bottom action bar: no longer relies on margin:auto — pinned naturally
   as the last non-flex-1 child of the flex column */
.bldr-panel-actions {
  margin-top: auto; /* push to bottom if panel has leftover space */
}

/* ── css/live-interview/live-interview.css ── */
/* ═══════════════════════════════════════════════════════════════════════════
   LIVE INTERVIEW MODULE — Styles
   Isolated CSS for the live interview feature.
   Uses .li- prefix to avoid collision with existing PRISM styles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables (scoped) ───────────────────────────────────────────────────── */
:root {
  --li-bg-primary: #0a0a0f;
  --li-bg-secondary: #12121a;
  --li-bg-card: #1a1a24;
  --li-bg-card-hover: #22222e;
  --li-border: #2a2a3a;
  --li-border-active: #4a4a6a;
  --li-text-primary: #f0f0f5;
  --li-text-secondary: #9999aa;
  --li-text-muted: #666680;
  --li-accent: #6366f1;
  --li-accent-hover: #818cf8;
  --li-danger: #ef4444;
  --li-danger-hover: #f87171;
  --li-success: #22c55e;
  --li-warning: #f59e0b;
  --li-radius: 8px;
  --li-radius-lg: 12px;
  --li-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* ── Shared Button System ─────────────────────────────────────────────────── */
.li-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--li-radius);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.li-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.li-btn-primary { background: #3b82f6; color: #fff; }
.li-btn-primary:hover:not(:disabled) { background: #2563eb; }
.li-btn-secondary { background: #f8fafc; color: #1e293b; border: 1px solid #e2e8f0; }
.li-btn-secondary:hover:not(:disabled) { border-color: #cbd5e1; background: #f1f5f9; }
.li-btn-danger { background: #ef4444; color: #fff; }
.li-btn-danger:hover:not(:disabled) { background: #dc2626; }
.li-btn-success { background: #22c55e; color: #fff; }
.li-btn-success:hover:not(:disabled) { background: #16a34a; }
.li-btn-warning { background: #f59e0b; color: #fff; }
.li-btn-warning:hover:not(:disabled) { background: #d97706; }
.li-btn-ghost { background: transparent; color: #64748b; }
.li-btn-ghost:hover { color: #1e293b; }
.li-btn-sm { padding: 5px 10px; font-size: 12px; }
.li-btn-lg { padding: 12px 24px; font-size: 14px; }
.li-btn-full { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════════════
   JOIN PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.li-join-body {
  margin: 0;
  background: var(--li-bg-primary);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  color: var(--li-text-primary);
}
.li-join-container {
  max-width: 440px;
  width: 100%;
  padding: 24px;
}
.li-join-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  justify-content: center;
}
.li-join-logo-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.li-join-card {
  background: var(--li-bg-card);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius-lg);
  padding: 32px;
  text-align: center;
  box-shadow: var(--li-shadow);
}
.li-join-badge {
  display: inline-block;
  background: rgba(99, 102, 241, 0.15);
  color: var(--li-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.li-join-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
}
.li-join-meta {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}
.li-join-difficulty {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--li-bg-secondary);
}
.li-difficulty-easy { color: var(--li-success); }
.li-difficulty-medium { color: var(--li-warning); }
.li-difficulty-hard { color: var(--li-danger); }
.li-join-time {
  font-size: 12px;
  color: var(--li-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.li-join-instructions {
  color: var(--li-text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.li-join-note {
  color: var(--li-text-muted);
  font-size: 12px;
  margin-top: 16px;
}

/* Join page states */
.li-join-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--li-border);
  border-top-color: var(--li-accent);
  border-radius: 50%;
  animation: li-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes li-spin { to { transform: rotate(360deg); } }
.li-join-loading-text { color: var(--li-text-secondary); font-size: 14px; }
.li-join-error-icon { font-size: 32px; margin-bottom: 12px; }
.li-join-error-title { font-size: 18px; margin: 0 0 8px; }
.li-join-error-msg { color: var(--li-text-secondary); font-size: 14px; margin-bottom: 20px; }
.li-join-auth-title { font-size: 18px; margin: 0 0 8px; }
.li-join-auth-msg { color: var(--li-text-secondary); font-size: 14px; margin-bottom: 20px; }


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION PAGE — TOOLBAR
   ═══════════════════════════════════════════════════════════════════════════ */
.li-session-body {
  margin: 0;
  background: #ffffff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  color: #1e293b;
  overflow: hidden;
}
.li-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 94px; /* increased 30% from 72px */
  min-height: 94px;
  padding: 0 16px;
  background: #172340;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.li-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.li-toolbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.li-toolbar-logo { height: 104px; width: auto; display: block; flex-shrink: 0; }
.li-toolbar-brand-text { display: flex; flex-direction: column; gap: 1px; }
.li-toolbar-brand-name {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.li-toolbar-brand-sub {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.li-toolbar-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.15);
}
.li-toolbar-title {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.li-toolbar-difficulty {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(56,189,248,0.15);
  color: #38bdf8;
}
.li-toolbar-center { display: flex; align-items: center; gap: 14px; }
.li-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #f1f5f9;
}
.li-timer-icon { font-size: 14px; }
.li-timer-waiting .li-timer-display { color: #94a3b8; }
.li-timer-warning .li-timer-display { color: #fbbf24; }
.li-timer-expired .li-timer-display { color: #f87171; }
.li-timer-stopped .li-timer-display { color: #94a3b8; }
.li-timer-stopped::after {
  content: '⏸';
  font-size: 11px;
  margin-left: 6px;
  color: #94a3b8;
}
.li-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.li-participants {
  display: flex;
  align-items: center;
  gap: 6px;
}
.li-participant-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background 0.3s;
}
.li-dot-connected { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }
.li-dot-disconnected { background: #64748b; }

/* Invite link bar */
.li-invite-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #f0f9ff;
  border-bottom: 1px solid #e0f2fe;
  flex-shrink: 0;
}
.li-invite-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: #0369a1;
  white-space: nowrap;
}
.li-invite-bar-input {
  flex: 1;
  padding: 5px 10px;
  background: #ffffff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #0c4a6e;
}
.li-invite-bar-copy {
  padding: 5px 12px;
  background: #0284c7;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.li-invite-bar-copy:hover { background: #0369a1; }

/* Media controls */
.li-media-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.li-media-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.15s;
}
.li-media-btn:hover { background: rgba(255,255,255,0.15); }
.li-media-btn.li-media-off {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
}
.li-media-btn svg { width: 16px; height: 16px; }


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION PAGE — MAIN LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.li-session-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  gap: clamp(0.5rem, 1.2vw, 1.5rem);
  padding: clamp(0.5rem, 0.8vw, 1.1rem) clamp(0.5rem, 1vw, 1.5rem) clamp(0.8rem, 1vw, 1.5rem);
  min-height: 0;
}

/* LEFT PANEL — matches Practice mode's left panel (rounded, bordered card
   with a gap on all sides, instead of a flush full-height sidebar) */
.li-left-panel {
  width: 300px;
  max-width: 300px;
  min-width: 300px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.li-left-panel::-webkit-scrollbar { width: 5px; }
.li-left-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.li-left-panel::-webkit-scrollbar-track { background: transparent; }

/* Eval panel inner (inside left panel) */
.li-eval-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.li-eval-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}
.li-eval-body::-webkit-scrollbar { width: 5px; }
.li-eval-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.li-eval-body::-webkit-scrollbar-track { background: transparent; }

/* Submit footer — always visible at bottom of flex column */
.li-eval-submit-footer {
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
}

/* Palette inner (inside left panel, candidate) — uses shared .palette/.palette-item from style.css */
.li-palette-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.li-palette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.li-palette-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.li-palette-hint {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.li-palette-inner .panel-section {
  padding: 10px 8px;
  flex-shrink: 0;
}
.li-palette-inner .palette {
  max-height: none;
}
.li-palette-inner .palette-item .icon {
  filter: brightness(0) saturate(0) opacity(0.7);
}
.li-palette-inner .palette-item:hover .icon {
  filter: brightness(0) saturate(100%) invert(27%) sepia(80%) saturate(800%) hue-rotate(220deg) brightness(95%);
  opacity: 1;
}

/* Candidate inspector */
.li-node-inspector {
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.li-inspector-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.li-inspector-label {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.li-inspector-input {
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
}
.li-inspector-input:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.li-inspector-input:disabled {
  background: #f8fafc;
  color: #94a3b8;
}

/* Problem Description (candidate left panel) */
.li-problem-section {
  padding: 14px 16px;
  border-top: 1px solid #e2e8f0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.li-problem-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 10px;
  flex-shrink: 0;
}
.li-problem-text {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.6;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.li-problem-text::-webkit-scrollbar { width: 4px; }
.li-problem-text::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.li-problem-text::-webkit-scrollbar-track { background: transparent; }

/* Canvas Area — just a flex container; inner .canvas uses shared styles from style.css */
.li-canvas-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  min-width: 0;
}
.li-canvas-area .canvas {
  flex: 1;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

/* ── Toolbar Lock (like evaluation-locked in Practice mode) ─── */
body.li-session-active .li-toolbar-brand {
  pointer-events: none;
  opacity: 0.7;
}

/* Remote Cursor */
.li-remote-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  transition: transform 0.1s ease-out;
}
.li-cursor-pointer {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6366f1;
  opacity: 0.8;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}
.li-cursor-label {
  position: absolute;
  top: 14px;
  left: 8px;
  font-size: 11px;
  color: #6366f1;
  font-weight: 600;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION PAGE — EVALUATION PANEL (interviewer only)
   ═══════════════════════════════════════════════════════════════════════════ */
.li-eval-panel {
  width: 320px;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  overflow-y: auto;
  flex-shrink: 0;
}
.li-eval-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
  z-index: 10;
}
.li-eval-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.li-eval-autosave {
  font-size: 11px;
  color: #16a34a;
  font-weight: 500;
}
.li-eval-section {
  margin-bottom: 20px;
}
.li-eval-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 10px;
}
.li-eval-scores { display: flex; flex-direction: column; gap: 8px; }
.li-eval-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.li-eval-score-row label {
  font-size: 13px;
  color: #1e293b;
}

/* Star rating */
.li-score-stars {
  display: flex;
  gap: 3px;
}
.li-score-star {
  width: 18px;
  height: 18px;
  cursor: pointer;
  border-radius: 3px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #334155;
  transition: all 0.15s;
}
.li-score-star:hover,
.li-score-star.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
.li-score-stars-lg .li-score-star {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

/* Textarea & Select */
.li-eval-textarea {
  width: 100%;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s;
}
.li-eval-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
}
.li-eval-textarea::placeholder { color: #64748b; }
.li-eval-select {
  width: 100%;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.li-eval-select:focus { outline: none; border-color: #3b82f6; }


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION PAGE — MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.li-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.li-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.li-modal-content {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 28px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.li-modal-title { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 8px; }
.li-modal-text { color: #64748b; font-size: 13px; margin-bottom: 20px; }
.li-modal-recommendation {
  margin-bottom: 20px;
}
.li-modal-rec-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}
.li-modal-recommendation .li-eval-select {
  width: 100%;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #1e293b;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.li-modal-recommendation .li-eval-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.li-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION PAGE — VIDEO (bottom-right, shows remote party + self PIP)
   ═══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────
   Local Video Preview (your own camera) - REMOVED
   Per product decision, the local self-view PIP is no longer shown to
   either party (interviewer or candidate) — only the remote party's
   video is displayed. The element and its JS wiring are left intact
   (session.js still safely queries these IDs) so no behavior elsewhere
   breaks; it is simply hidden here.
   ───────────────────────────────────────────────────────────────────── */
.li-local-video {
  display: none !important;
}
.li-local-video-stream {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  transform: scaleX(-1); /* Mirror the video */
}
.li-local-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: #94a3b8;
  gap: 4px;
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
}
.li-local-video-placeholder span {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  max-width: 100%;
  word-wrap: break-word;
}
.li-local-video-placeholder svg {
  width: 20px;
  height: 20px;
}

/* Label for video panels — color-coded per box */
.li-video-label {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 2;
}
.li-local-video .li-video-label { background: #3b82f6; }  /* Blue = You */
.li-remote-video .li-video-label { background: #22c55e; } /* Green = Them */

/* ─────────────────────────────────────────────────────────────────────
   Remote Video (other party) - BELOW LOCAL VIDEO (RIGHT SIDE)
   ───────────────────────────────────────────────────────────────────── */
.li-remote-video {
  position: fixed;
  /* Local video PIP is hidden (see .li-local-video above), so remote
     video now occupies the bottom-right slot instead of stacking above
     an empty spot. */
  bottom: 20px;
  right: 20px;
  width: 168px;  /* 30% smaller than 240px */
  height: 126px; /* 30% smaller than 180px */
  border-radius: 12px;
  overflow: hidden;
  background: #1e293b;
  border: 3px solid #22c55e; /* Green border = OTHER PARTY (remote) */
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.li-remote-video.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
}
.li-remote-video-stream {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.li-remote-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: #94a3b8;
  gap: 4px;
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
}
.li-remote-video-placeholder span {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  max-width: 100%;
  word-wrap: break-word;
}
.li-remote-video-placeholder svg {
  width: 20px;
  height: 20px;
}

/* ── Video Panel Toggle Button ────────────────────────────────────────
   Floating button to show/hide both video panels for full-screen view */
.li-video-toggle {
  position: fixed;
  bottom: 20px;
  right: 208px; /* 168px (video width) + 20px (margin) + 20px (gap) */
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.95);
  border: 2px solid #334155;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 101;
  transition: all 0.2s ease;
  color: #cbd5e1;
}
.li-video-toggle:hover {
  background: rgba(51, 65, 85, 0.98);
  border-color: #475569;
  transform: scale(1.05);
}
.li-video-toggle svg {
  width: 18px;
  height: 18px;
}
.li-video-toggle.videos-hidden {
  right: 20px; /* Move to right edge when videos are hidden */
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #60a5fa;
}
.li-video-toggle.videos-hidden:hover {
  background: rgba(59, 130, 246, 0.3);
}

/* When getUserMedia fails (no permission, HTTP, no device), surface the
   reason to the user via a warning-tinted placeholder + larger, wrappable
   text. Set from JS: showMediaError() adds this class. */
.li-remote-video-placeholder-error {
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.li-remote-video-placeholder-error span {
  font-size: 11px;
}

/* ── Remote party mic / camera state overlays ─────────────────────────
   Two lightweight indicators pinned to the remote-video PIP so the local
   user can tell at a glance whether the other side has their mic and
   camera on. Fed by socket 'media:state' events → updateRemoteMediaBadges().

   Design principle: show the state for BOTH devices at all times (once we
   have a known state) so the local user can immediately answer "does the
   other side have their mic/camera on?" without needing to see or fail-to-
   see incoming video. Colour: red-tinted when OFF, subtle grey when ON. */
.li-remote-status-bar {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 3;
  pointer-events: none;   /* purely informational */
}
.li-remote-status-bar[hidden] { display: none; }
.li-remote-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.75);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.li-remote-status-badge svg { width: 12px; height: 12px; }
.li-remote-status-badge-off {
  background: rgba(220, 38, 38, 0.92);
  color: #ffffff;
  border-color: transparent;
}
.li-remote-status-badge-on {
  background: rgba(15, 23, 42, 0.7);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.32);
}

/* Full-cover overlay shown when the remote party turns their camera off.
   Sits on top of <video> so we don't have to detach the track (audio may
   still be flowing). Matches the placeholder styling for visual continuity. */
.li-remote-cam-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #cbd5e1;
  animation: liRemoteCamIn 0.2s ease-out;
}
.li-remote-cam-overlay[hidden] { display: none; }
.li-remote-cam-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}
.li-remote-cam-avatar svg {
  width: 22px;
  height: 22px;
}
.li-remote-cam-msg {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.02em;
}

@keyframes liRemoteCamIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CANVAS NOTICE — top-center session-state banner
   Shown to the candidate when the interviewer hasn't started yet ("Waiting
   for interviewer to start") and to the interviewer before they've pressed
   Start ("Press Start to begin the interview"). Hidden by JS as soon as
   `startedAt` is set on the interview record.
   ═══════════════════════════════════════════════════════════════════════════ */
.li-canvas-notice {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.98), rgba(99, 102, 241, 0.98));
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(99, 102, 241, 0.35);
  white-space: nowrap;
  animation: liCanvasNoticeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.li-canvas-notice[hidden] { display: none; }
.li-canvas-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  opacity: 0.95;
}
.li-canvas-notice-icon svg { width: 16px; height: 16px; }
.li-canvas-notice-text {
  line-height: 1.3;
}
.li-canvas-notice-pulse {
  position: relative;
}
.li-canvas-notice-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: inherit;
  filter: blur(10px);
  opacity: 0.5;
  z-index: -1;
  animation: liCanvasNoticeGlow 2.2s ease-in-out infinite;
}
@keyframes liCanvasNoticeIn {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes liCanvasNoticeGlow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .li-remote-cam-overlay,
  .li-canvas-notice { animation: none; }
  .li-canvas-notice-pulse::before { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.li-dashboard-body {
  margin: 0;
  background: var(--li-bg-primary);
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  color: var(--li-text-primary);
}
.li-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px;
  background: var(--li-bg-secondary);
  border-bottom: 1px solid var(--li-border);
}
.li-dash-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.li-dash-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--li-text-primary);
  font-weight: 700;
  font-size: 16px;
}
.li-dash-header-divider {
  width: 1px;
  height: 22px;
  background: var(--li-border);
}
.li-dash-header-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.li-dash-header-right { display: flex; align-items: center; gap: 12px; }
.li-dash-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* Create Section */
.li-dash-create-section { margin-bottom: 32px; }
.li-dash-create-card {
  background: var(--li-bg-card);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius-lg);
  padding: 24px;
}
.li-dash-create-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 20px;
}
.li-create-form { display: flex; flex-direction: column; gap: 16px; }
.li-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.li-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}
.li-form-group-wide { flex: 1; min-width: 200px; }
.li-form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--li-text-secondary);
}
.li-form-group input,
.li-form-group select,
.li-form-group textarea {
  padding: 8px 12px;
  background: var(--li-bg-secondary);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius);
  color: var(--li-text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.li-form-group input:focus,
.li-form-group select:focus,
.li-form-group textarea:focus {
  outline: none;
  border-color: var(--li-accent);
}
.li-form-group input::placeholder,
.li-form-group textarea::placeholder { color: var(--li-text-muted); }

/* Invite Section */
.li-dash-invite-section { margin-bottom: 32px; }
.li-dash-invite-card {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--li-radius-lg);
  padding: 24px;
  text-align: center;
}
.li-invite-title { color: var(--li-success); font-size: 16px; margin: 0 0 8px; }
.li-invite-subtitle { color: var(--li-text-secondary); font-size: 13px; margin-bottom: 16px; }
.li-invite-link-row { display: flex; gap: 8px; margin-bottom: 12px; }
.li-invite-link-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--li-bg-card);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius);
  color: var(--li-text-primary);
  font-family: monospace;
  font-size: 12px;
}
.li-invite-expiry { color: var(--li-text-muted); font-size: 12px; }

/* Interview History */
.li-dash-history-section { margin-top: 16px; }
.li-dash-section-title { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.li-interview-list { display: flex; flex-direction: column; gap: 10px; }
.li-interview-card {
  background: var(--li-bg-card);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius);
  padding: 16px 20px;
  transition: border-color 0.15s;
}
.li-interview-card:hover { border-color: var(--li-border-active); }
.li-interview-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.li-interview-card-title { font-size: 14px; font-weight: 600; margin: 0; }
.li-interview-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}
.li-status-scheduled { background: rgba(245, 158, 11, 0.1); color: var(--li-warning); }
.li-status-active { background: rgba(34, 197, 94, 0.1); color: var(--li-success); }
.li-status-completed { background: rgba(99, 102, 241, 0.1); color: var(--li-accent); }
.li-status-cancelled { background: rgba(239, 68, 68, 0.1); color: var(--li-danger); }
.li-status-expired { background: rgba(102, 102, 128, 0.1); color: var(--li-text-muted); }
.li-interview-card-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--li-text-secondary);
  margin-bottom: 10px;
}
.li-interview-card-actions { display: flex; gap: 8px; }
.li-eval-badge {
  font-size: 12px;
  color: var(--li-success);
  font-weight: 600;
}
.li-interview-empty,
.li-interview-loading {
  text-align: center;
  color: var(--li-text-muted);
  font-size: 13px;
  padding: 40px 20px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION DROPDOWN (Evaluate → Dropdown)
   Styled to match existing app dropdowns (white card, light theme)
   ═══════════════════════════════════════════════════════════════════════════ */
.li-eval-dropdown {
  position: relative;
  display: inline-flex;
}
.li-eval-dropdown-menu {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  min-width: 240px;
  padding: 6px;
  display: none;
}
.li-eval-dropdown-menu.open { display: block; }
.li-eval-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}
.li-eval-dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
a.li-eval-dropdown-item,
a.li-eval-dropdown-item:visited {
  color: #475569;
  text-decoration: none;
}
a.li-eval-dropdown-item:hover {
  color: #0f172a;
}
.li-eval-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}
.li-eval-dropdown-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eff6ff;
  color: #3b82f6;
  margin-left: auto;
  letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION ENDED OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
.li-session-ended-overlay {
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 252, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  backdrop-filter: blur(4px);
}
.li-ended-card {
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  max-width: 380px;
}
.li-ended-card h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px;
}
.li-ended-card p {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 20px;
}
.li-ended-card .li-ended-redirect {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CANDIDATE PALETTE LOCK
   The candidate's component palette is inactive until the interviewer clicks
   "Start". Body.li-palette-locked visually dims the palette and shows a
   lock badge in the header. JS still enforces the block at the event level,
   but these styles give clear UX affordance so the candidate knows *why*.
   ═══════════════════════════════════════════════════════════════════════════ */
body.li-palette-locked #li-component-palette {
  position: relative;
}
body.li-palette-locked #li-component-palette .palette {
  opacity: 0.42;
  filter: grayscale(0.4);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
body.li-palette-locked #li-component-palette .palette-item {
  cursor: not-allowed !important;
}
body.li-palette-locked #li-component-palette .palette-item:hover {
  transform: none;   /* neutralise Practice-mode hover lift */
}
body.li-palette-locked #li-component-palette .palette-item:hover .icon {
  filter: brightness(0) saturate(0) opacity(0.7);   /* no purple hover tint */
}
/* The "Drag onto canvas" hint isn't useful while the palette is locked, and
   the emoji lock badge that used to live here has been replaced by a
   top-center canvas notice (see .li-canvas-notice) so the message is
   visible even when the left panel is scrolled. */
body.li-palette-locked .li-palette-hint { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOCK TOAST — shown when the candidate tries to interact with a locked
   palette item. Slides in from the top-center, auto-dismisses after ~3s.
   ═══════════════════════════════════════════════════════════════════════════ */
.li-lock-toast {
  position: fixed;
  top: 74px;   /* below the toolbar (~64px + gap) */
  left: 50%;
  transform: translate(-50%, -12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  min-width: 280px;
  max-width: min(420px, calc(100vw - 32px));
  background: #ffffff;
  border: 1px solid rgba(99,102,241,0.35);
  border-left: 4px solid #6366f1;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
  color: #0f172a;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.li-lock-toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.li-lock-toast > svg {
  flex-shrink: 0;
  color: #6366f1;
  margin-top: 1px;
}
.li-lock-toast-body {
  flex: 1;
  min-width: 0;
}
.li-lock-toast-title {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
  margin-bottom: 2px;
}
.li-lock-toast-sub {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}
.li-lock-toast-sub strong {
  color: #6366f1;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .li-lock-toast { transition: opacity 0.1s linear; transform: translate(-50%, 0); }
  .li-canvas-notice { animation: none; }
}

/* ── css/shared/header.css ── */
/* ═══════════════════════════════════════════════════════════════════════════
   header.css — PRISM unified header + navbar styles  (v3 — refined)
   Covers: app_navbar.html — the single navbar used on every page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --bg-primary:      #0D1117;
  --bg-surface:      #111827;
  --bg-elevated:     #1a2540;
  --border:          rgba(255,255,255,0.08);
  --border-strong:   rgba(255,255,255,0.12);
  --accent-blue:     #4F6EF7;
  --accent-blue-dim: rgba(79,110,247,0.12);
  --accent-purple:   #7C6AF7;
  --text-primary:    #f1f5f9;
  --text-secondary:  #8faac8;
  --text-muted:      #4e6280;
  --radius-btn:      8px;
  --radius-card:     12px;
  --radius-dropdown: 10px;
  --nav-height:      65px;    /* matches --topbar-height in style.css */
  --brand-height:    65px;   /* matches --header-height in style.css (logo is 36px) */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      140ms var(--ease-in-out);
  --transition-slow: 240ms var(--ease-out);
}

/* app_navbar.html (avatar chip, avatar image, notif badge, admin-only tabs,
   mobile sub-menus, ...) relies on this utility for its default-hidden state.
   Pages that load header.css without also loading base/style.css — which is
   where this class normally lives — need it defined here instead. */
.hidden { display: none !important; }

/* app_navbar.html also carries the interview-session bar (#im-toolbar). It
   stays hidden on every page; interview-mode.css shows it during an
   interview with the more specific `body.eval-interview-active #im-toolbar`. */
#im-toolbar { display: none; }

/* Signed-in / signed-out visibility helpers (set via html[data-logged-in]). */
.logged-in-only  { display: none !important; }
.logged-out-only { display: inline-flex; }
html[data-logged-in] .logged-in-only  { display: inline-flex !important; }
html[data-logged-in] .logged-out-only { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   APP NAVBAR — ROW 1: Brand bar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Removed: .an-brand-bar / .an-brand-left / .an-brand-link / .an-brand-logo
   / .an-brand-name / .an-brand-right  — superseded by .an-toolbar layout.    */

/* Notification bell */
.an-notif-wrap { position: relative; }

.an-notif-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  border-radius: 7px;
  color: var(--text-secondary);
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
  position: relative;
}

.an-notif-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.an-notif-btn:focus-visible {
  outline: 2px solid rgba(79,110,247,0.5);
  outline-offset: 2px;
}

.an-notif-icon { width: 18px; height: 18px; }

/* Feedback button */
.an-feedback-btn {
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  background: none;
  /* padding: 5px; */
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition),
              background var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.an-feedback-btn:hover {
  border-color: rgba(79,110,247,0.5);
  color: var(--text-primary);
  background: rgba(79,110,247,0.06);
  box-shadow: 0 0 0 1px rgba(79,110,247,0.1);
}

.an-feedback-btn:active { transform: scale(0.97); }

/* Streak chip */
.an-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 2px;
  background: none;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms;
  text-decoration: none;
  color: #94a3b8;
}
.an-streak-chip:hover { background: rgba(249, 115, 22, 0.1); color: #fb923c; }
.an-streak-fire {
  flex-shrink: 0;
  display: block;
}
.an-streak-count {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: inherit;
  min-width: 14px;
  text-align: left;
  transition: color 200ms;
}
.an-streak-chip[data-active="true"] {
  color: #fb923c;
}
.an-streak-chip[data-active="true"]:hover {
  background: rgba(249, 115, 22, 0.12);
}

/* Avatar */
.an-avatar-wrap { position: relative; }

.an-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.an-avatar:hover {
  border-color: rgba(79,110,247,0.6);
  box-shadow: 0 0 0 3px rgba(79,110,247,0.18);
  transform: scale(1.05);
}

/* MVP badge */
.an-mvp-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  text-transform: uppercase;
}

/* ── Profile dropdown ────────────────────────────────────────────────── */
.an-profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-dropdown);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.08),
    0 16px 40px rgba(0,0,0,0.12);
  z-index: 300;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  pointer-events: none;
}

.an-profile-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.an-pd-header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid #f1f5f9;
}

.an-pd-username {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.an-pd-section { padding: 4px 6px; }

.an-pd-item {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 9px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #1e293b;
  background: none;
  border: none;
  border-radius: 7px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-align: left;
  font-family: inherit;
}

.an-pd-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.an-pd-item--danger { color: #ef4444; }

.an-pd-item--danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.an-pd-icon {
  width: 28px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #64748b;
}

.an-pd-item--danger .an-pd-icon { color: #ef4444; }
.an-pd-item--danger:hover .an-pd-icon { color: #dc2626; }

.an-pd-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 3px 0;
}

/* Admin badge inside dropdown */
.an-admin-badge {
  margin-left: auto;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(99,102,241,0.08);
  color: #6366f1;
  padding: 2px 7px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP NAVBAR — ROW 2: Nav bar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Removed: .an-nav-bar and all .an-nav-left / .an-nav-home / .an-nav-btn /
   .an-nav-file-wrap / .an-file-dropdown / .an-fd-item / .an-fd-divider /
   .an-nav-center / .an-nav-right rules — superseded by .an-toolbar layout.
   Tab + dropdown styles for the new layout live further below.            */

/* CENTER tabs */
.an-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px;
  overflow: visible;
}

.an-tab {
  font-size: var(--fs-base);
  font-weight: 500;
  font-family: inherit;
  color: #7e9fc4;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 10px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.an-tab:hover {
  color: #c8ddf0;
  font-weight: 600;
  background: none;
  transform: none;
}

.an-tab:active { transform: scale(0.97); }

.an-tab.active,
.an-tab.tsw-active {
  font-weight: 700;
  color: #fff;
}

/* Active: thin bottom border only */
.an-tab.active::after,
.an-tab.tsw-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}

/* ── Removed: .an-nav-right block (margin/dropdown/menu-item) and the
   .an-brand-right .button auth-button styles — both scoped to dead wrappers
   (.an-nav-right / .an-brand-right) that were replaced by .an-toolbar.    */

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS VISIBLE — keyboard accessibility
   ═══════════════════════════════════════════════════════════════════════════ */

.an-tab:focus-visible,
.an-nav-btn:focus-visible,
.an-fd-item:focus-visible,
.an-pd-item:focus-visible {
  outline: 2px solid rgba(79,110,247,0.6);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED APPLICATION TOOLBAR  (replaces .an-brand-bar + .an-nav-bar)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Override global layout variables when toolbar is present ─────────── */
:root:has(.an-toolbar) {
  --header-height: 0px;
  --topbar-height: 64px;  /* must match --nav-h (ONE NAVBAR SPEC at the end) */
  --wab-height: 0px;       /* Workspace Action Bar — 0 unless overridden per-mode */
}
/* WAB is visible in practice + learn modes — claim its height in layout calc */
body.practice-mode,
body.learn-mode-active,
body.roadmap-mode {
  --wab-height: 48px;
}

/* ── Toolbar shell ────────────────────────────────────────────────────── */
.an-toolbar {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  height: 65px;
  min-height: 65px;
  background: #172340;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 0;
}

/* Accent line removed — clean flat header */
.an-toolbar::before {
  display: none;
}

/* ── LEFT region ──────────────────────────────────────────────────────── */
.an-tl-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  min-width: 0;
}

/* Logo */
.an-tl-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0 4px;
  border-radius: 6px;
  transition: opacity var(--transition);
}

.an-tl-logo-link:hover { opacity: 0.82; }

.an-tl-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
  zoom: 1.3;
}

/* Brand text next to logo */
.an-tl-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.an-tl-brand-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
}

.an-tl-brand-sub {
  font-size: 12px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.9);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: -0.02rem;
}

/* Thin vertical separator between logo and workspace */
.an-tl-sep {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  margin: 0 8px;
  flex-shrink: 0;
}

/* ── CENTER region ────────────────────────────────────────────────────── */
.an-tl-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  pointer-events: none; /* let children handle events */
}

.an-tl-center > * {
  pointer-events: auto;
}

/* The .an-tabs already has styles — just tighten them for toolbar context */
.an-toolbar .an-tabs {
  background: transparent;  
  border-color: transparent;
  padding: 2px;
}

.an-toolbar .an-tab {
  padding: 10px;
  font-size: var(--fs-md);
  font-weight: 500;
}

/* ── RIGHT region ─────────────────────────────────────────────────────── */
.an-tl-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* All direct .menu children in the right region need relative positioning for dropdowns */
.an-tl-right .menu {
  position: relative;
}

/* Generic icon button (Help, Notifications when bare) */
.an-tl-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  position: relative;
  flex-shrink: 0;
}

.an-tl-icon-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-primary);
}

/* Primary CTA — Simulate */
.an-tl-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-blue);
  border: 1px solid var(--accent-blue);
  border-radius: 7px;
  padding: 5px 13px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(79,110,247,0.28);
  transition: background var(--transition), box-shadow var(--transition),
              transform var(--transition), border-color var(--transition);
}

.an-tl-cta:hover {
  background: #3d5ae0;
  border-color: #3d5ae0;
  box-shadow: 0 0 16px rgba(79,110,247,0.4), 0 2px 8px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}

.an-tl-cta:active {
  transform: scale(0.97) translateY(0);
  box-shadow: none;
}

.an-tl-cta-icon {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  fill: #fff;
}

/* Thin vertical divider between right action groups */
.an-tl-vsep {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Help dropdown ────────────────────────────────────────────────────── */
.an-help-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #0f1c2e;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-dropdown);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.3),
    0 16px 48px rgba(0,0,0,0.5);
  z-index: 400;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.975);
  transform-origin: top right;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  pointer-events: none;
  padding: 6px;
}

.an-help-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Override notif-btn on the toolbar to use icon-btn sizing */
.an-toolbar .an-notif-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 7px;
}

/* ── Toolbar focus-visible ────────────────────────────────────────────── */
.an-tl-icon-btn:focus-visible,
.an-tl-cta:focus-visible {
  outline: 2px solid rgba(79,110,247,0.6);
  outline-offset: 2px;
}

/* ── Auth buttons in toolbar context ─────────────────────────────────── */
.an-tl-right .button.ghost {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #cbd5e1;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

.an-tl-right .button.ghost:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.22);
  color: #f1f5f9;
}

.an-tl-right .button.primary {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--accent-blue);
  border: 1px solid transparent;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(79,110,247,0.3);
  transition: background var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.an-tl-right .button.primary:hover {
  background: #3d5ae0;
  box-shadow: 0 0 16px rgba(79,110,247,0.4);
  transform: translateY(-1px);
}

/* ── Profile dropdown — anchor to right from toolbar ─────────────────── */
.an-toolbar .an-profile-dropdown {
  top: calc(100% + 8px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED SIMPLE HEADER  (.header from style.css)
   Extra modifier + page-layout helpers used by standalone pages
   that include _header.html (feedback, legacy pages, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wide-padding variant used by _header.html on non-canvas pages.
   Overrides style.css's default `padding: 0 1.4rem` with the wider 45px
   gutter that was previously written as an inline style on the <header>. */
.header--wide {
  padding: 0 45px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE-LEVEL LAYOUT HELPERS
   Body-class scoped rules that were previously written as inline <style>
   blocks inside individual templates. Centralising them here means every
   standalone page that loads header.css gets them for free.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Roadmap standalone page — fills viewport below the toolbar */
body.page-roadmap {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.page-roadmap .an-toolbar {
  flex-shrink: 0;
}

body.page-roadmap #roadmap-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;   /* inner panels scroll individually */
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR — Evaluate dropdown menu
   Lives here (not in live-interview.css) because app_navbar.html is
   included on every page that mounts the top bar. Without these rules
   the dropdown would render unhidden with 100 %-sized SVG icons on any
   page that doesn't ship live-interview.css (profile, roadmap, etc.).
   ═══════════════════════════════════════════════════════════════════════════ */
.li-eval-dropdown-menu {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  min-width: 240px;
  padding: 6px;
  display: none;
}
.li-eval-dropdown-menu.open { display: block; }
.li-eval-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}
.li-eval-dropdown-item:hover { background: #f1f5f9; color: #0f172a; }
a.li-eval-dropdown-item,
a.li-eval-dropdown-item:visited { color: #475569; text-decoration: none; }
a.li-eval-dropdown-item:hover { color: #0f172a; }
.li-eval-dropdown-item svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}
.li-eval-dropdown-badge {
  margin-left: auto;
  padding: 2px 6px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR SPEC — app_navbar.html is the only navbar (landing, marketing and
   app pages alike). Phones keep their compact header heights (responsive.css);
   from tablet width up the bar is exactly --nav-h and the app layout's
   --topbar-height follows it.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --nav-h: 64px;
  --nav-bg: #172340;
  --nav-pad-x: 24px;
  --nav-logo-h: 40px;
  --nav-link: #8faac8;
  --nav-link-hover-bg: rgba(255, 255, 255, 0.06);
}
.an-toolbar {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 var(--nav-pad-x) !important;
}
@media (min-width: 768px) and (min-height: 501px) {
  :root { --topbar-height: var(--nav-h) !important; }
  .an-toolbar { height: var(--nav-h) !important; min-height: var(--nav-h) !important; }
}
.an-toolbar .an-tl-logo { height: var(--nav-logo-h) !important; width: auto !important; zoom: 1 !important; }
.an-tl-logo-link { padding: 0; }
.an-toolbar .an-tabs { gap: 4px; padding: 0; }
.an-toolbar .an-tab.tsw-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px;
  font-size: var(--t-heading); font-weight: 500; line-height: 1; color: var(--nav-link); background: transparent;
}
.an-toolbar .an-tab.tsw-btn:hover { color: #fff; background: var(--nav-link-hover-bg); }
.an-toolbar .an-tab.tsw-btn.active { color: #fff; }
.nav-chevron { flex: none; opacity: 0.8; transition: transform 150ms; }
.an-toolbar .an-tab.tsw-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* ── Level-up card (js/shared/xp.js) ─────────────────────────────────────── */
.xp-levelup {
  position: fixed; right: 24px; bottom: 24px; z-index: 100001; display: flex; align-items: center; gap: 14px;
  width: min(380px, calc(100vw - 32px)); padding: 16px 16px 16px 18px; border-radius: 14px;
  background: #172340; border: 1px solid rgba(129, 140, 248, 0.45); box-shadow: 0 20px 50px rgba(2, 6, 23, 0.45);
  color: #f1f5f9; font-family: 'Inter', system-ui, sans-serif;
  opacity: 0; transform: translateY(12px); transition: opacity 220ms, transform 220ms;
}
.xp-levelup.is-in { opacity: 1; transform: none; }
.xp-levelup-badge {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--xp-color, #4f46e5); color: #fff; font-size: var(--t-title); font-weight: 800;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.xp-levelup-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.xp-levelup-eyebrow { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #a5b4fc; }
.xp-levelup-title { font-size: var(--t-heading); font-weight: 700; color: #fff; }
.xp-levelup-next { font-size: var(--t-small); color: #94a3b8; }
.xp-levelup-close {
  flex: none; align-self: flex-start; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: transparent; color: #94a3b8; cursor: pointer;
}
.xp-levelup-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ── css/shared/workspace-action-bar.css ── */
/* ─── PRISM Workspace Action Bar ─────────────────────────────────────────────
   Three-zone bar: [LEFT: badge] [CENTER: selector] [RIGHT: actions]
   Shown in practice-mode and learn-mode-active only.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Visibility ──────────────────────────────────────────────────────────── */
#workspace-action-bar { display: none; }

body.practice-mode #workspace-action-bar,
body.learn-mode-active #workspace-action-bar,
body.roadmap-mode #workspace-action-bar {
  display: flex;
}

/* ── Base shell ──────────────────────────────────────────────────────────── */
#workspace-action-bar {
  height: var(--wab-height, 48px);
  background: #172340;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  align-items: center;
  padding: 0 14px;
  gap: 0;
  position: sticky;
  top: var(--topbar-height, 80px);
  z-index: 89;
  user-select: none;
  flex-shrink: 0;
  overflow: visible;
}

/* ══════════════════════════════════════════════════════════════════════════
   LEFT ZONE — mode badge only
   flex:1 so it takes equal space to mirror .wab-right → center stays centred
   ══════════════════════════════════════════════════════════════════════════ */
.wab-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.wab-mode-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

body.practice-mode .wab-mode-badge {
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.28);
}
body.practice-mode .wab-mode-badge::after { content: 'Practice'; }

body.learn-mode-active .wab-mode-badge {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.22);
}
body.learn-mode-active .wab-mode-badge::after { content: 'Learn'; }

body.roadmap-mode .wab-mode-badge {
  background: rgba(37, 99, 235, 0.16);
  color: #bfdbfe;
  border: 1px solid rgba(59, 130, 246, 0.26);
}
body.roadmap-mode .wab-mode-badge::after { content: 'Roadmap'; }

/* ══════════════════════════════════════════════════════════════════════════
   CENTER ZONE — question selector, always shown in both modes
   position:absolute + translateX(-50%) = pixel-perfect centre regardless of
   left/right content widths.
   ══════════════════════════════════════════════════════════════════════════ */
.wab-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.wab-center > * { pointer-events: auto; }

/* Question selector pill */
.wab-question-selector {
  position: relative;
  width: clamp(160px, 28vw, 360px);
}

/* Dark-theme trigger override (base style.css is light) */
.wab-question-selector .pcs-trigger {
  background: rgba(255, 255, 255, 0.08);
  border: 0.37px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #fff;
  font-size: var(--fs-ui);
  font-weight: 600;
  padding: 0 10px;
  box-shadow: none;
  height: 35px;
  text-align: center;
  transition: background 0.13s ease, border-color 0.13s ease;
}
.wab-question-selector .pcs-trigger:hover {
  background:transparent;
  border-color: rgba(255, 255, 255, 0.22);
  font-weight: 800;
  box-shadow: none;
}
.wab-question-selector .preset-custom-select.open .pcs-trigger {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.wab-question-selector .pcs-chevron { color: rgba(255, 255, 255); }

/* Dropdown opens downward */
.wab-question-selector .pcs-list {
  min-width: 300px;
  max-height: 400px;
  left: 0;
  right: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   RIGHT ZONE — action buttons + stopwatch
   flex:1 + justify-content:flex-end keeps buttons flush to the right edge
   ══════════════════════════════════════════════════════════════════════════ */
.wab-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.wab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  padding: 15px;
  transition: background 0.13s ease, transform 0.1s ease, opacity 0.13s ease;
}
.wab-btn:active:not(:disabled) { transform: scale(0.97); }

/* Run — solid indigo */
#wab-run-btn { background: #4f46e5; }
#wab-run-btn:hover:not(:disabled) { background: #4338ca; }
#wab-run-btn:disabled,
#wab-run-btn.wab-btn--running { opacity: 0.55; cursor: not-allowed; }

/* Submit — solid green */
#wab-submit-btn { background: #16a34a; }
#wab-submit-btn:hover:not(:disabled) { background: #15803d; }
#wab-submit-btn:disabled,
#wab-submit-btn.wab-btn--submitting { opacity: 0.55; cursor: not-allowed; }
#wab-submit-btn.wab-btn--success { background: #166534; }

/* Submit + stopwatch hidden in learn mode. Also hidden in Design Your Own
   System (practice-custom-mode) — pre-existing gap, not new: the mobile
   circular-icon rule for #wab-submit-btn is unconditionally
   "display:flex !important", which already beat the JS inline-style hide
   there before Simulate was ever added. */
body.learn-mode-active #wab-submit-btn,
body.practice-custom-mode #wab-submit-btn,
body.learn-mode-active .wab-stopwatch { display: none !important; }

/* Run hidden in Learn + Design Your Own System — Simulate replaces it there
   entirely (see workspace-action-bar.js _updateRoadmapUI). Needs its own
   !important, same as Submit above: the mobile circular-icon rule for
   #wab-run-btn (responsive.css) is itself "display:flex !important" with
   no mode condition, which otherwise beats the JS inline-style hide and
   left Run's icon rendered on top of Simulate's on mobile. */
body.learn-mode-active #wab-run-btn,
body.practice-custom-mode #wab-run-btn { display: none !important; }

/* Simulate — solid teal, distinct from Run (indigo) and Submit (green) */
#wab-simulate-btn { background: #0891b2; }
#wab-simulate-btn:hover:not(:disabled) { background: #0e7490; }
#wab-simulate-btn:disabled,
#wab-simulate-btn.wab-btn--simulating,
#wab-simulate-btn.wab-btn--gated { opacity: 0.55; cursor: not-allowed; }
/* "Gated" looks disabled but stays clickable — a click shows a toast telling
   the user to click Start Designing first, instead of doing nothing. */

/* Spinning icon */
.wab-btn-icon { flex-shrink: 0; }
@keyframes wab-spin { to { transform: rotate(360deg); } }
.wab-btn--running .wab-btn-icon,
.wab-btn--submitting .wab-btn-icon,
.wab-btn--simulating .wab-btn-icon { animation: wab-spin 0.8s linear infinite; }

/* Unused separator divs — hide safely */
.wab-btn-sep { display: none; }

/* ── Stopwatch ───────────────────────────────────────────────────────────── */
.wab-stopwatch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wab-stopwatch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.70);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.13s ease, color 0.13s ease;
}
.wab-stopwatch-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }

.wab-stopwatch[data-state="idle"]    .wab-stopwatch-btn { color: rgba(255,255,255,0.70); }
.wab-stopwatch[data-state="running"] .wab-stopwatch-btn { color: #4ade80; background: rgba(34,197,94,0.10); }
.wab-stopwatch[data-state="paused"]  .wab-stopwatch-btn { color: #fbbf24; background: rgba(251,191,36,0.10); }
.wab-stopwatch[data-state="running"] .wab-stopwatch-btn:hover { background: rgba(34,197,94,0.18); }
.wab-stopwatch[data-state="paused"]  .wab-stopwatch-btn:hover { background: rgba(251,191,36,0.18); }

/* Time display — hidden until running/paused */
.wab-timer-display {
  font-size: var(--fs-xss);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.03em;
  display: none;
  min-width: 32px;
}
.wab-stopwatch[data-state="running"] .wab-timer-display { display: inline; color: #86efac; }
.wab-stopwatch[data-state="paused"]  .wab-timer-display { display: inline; color: #fcd34d; }

/* Pulsing dot before running time */
.wab-stopwatch[data-state="running"] .wab-timer-display::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4ade80;
  margin-right: 4px;
  vertical-align: middle;
  animation: wab-pulse 1.2s ease-in-out infinite;
}
@keyframes wab-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.7); }
}

/* ── Static custom-mode label ──────────────────────────────────────────── */
.wab-custom-label {
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.wab-custom-label span {
  font-size: var(--fs-ui, 13px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* ── Roadmap layout inside WAB ─────────────────────────────────────────── */
.wab-roadmap-phase,
.wab-roadmap-upcoming {
  display: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.wab-roadmap-phase.is-clickable,
.wab-roadmap-upcoming.is-clickable {
  cursor: pointer;
}

.wab-roadmap-phase.is-clickable:hover .wab-roadmap-value,
.wab-roadmap-upcoming.is-clickable:hover .wab-roadmap-value {
  color: #bfdbfe;
}

.wab-roadmap-phase.is-disabled,
.wab-roadmap-upcoming.is-disabled {
  opacity: 0.72;
  cursor: default;
}

.wab-roadmap-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(191, 219, 254, 0.88);
  font-weight: 700;
  white-space: nowrap;
}

.wab-roadmap-value {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wab-roadmap-phase-current {
  display: none;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1.5px solid rgba(99, 102, 241, 0.42);
  background: rgba(31, 41, 75, 0.92);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.18);
  min-width: clamp(220px, 26vw, 380px);
  justify-content: center;
}

.wab-roadmap-phase-current span {
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wab-roadmap-lock {
  width: 12px;
  height: 12px;
  color: #fbbf24;
  flex-shrink: 0;
}

body.roadmap-mode #wab-question-selector,
body.roadmap-mode #wab-custom-label,
body.roadmap-mode #wab-run-btn,
body.roadmap-mode #wab-submit-btn,
body.roadmap-mode #wab-simulate-btn,
body.roadmap-mode #wab-stopwatch,
body.roadmap-mode .wab-mobile-actions {
  display: none !important;
}

body.roadmap-mode #wab-roadmap-phase,
body.roadmap-mode #wab-roadmap-phase-current,
body.roadmap-mode #wab-roadmap-upcoming {
  display: flex !important;
}

body.roadmap-mode #workspace-action-bar {
  border-bottom-color: rgba(96, 165, 250, 0.18);
}

/* Mobile-only roadmap controls — hidden on desktop */
.wab-roadmap-topics-btn,
.wab-roadmap-nav-short {
  display: none;
}

/* Mobile: [< Prev Phase]  [Topics]  [Next Phase >] — Topics truly centred */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  body.roadmap-mode #workspace-action-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 6px;
    padding: 0 10px;
  }

  body.roadmap-mode .wab-left {
    display: flex !important;
    justify-self: start;
  }

  body.roadmap-mode .wab-center {
    justify-self: center;
  }

  body.roadmap-mode .wab-right {
    justify-self: end;
  }

  body.roadmap-mode .wab-roadmap-label,
  body.roadmap-mode #wab-roadmap-phase .wab-roadmap-value,
  body.roadmap-mode #wab-roadmap-upcoming .wab-roadmap-value {
    display: none !important;
  }

  body.roadmap-mode .wab-roadmap-topics-btn,
  body.roadmap-mode #wab-roadmap-phase,
  body.roadmap-mode #wab-roadmap-upcoming {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }

  body.roadmap-mode .wab-roadmap-topics-btn[aria-expanded="true"] {
    background: rgba(99, 102, 241, 0.28);
    border-color: rgba(129, 140, 248, 0.6);
  }

  body.roadmap-mode .wab-roadmap-nav-short {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  body.roadmap-mode #wab-roadmap-phase.is-disabled,
  body.roadmap-mode #wab-roadmap-upcoming.is-disabled {
    opacity: 0.4;
    cursor: default;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN & FIX MODE — hides preset selector / Run / Submit / stopwatch and
   shows a Previous / challenge-select / Next nav instead, exactly like
   roadmap-mode above. Driven by a body class (toggled in
   design_and_fix/main.js) rather than plain inline styles so it survives
   workspace-action-bar.js's own MutationObserver-driven re-renders
   (_updateRoadmapUI() resets inline display on every body class change —
   !important on this class-scoped rule always wins regardless).
   ══════════════════════════════════════════════════════════════════════════ */
body.design-fix-mode #wab-question-selector,
body.design-fix-mode #wab-custom-label,
body.design-fix-mode #wab-run-btn,
body.design-fix-mode #wab-submit-btn,
body.design-fix-mode #wab-simulate-btn,
body.design-fix-mode #wab-stopwatch,
body.design-fix-mode .wab-mobile-actions {
  display: none !important;
}

body.design-fix-mode #wab-designfix-nav {
  display: flex !important;
}

.wab-designfix-nav {
  display: none;
  align-items: center;
  gap: 8px;
}

.wab-df-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease, opacity 0.13s ease;
  flex-shrink: 0;
}
.wab-df-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(99, 102, 241, 0.5);
}
.wab-df-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* The dropdown itself is the SAME CustomSelect widget (custom-select.css)
   used for the "Design Your Own System" preset picker — reused via
   `new window.CustomSelect(select)` in design_and_fix/main.js so it is
   pixel-identical to that reference component. It's inserted as a sibling
   of #wab-df-challenge-select (hidden) directly inside #wab-designfix-nav,
   so it just needs sizing to sit correctly between the Prev/Next buttons —
   no color/font overrides needed here, those already come from
   custom-select.css and already render white/centered/bold on dark
   backgrounds (transparent trigger fill + light border, same as the
   reference pill).
*/
#wab-designfix-nav .custom-select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: clamp(200px, 26vw, 340px);
}

/* ── css/components/locked-preset-overlay.css ── */
/* Locked Preset Overlay - PRISM Blue Theme */

.locked-preset-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(31, 35, 40, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.locked-preset-overlay.visible {
  opacity: 1;
}

.locked-preset-content {
  max-width: 500px;
  padding: 48px 40px;
  text-align: center;
  animation: slideUp 0.4s ease-out;
  position: relative;
  z-index: 10001;
}

.locked-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  z-index: 10;
}

.locked-close-btn:hover {
  background: rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
}

.locked-close-btn:active {
  transform: scale(0.95);
}

.locked-close-btn svg {
  width: 20px;
  height: 20px;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.locked-icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  color: #60a5fa;
}

.locked-title {
  font-size: 28px;
  font-weight: 600;
  color: #f9fafb;
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
}

.locked-message {
  font-size: 16px;
  color: #9ca3af;
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.locked-message strong {
  color: #93c5fd;
  font-weight: 600;
}

.locked-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 0;
}

.locked-btn {
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.locked-btn-primary {
  background: #3b82f6;
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.locked-btn-primary:hover {
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.locked-btn-primary:active {
  transform: translateY(0);
}

.locked-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.locked-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Responsive */
@media (max-width: 768px), (max-width: 1023px) and (max-height: 500px) {
  .locked-preset-content {
    padding: 32px 24px;
    max-width: 90%;
  }
  
  .locked-title {
    font-size: 24px;
  }
  
  .locked-message {
    font-size: 14px;
  }
  
  .locked-actions {
    flex-direction: column;
  }
  
  .locked-btn {
    width: 100%;
  }
  
  .locked-icon {
    width: 64px;
    height: 64px;
  }
}

/* ── css/components/custom-select.css ── */
/* Custom Select Component Styles - Matches preset-custom-select design */

.custom-select {
  position: relative;
  width: 100%;
  font-family: inherit;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 0.9rem;
  background: transparent;
  border: 0.5px solid #e2e8f0;
  border-radius: 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  text-align: left;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

.custom-select-trigger:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(59,130,246,0.12);
  background: transparent;
}

.custom-select-trigger:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-select.open .custom-select-trigger {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15), 0 2px 8px rgba(59,130,246,0.1);
}

.custom-select-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-size: var(--fs-sm);
  text-align: center;

}

.custom-select-trigger.has-value .custom-select-value {
  color: #ffffff;
  text-align: center;
  font-weight: 700;
}

.custom-select-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #64748b;
  transition: transform 0.2s ease;
}

.custom-select.open .custom-select-arrow {
  transform: rotate(180deg);
}

/* Dropdown */
.custom-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 99999;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(15,23,42,0.13), 0 2px 8px rgba(15,23,42,0.06);
  padding: 6px;
  max-height: 450px;
  overflow-y: auto;
  transform-origin: top center;
}

.custom-select.open .custom-select-dropdown {
  display: block;
  animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: var(--fs-sm);
  font-weight: 450;
  color: #1e293b;
  cursor: pointer;
  transition: background 0.1s;
}

.custom-select-option:hover:not(.disabled) {
  background: #f1f5f9;
}

.custom-select-option.selected {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

.custom-select-option.disabled {
  opacity: 0.7;
  cursor: not-allowed;
  color: #64748b;
}

.custom-select-option.disabled:hover {
  background: transparent;
}

.option-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.custom-select-lock {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

.option-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  text-transform: uppercase;
  margin-left: 4px;
}

.option-badge.easy,
.option-badge.beginner {
  background: rgba(34,197,94,0.13);
  color: #15803d;
}

.option-badge.medium,
.option-badge.intermediate {
  background: rgba(251,191,36,0.18);
  color: #b45309;
}

.option-badge.hard,
.option-badge.advanced {
  background: rgba(239,68,68,0.13);
  color: #b91c1c;
}

/* Scrollbar styling */
.custom-select-dropdown::-webkit-scrollbar {
  width: 6px;
}

.custom-select-dropdown::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ── css/evaluate/interview-mode.css ── */
/* ═══════════════════════════════════════════════════════════════════════════
   interview-mode.css — PRISM Evaluate Mode: Immersive Interview UX
   Active when: body.eval-interview-active
   IMPORTANT: Only modifies Evaluate Mode — no other modes affected.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens (scoped to interview layer) ────────────────────────── */
:root {
  --im-bg:              #080e1a;
  --im-bg-surface:      #0c1627;
  --im-bg-panel:        #091220;
  --im-bg-elevated:     #0f1e33;
  --im-border:          rgba(255,255,255,0.06);
  --im-border-mid:      rgba(255,255,255,0.09);
  --im-border-focus:    rgba(99,102,241,0.38);
  --im-accent:          #6366f1;
  --im-accent-soft:     rgba(99,102,241,0.14);
  --im-accent-glow:     rgba(99,102,241,0.28);
  --im-danger:          #ef4444;
  --im-danger-soft:     rgba(239,68,68,0.12);
  --im-warn:            #f59e0b;
  --im-green:           #22c55e;
  --im-text-1:          #f1f5f9;
  --im-text-2:          #94a3b8;
  --im-text-3:          #475569;
  --im-toolbar-h:       99px;
  --im-ease:            cubic-bezier(0.16, 1, 0.3, 1);
  --im-ease-std:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOOLBAR SWAP
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the regular app toolbar in interview mode */
body.eval-interview-active .an-toolbar {
  display: none !important;
}

/* ─── Interview Toolbar Shell ─────────────────────────────────────────── */
#im-toolbar {
  display: none; /* hidden by default — shown via interview mode */
  position: sticky;
  top: 0;
  z-index: 300;
  width: 100%;
  height: var(--im-toolbar-h);
  min-height: var(--im-toolbar-h);
  background: rgba(8, 14, 26, 0.97);
  border-bottom: 1px solid var(--im-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  align-items: center;
  padding: 0 16px;
  gap: 0;
}

/* Top accent gradient — crimson + indigo tones for interview feel */
#im-toolbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(99,102,241,0.55) 25%,
    rgba(239,68,68,0.2) 65%,
    transparent 100%
  );
  pointer-events: none;
}

body.eval-interview-active #im-toolbar {
  display: flex;
}

/* Adjust layout since toolbar height changes */
body.eval-interview-active:has(.an-toolbar) #layout,
body.eval-interview-active #layout {
  height: calc(100dvh - var(--im-toolbar-h));
}

/* ─── Toolbar Region: LEFT ─────────────────────────────────────────────── */
.im-tl-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 190px;
}

.im-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.im-brand-logo {
  height: 48px;
  width: auto;
  display: block;
  opacity: 0.88;
}
.im-brand-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--im-text-1);
  letter-spacing: -0.5px;
}

.im-brand-sub {
  font-size: 12px;
  font-weight: 300;
  color: var(--im-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Toolbar Region: CENTER ───────────────────────────────────────────── */
.im-tl-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 16px;
}

.im-session-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  max-width: 480px;
  min-width: 0;
}

.im-problem-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--im-text-1);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
  line-height: 1.2;
}

.im-session-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--im-text-2);
  white-space: nowrap;
}

.im-meta-sep {
  color: var(--im-text-3);
  font-size: var(--fs-xs);
}

.im-round-label {
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--im-text-2);
}

.im-center-timer {
  font-weight: 700;
  color: var(--im-text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  transition: color 400ms;
}

.im-center-timer.timer-warning { color: var(--im-warn); }
.im-center-timer.timer-danger  { color: var(--im-danger); }

/* ─── Toolbar Region: RIGHT ────────────────────────────────────────────── */
.im-tl-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 190px;
  justify-content: flex-end;
}

/* Exit Interview button */
.im-exit-interview-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #ffffff;
  background: #dc2626;
  border: 1px solid #b91c1c;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 140ms, border-color 140ms, transform 100ms;
}

.im-exit-interview-btn:hover {
  background: #b91c1c;
  border-color: #991b1b;
}

.im-exit-interview-btn:active { transform: scale(0.97); }

/* Avatar slot in interview toolbar */
.im-avatar-slot {
  display: flex;
  align-items: center;
}

.im-avatar-slot .an-avatar {
  pointer-events: none; /* clicks forwarded via JS */
  cursor: pointer;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BODY + LAYOUT ATMOSPHERE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Left Panel — light theme, no overrides ───────────────────────────── */

/* ─── Right Panel — light theme ────────────────────────────────────────── */
body.eval-interview-active #right-panel {
  background: #ffffff !important;
  border-left: 1px solid #e8edf3 !important;
  color: #1e293b !important;
}

/* evaluate-view section itself */
body.eval-interview-active #evaluate-view {
  background: #ffffff !important;
  color: #1e293b !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Scrollable middle zone — everything except the sticky action bar */
body.eval-interview-active #evaluate-view > *:not(.panel-actions) {
  flex-shrink: 0;
}

body.eval-interview-active #evaluate-view #evaluation-reqs,
body.eval-interview-active #evaluate-view #evaluation-question-section {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* ─── Canvas Wrapper — keep light theme, no overrides ─────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   3. RIGHT PANEL INTERVIEW REDESIGN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide old timer/reset header in interview mode */
body.eval-interview-active .evaluation-header {
  display: none !important;
}

/* Hide Reset / Cancel Test button */
body.eval-interview-active #evaluation-reset {
  display: none !important;
}

/* Hide evaluation controls dropdowns — never needed in interview mode */
body.eval-interview-active #evaluation-controls {
  display: none !important;
}

/* Hide the Start Evaluation button in the panel actions
   (starting happens via the selection screen) */
body.eval-interview-active #evaluation-start {
  display: none !important;
}

/* Hide the pre-start problem preview block — replaced by im-panel-header */
body.eval-interview-active #evaluation-preview {
  display: none !important;
}

/* Hide old active-problem block — replaced by im-panel-header */
body.eval-interview-active #evaluation-active-problem {
  display: none !important;
}

/* ─── Interview Panel Header ───────────────────────────────────────────── */
.im-panel-header {
  display: none; /* shown in interview mode */
  flex-direction: column;
  align-items: stretch;
  background: #ffffff;
  border-bottom: 1px solid #e8edf3;
}

body.eval-interview-active #evaluate-view .im-panel-header {
  display: flex;
}

/* ─── Large Timer Block ────────────────────────────────────────────────── */
.im-timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 16px 12px;
  gap: 4px;
  border-bottom: 1px solid #e8edf3;
}

.im-timer-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.im-timer-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6d737c;
}

.im-timer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--im-green);
  box-shadow: 0 0 6px rgba(34,197,94,0.5);
  animation: im-dot-pulse 2s ease-in-out infinite;
}

body.eval-interview-active.evaluation-locked .im-timer-dot.timer-warning {
  background: var(--im-warn);
  box-shadow: 0 0 6px rgba(245,158,11,0.5);
}
body.eval-interview-active.evaluation-locked .im-timer-dot.timer-danger {
  background: var(--im-danger);
  box-shadow: 0 0 6px rgba(239,68,68,0.5);
  animation: im-dot-fast-pulse 0.8s ease-in-out infinite;
}

@keyframes im-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

@keyframes im-dot-fast-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.im-panel-timer-value {
  font-size: var(--fs-xxl);
  font-weight: 800;
  letter-spacing: 1px;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color 400ms;
  text-align: center;
}

.im-panel-timer-value.timer-warning { color: var(--im-warn); }
.im-panel-timer-value.timer-danger  {
  color: var(--im-danger);
  animation: im-timer-danger-pulse 1.4s ease-in-out infinite;
}

@keyframes im-timer-danger-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Timer progress bar */
.im-timer-progress {
  width: 100%;
  height: 2px;
  background: #e8edf3;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}

.im-timer-progress-fill {
  height: 100%;
  background: var(--im-accent);
  border-radius: 2px;
  transition: width 1s linear, background 400ms;
}

.im-timer-progress-fill.timer-warning { background: var(--im-warn); }
.im-timer-progress-fill.timer-danger  { background: var(--im-danger); }

/* ─── Problem Name Block ───────────────────────────────────────────────── */
.im-problem-block {
  padding: 14px 16px 0;
  text-align: center;
}

.im-panel-problem-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.3px;
  line-height: 1.35;
}

/* ─── Round Progress Block ─────────────────────────────────────────────── */
.im-round-block {
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.im-round-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.im-round-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(99,102,241,0.9);
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 5px;
  padding: 3px 9px;
}

.im-round-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #203047;
}

/* Round pip track */
.im-round-pips {
  display: flex;
  align-items: center;
  gap: 4px;
}

.im-round-pip {
  height: 3px;
  flex: 1 1 30px;
  max-width: 44px;
  border-radius: 2px;
  background: #e2e8f0;
  transition: background 400ms var(--im-ease);
}

.im-round-pip.done   { background: rgba(99,102,241,0.35); }
.im-round-pip.active { background: var(--im-accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   4. GUIDED PROMPTS (FR / NFR)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden outside interview mode */
.im-guided-block {
  display: none;
}

body.eval-interview-active .im-guided-block {
  display: block;
  margin-bottom: 6px;
}

.im-guided-question {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: #18202b;
  margin-bottom: 5px;
  line-height: 1.4;
  padding-top: 10px;
}

.im-guided-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.im-guided-chip {
  font-size: var(--fs-xss);
  font-weight: 500;
  padding: 2px 8px;
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.18);
  color: #6366f1;
  border-radius: 4px;
  cursor: default;
  user-select: none;
}

/* Override panel h3 typography in interview mode for a cleaner look */
body.eval-interview-active #evaluation-reqs h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 16px 0 8px;
  padding: 0 16px;
}

body.eval-interview-active #evaluation-reqs textarea {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #1e293b;
  font-size: var(--fs-sm);
  padding: 10px 12px;
  transition: border-color 200ms, background 200ms;
  resize: vertical;
  min-height: 76px;
}

body.eval-interview-active #evaluation-reqs textarea:focus {
  border-color: rgba(99,102,241,0.45);
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
}

body.eval-interview-active #evaluation-reqs textarea::placeholder {
  color: #94a3b8;
  font-size: var(--fs-sm);
}

/* Padding for the reqs section */
body.eval-interview-active #evaluation-reqs {
  padding: 0 16px 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. PANEL ACTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Panel title row ("EVALUATION") */
body.eval-interview-active #right-panel .panel-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e8edf3 !important;
  color: #1e293b !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 14px 10px;
  height: auto;
}

/* Round badge+name row — hidden outside interview mode */
.im-panel-round-header {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  text-align: center;
}

body.eval-interview-active #right-panel .panel-header .im-panel-round-header {
  display: flex;
}

/* Hide right-panel-title text in interview mode — the round badge replaces it */
body.eval-interview-active #right-panel .panel-header #right-panel-title {
  display: none;
}

/* Hide the in-content problem name block — name is now in .panel-header */
body.eval-interview-active .im-problem-block {
  display: none !important;
}

body.eval-interview-active .panel-actions.evaluation-actions {
  border-top: 1px solid #e8edf3;
  background: #ffffff;
  padding: 12px 16px;
  gap: 8px;
  margin-top: auto;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. ROUND TRANSITION OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

#im-round-transition {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 26, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--im-ease);
}

#im-round-transition.visible {
  opacity: 1;
  pointer-events: none; /* don't block clicks, auto-dismiss */
}

.im-rt-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.im-rt-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--im-accent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 350ms 80ms var(--im-ease), transform 350ms 80ms var(--im-ease);
}

.im-rt-title {
  font-size: var(--fs-xxl);
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--im-text-1);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 350ms 160ms var(--im-ease), transform 350ms 160ms var(--im-ease);
}

.im-rt-sub {
  font-size: var(--fs-sm);
  color: var(--im-text-2);
  max-width: 300px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 350ms 240ms var(--im-ease), transform 350ms 240ms var(--im-ease);
}

#im-round-transition.visible .im-rt-eyebrow,
#im-round-transition.visible .im-rt-title,
#im-round-transition.visible .im-rt-sub {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. CANVAS ONBOARDING OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

#eval-canvas-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--im-ease);
  text-align: center;
}

#eval-canvas-overlay.visible {
  opacity: 1;
}

.eco-inner {
  background: rgba(8, 14, 26, 0.78);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 14px;
  padding: 22px 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(99,102,241,0.06);
}

.eco-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--im-text-1);
  margin-bottom: 12px;
  letter-spacing: -0.1px;
}

.eco-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eco-list li {
  font-size: var(--fs-xs);
  color: var(--im-text-2);
  display: flex;
  align-items: center;
  gap: 7px;
}

.eco-list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--im-accent);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. EXIT CONFIRMATION MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

#im-exit-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#im-exit-modal.hidden {
  display: none;
}

.im-exit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.im-exit-dialog {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 380px;
  width: calc(100vw - 40px);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.15),
    0 4px 16px rgba(0,0,0,0.08);
  animation: im-exit-in 240ms var(--im-ease);
}

@keyframes im-exit-in {
  from { opacity: 0; transform: scale(0.93) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.im-exit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  margin-bottom: 18px;
  color: #0f172a;
}

.im-exit-dialog h2 {
  font-size: var(--fs-subhead);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
}

.im-exit-dialog p {
  font-size: var(--fs-xs);
  color: #475569;
  margin: 0 0 20px;
  line-height: 1.65;
}

.im-exit-save-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: #16a34a;
  margin-bottom: 22px;
  font-weight: 500;
}

.im-exit-save-note svg {
  flex-shrink: 0;
  stroke: #16a34a;
}

.im-exit-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.im-exit-continue-btn {
  width: 100%;
  padding: 12px 16px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  background: #6366f1;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms, box-shadow 140ms, transform 100ms;
}

.im-exit-continue-btn:hover {
  background: #5254e0;
  box-shadow: 0 4px 16px rgba(99,102,241,0.35);
}

.im-exit-continue-btn:active { transform: scale(0.98); }

.im-exit-leave-btn {
  width: 100%;
  padding: 11px 16px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #ef4444;
  background: #ffffff;
  border: 1.5px solid #ef4444;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  transition: color 140ms, border-color 140ms, background 140ms, transform 100ms;
}

.im-exit-leave-btn:hover {
  color: #ffffff;
  border-color: #ef4444;
  background: #ef4444;
}

.im-exit-leave-btn:active { transform: scale(0.98); }

/* ═══════════════════════════════════════════════════════════════════════════
   9. SELECTION SCREEN ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Action bar — taller, clearly separated from card list */
.ess-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;          /* above ess-cards-wrap (z-index:1) and ess-right-header (z-index:1) */
  overflow: visible;    /* let the duration dropdown escape upward */
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 20px 32px;
  min-height: 76px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
}

/* Duration wrapper must be positioned so the absolute menu is anchored to it */
.ess-dur-dropdown-wrap {
  position: relative;
}

/* "No problem selected" / selected problem label */
.ess-selected-label {
  flex: 1 1 auto;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ess-selected-label:not(.ess-selected-label--empty) {
  color: #1e293b;
  font-weight: 600;
}

/* Duration trigger — clean light pill */
.ess-dur-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #374151;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 140ms, border-color 140ms, color 140ms;
}

.ess-dur-trigger:hover {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
}

.ess-dur-dropdown-wrap.open .ess-dur-trigger {
  border-color: #6366f1;
  background: #eff6ff;
  color: #1d4ed8;
}

/* Duration dropdown menu */
.ess-dur-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  list-style: none;
  margin: 0;
  min-width: 130px;
  display: none;
}

.ess-dur-dropdown-wrap.open .ess-dur-menu {
  display: block;
}

.ess-dur-opt {
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #374151;
  border-radius: 7px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.ess-dur-opt:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.ess-dur-opt--active {
  color: #6366f1;
  font-weight: 700;
}

/* Start evaluation CTA */
.ess-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #ffffff;
  background: #6366f1;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.1px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(99,102,241,0.35);
  transition: background 180ms, box-shadow 180ms, transform 100ms, color 180ms;
}

.ess-start-btn:not(:disabled):hover {
  background: #5254e0;
  box-shadow: 0 6px 24px rgba(99,102,241,0.5);
  transform: translateY(-1px);
}

.ess-start-btn:not(:disabled):active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}

/* Disabled — muted on light bg */
.ess-start-btn:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px), (max-width: 1023px) and (max-height: 500px) {
  .im-tl-left   { min-width: 0; }
  .im-tl-right  { min-width: 0; }
  .im-session-meta { display: none; }
  .im-panel-timer-value { font-size: var(--fs-xxl); }
  .im-rt-title { font-size: var(--fs-xl); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. EVALUATION LOCKED / INTERVIEW ACTIVE — COMPONENT PANEL & INSPECTOR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Suppress palette-item hover expand/scale during evaluation (all phases) */
body.eval-interview-active .palette-item:hover,
body.evaluation-locked .palette-item:hover {
  transform: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: grab !important;
}

/* Suppress palette-item hover icon colour shift during evaluation */
body.eval-interview-active .palette-item:hover .icon,
body.evaluation-locked .palette-item:hover .icon {
  filter: brightness(0) saturate(0) opacity(0.7) !important;
}

/* Lock inspector inputs once Round 1 is complete (phase = questions | tradeoff | result) */
body.evaluation-locked.eval-phase-questions .inspector input,
body.evaluation-locked.eval-phase-questions .inspector select,
body.evaluation-locked.eval-phase-questions .inspector textarea,
body.evaluation-locked.eval-phase-questions .inspector button:not(.inspector-toggle),
body.evaluation-locked.eval-phase-tradeoff .inspector input,
body.evaluation-locked.eval-phase-tradeoff .inspector select,
body.evaluation-locked.eval-phase-tradeoff .inspector textarea,
body.evaluation-locked.eval-phase-tradeoff .inspector button:not(.inspector-toggle) {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MCQ + TRADE-OFF CARD CAROUSEL  (interview mode only)
   ───────────────────────────────────────────────────────────────────────────
   The card sits flush in the right panel (no border / no bg). Nav row at
   the bottom holds:  ←  • • ● • •  →
   ═══════════════════════════════════════════════════════════════════════════ */

/* The question section + list stretch to fill height — no internal scroll */
body.eval-interview-active #evaluation-question-section,
body.eval-interview-active #evaluation-question-section #evaluation-question-list {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ─── Stage: full-height column, card body + nav row ────────────────────── */
body.eval-interview-active .ev-card-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 18px 10px;
  box-sizing: border-box;
}

/* ─── 3. Fallback banner (tradeoff only) ────────────────────────────────── */
body.eval-interview-active .ev-card-fallback-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: #1e40af;
  flex-shrink: 0;
}

body.eval-interview-active .ev-card-fallback-icon {
  flex-shrink: 0;
  font-size: var(--fs-md);
}

/* ─── 4. Card — borderless, fills remaining height, NO scroll ───────────── */
body.eval-interview-active .ev-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  overflow: hidden;
}

body.eval-interview-active .ev-card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.eval-interview-active .ev-card-q-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

body.eval-interview-active .ev-card-q-text {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #334155;
  font-weight: 500;
  flex-shrink: 0;
}

/* ─── 5. MCQ options ────────────────────────────────────────────────────── */
body.eval-interview-active .ev-card-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
  flex: 1 1 auto;
  min-height: 0;
}

body.eval-interview-active .ev-card-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  font-size: var(--fs-sm);
  color: #1e293b;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

body.eval-interview-active .ev-card-option:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

body.eval-interview-active .ev-card-option.is-selected {
  border-color: #172340;
  background: #eef2f8;
}

body.eval-interview-active .ev-card-option input[type="radio"] {
  margin: 0;
  accent-color: #172340;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

body.eval-interview-active .ev-card-option span {
  flex: 1;
  line-height: 1.4;
}

/* ─── 6. Tradeoff textarea ──────────────────────────────────────────────── */
body.eval-interview-active .ev-card-answer {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 120px;
  border: 1px solid #cbd5f5;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #0f172a;
  background: #ffffff;
  resize: none;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.eval-interview-active .ev-card-answer:focus {
  border-color: #172340;
  box-shadow: 0 0 0 3px rgba(23, 35, 64, 0.15);
}

body.eval-interview-active .ev-card-answer::placeholder {
  color: #94a3b8;
}

/* ─── 7. Message card (skipped / unavailable fallback) ──────────────────── */
body.eval-interview-active .ev-card--message {
  flex: 0 0 auto;
  align-self: stretch;
}

body.eval-interview-active .ev-card--message .ev-card-body {
  padding: 15px 4px;
  gap: 8px;
}

/* ─── 8. Nav row: ← arrow  •  pip dots  •  arrow → ──────────────────────── */
body.eval-interview-active .ev-card-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* Circular arrow buttons */
body.eval-interview-active .ev-card-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.08s ease;
  background: #ffffff;
  color: #173240;
  flex-shrink: 0;
}

body.eval-interview-active .ev-card-nav-btn svg {
  display: block;
}

body.eval-interview-active .ev-card-nav-prev {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

body.eval-interview-active .ev-card-nav-prev:hover:not(:disabled) {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #1e293b;
}

body.eval-interview-active .ev-card-nav-next {
  background: linear-gradient(135deg, #0f172a 0%, #172340 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(23, 35, 64, 0.28);
}

body.eval-interview-active .ev-card-nav-next:hover:not(:disabled) {
  background: linear-gradient(135deg, #0b1224 0%, #0f172a 100%);
  box-shadow: 0 6px 16px rgba(23, 35, 64, 0.4);
  transform: translateY(-1px);
}

body.eval-interview-active .ev-card-nav-btn:active:not(:disabled) {
  transform: scale(0.94);
}

body.eval-interview-active .ev-card-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Pip dots between arrows */
body.eval-interview-active .ev-card-pips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
}

body.eval-interview-active .ev-card-pip {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: #d6dce6;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
}

body.eval-interview-active .ev-card-pip:hover {
  background: #94a3b8;
}

body.eval-interview-active .ev-card-pip.is-answered {
  background: #172340;
}

body.eval-interview-active .ev-card-pip.is-active {
  width: 14px;
  height: 14px;
  background: #172340;
  box-shadow: 0 0 0 4px rgba(23, 35, 64, 0.15);
  cursor: default;
}

body.eval-interview-active .ev-card-pip.is-active.is-answered {
  background: #172340;
}




/* ═══════════════════════════════════════════════════════════════════════════
   MCQ + TRADE-OFF ROUNDS — room for the full question
   The design is locked after round 1, so the Building Blocks panel has no
   use here. Hide it and give the question panel the width; compact the timer
   so the question and all four options fit without scrolling. If a very short
   screen still can't fit them, the card scrolls rather than clipping.
   ═══════════════════════════════════════════════════════════════════════════ */
body.eval-interview-active.eval-phase-questions #layout,
body.eval-interview-active.eval-phase-tradeoff #layout {
  grid-template-columns: 0 1fr clamp(420px, 36vw, 620px) !important;
}
body.eval-interview-active.eval-phase-questions #left-panel,
body.eval-interview-active.eval-phase-tradeoff #left-panel {
  visibility: hidden; min-width: 0; padding: 0 !important; border: 0 !important; overflow: hidden;
}

/* Compact timer row: "TIME REMAINING 59:21" on one line, bar underneath */
body.eval-interview-active.eval-phase-questions .im-timer-block,
body.eval-interview-active.eval-phase-tradeoff .im-timer-block {
  display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 8px; padding: 10px 18px;
}
body.eval-interview-active.eval-phase-questions .im-panel-timer-value,
body.eval-interview-active.eval-phase-tradeoff .im-panel-timer-value { font-size: 24px; letter-spacing: 0.5px; }
body.eval-interview-active.eval-phase-questions .im-timer-progress,
body.eval-interview-active.eval-phase-tradeoff .im-timer-progress { grid-column: 1 / -1; margin: 0; }

/* Question typography */
body.eval-interview-active.eval-phase-questions .ev-card-stage { padding: 14px 20px 12px; gap: 12px; }
body.eval-interview-active.eval-phase-questions .ev-card-body { overflow-y: auto; gap: 12px; padding-right: 2px; }
body.eval-interview-active.eval-phase-questions .ev-card-q-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2563eb;
}
body.eval-interview-active.eval-phase-questions .ev-card-q-text {
  font-size: 16px; line-height: 1.5; font-weight: 600; color: #0f172a;
}

/* Options: compact, clearly clickable, full text always visible */
body.eval-interview-active.eval-phase-questions .ev-card-options { gap: 8px; flex: 0 0 auto; }
body.eval-interview-active.eval-phase-questions .ev-card-option {
  padding: 10px 14px; gap: 12px; border-radius: 10px; border-color: #dbe3ee;
  font-size: 14px; color: #0f172a; min-height: 0;
}
body.eval-interview-active.eval-phase-questions .ev-card-option span { line-height: 1.45; }
body.eval-interview-active.eval-phase-questions .ev-card-option:hover { border-color: #93c5fd; background: #f5f9ff; }
body.eval-interview-active.eval-phase-questions .ev-card-option.is-selected {
  border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb inset;
}
body.eval-interview-active.eval-phase-questions .ev-card-option input[type="radio"] { accent-color: #2563eb; }
body.eval-interview-active.eval-phase-questions .ev-card-nav { padding-top: 2px; }
body.eval-interview-active.eval-phase-questions .ev-card-nav-btn { width: 38px; height: 38px; }
/* Problem name and round pips repeat the top bar and the round badge. */
body.eval-interview-active.eval-phase-questions .im-problem-block,
body.eval-interview-active.eval-phase-questions .im-round-block,
body.eval-interview-active.eval-phase-tradeoff .im-problem-block,
body.eval-interview-active.eval-phase-tradeoff .im-round-block { display: none !important; }
/* The "Start by identifying" design hint belongs to round 1 only. */
body.eval-interview-active:not(.eval-phase-design) #eval-canvas-overlay { display: none !important; }
body.eval-interview-active.eval-phase-questions #layout,
body.eval-interview-active.eval-phase-tradeoff #layout {
  grid-template-columns: 0 1fr clamp(440px, 40vw, 640px) !important;
}
body.eval-interview-active.eval-phase-questions .evaluation-actions { padding-top: 10px; padding-bottom: 10px; }
@media (max-height: 760px) {
  body.eval-interview-active.eval-phase-questions .ev-card-option { padding: 8px 12px; }
  body.eval-interview-active.eval-phase-questions .ev-card-stage { padding-top: 8px; gap: 8px; }
}

/* ─── Round 1 requirements: one input per line (requirement-list.js) ─── */
#evaluation-reqs .ev-req-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
#evaluation-reqs .ev-req-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#evaluation-reqs .ev-req-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 0 4px 0 10px;
  border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
  transition: border-color 150ms, box-shadow 150ms;
}
#evaluation-reqs .ev-req-row:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
#evaluation-reqs .ev-req-num { flex: none; min-width: 18px; padding-top: 9px; font-size: 13px; font-weight: 600; line-height: 20px; color: #64748b; font-variant-numeric: tabular-nums; }
#evaluation-reqs textarea.ev-req-input,
body.eval-interview-active #evaluation-reqs textarea.ev-req-input {
  flex: 1 1 auto; min-width: 0; min-height: 0; height: 38px; margin: 0; padding: 9px 0; border: 0; border-radius: 0; outline: 0;
  background: transparent; box-shadow: none; resize: none; overflow: hidden;
  font: inherit; font-size: 14px; line-height: 20px; color: #0f172a;
}
#evaluation-reqs .ev-req-remove { margin-top: 5px; }
#evaluation-reqs .ev-req-input::placeholder { color: #94a3b8; }
#evaluation-reqs .ev-req-remove {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: none; color: #94a3b8; cursor: pointer; opacity: 0; transition: opacity 120ms, background 120ms, color 120ms;
}
#evaluation-reqs .ev-req-row:hover .ev-req-remove,
#evaluation-reqs .ev-req-row:focus-within .ev-req-remove { opacity: 1; }
#evaluation-reqs .ev-req-remove:hover { background: #fef2f2; color: #b91c1c; }
#evaluation-reqs .ev-req-remove:focus-visible { opacity: 1; outline: 2px solid #6366f1; outline-offset: 1px; }
#evaluation-reqs .ev-req-add {
  align-self: flex-start; padding: 6px 8px; margin-left: -8px; border: 0; border-radius: 6px; background: none;
  font-size: 13px; font-weight: 600; color: #4f46e5; cursor: pointer;
}
#evaluation-reqs .ev-req-add:hover { background: #eef2ff; }
#evaluation-reqs .ev-req-add:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
@media (hover: none) { #evaluation-reqs .ev-req-remove { opacity: 1; } }

/* ── css/shared/responsive.css ── */
/* ═══════════════════════════════════════════════════════════════════════════
   PRISM — Responsive Layer
   ═══════════════════════════════════════════════════════════════════════════
   Mobile-first responsive overrides. Layered ON TOP of existing desktop CSS.
   Does NOT rewrite existing rules — adds breakpoint-specific adjustments.

   Breakpoints:
     Mobile:        0 – 767px
     Tablet:        768 – 1023px
     Desktop:       1024px+        (existing styles, mostly untouched)
     Large Desktop: 1440px+

   Load order: AFTER all other stylesheets (last in <head>).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Responsive utility variables ──────────────────────────────────────────── */
:root {
  --panel-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --touch-min: 44px;
  --mobile-header-h: 48px;
  --sheet-radius: 16px;
}

/* Hidden by default; enabled only on mobile */
.an-mobile-mode-btn,
.an-mobile-mode-menu,
.an-mobile-mode-label {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — 0 to 767px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {

  /* ── Body / Root ──────────────────────────────────────────────────────── */
  :root {
    --topbar-height: 62px;
    --header-height: 0px;
    --wab-height: 62px;
    --footer-height: 0px;
    --footer-gap: 0px;
  }

  :root:has(.an-toolbar) {
    --topbar-height: 62px;
    --header-height: 0px;
  }
  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  /* ── Toolbar / Navbar ─────────────────────────────────────────────────── */
  .an-toolbar {
    height: 62px;
    min-height: 62px;
    padding: 0 8px;
    gap: 4px;
  }

  /* Logo centred in the bar */
  .an-tl-left {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .an-tl-brand-text {
    display: none; /* Hide "PRISM / Design Canvas" text on mobile */
  }

  .an-tl-logo {
    width: 55px;
    height: 55px;
  }

  /* Mode switcher tabs hidden, center is empty spacer */
  .an-tl-center {
    display: flex;
    flex: 1;
    min-width: 0;
  }
  .an-tl-center .an-tabs { display: none; }
  .an-tl-center::-webkit-scrollbar { display: none; }

  /* Mode label sits next to logo in the left section */
  .an-mobile-mode-label {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #f1f5f9;
    text-transform: capitalize;
    letter-spacing: 0.01em;
  }

  .an-mobile-mode-menu {
    position: fixed;
    top: calc(var(--topbar-height) + 6px);
    left: 10px;
    width: min(260px, calc(100vw - 20px));
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: 12px;
    background: #0f1d3b;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45);
    z-index: 1300;
  }
  .an-mobile-mode-menu[hidden] {
    display: none !important;
  }
  .an-mobile-mode-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #dbeafe;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 0 10px;
    text-align: left;
  }
  .an-mobile-mode-item.an-mobile-has-sub {
    justify-content: space-between;
  }
  .an-mobile-chevron {
    transition: transform 0.2s ease;
    opacity: 0.6;
  }
  .an-mobile-has-sub.expanded .an-mobile-chevron {
    transform: rotate(90deg);
    opacity: 1;
  }
  .an-mobile-mode-item:active,
  .an-mobile-mode-item:hover {
    background: rgba(79, 110, 247, 0.22);
  }

  /* Sub-menu items (nested under Practice / Evaluate) */
  .an-mobile-sub-menu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 14px;
    margin-bottom: 2px;
  }
  .an-mobile-sub-menu[hidden] {
    display: none;
  }
  .an-mobile-sub-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    border: none;
    border-radius: 6px;
    background: rgba(79, 110, 247, 0.08);
    color: #93c5fd;
    font-size: 13px;
    font-weight: 500;
    padding: 0 12px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .an-mobile-sub-item:active,
  .an-mobile-sub-item:hover {
    background: rgba(79, 110, 247, 0.22);
    color: #fff;
  }

  .an-tabs {
    flex-wrap: nowrap;
    gap: 2px;
    padding: 0 4px;
  }

  .an-tab {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Right section — even spacing between icons */
  .an-tl-right {
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
  }

  .an-tl-vsep { display: none; }

  /* Hamburger pinned to the left edge (DOM lives in .an-tl-right) */
  .an-mobile-mode-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    padding: 0 7px;
    color: #fff;
  }
  .an-mobile-mode-btn span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  /* Logged out: keep the right side narrow so it clears the centred logo.
     Sign-up is reachable from the "Create Account" tab on /login. */
  .an-tl-right:has(#auth-user-chip.hidden) #an-streak-btn,
  .an-tl-right:has(#auth-user-chip.hidden) #notif-bell-wrap,
  .an-tl-right:has(#auth-user-chip.hidden) #auth-signup-button {
    display: none !important;
  }

  #auth-signin-button {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .an-streak-chip {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .an-streak-count { display: none; }

  .an-feedback-btn { display: none; } /* Feedback accessible via profile menu on mobile */

  .notif-bell-btn,
  .an-tl-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Auth buttons compact */
  #auth-signin-button,
  #auth-signup-button {
    font-size: 11px;
    padding: 6px 10px;
    min-height: 36px;
  }

  /* ── Workspace Action Bar ─────────────────────────────────────────────── */
  #workspace-action-bar {
    height: 48px;
    padding: 0 6px;
    gap: 6px;
  }

  body.practice-mode #workspace-action-bar,
  body.learn-mode-active #workspace-action-bar {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    column-gap: 12px;
    align-items: center;
  }

  /* Flatten so Run/Submit become direct grid items */
  body.practice-mode .wab-right,
  body.learn-mode-active .wab-right {
    display: contents;
  }

  body.practice-mode #wab-run-btn,
  body.learn-mode-active #wab-run-btn {
    grid-column: 1;
    grid-row: 1;
  }

  body.practice-mode #wab-submit-btn {
    grid-column: 3;
    grid-row: 1;
  }

  /* Simulate on mobile: the grid only has 3 slots (icon | selector | icon),
     already spoken for by Run + Submit in test-case Practice mode — a 4th
     always-visible icon has nowhere to go and was overflowing into its own
     row, overlapping the canvas below it. Fold it into the existing Run/
     Submit "…" dropdown there instead (see _mobileActions in
     workspace-action-bar.js). In Design Your Own System and Learn, Run is
     hidden entirely and Simulate is the only action, so it just takes over
     Run's old slot directly — no dropdown needed for a single action. */
  body.practice-mode:not(.practice-custom-mode) #wab-simulate-btn {
    display: none !important;
  }
  body.practice-custom-mode #wab-simulate-btn,
  body.learn-mode-active #wab-simulate-btn {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  body.practice-custom-mode #wab-simulate-btn span,
  body.learn-mode-active #wab-simulate-btn span {
    display: none !important;
  }
  body.practice-custom-mode #wab-simulate-btn .wab-btn-icon,
  body.learn-mode-active #wab-simulate-btn .wab-btn-icon {
    margin: 0;
  }

  body.practice-mode .wab-center,
  body.learn-mode-active .wab-center {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    min-width: 0;
  }

  /* Hide mode badge on mobile */
  .wab-left {
    display: none !important;
  }

  /* Dropdown centered in column 2 */
  .wab-center {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
  }

  .wab-question-selector {
    max-width: 100%;
    position: static;
    width: 100%;
  }

  .pcs-trigger,
  .custom-select-trigger {
    font-size: 11px;
    padding: 6px 10px;
    max-width: 100%;
    width: 100%;
  }

  /* Preset dropdown — full-width bottom-sheet style on mobile */
  .wab-question-selector .pcs-list,
  .preset-custom-select.open .pcs-list {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: 55vh;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    z-index: 1300;
    overflow-y: auto;
    transform: none !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Custom select dropdown - ensure it's visible on mobile */
  .custom-select.open .custom-select-dropdown {
    display: block !important;
  }

  .wab-right {
    gap: 2px;
    flex: 0 0 auto;
  }

  #wab-run-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  #wab-run-btn span { display: none !important; }
  #wab-run-btn .wab-btn-icon { margin: 0; }

  /* Hide stopwatch and timer on mobile for space */
  #wab-stopwatch,
  #wab-timer-display {
    display: none !important;
  }

  .wab-stopwatch-btn {
    display: none !important;
  }

  /* Submit button on right of dropdown */
  #wab-submit-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  #wab-submit-btn span {
    display: none !important;
  }
  #wab-submit-btn .wab-btn-icon {
    margin: 0;
  }

  .wab-stopwatch { display: none; }

  /* ── Layout — Panels as overlays on mobile ───────────────────────────── */
  .layout {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr;
    gap: 0;
    padding: 0;
    height: calc(var(--vh, 100vh) - var(--topbar-height) - var(--wab-height)) !important;
    max-height: calc(var(--vh, 100vh) - var(--topbar-height) - var(--wab-height)) !important;
    contain: none; /* Remove contain so fixed children work */
    overflow: hidden;
  }

  .layout.left-collapsed,
  .layout.right-collapsed,
  .layout.left-collapsed.right-collapsed {
    grid-template-columns: 1fr;
  }

  /* ── Left Panel — Slide-over from left ───────────────────────────────── */
  #left-panel {
    position: fixed;
    top: calc(var(--topbar-height) + var(--wab-height));
    left: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    width: min(280px, 80vw);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform var(--panel-transition);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding-bottom: 24px; /* Breathing room at bottom */
  }

  #left-panel .panel-header {
    padding: 0 12px;
    height: 48px;
    min-height: 48px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  }

  #left-panel .components-section,
  #left-panel .inspector-section {
    padding: 10px;
  }

  #left-panel.mobile-open {
    transform: translateX(0);
  }

  /* Left panel toggle — float button when panel is closed */
  .floating-toggle.left {
    display: flex !important;
    position: fixed;
    top: 50%;
    left: 12px;
    z-index: 150; /* below .an-toolbar (200) so its menus open over the toggles */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    transform: translateY(-50%);
  }

  /* ── Right Panel — Bottom sheet on mobile ─────────────────────────────── */
  #right-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 65vh;
    max-height: 65vh;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform var(--panel-transition);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    background: #fff;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Drag handle indicator for bottom sheet */
  #right-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }

  #right-panel .panel-header {
    padding: 0 12px;
    height: 44px;
    min-height: 44px;
  }

  /* Right panel scrollable body */
  #right-panel .panel-view,
  #right-panel .output,
  #right-panel #practice-content,
  #right-panel #simulation-content {
    padding: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #right-panel.mobile-open {
    transform: translateY(0);
  }

  /* Right panel toggle — float button */
  .floating-toggle.right {
    display: flex !important;
    position: fixed;
    top: 50%;
    right: 12px;
    z-index: 150;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    transform: translateY(-50%);
  }

  /* ── Panel overlay backdrop ──────────────────────────────────────────── */
  .mobile-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .mobile-panel-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hide floating toggles when respective panel is open */
  #left-panel.mobile-open ~ .floating-toggle.left,
  body:has(#left-panel.mobile-open) .floating-toggle.left {
    opacity: 0;
    pointer-events: none;
  }
  #right-panel.mobile-open ~ .floating-toggle.right,
  body:has(#right-panel.mobile-open) .floating-toggle.right {
    opacity: 0;
    pointer-events: none;
  }

  /* ── Canvas — Full width ─────────────────────────────────────────────── */
  .canvas-wrapper {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none; /* Enable custom touch handling */
    border-radius: 0;
    box-shadow: none;
  }

  .canvas {
    width: 100%;
    height: 100%;
    position: relative;
  }

  /* Canvas nodes — preserve exact sizing, prevent distortion */
  .canvas .node {
    min-height: unset;
    min-width: unset;
  }
  .canvas .node img,
  .canvas .node svg,
  .canvas .node-icon img,
  .canvas .node-icon svg {
    max-width: none;
    width: auto;
    height: auto;
  }
  .canvas .node-close {
    min-height: unset;
    min-width: unset;
  }
  .canvas .node-port {
    min-height: unset;
    min-width: unset;
  }

  /* Canvas toolbar — compact bottom bar */
  .canvas-float-toolbar {
    position: fixed !important;
    top: auto !important;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    padding: 6px 10px;
    gap: 3px;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
  }

  .cfb-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .cfb-zoom-label {
    font-size: 11px;
    min-width: 32px;
    min-height: unset;
  }

  .cfb-sep { width: 1px; margin: 0 2px; }

  /* Canvas reset button */
  .canvas-reset {
    position: fixed !important;
    top: auto !important;
    bottom: 60px;
    right: 12px;
    width: 40px;
    height: 40px;
    z-index: 200;
    border-radius: 50%;
  }

  /* Canvas action dock (Practice) */
  #canvas-action-dock {
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    gap: 8px;
  }

  /* ── Dropdowns / Menus — Position for mobile ─────────────────────────── */
  .li-eval-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    min-width: 100%;
    max-height: 50vh;
    overflow-y: auto;
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 1300;
  }

  .li-eval-dropdown-item {
    padding: 14px 16px;
    min-height: var(--touch-min);
  }

  /* ── Modals — Fullscreen on mobile ───────────────────────────────────── */
  .modal .modal-content,
  .eval-modal-card,
  .feedback-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  /* Or bottom-sheet style for smaller modals */
  .modal .modal-content.open-modal {
    height: auto;
    max-height: 85vh;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
  }

  /* ── Forms — Full width ──────────────────────────────────────────────── */
  input, textarea, select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  .modal-form label {
    font-size: 13px;
  }

  .modal-actions {
    flex-direction: column;
    gap: 8px;
  }
  .modal-actions .button {
    width: 100%;
    min-height: var(--touch-min);
  }

  /* ── Components palette — 3 columns on mobile ────────────────────────── */
  .palette {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .palette-item {
    min-height: var(--touch-min);
    padding: 6px;
  }

  /* ── Inspector — compact ─────────────────────────────────────────────── */
  .inspector-section {
    padding: 8px;
  }

  /* ── Profile dropdown ────────────────────────────────────────────────── */
  .an-profile-dropdown {
    position: fixed;
    top: var(--topbar-height);
    right: 0;
    width: min(300px, 85vw);
    max-height: calc(100vh - var(--topbar-height));
    border-radius: 0 0 0 12px;
  }

  /* ── Notification dropdown ───────────────────────────────────────────── */
  .notif-dropdown {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 60vh;
    border-radius: 0 0 12px 12px;
  }

  /* Hide panel toggles while evaluate selection screen is open */
  body.evaluation-mode .floating-toggle,
  body.roadmap-mode .floating-toggle,
  body:has(#evaluate-selection-screen:not(.hidden)) .floating-toggle {
    display: none !important;
  }

  /* Mobile WAB action dropdown (single trigger button).
     position/right/bottom|top are NOT set here — .wab-right is
     display:contents (needed so Run/Submit/Simulate become direct grid
     items of #workspace-action-bar), and a display:contents element can't
     be a containing block, so an absolute position:absolute here anchored
     to nothing meaningful and rendered off-screen. workspace-action-bar.js
     (_positionMobileActions) sets position:fixed + left/top inline instead,
     computed from the trigger button's own rect. */
  .wab-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #0f1d3b;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.45);
    z-index: 1300;
  }
  .wab-mobile-actions[hidden] {
    display: none !important;
  }
  .wab-mobile-action-item {
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(79, 110, 247, 0.2);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    padding: 0 10px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ROADMAP VIEW — Single column, panels stacked
     ══════════════════════════════════════════════════════════════════════ */
  #roadmap-view {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
    top: var(--topbar-height);
    bottom: 0;
  }

  #rp-left {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: min(280px, 80vw);
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform var(--panel-transition);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }

  #rp-left.mobile-open { transform: translateX(0); }

  /* #roadmap-view is position:fixed + z-index:10, a stacking context that traps
     the drawer under the topbar/action bar. Lift the view while the drawer is
     open and dim everything else from inside it (taps land on #roadmap-view). */
  #roadmap-view:has(#rp-left.mobile-open) { z-index: 1000; }
  #roadmap-view:has(#rp-left.mobile-open)::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: rgba(0, 0, 0, 0.4);
  }

  #rp-right {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 55vh;
    z-index: 1100;
    transform: translateY(100%);
    transition: transform var(--panel-transition);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    background: #fff;
  }
  #rp-right.mobile-open { transform: translateY(0); }

  /* Roadmap main area — full width */
  #rp-main {
    grid-column: 1;
    grid-row: 1 / -1;
    overflow-y: auto;
    padding: 12px;
  }

  /* Topic items — tighter padding */
  .rm-topic-item {
    padding: 10px 12px;
    min-height: var(--touch-min);
  }

  .rm-filter-option {
    min-height: var(--touch-min);
    padding: 8px 12px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ROADMAP MAIN PAGE — Vertical layout on mobile
     ══════════════════════════════════════════════════════════════════════ */
  body.roadmap-main-mode {
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
    overflow-x: hidden !important;
  }

  #rm-main {
    height: auto;
    overflow: visible;
  }

  #rm-hero {
    padding: 12px 16px 8px;
  }

  .rm-hero-title {
    font-size: var(--t-metric);
  }

  .rm-hero-stats {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .rm-hero-stat {
    padding: 0 12px;
  }

  /* Journey canvas — vertical on mobile */
  #rm-journey-canvas {
    flex: none;
    min-height: auto;
    overflow: visible;
    padding: 16px 12px;
  }

  #rm-road-wrap {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  /* Hide the horizontal SVG road on mobile */
  #rm-road-svg {
    display: none;
  }

  /* Road caps — reposition for vertical layout */
  .rm-road-cap {
    position: static;
    transform: none;
    margin: 0 auto;
  }
  .rm-road-cap-start { margin-bottom: 8px; }
  .rm-road-cap-end   { margin-top: 8px; }

  /* Today's goal — inline, full-width (prevents overlap with hero/cards) */
  #rm-today-goal {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    margin: 0 0 12px;
    padding: 0 4px;
  }

  /* Milestones container — no absolute overlay on mobile */
  #rm-milestones {
    position: static;
    inset: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    pointer-events: auto;
  }

  /* Phase cards — stack vertically */
  .rm-milestone {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 0;
    opacity: 1;
  }

  .rm-milestone.rm-ms-top,
  .rm-milestone.rm-ms-bottom,
  .rm-milestone.rm-ms-visible {
    transform: none !important;
  }

  /* No connector lines needed in stacked layout */
  .rm-milestone-connector {
    display: none;
  }

  /* Hide absolute checkpoint rings in vertical mode to prevent overlap */
  .rm-node-ring { display: none !important; }

  /* Today's Goal banner */
  .rmg-inner,
  .rm-goal-card {
    max-width: 100%;
  }

  /* ══════════════════════════════════════════════════════════════════════
     LEARN MODE — Narration, stage picker, theory panel
     ══════════════════════════════════════════════════════════════════════ */
  #lm-narration {
    left: 8px;
    right: 8px;
    transform: translateX(0) translateY(10px);
    max-width: calc(100vw - 16px);
    bottom: 60px;
    font-size: 12px;
    padding: 8px 14px;
  }
  #lm-narration.lm-narration-show {
    transform: translateX(0) translateY(0);
  }

  body.mode-learn .learn-stage-picker {
    padding: 10px 12px;
    gap: 6px;
  }

  body.mode-learn .learn-question-item {
    padding: 10px 12px;
    min-height: var(--touch-min);
  }

  /* Stage theory panel scrollable */
  body.mode-learn .stage-theory {
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* LRP sim footer — full width buttons */
  .lrp-sim-footer {
    padding: 8px 12px;
    flex-direction: column;
    gap: 6px;
  }
  .lrp-sim-footer .button {
    width: 100%;
    min-height: var(--touch-min);
  }

  /* ══════════════════════════════════════════════════════════════════════
     EVALUATE / INTERVIEW MODE
     ══════════════════════════════════════════════════════════════════════ */
  #im-toolbar {
    height: 52px;
    min-height: 52px;
    padding: 0 8px;
    gap: 6px;
  }

  body.eval-interview-active #im-toolbar {
    --im-toolbar-h: 52px;
  }

  body.eval-interview-active #layout {
    height: calc(var(--vh, 100dvh) - 52px);
  }

  .im-tl-left {
    min-width: 0;
    gap: 6px;
  }

  .im-brand-logo {
    height: 36px;
  }

  .im-session-meta { display: none; }

  .im-problem-title {
    font-size: 12px;
    max-width: 140px;
  }

  .im-tl-right {
    min-width: 0;
    gap: 6px;
  }

  /* ── Evaluation Report — mobile fullscreen ───────────────────────────── */
  .eval-report-page {
    top: 0 !important;
  }

  .eval-rp-topbar {
    padding: 0 10px;
    height: 48px;
  }

  .eval-rp-meta { display: none; }

  .eval-rp-inner {
    padding: 16px 12px 48px;
  }

  .eval-rp-btn {
    padding: 6px 10px;
    font-size: 11px;
    min-height: 36px;
  }

  .eval-rp-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px 14px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     PRICING PAGE — mobile adjustments
     ══════════════════════════════════════════════════════════════════════ */
  body.page-pricing .an-toolbar {
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
  }

  .pricing-shell {
    height: calc(var(--vh, 100vh) - 48px);
  }

  .pricing-scroll-inner {
    padding: 0 12px 3rem;
  }

  .pr-hero {
    padding: 1.5rem 0.75rem 1rem;
  }

  .pr-hero-title {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }

  .pr-duration-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pr-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .pr-card {
    padding: 1.25rem 1rem 1rem;
  }

  /* Hide decorative floaters on mobile */
  .pr-floater { display: none; }
  .pricing-bg { display: none; }

  /* ══════════════════════════════════════════════════════════════════════
     PROFILE PAGE — mobile stacking
     ══════════════════════════════════════════════════════════════════════ */
  body.page-profile .an-toolbar {
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
  }

  .profile-shell {
    height: calc(var(--vh, 100vh) - 48px);
  }

  .profile-content {
    padding: 1.5rem 12px 3rem;
  }

  /* Hero stacks vertically */
  .prof-hero {
    padding: 1.5rem 1rem 1.25rem;
    border-radius: 14px;
  }

  .prof-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .prof-avatar { width: 64px; height: 64px; font-size: 20px; }

  .prof-name { font-size: 20px; }

  .prof-rank-row {
    justify-content: center;
  }

  /* Hide decorative floaters on mobile */
  .profile-floater { display: none; }
  .profile-bg { display: none; }

  /* ══════════════════════════════════════════════════════════════════════
     SIMULATION OUTPUT — compact on mobile
     ══════════════════════════════════════════════════════════════════════ */
  .sim-output-panel {
    padding: 8px;
  }

  .sim-output-panel .sim-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     EVALUATIONS LIST PAGE — compact cards
     ══════════════════════════════════════════════════════════════════════ */
  .evals-content {
    padding: 1.5rem 0.75rem 4rem;
  }

  .evals-floater { display: none; }
  .evals-bg { display: none; }

  /* ══════════════════════════════════════════════════════════════════════
     AUTH / SIGNUP MODALS — fullscreen on mobile
     ══════════════════════════════════════════════════════════════════════ */
  .auth-modal .auth-card {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .auth-card-inner {
    padding: 1.5rem 1rem;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET — 768px to 1023px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 501px) {

  :root {
    --topbar-height: 44px;
  }

  /* ── Toolbar — Tighter spacing ───────────────────────────────────────── */
  .an-toolbar {
    padding: 0 12px;
    gap: 8px;
  }

  .an-tab {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
  }

  /* .an-tl-center is normally position:absolute + left:50% so the tabs sit
     dead-centre regardless of how wide the left/right toolbar content is.
     That's fine on desktop, but at tablet width the logo + streak/notif/
     help/feedback/auth buttons on either side are wide enough that the
     absolutely-centred tabs visually collide with them (overlapping text,
     not just tight spacing). Bring it back into normal flex flow here so it
     shares space with its siblings instead of ignoring them, and let it
     scroll horizontally as a last resort rather than overlap anything. */
  .an-tl-center {
    position: static;
    left: auto;
    transform: none;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .an-tl-center::-webkit-scrollbar { display: none; }
  .an-tabs { flex-wrap: nowrap; }

  .an-tl-brand-sub { display: none; }

  .an-tl-right {
    gap: 6px;
  }

  .an-feedback-btn {
    font-size: 11px;
    padding: 5px 10px;
  }

  /* ── Layout — Collapsible panels ─────────────────────────────────────── */
  .layout {
    --left-panel-w: clamp(180px, 22vw, 230px);
    --right-panel-w: clamp(200px, 24vw, 260px);
    gap: 0.5rem;
    padding: 0.4rem;
  }

  /* ── Left Panel — Collapsible, narrower ──────────────────────────────── */
  #left-panel {
    overflow-y: auto;
    transition: width var(--panel-transition), opacity var(--panel-transition);
  }

  .layout.left-collapsed #left-panel {
    width: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
  }

  /* ── Right Panel — Collapsible, narrower ─────────────────────────────── */
  #right-panel {
    transition: width var(--panel-transition), opacity var(--panel-transition);
  }

  .layout.right-collapsed #right-panel {
    width: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
  }

  /* ── Palette — 4 columns ─────────────────────────────────────────────── */
  .palette {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  /* ── Workspace action bar — compact ──────────────────────────────────── */
  #workspace-action-bar {
    padding: 0 10px;
  }

  .wab-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* ── Modals — Constrained but not fullscreen ─────────────────────────── */
  .modal .modal-content {
    max-width: 90vw;
    max-height: 85vh;
  }

  /* ── Canvas toolbar ──────────────────────────────────────────────────── */
  .canvas-float-toolbar {
    gap: 3px;
    padding: 4px 10px;
  }

  /* ── Roadmap View — narrower panels ──────────────────────────────────── */
  #roadmap-view {
    --rp-panel-w: 220px;
    --rp-right-panel-w: 240px;
  }

  /* ── Interview Mode toolbar — compact ────────────────────────────────── */
  #im-toolbar {
    height: 56px;
    min-height: 56px;
    padding: 0 12px;
  }

  .im-brand-logo { height: 52px; }

  .im-problem-title {
    font-size: 13px;
    max-width: 220px;
  }

  /* ── Pricing cards — 2 col stays ─────────────────────────────────────── */
  .pricing-scroll-inner {
    padding: 0 1rem 3rem;
  }

  /* ── Profile — tighter padding ───────────────────────────────────────── */
  .profile-content {
    padding: 2rem 1.5rem 4rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LARGE DESKTOP — 1440px+
   More breathing room, larger panels
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .layout {
    /* Preferred width is a straight percentage of the viewport — the max
       is also a percentage (not a small fixed px cap) so panels keep
       growing on very wide screens instead of plateauing early. */
    --left-panel-w: clamp(204px, 14vw, 18.6vw);
    --right-panel-w: clamp(280px, 21vw, 26vw);
    /* Was 1.5rem/1rem 1.5rem 1.5rem — needlessly wide once the panels
       themselves already scale generously with the viewport; that extra
       chrome was just eating into canvas space for no visual benefit. */
    gap: 0.6rem;
    padding: 0.5rem 0.6rem 0.6rem;
  }

  /* Base typography scale (style.css) plateaus by ~640px viewport width —
     every one of its clamp() maxes is already hit well before "large
     desktop" territory, so body copy stays mobile-sized forever on big
     monitors while all the freed-up width just sits blank. Give the scale
     a second, taller ceiling here; each min starts at the old max so
     there's no visible jump at the 1440px boundary, only continued growth.
     This 1440-1919 slice covers 14-16" laptop panels specifically —
     confirmed too large at that size. Shifted a flat 2.5px smaller than
     the 1920px+ tier below (which was confirmed correct on a 28" monitor)
     at every point of the clamp, not just the ceiling, so the whole curve
     — not only the max — stays a guaranteed 2.5px under the 28" values. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTRA-LARGE DESKTOP — 1920px+ (24-32" external monitors)
   Confirmed-correct sizes on a 28" monitor — kept as-is; only the narrower
   1440-1919px "14-16 inch laptop" slice above was reduced.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {

  /* Left panel height split — confirmed correct as content-sized (auto)
     on a 14" laptop, but that left a visibly tall dead gap in Components
     on a 28" monitor. Force an explicit 35/65 split here only. */
  #left-panel .components-section {
    flex: 0 0 35%;
    max-height: 25%;
  }

  /* Header (top nav bar + preset/workspace action bar) taller on a 28"
     monitor — was sized for a laptop and looked squashed given how much
     vertical room is available. --topbar-height/--wab-height drive
     .layout's own height calc automatically; .an-toolbar's height must be
     bumped to match since it doesn't read --topbar-height itself (its own
     literal height only needs to stay in sync with that variable). The
     ":root:has(.an-toolbar)" selector is repeated here (not a plain
     ":root") to match header.css's specificity — a plain :root would lose
     to it regardless of load order. */
  :root:has(.an-toolbar) {
    --topbar-height: 76px;
  }
  body.practice-mode,
  body.learn-mode-active,
  body.roadmap-mode {
    --wab-height: 56px;
  }
  .an-toolbar {
    height: 76px;
    min-height: 76px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH DEVICE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets — only for primary action areas, NOT canvas/toolbar icons */
  .modal-actions button,
  .modal-actions a,
  .auth-card button,
  .auth-card a,
  .pricing-shell button,
  .pricing-shell a,
  .profile-shell button,
  .profile-shell a,
  .li-eval-dropdown-item {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent double-tap zoom */
  * {
    touch-action: manipulation;
  }

  /* Canvas allows pinch/pan */
  .canvas, .canvas-content, #canvas-content {
    touch-action: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAFE AREA INSETS (notched phones)
   ═══════════════════════════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  @media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
    .an-toolbar {
      padding-left: max(8px, env(safe-area-inset-left));
      padding-right: max(8px, env(safe-area-inset-right));
    }

    #workspace-action-bar {
      padding-left: max(8px, env(safe-area-inset-left));
      padding-right: max(8px, env(safe-area-inset-right));
    }

    .canvas-float-toolbar {
      bottom: max(8px, env(safe-area-inset-bottom));
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE IMAGES & SVGS
   ═══════════════════════════════════════════════════════════════════════════ */
/* Only apply fluid images to content areas, NOT toolbar/UI icons */
.canvas-wrapper img,
.panel-body img,
.modal-content img,
.lp-hero img {
  max-width: 100%;
  height: auto;
}

/* Toolbar logo — keep fixed size from header.css */
.an-tl-logo {
  max-width: none;
  height: 32px !important;
  width: auto !important;
  zoom: 1 !important;
}

@media (min-width: 1024px), (min-width: 768px) and (min-height: 501px) {
  .an-tl-logo {
    height: 36px !important;
    width: auto !important;
    zoom: 1.3 !important;
  }
}

/* Preserve specific icon sizes */
.palette-item .icon, .wab-btn-icon,
.cfb-btn svg, .dock-btn-icon {
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTRA SMALL PHONES — 480px and below
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #workspace-action-bar {
    padding: 0 4px;
    height: 44px;
    gap: 4px;
  }

  body.practice-mode #workspace-action-bar,
  body.learn-mode-active #workspace-action-bar {
    grid-template-columns: 36px 1fr 36px;
    column-gap: 8px;
  }

  .wab-question-selector {
    width: auto !important;
    min-width: 0;
  }

  .pcs-trigger {
    font-size: 11px;
    padding: 4px 6px;
    max-width: 100%;
  }

  /* Hide the timer display on extra small screens */
  #wab-timer-display {
    display: none;
  }

  /* Workspace items more compact */
  .wab-left,
  .wab-right {
    gap: 2px;
  }

  /* Panel buttons smaller */
  #wab-run-btn,
  #wab-submit-btn,
  .wab-stopwatch-btn,
  .notif-bell-btn,
  .an-tl-icon-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE TABLES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT — Hide non-essential UI
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .an-toolbar, #workspace-action-bar, #left-panel, #right-panel,
  .canvas-float-toolbar, #canvas-action-dock, .floating-toggle {
    display: none !important;
  }
  .layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONES IN LANDSCAPE — same phone layout, but height is the scarce axis
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) and (max-height: 500px) {
  :root,
  :root:has(.an-toolbar) {
    --topbar-height: 48px;
  }

  body.practice-mode,
  body.learn-mode-active,
  body.roadmap-mode {
    --wab-height: 44px;
  }

  .an-toolbar {
    height: 48px;
    min-height: 48px;
  }

  #workspace-action-bar {
    height: var(--wab-height);
  }

  #wab-run-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  body.practice-mode .wab-question-selector,
  body.learn-mode-active .wab-question-selector {
    max-width: 420px;
    margin: 0 auto;
  }

  /* Side sheet instead of a bottom sheet, so the canvas stays in view while reading */
  #right-panel {
    top: calc(var(--topbar-height) + var(--wab-height));
    left: auto;
    right: 0;
    bottom: 0;
    width: min(380px, 55vw);
    height: auto;
    max-height: none;
    transform: translateX(100%);
    border-radius: var(--sheet-radius) 0 0 var(--sheet-radius);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  }

  #right-panel::before {
    display: none;
  }

  #right-panel.mobile-open {
    transform: translateX(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Practice / Learn / Evaluate — fixed 25% / 45% / 30% split
   Requested explicitly for these three modes only (not Builder, not
   Roadmap). .layout's grid is `var(--left-panel-w) 1fr var(--right-panel-w)`,
   so a 25% + 30% pair of fixed tracks naturally leaves exactly 45% for the
   1fr canvas column — no separate center-width rule needed. Scoped to
   desktop widths; narrower breakpoints already replace this layout with a
   collapsed/drawer panel UI.
   Body-class selectors (0,2,0 specificity) intentionally outrank the
   plain ".layout {...}" rules elsewhere so this wins regardless of load
   order. The drag-resize handles (panel-ui.js) still work on top of this
   — they only ever grow a panel wider via an inline style override.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body.practice-mode .layout,
  body.learn-mode-active .layout,
  body.evaluation-mode .layout {
    --left-panel-w: max(220px, 25%);
    --right-panel-w: max(240px, 30%);
  }
}

/* The +10% right-panel bump for 14-16" laptops (33% vs the 30% baseline)
   was reverted — with real Problem/Requirements content in it, 33% read as
   the panel "covering almost half the page." Back to the plain 30%
   baseline from the 1024px+ rule above for every desktop size.

   14-15.6" laptops (1440-1919px, same slice as the typography tier above):
   three successive relative cuts off the original 25%/30% baseline —
   -10% (22.5%/27%), then -15% (19.125%/22.95%), then -15% again
   (16.256%/19.508%) per follow-up requests. Each cut compounds on the
   previous result, not on the original 25%/30%. */
@media (min-width: 1440px) and (max-width: 1919px) {
  body.practice-mode .layout,
  body.learn-mode-active .layout,
  body.evaluation-mode .layout {
    --left-panel-w: max(180px, 18.4%);
    --right-panel-w: max(213px, 25.508%);
  }
}