/* The class board: RocketHour's canonical system (shared/design/CANONICAL.md). Rocket Violet at identity points
   only (the logo, one word in the title, live dots), Spark Volt for the one primary button (Run), warm neutrals,
   Bricolage Grotesque and JetBrains Mono, the hard ink stamp shadow. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-500.woff2') format('woff2');
  font-weight: 500 600;
  font-display: swap;
}

:root {
  --brand: #BB24ED;
  --brand-wash: rgba(187, 36, 237, 0.12);
  --brand-mid: #DA9AF6;
  --brand-shade: #6F0096;
  --volt: #C7F900;
  --volt-on: #141210;
  --white: #FFFFFF;
  --canvas: #F5F2EE;
  --cloud: #E8E4DF;
  --fog: #C2BEBA;
  --graphite: #6E6B66;
  --dusk: #302E2B;
  --ash: #252321;
  --ink: #141210;
  --success: #16A22D;
  --danger: #DC2837;
  --stamp: 0 4px 0 var(--ink);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 500 16px/1.55 var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

/* ---------- the rail ---------- */

.rail {
  background: var(--ink);
  color: var(--canvas);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 16px 20px;
  overflow-y: auto;
}
.rail-logo { display: block; width: 128px; height: auto; margin-left: 6px; }
.rail-title { padding: 0 6px; }
.eyebrow {
  font: 600 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fog);
}
.rail-title h1 {
  margin: 10px 0 0;
  font-weight: 800;
  font-size: 31px;
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.rail-title em { font-style: normal; color: var(--brand); }

.steps { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.level-label {
  margin: 12px 10px 6px;
  font: 600 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.level-label:first-child { margin-top: 0; }
.step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--cloud);
  font: 600 15px/1.2 var(--font);
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--ease);
}
.step:hover { background: var(--dusk); }
.step .num { font: 600 12px/1 var(--mono); color: var(--graphite); font-variant-numeric: tabular-nums; }
.step.active { background: var(--canvas); color: var(--ink); }
.step.active .num { color: var(--ink); }
.step .tick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--dusk); position: relative; }
.step.active .tick { border-color: var(--fog); }
.step.done .tick { background: var(--success); border-color: var(--success); }
.step.done .tick::after,
.ticks span.pass::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 28%;
  height: 50%;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.board-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--canvas);
  border-radius: 12px;
  background: transparent;
  color: var(--canvas);
  font: 700 15px/1 var(--font);
  cursor: pointer;
  transition: background 120ms var(--ease);
}
.board-btn:hover { background: var(--dusk); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }

/* ---------- the stage ---------- */

.stage {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  padding: 22px 28px 26px;
  min-width: 0;
  min-height: 0;
}

.job { display: flex; align-items: flex-start; gap: 20px; }
.job-text { flex: 1; min-width: 0; }
.job h2 {
  margin: 0;
  font-weight: 800;
  font-size: 31px;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.move {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.4;
  transition: opacity 120ms var(--ease);
}
.move-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fog); flex: none; }
.move.good .move-dot { background: var(--success); }
.move.bad .move-dot { background: var(--danger); }
.move.wait { opacity: .45; }

.job-side { display: flex; align-items: center; gap: 16px; padding-top: 2px; }
.ticks { display: flex; gap: 6px; }
.ticks span {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid var(--fog);
  background: var(--white);
}
.ticks span.pass { background: var(--success); border-color: var(--success); }
.ticks span.fail { border-color: var(--danger); }

.next-btn {
  padding: 11px 16px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--stamp);
  font: 700 15px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.next-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

.tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 34px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 11px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 600 13px/1 var(--mono);
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.chip.on { background: var(--ink); color: var(--canvas); }
.example { font: 500 13.5px/1.4 var(--mono); color: var(--graphite); overflow-wrap: anywhere; }

/* ---------- the two panels ---------- */

.work {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 22px;
  min-height: 0;
  padding-bottom: 4px;
}
.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--stamp);
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 12px 9px 16px;
  border-bottom: 2px solid var(--ink);
  flex: none;
}
.panel-label { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.grow { flex: 1; }

.tabs { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--canvas); }
.tab {
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--graphite);
  font: 600 12.5px/1 var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
}
.tab.active { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--fog); }

