/* Unit room.
   Two columns: what to do on the left, where to do it on the right. The task
   never scrolls out from under the editor — a learner should not have to hold
   the requirements in working memory while typing. */

.room {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

/* ----------------------------------------------------------------- head */

.room-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--s-1);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-sm);
  color: var(--ink-mute);
  padding: 6px 10px;
  border-radius: var(--r-sm);
}
.back:hover { color: var(--ink); background: var(--s-3); }

.room-where { font-size: var(--t-sm); color: var(--ink-mute); }
.room-where b { color: var(--ink); font-weight: 600; }

/* Step rail: the learner's position inside the unit, always visible. */
.rail { margin-left: auto; display: flex; align-items: center; gap: 5px; }

.rail-node {
  padding: 0;
  border: 0;
  appearance: none;
  cursor: pointer;
  width: 26px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--s-4);
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.rail-node.done { background: var(--ok); }
.rail-node.now { background: var(--brand); width: 42px; }
.rail-node[disabled] { cursor: default; }
.rail-node:not([disabled]):hover { background: var(--brand-lift); }
.rail .rail-theory { flex: 0 0 6px; width: 6px; border-radius: 50%; background: var(--brand-edge); }

/* The way back, said in words.
   The rail carries the same navigation, but a row of small bars does not read
   as one — a learner who wants the theory again should not have to guess. */
.step-nav { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.step-nav-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  font-family: inherit;
}
.step-nav-link::before { content: "← "; }
.step-nav-link:hover { color: var(--brand-lift); }

.rail-count {
  margin-left: var(--sp-3);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- body */

.room-body {
  display: grid;
  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
  min-height: 0;
}

.pane-task {
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--line);
  background: var(--s-0);
}

.pane-work {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  background: var(--s-1);
}

/* ---------------------------------------------------------------- brief */

.brief-kicker { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.brief h1 { font-size: var(--t-2xl); margin-bottom: var(--sp-3); }

.brief-idea {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  border-left-width: 3px;
  color: var(--ink);
  font-size: var(--t-lg);
  line-height: 1.5;
  margin-bottom: var(--sp-5);
}

.brief-block { margin-bottom: var(--sp-4); }
.brief-block p { color: var(--ink-body); }
.brief-block code {
  font-size: 0.92em;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--s-3);
  color: var(--brand-lift);
}

.brief pre, .taught-box pre {
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--s-2);
  border: 1px solid var(--line);
  overflow-x: auto;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-body);
  tab-size: 4;
}

.brief pre code { background: none; padding: 0; color: inherit; }

.brief-note {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--info-wash);
  border-left: 3px solid var(--info);
  font-size: var(--t-sm);
  color: var(--ink-body);
}

.watch {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--warn-edge);
  background: var(--warn-wash);
}
.watch h3 { font-size: var(--t-sm); color: var(--warn); margin-bottom: var(--sp-3); }
.watch ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.watch li { font-size: var(--t-sm); color: var(--ink-body); }
.watch code { background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px; }

.brief-cta { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); }

/* ----------------------------------------------------------------- task */

.task-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.task-kind.k-predict { background: var(--info-wash); color: var(--info); }
.task-kind.k-drill { background: var(--brand-wash); color: var(--brand-lift); }
.task-kind.k-debug { background: var(--warn-wash); color: var(--warn); }
.task-kind.k-build { background: var(--ok-wash); color: var(--ok); }
.task-kind.k-boss { background: var(--bad-wash); color: var(--bad); }

.task-prompt {
  margin: var(--sp-4) 0;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink);
}
.task-prompt code {
  font-family: var(--font-code);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--s-3);
  color: var(--brand-lift);
}

.hint-box, .taught-box {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--s-2);
  border: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-body);
}
.hint-box strong, .taught-box strong { display: block; color: var(--ink); margin-bottom: 6px; font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; }

.hint-cost { margin-top: var(--sp-4); font-size: var(--t-sm); color: var(--ink-faint); }

/* -------------------------------------------------------------- predict */

.choices { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }

.choice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  text-align: left;
  border-radius: var(--r-md);
  background: var(--s-2);
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--font-code);
  font-size: var(--t-sm);
  white-space: pre-wrap;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.choice:hover:not(:disabled) { border-color: var(--s-5); background: var(--s-3); }
