/* Presentation only. No geometry, layout columns, simulation timing or state rules. */
@import url('../assets/design-tokens.css');

:root, html[data-theme="dark"] {
  --bg: var(--background);
  --panel: var(--surface);
  --inner: var(--surface-soft);
  --raised: var(--surface-soft);
  --cyan: var(--accent-text);
  --orange: var(--accent-text);
  --green: var(--success);
  --svg-shadow: var(--border);
  --svg-base: var(--surface-soft);
  --svg-highlight: var(--muted);
  --svg-active: var(--accent);
  --svg-node-stroke: var(--border);
  --svg-panel-1: var(--surface);
  --svg-panel-2: var(--surface);
  --svg-cache-1: var(--surface-soft);
  --svg-cache-2: var(--surface-soft);
  --svg-glow: var(--accent);
  --svg-bus-1: var(--muted);
  --svg-bus-2: var(--border);
  --svg-cr-1: var(--accent-soft);
  --svg-cr-2: var(--accent-soft);
  --svg-current-1: #efedf7;
  --svg-current-2: #e8e5f2;
  --purple: #76658f;
  --blue: #55718b;
}
html[data-theme="dark"] {
  --svg-current-1: #35313e;
  --svg-current-2: #2e2b37;
  --purple: #bfafd4;
  --blue: #acbfd0;
}
body { min-width: 0; font-family: var(--font-ui); }
button, select { background: var(--surface); border-radius: var(--radius-control); min-height: 42px; padding: 9px 15px; font-size: 14px; font-weight: 550; line-height: 1.5; }
button:hover:not(:disabled), select:hover { background: var(--accent-soft); border-color: var(--accent); }
button.primary { background: var(--accent); border-color: transparent; color: #352607; }
button.primary:hover:not(:disabled) { background: #ffc65f; }
:focus-visible { outline-color: var(--focus); }
.topbar { min-height: 88px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.brand-mark { width: 36px; height: 40px; flex-basis: 36px; border-radius: 12px; background: var(--accent); color: #5d410e; }
.brand-kicker { color: var(--muted); font-size: 10px; line-height: 14px; font-weight: 650; }
.brand-title { font-size: 20px; line-height: 26px; font-weight: 650; letter-spacing: -.035em; }
.brand-sub { color: var(--muted); font-size: 12px; line-height: 18px; font-weight: 400; }
.utility-button, .mode-control select { height: 42px; min-height: 42px; padding: 9px 15px; border-radius: 12px; background: var(--surface); color: var(--text); font-size: 14px; line-height: 1.5; font-weight: 550; }
.utility-button:hover { background: var(--accent-soft); border-color: var(--accent); }
.mode-control { font-family: var(--font-ui); }
.panel { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.notice { background: var(--surface-soft); border-color: var(--border); border-left-color: var(--accent); border-radius: 12px; }
.warning { background: var(--accent-soft); border-left-color: var(--accent-text); }
.badge, .result-badge { border-radius: var(--radius-pill); }
.result-badge, html[data-theme="light"] .result-badge { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.event, .concept-card, .stages li { border-radius: 10px; }
.event, code, .mono { font-family: var(--font-mono); }
.event { line-height: 1.7; overflow-x: auto; }
#tip { border-radius: 12px; box-shadow: none; }
#scene { background: var(--surface-soft); border-radius: 16px; }
svg text { font-family: var(--font-ui); }
svg .node, html[data-theme="light"] svg .node { stroke: var(--border); }
svg .cache, html[data-theme="light"] svg .cache { stroke: var(--border); }
svg .edge, html[data-theme="light"] svg .edge { stroke: var(--muted); }
svg .active-control { stroke: var(--blue); }
svg .wait-text { fill: var(--accent-text); }
svg .tile-id { fill: var(--muted); }
svg .concept:focus { fill: var(--accent-text); }
.progress, html[data-theme="light"] .progress, .track, html[data-theme="light"] .track { background: var(--surface-soft); }
.progress > div { background: var(--accent); }
.segment.idle, html[data-theme="light"] .segment.idle { background: var(--border); color: var(--muted); }
.segment.wait, html[data-theme="light"] .segment.wait { background: var(--accent-soft); color: var(--accent-text); }
.segment.run, html[data-theme="light"] .segment.run { background: var(--success-soft); color: var(--success); }
.stages li.past { color: var(--success); border-color: var(--border); }
.stages li.current { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
#summary-box, html[data-theme="light"] #summary-box { background: var(--success-soft); border-left-color: var(--success); border-radius: 10px; }

/* Map existing SVG paint attributes, including inline labels, without touching the
   renderer or its coordinates. Color-based state distinctions stay distinct. */
#scene [fill="#2b4058"], #scene [fill="#293b50"], #scene [fill="#101a26"],
#scene [fill="#111b28"], #scene [fill="#16263a"] { fill: var(--surface-soft); }
#scene [fill="#30495b"] { fill: var(--border); }
#scene [fill="#211c19"] { fill: var(--accent-soft); }
#scene [fill="#173329"] { fill: var(--success-soft); }
#scene [fill="#59d9cf"], #scene [fill="#72d8d2"] { fill: var(--accent-text); }
#scene [fill="#236b6a"] { fill: var(--accent); }
#scene [stroke="#59d9cf"] { stroke: var(--accent-text); }
#scene [fill="#c5a1ff"], #scene [fill="#c5a8ed"], #scene [fill="#64498a"] { fill: var(--purple); }
#scene [stroke="#c5a1ff"] { stroke: var(--purple); }
#scene [fill="#ffc078"] { fill: var(--accent); }
#scene [stroke="#ffc078"], #scene [stroke="#d79858"] { stroke: var(--accent-text); }
#scene [fill="#91ddb2"] { fill: var(--success); }
#scene [stroke="#91ddb2"] { stroke: var(--success); }
#scene [fill="#93bfff"], #scene [fill="#d2e5ff"] { fill: var(--blue); }
#scene [stroke="#93bfff"], #scene [stroke="#a7cdff"], #scene [stroke="#6f94ba"] { stroke: var(--blue); }
#scene [stroke="#536b83"], #scene [stroke="#41566d"], #scene [stroke="#60768e"] { stroke: var(--border); }
#scene [style*="fill:#b1c1d3"], #scene [style*="fill:#dceaff"] { fill: var(--muted) !important; }
#scene [style*="fill:#ffe0ba"], #scene [style*="fill:#ffc078"] { fill: var(--accent-text) !important; }
#scene [style*="fill:#91ddb2"] { fill: var(--success) !important; }
#scene [style*="fill:#93bfff"] { fill: var(--blue) !important; }

/* Learning layer: shared tokens, compact simulator layout. */
.welcome { margin-top:var(--space-4); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3) var(--space-6); }
.welcome h2 { font-size:20px; margin:var(--space-1) 0; letter-spacing:-.025em; }
.welcome-copy p { max-width:80ch; margin-bottom:0; color:var(--muted); }
.lesson-eyebrow { font-size:11px; font-weight:650; letter-spacing:.04em; color:var(--accent-text); }
.welcome-actions { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.welcome-steps { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); padding:var(--space-3) 0 0; margin:0; list-style:none; border-top:1px solid var(--border); }
.welcome-steps li { display:flex; align-items:baseline; gap:var(--space-2); font-size:12px; }
.welcome-steps li > span { color:var(--accent-text); font-family:var(--font-mono); }
.scenario-question { color:var(--text); font-weight:550; margin:-4px 0 var(--space-3); }
.control-help { font-size:12px; margin:var(--space-2) 0; }
.lesson-coach { background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:var(--radius-control); padding:var(--space-3); margin:0 0 var(--space-4); }
.lesson-coach p { margin:var(--space-1) 0 0; font-size:13px; }
.diagram-notes { margin-top:var(--space-3); font-size:12px; }
.diagram-tools { display:flex; gap:var(--space-3); justify-content:space-between; align-items:center; margin:var(--space-3) 0; }
.diagram-tools p { margin:0; font-size:12px; color:var(--muted); }
.diagram-tools button { flex-shrink:0; font-size:12px; padding:var(--space-2) var(--space-3); }
.scene-viewport { max-width:100%; overflow-x:auto; border-radius:var(--radius-control); }
.scene-viewport.is-enlarged #scene { min-width:1040px; }
#diagram-pan-hint { font-size:12px; }
.diagram-notes summary { color:var(--muted); font-weight:550; }
.inspector-navigation { display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin-top:var(--space-4); }
.inspector-navigation button { padding:var(--space-2) var(--space-3); font-size:12px; }
.inspector-navigation a { font-size:12px; color:var(--accent-text); }
#lesson-check { scroll-margin-top:var(--space-4); }
.lesson-check { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--space-6); margin-top:var(--space-4); }
.lesson-check h2 { margin:var(--space-1) 0; }
.check-answers { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.check-answers button { text-align:left; white-space:normal; }
.check-answers button[aria-pressed="true"] { border-color:var(--focus); background:var(--accent-soft); }
#check-feedback:empty { display:none; }
#check-feedback { color:var(--text); border-left:3px solid var(--accent); padding-left:var(--space-3); }
.lesson-next { border-left:1px solid var(--border); padding-left:var(--space-6); }
.lesson-next h3 { margin-top:0; }
.lesson-next .muted { font-size:12px; }
#rac-guide { width:min(900px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:auto; }
#rac-guide::backdrop { background:color-mix(in srgb,var(--text) 35%,transparent); }
body:has(#rac-guide[open]) { overflow:hidden; }
.guide-header { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-6); background:var(--surface); border-bottom:1px solid var(--border); }
.guide-header h2 { font-size:20px; margin:var(--space-1) 0 0; }
#guide-close { flex-shrink:0; }
#guide-nav { display:flex; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-4) var(--space-6) 0; }
#guide-nav a { color:var(--text); background:var(--surface-soft); padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius-pill); text-decoration:none; }
#guide-content { padding:0 var(--space-6) var(--space-6); overflow-wrap:anywhere; }
.guide-section { border-bottom:1px solid var(--border); padding:var(--space-5) 0; scroll-margin-top:110px; }
.guide-section:last-child { border-bottom:0; padding-bottom:0; }
.guide-section h3 { font-size:17px; margin:0 0 var(--space-3); }
.guide-section li { padding-left:var(--space-1); margin:var(--space-3) 0; }
.guide-section ol { padding-left:var(--space-5); }
.guide-definitions { display:grid; grid-template-columns:180px minmax(0,1fr); gap:var(--space-3) var(--space-4); }
.guide-definitions dt { font-weight:650; font-size:13px; color:var(--text); margin:0; }
.guide-definitions dd { font-size:13px; margin:0; }
.guide-lessons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin-top:var(--space-4); }
.guide-lessons article { border:1px solid var(--border); background:var(--surface-soft); border-radius:var(--radius-control); padding:var(--space-4); }
.guide-lessons h4 { margin:0; font-size:14px; }
.guide-lessons p { font-size:13px; }
.guide-section details { padding:var(--space-3) 0; }
.guide-section details + details { border-top:1px solid var(--border); }
.guide-section summary { font-size:14px; }
.guide-section details p { font-size:13px; color:var(--muted); }
@media(max-width:900px) {
  .welcome { grid-template-columns:minmax(0,1fr); }
  .welcome-steps { gap:var(--space-2); }
}
@media(max-width:620px) {
  .welcome-steps, .lesson-check, .guide-lessons, .guide-definitions { grid-template-columns:minmax(0,1fr); }
  .welcome-actions button { flex:1 1 auto; }
  .welcome h2 { font-size:18px; }
  .lesson-next { padding:var(--space-4) 0 0; border-left:0; border-top:1px solid var(--border); }
  .guide-definitions { gap:var(--space-2); }
  .guide-definitions dd { margin-bottom:var(--space-3); }
  #guide-content, .guide-header { padding-left:var(--space-4); padding-right:var(--space-4); }
  #guide-nav { padding-left:var(--space-4); padding-right:var(--space-4); }
  .controls > label { min-width:0; max-width:100%; }
  .scenario-select, .compare-select { flex:1 1 100%; }
  .check-answers button { width:100%; }
}