.quiet-btn {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--graphite);
  font: 600 14px/1 var(--font);
  cursor: pointer;
}
.quiet-btn:hover { color: var(--ink); background: var(--canvas); }

.run-btn {
  padding: 11px 24px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--volt);
  color: var(--volt-on);
  box-shadow: var(--stamp);
  font: 800 16px/1 var(--font);
  cursor: pointer;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.run-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.run-btn:disabled { cursor: progress; }

.script-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.given {
  position: relative;
  flex: none;
  max-height: 40%;
  overflow: auto;
  background: var(--canvas);
  border-bottom: 1.5px dashed var(--fog);
}
.yours { position: relative; flex: 1; min-height: 0; }
.part-label {
  position: absolute;
  top: 9px;
  right: 14px;
  z-index: 5;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--graphite);
  pointer-events: none;
}
.yours .part-label { color: var(--ink); }
.page-view { flex: 1; min-height: 0; background: var(--canvas); }

/* CodeMirror, in the house style */
.CodeMirror {
  height: 100%;
  background: transparent;
  color: var(--ink);
  font: 500 14.5px/1.6 var(--mono);
}
.given .CodeMirror { height: auto; }
.given .CodeMirror-lines,
.page-view .CodeMirror-lines { padding: 12px 0; }
.given .CodeMirror pre.CodeMirror-line,
.page-view .CodeMirror pre.CodeMirror-line { padding: 0 16px; }
.yours .CodeMirror-lines { padding: 12px 0 40px; }
.CodeMirror-gutters { background: transparent; border-right: 0; }
.CodeMirror-linenumber { color: var(--fog); padding: 0 10px 0 12px; font-variant-numeric: tabular-nums; }
.CodeMirror-cursor { border-left: 2px solid var(--ink); }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: var(--brand-wash) !important; }
.CodeMirror-matchingbracket { color: var(--ink) !important; background: var(--cloud); }
.cm-s-rh .cm-keyword { color: var(--brand-shade); font-weight: 600; }
.cm-s-rh .cm-def { color: var(--ink); font-weight: 600; }
.cm-s-rh .cm-variable, .cm-s-rh .cm-variable-2 { color: var(--ink); }
.cm-s-rh .cm-property { color: #1E5AA8; }
.cm-s-rh .cm-string { color: #0E7A35; }
.cm-s-rh .cm-number, .cm-s-rh .cm-atom { color: #B45309; }
.cm-s-rh .cm-comment { color: #8A867F; }
.cm-s-rh .cm-operator { color: var(--ink); }
.cm-s-rh .cm-tag { color: var(--brand-shade); font-weight: 600; }
.cm-s-rh .cm-attribute { color: #1E5AA8; }
.cm-s-rh .cm-bracket { color: var(--graphite); }

.frame-wrap { position: relative; flex: 1; min-height: 0; background: var(--canvas); }
.frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--canvas); }
.board-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--canvas);
  font: 600 12px/1 var(--mono);
  letter-spacing: .1em;
}
.app-note {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  padding: 10px 16px;
  border-top: 1.5px solid var(--cloud);
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.35;
  flex: none;
}
.app-note.bad { color: var(--ink); }
.app-note.bad::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: none; }

/* The checks run in frames nobody sees. */
.checks-mount { position: fixed; left: -10000px; top: 0; width: 480px; height: 420px; overflow: hidden; }
.checks-mount iframe { width: 480px; height: 420px; border: 0; }

.devbar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--canvas);
  font: 600 12px/1 var(--mono);
}
.devbar-tag { padding: 0 8px; color: var(--brand-mid); letter-spacing: .14em; text-transform: uppercase; }
.devbar button {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--dusk);
  color: var(--canvas);
  font: 600 12px/1 var(--mono);
  cursor: pointer;
}
.devbar button:hover { background: var(--graphite); }

@media (max-width: 1120px) {
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  .rail-title h1 { font-size: 26px; }
  .stage { padding: 18px 20px 22px; }
  .job h2 { font-size: 26px; }
}
@media (max-width: 900px) {
  .shell { display: block; height: auto; }
  .rail { gap: 16px; }
  .steps { flex-direction: row; flex-wrap: wrap; }
  .level-label { width: 100%; margin: 6px 10px 2px; }
  .step { width: auto; }
  .stage { display: flex; flex-direction: column; }
  .work { grid-template-columns: minmax(0, 1fr); }
  .panel { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}