.choice i {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  font-style: normal;
  color: var(--ink-mute);
}
.choice.right { border-color: var(--ok); background: var(--ok-wash); }
.choice.right i { background: var(--ok); color: #04180f; }
.choice.wrong { border-color: var(--bad); background: var(--bad-wash); }
.choice.wrong i { background: var(--bad); color: #2a0a0a; }

.why {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border-left: 3px solid var(--info);
  background: var(--info-wash);
  font-size: var(--t-sm);
  color: var(--ink-body);
}

/* --------------------------------------------------------------- editor */

.editor-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.editor-file { font-family: var(--font-code); font-size: var(--t-sm); color: var(--ink-mute); }
.editor-head .spacer { margin-left: auto; }

.editor-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: var(--s-0);
}

.gutter {
  padding: var(--sp-4) 0;
  text-align: right;
  font-family: var(--font-code);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-faint);
  background: var(--s-1);
  border-right: 1px solid var(--line-soft);
  overflow: hidden;
  user-select: none;
}
.gutter span { display: block; padding-right: 12px; }

#code {
  padding: var(--sp-4);
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-code);
  font-size: var(--t-sm);
  line-height: 1.6;
  tab-size: 4;
  white-space: pre;
  overflow: auto;
  caret-color: var(--brand-lift);
}

/* -------------------------------------------------------------- results */

.pane-out {
  border-top: 1px solid var(--line);
  background: var(--s-0);
  max-height: 46vh;
  overflow-y: auto;
}

.out-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--s-1);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.out-body {
  padding: var(--sp-4);
  font-family: var(--font-code);
  font-size: var(--t-sm);
  line-height: 1.65;
  white-space: pre-wrap;
  color: var(--ink-body);
  min-height: 60px;
}
.out-body.is-error { color: var(--bad); }
.out-body.is-empty { color: var(--ink-faint); font-family: var(--font-body); }

.cases { display: grid; gap: var(--sp-2); padding: var(--sp-4); }

.case {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--s-2);
  overflow: hidden;
}
.case.pass { border-color: var(--ok-edge); }
.case.fail { border-color: var(--bad-edge); }

.case-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  font-size: var(--t-sm);
  font-family: var(--font-code);
  color: var(--ink-body);
}
.case-mark { font-weight: 700; }
.case.pass .case-mark { color: var(--ok); }
.case.fail .case-mark { color: var(--bad); }
.case-reason { margin-left: auto; font-family: var(--font-body); font-size: var(--t-xs); color: var(--ink-mute); }

.diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.diff > div { background: var(--s-1); padding: var(--sp-3) var(--sp-4); }
.diff .label { margin-bottom: 6px; }
.diff pre { margin: 0; font-family: var(--font-code); font-size: var(--t-sm); white-space: pre-wrap; color: var(--ink-body); }
.diff .bad-line { color: var(--bad); }
.diff .ok-line { color: var(--ok); }
.diff mark {
  padding: 1px 2px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  background: color-mix(in srgb, currentColor 26%, transparent);
  color: inherit;
  box-shadow: inset 0 -2px 0 currentColor;
}

.rule-fail {
  margin: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--warn-edge);
  background: var(--warn-wash);
}
.rule-fail h4 { font-size: var(--t-sm); color: var(--warn); margin-bottom: var(--sp-2); }
.rule-fail ul { margin: 0; padding-left: 18px; }
.rule-fail li { font-size: var(--t-sm); color: var(--ink-body); }

.actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--s-1);
}
.actions .spacer { margin-left: auto; }
.verdict { font-size: var(--t-sm); font-weight: 600; }
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--bad); }

/* ------------------------------------------------------------- complete */

.done-screen {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
}
.done-screen h1 { font-size: var(--t-3xl); margin: var(--sp-4) 0 var(--sp-3); }
.done-screen > p { color: var(--ink-body); font-size: var(--t-lg); }

.done-seal {
  width: 76px; height: 76px;
  margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ok-wash);
  border: 2px solid var(--ok);
  color: var(--ok);
  font-size: 34px;
}

.rewards { display: flex; justify-content: center; gap: var(--sp-3); margin: var(--sp-6) 0; }
.reward {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--s-2);
  border: 1px solid var(--line);
  min-width: 108px;
}
.reward strong { display: block; font-family: var(--font-display); font-size: var(--t-2xl); color: var(--ink); }
.reward span { font-size: var(--t-xs); color: var(--ink-mute); }

.can-do {
  text-align: left;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--s-2);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}
.can-do h3 { font-size: var(--t-sm); margin-bottom: var(--sp-3); }
.can-do ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.can-do li { font-size: var(--t-sm); color: var(--ink-body); }

@media (max-width: 940px) {
  .room { height: auto; }
  .room-body { grid-template-columns: 1fr; }
  .pane-task { border-right: 0; border-bottom: 1px solid var(--line); }
  .editor-wrap { min-height: 300px; }
  .diff { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- phone
   The head was one unbreakable row: back link, breadcrumb, step rail, count
   and the language switcher. The rail alone is 26px per step plus gaps, so a
   ten-step unit measured 374px of fixed width and pushed the whole page 172px
   past a 375px viewport — sideways scroll on the one screen learners spend
   all their time on.

   The rail moves to its own row and its nodes become proportional instead of
   fixed, so it fills exactly one line whether the unit has four steps or
   twenty. Nothing is dropped: position is still readable at a glance. */
@media (max-width: 720px) {
  .room-head {
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }

  .room-where {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rail {
    order: 5;
    width: 100%;
    margin-left: 0;
  }

  .rail-node {
    width: auto;
    flex: 1 1 0;
    min-width: 4px;
  }

  .rail-node.now {
    width: auto;
    flex-grow: 2.2;
  }

  .rail-count {
    margin-left: var(--sp-2);
    flex: 0 0 auto;
  }

  /* Narrower gutters, not none: other room screens put their own content
     straight into this pane and would otherwise sit against the edge. */
  .pane-task { padding: var(--sp-5) var(--sp-4); }
  .editor-wrap { min-height: 260px; }
}

/* The way out of a dead end: the passage of the learner's own lesson that
   demonstrates what this task needs. Same slot and shape as the hint, marked
   with the brand edge because it is the last rung, not a second hint. */
.taught-box { border-left: 3px solid var(--brand); }
.taught-box strong { color: var(--brand-lift); }
.taught-box pre { background: var(--s-0); }
.taught-box p { margin: 0; }
.taught-box small { display: block; margin-top: var(--sp-3); color: var(--ink-faint); font-size: var(--t-xs); }

/* What is wrong with THIS code. Marked apart from the diff above it: the
   diff says what differed, this says what the learner did. */
.look {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--warn-wash, var(--brand-wash));
  border-left: 3px solid var(--warn, var(--brand));
}
.look strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn, var(--brand-lift));
}
.look p { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-body); }

/* Same box, said after a solution has ALREADY passed. Success colour, not the
   warning one: a shorter road is not a fault, and reading it as one would
   teach a learner to dread a correct answer. */
.look.is-good { background: var(--ok-wash); border-left-color: var(--ok-edge); }
.look.is-good strong { color: var(--ok); }
.look.is-good p + p { margin-top: var(--sp-2); }

/* Why the checker runs your program more than once. "Check · 0 / 2" was read
   as "it wants two lines of output"; this says what the two actually are. */
.out-why {
  margin: 0 0 var(--sp-3);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-faint);
}

/* The level badge, offered at the moment it is earned. Deliberately the
   brightest thing on the finish screen after the seal itself: a badge found
   later on a settings page is a badge nobody shares. */
.level-badge {
  max-width: 520px;
  margin: 0 auto var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  text-align: center;
}
.level-badge strong {
  display: block;
  margin-bottom: 6px;
  color: var(--brand-lift);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.level-badge p { margin: 0 0 var(--sp-4); font-size: var(--t-sm); color: var(--ink-body); }

/* SQL rows, the request log, the state of a repository. Three shapes only the
   last four units produce, and all three are read by scanning a column — so
   they are tables and lists, never a paragraph describing what happened. */
.rows { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.rows th, .rows td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--ink-body);
}
.rows th { color: var(--ink-faint); font-weight: 600; font-size: var(--t-xs); }
.rows tr:last-child th, .rows tr:last-child td { border-bottom: 0; }
.rows-empty { color: var(--ink-faint); font-size: var(--t-sm); font-style: italic; }
.calls { margin: 0; padding-left: 18px; font-size: var(--t-sm); color: var(--ink-body); }
.calls li { margin-bottom: 4px; }
.call-flag { color: var(--bad); font-size: var(--t-xs); }

/* Somewhere to type what the program reads.
   A unit about input() had nowhere to answer it: Run fed the step's own
   example silently, so the program never asked and never showed what it got.
   Only on steps that actually read something. */
.stdin-strip {
  display: grid;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--s-1);
}
.stdin-strip label {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
#stdin {
  width: 100%;
  resize: vertical;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--s-0);
  color: var(--ink-body);
  font: inherit;
  font-family: var(--font-code);
  font-size: var(--t-sm);
}