/* ══ THE WEEKLY STATION SESSION ══════════════════════════════════════════════
   js/11g-station-pair.js (#screen-station) and js/11h-station-teacher.js
   (#screen-station-teacher).

   Numbered 28 after 27-coach-cohort.css. Same paper as every other screen in
   this product: broadsheet, ruled, agate mono labels, tabular figures, NO
   CARDS. A station board is exactly the element most likely to arrive as a
   grid of rounded tiles with a progress ring, so it is a ruled grid set in the
   same ink as the roster.

   TWO EXCEPTIONS, both earned by the room rather than by taste:

   1. THE CLOCK IS DISPLAY-SIZED. Ten students read it from a desk, across a
      table, at a glance, and it is the single number the whole surface exists
      to communicate. Everywhere else in this product a display figure is
      reserved for the one headline number on a screen; here it IS that number.

   2. THE EXCERPT GETS A LONGER MEASURE AND SERIF SETTING. Every other body of
      text in this product is UI copy read in seconds. This is 6,000 words of
      trade nonfiction read for twenty minutes, and the roster's 62ch UI measure
      would make a station actively unpleasant. 34em of Fraunces at 1.15 line
      length is a reading measure, not a dashboard measure.

   NOTHING ANIMATES ON A ROTATION. The screen re-renders when the class moves
   and a transition on that boundary reads as a jolt, not as polish — the same
   argument 03-api.js makes for keeping the fade to opacity only.
   ═══════════════════════════════════════════════════════════════════════════ */

.bs .stn, .bs .stt {
  --stn-measure: 900px;
  max-width: var(--stn-measure);
}

/* ── shared: labels, clock, facts ─────────────────────────────────────────── */

.bs .stn-label {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}

.bs .stn-head, .bs .stt-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--bs-ink);
}

.bs .stn-title {
  margin: 2px 0 0;
  font-family: var(--bs-ed);
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.05;
  color: var(--bs-ink);
}

.bs .stn-clockwrap { text-align: right; }

.bs .stn-clock {
  font-family: var(--bs-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 8vw, 68px);
  line-height: 1;
  color: var(--bs-ink);
}
/* Two minutes out. Colour ONLY — no pulse, no shake: a countdown that moves is
   read as an emergency by a room that is simply nearly finished.
   --bs-blue, not --bs-camel-deep: camel is a decorative token at 2.13:1 on the
   stock and test_palette_contrast bans it as type. The escalation is bronze
   then pen, and both are real text colours. */
.bs .stn-clock--soon { color: var(--bs-blue); }
.bs .stn-clock--out { color: var(--bs-pen); }

.bs .stn-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bs-rule);
}

.bs .stn-fact { display: flex; align-items: baseline; gap: 8px; }
.bs .stn-fact-k {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}
.bs .stn-fact-v {
  font-family: var(--bs-ui);
  font-size: 15px;
  color: var(--bs-ink);
}

/* ── failure and idle ─────────────────────────────────────────────────────── */

/* An empty panel reads "nothing on today" to a student standing in the room.
   A failure must look like one. */
.bs .stn-fail {
  margin: 20px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--bs-pen);
  background: var(--bs-stock-2);
}
.bs .stn-fail-what {
  font-family: var(--bs-ui);
  font-weight: 600;
  color: var(--bs-pen);
}
.bs .stn-fail-why {
  font-family: var(--bs-mono);
  font-size: 12px;
  margin-top: 4px;
  color: var(--bs-ink-2);
}
.bs .stn-retry {
  margin-top: 10px;
  font-family: var(--bs-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: none;
  border: 1px solid var(--bs-ink);
  color: var(--bs-ink);
  cursor: pointer;
}
.bs .stn-retry:hover { background: var(--bs-ink); color: var(--bs-sheet); }

.bs .stn-idle { padding: 40px 0; }
.bs .stn-idle-head {
  font-family: var(--bs-ed);
  font-size: 26px;
  color: var(--bs-ink);
}
.bs .stn-idle-sub {
  margin-top: 6px;
  font-family: var(--bs-ui);
  color: var(--bs-ink-3);
}

/* ── the work area ────────────────────────────────────────────────────────── */

.bs .stn-work { padding-top: 18px; }

.bs .stn-p {
  font-family: var(--bs-ed);
  font-size: 17px;
  line-height: 1.62;
  color: var(--bs-ink);
  margin: 0 0 .85em;
}

.bs .stn-handoff, .bs .stn-brief { max-width: 34em; }

/* A skills station lists each skill with its two ways in. The name leads, the
   controls sit to the right of it, and they wrap under the name on a phone
   rather than squeezing the name to nothing. */
.bs .stn-skill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--bs-rule);
}
.bs .stn-skill-name {
  flex: 1 1 12em;
  font-family: var(--bs-ed);
  font-size: 17px;
  color: var(--bs-ink);
}
/* The quiet one is the notes; practice is the action. Same control, different
   weight, so the pair reads as one choice rather than two buttons. */
.bs .stn-go--quiet {
  background: none;
  color: var(--bs-ink);
  border: 1px solid var(--bs-rule);
}
.bs .stn-go--quiet:hover { background: var(--bs-stock-2); }

/* On a phone the name takes its own line and the two controls sit together
   beneath it. Wrapping them independently split NOTES onto the name's row and
   PRACTISE onto the next, which reads as two unrelated controls. */
@media (max-width: 480px) {
  .bs .stn-skill { gap: 8px 10px; }
  .bs .stn-skill-name { flex: 1 1 100%; }
  .bs .stn-skill .stn-go { flex: 1 1 0; text-align: center; }
}

.bs .stn-go {
  margin-top: 6px;
  font-family: var(--bs-mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 18px;
  background: var(--bs-ink);
  border: 1px solid var(--bs-ink);
  color: var(--bs-sheet);
  cursor: pointer;
}
.bs .stn-go:hover { background: var(--bs-ink-2); }

/* ── sections ─────────────────────────────────────────────────────────────── */
/* The station is a cycle now — read ~350 words, answer on them, read the next.
   Each section is banded so the eye can tell where one passage ends and the
   next begins on a phone, where the whole thing is one long scroll. The rule
   above the header is the seam; the last section drops it so the page does not
   end on a line. */

.bs .stn-section + .stn-section {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 2px solid var(--bs-rule);
}

.bs .stn-sechead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Position is the loud half: "3 of 8" is what a student checks against the
   clock. The length is the quiet half, and it is also the denominator of the
   reading-rate measurement, so it is on screen rather than only in the data. */
.bs .stn-secpos { color: var(--bs-ink); font-weight: 500; }
.bs .stn-seclen { color: var(--bs-ink-3); }

/* Inside a section the excerpt is no longer the end of the station, so it drops
   the closing rule and the drop-cap flourish that belonged to a single opening
   passage. */
.bs .stn-section .stn-excerpt {
  padding-bottom: 0;
  border-bottom: none;
}
.bs .stn-section .stn-excerpt .stn-p:first-child::first-line {
  font-variant-caps: normal;
  letter-spacing: normal;
}
.bs .stn-section .stn-questions { padding-top: 18px; }

/* ── the excerpt ──────────────────────────────────────────────────────────── */

.bs .stn-readmeta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bs-rule);
}

/* A reading measure, not a dashboard measure — see the header note. */
.bs .stn-excerpt {
  max-width: 34em;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--bs-rule);
}
.bs .stn-excerpt .stn-p:first-child::first-line {
  font-variant-caps: small-caps;
  letter-spacing: .02em;
}

/* ── questions ────────────────────────────────────────────────────────────── */

.bs .stn-questions { padding-top: 24px; }

.bs .stn-qhead {
  margin: 0 0 16px;
  font-family: var(--bs-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-2);
}

.bs .stn-q {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: 0 14px;
  padding: 18px 0;
  border-top: 1px solid var(--bs-rule);
}

.bs .stn-qnum {
  font-family: var(--bs-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  color: var(--bs-blue);
  line-height: 1.2;
}

.bs .stn-qprompt {
  margin: 0 0 10px;
  font-family: var(--bs-ed);
  font-size: 17px;
  line-height: 1.5;
  color: var(--bs-ink);
  max-width: 40em;
}

.bs .stn-answer {
  width: 100%;
  max-width: 40em;
  font-family: var(--bs-ui);
  font-size: 15px;
  line-height: 1.55;
  padding: 10px 12px;
  color: var(--bs-ink);
  background: var(--bs-sheet);
  border: 1px solid var(--bs-rule);
  resize: vertical;
}
.bs .stn-answer:focus {
  outline: none;
  border-color: var(--bs-ink);
  box-shadow: inset 0 -2px 0 var(--bs-camel);
}

.bs .stn-save {
  min-height: 1.2em;
  margin-top: 4px;
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}
.bs .stn-save--ok { color: var(--bs-ok); }
/* Loud. A silent save failure loses a whole answer and the student finds out
   when the class discusses it without them. */
.bs .stn-save--bad {
  color: var(--bs-pen);
  font-weight: 700;
  letter-spacing: .06em;
}

/* ── the teacher console ──────────────────────────────────────────────────── */

.bs .stt-rot {
  font-family: var(--bs-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  color: var(--bs-ink);
}

.bs .stt-advance {
  font-family: var(--bs-mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 20px;
  background: var(--bs-ink);
  border: 1px solid var(--bs-ink);
  color: var(--bs-sheet);
  cursor: pointer;
}
.bs .stt-advance:hover:not(:disabled) { background: var(--bs-ink-2); }
.bs .stt-advance:disabled { opacity: .5; cursor: default; }
.bs .stt-advance--bad { background: var(--bs-pen); border-color: var(--bs-pen); }

.bs .stt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 0;
  margin: 22px 0 34px;
  border-top: 1px solid var(--bs-rule);
}

/* Ruled columns, not tiles — the rule between stations is the only separator. */
.bs .stt-station {
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--bs-rule);
  border-right: 1px solid var(--bs-rule);
}
.bs .stt-station:last-child { border-right: none; }
.bs .stt-station--empty { background: var(--bs-stock-2); }

.bs .stt-sthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.bs .stt-answered {
  font-family: var(--bs-mono);
  font-size: 11px;
  color: var(--bs-ok);
}
/* Nobody at a reading station has started writing. Not an error — the thing a
   teacher crossing the room wants to know, so bronze rather than pen. */
.bs .stt-answered--none { color: var(--bs-blue); }

.bs .stt-stname {
  margin: 6px 0 10px;
  font-family: var(--bs-ed);
  font-size: 17px;
  line-height: 1.2;
  color: var(--bs-ink);
}

.bs .stt-who { margin: 0; padding: 0; list-style: none; }
.bs .stt-person {
  font-family: var(--bs-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bs-ink-2);
}
.bs .stt-nobody {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-graphite);
}

/* ── responses ────────────────────────────────────────────────────────────── */

.bs .stt-panelhead {
  margin: 0 0 12px;
  font-family: var(--bs-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-2);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--bs-ink);
}

.bs .stt-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.bs .stt-qtab {
  font-family: var(--bs-mono);
  font-size: 12px;
  letter-spacing: .08em;
  padding: 6px 11px;
  background: none;
  border: 1px solid var(--bs-rule);
  color: var(--bs-ink-2);
  cursor: pointer;
}
.bs .stt-qtab:hover { border-color: var(--bs-ink); color: var(--bs-ink); }
.bs .stt-qtab[aria-current="true"] {
  background: var(--bs-ink);
  border-color: var(--bs-ink);
  color: var(--bs-sheet);
}

.bs .stt-prompt {
  max-width: 40em;
  margin-bottom: 16px;
  font-family: var(--bs-ed);
  font-size: 16px;
  line-height: 1.5;
  color: var(--bs-ink);
}

.bs .stt-answer {
  padding: 12px 0;
  border-top: 1px solid var(--bs-rule);
}
.bs .stt-answer-who {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.bs .stt-answer-name {
  font-family: var(--bs-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-ink);
}
.bs .stt-answer-read {
  font-family: var(--bs-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--bs-graphite);
}
.bs .stt-answer-body {
  margin: 0;
  max-width: 44em;
  font-family: var(--bs-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bs-ink-2);
  white-space: pre-wrap;
}

/* ── the start control ────────────────────────────────────────────────────── */

/* Ruled rows, like the board's columns. The distinction that matters is REAL
   WEEK vs REHEARSAL, and it is carried by three things at once — the camel rule
   down the live row, the mark in the corner, and the arm step — because one
   signal is one thing to overlook when the room is filling up. */

.bs .stt-plans { margin-top: 4px; }

.bs .stt-plans-wait {
  font-family: var(--bs-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  padding: 14px 0;
}

.bs .stt-plan {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'head head' 'main act';
  align-items: end;
  gap: 4px 20px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--bs-rule);
}
.bs .stt-plan:last-child { border-bottom: 1px solid var(--bs-rule); }

/* The real week: full sheet, a camel spine, and the type at reading weight. */
.bs .stt-plan--live {
  border-left: 3px solid var(--bs-camel);
  background: var(--bs-sheet);
}

/* The rehearsal: recessed stock, the same treatment the board gives an empty
   station, so it reads as scaffolding rather than as this week. */
.bs .stt-plan--rehearsal {
  border-left: 3px solid var(--bs-rule);
  background: var(--bs-stock-2);
}

.bs .stt-plan-head {
  grid-area: head;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.bs .stt-plan-mark {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* PEN, NOT CAMEL. Camel is 2.13:1 against the stock and is decorative-only —
   tests/test_palette_contrast.py bans it as a `color:` for exactly the reason it
   was reached for here: it looks fine to whoever wrote it, at a large bold
   specimen. This mark warns that a click seats twelve real children, so it has
   to be legible first and alarming second, and the pen red is both. */
.bs .stt-plan--live .stt-plan-mark { color: var(--bs-pen); font-weight: 700; }
.bs .stt-plan--rehearsal .stt-plan-mark { color: var(--bs-graphite); }

.bs .stt-plan-week {
  font-family: var(--bs-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--bs-ink-3);
}

.bs .stt-plan-main { grid-area: main; }

.bs .stt-plan-title {
  font-family: var(--bs-ed);
  font-size: 21px;
  line-height: 1.2;
  color: var(--bs-ink);
}
.bs .stt-plan--rehearsal .stt-plan-title {
  font-size: 18px;
  color: var(--bs-ink-3);
}

.bs .stt-plan-meta {
  margin-top: 4px;
  font-family: var(--bs-ui);
  font-size: 13px;
  color: var(--bs-ink-3);
}

.bs .stt-plan-act { grid-area: act; }

.bs .stt-start {
  font-family: var(--bs-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 18px;
  background: var(--bs-ink);
  border: 1px solid var(--bs-ink);
  color: var(--bs-sheet);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.bs .stt-start:hover:not(:disabled) { background: var(--bs-ink-2); }
.bs .stt-start:focus-visible { outline: 2px solid var(--bs-camel); outline-offset: 2px; }
.bs .stt-start:disabled { opacity: .45; cursor: default; }

/* A rehearsal is one click, and is dressed down so it cannot be mistaken for
   the live week's button at a glance. */
.bs .stt-start--rehearsal {
  background: none;
  color: var(--bs-ink-2);
  border-color: var(--bs-graphite);
}
.bs .stt-start--rehearsal:hover:not(:disabled) {
  background: var(--bs-ink-2);
  color: var(--bs-sheet);
}

.bs .stt-start--resume { background: var(--bs-ok); border-color: var(--bs-ok); }
.bs .stt-start--bad { background: var(--bs-pen); border-color: var(--bs-pen); }

/* The armed confirm for a real cohort. Spans the row so it cannot be missed and
   cannot be dismissed by a stray Enter on the button behind it. */
.bs .stt-arm {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bs-sheet);
  border: 1px solid var(--bs-camel);
  border-left-width: 3px;
}

.bs .stt-arm-q {
  margin: 0;
  max-width: 46em;
  font-family: var(--bs-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bs-ink);
}

.bs .stt-arm-seed {
  margin: 8px 0 12px;
  font-family: var(--bs-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--bs-ink-3);
}

.bs .stt-arm-go {
  font-family: var(--bs-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 18px;
  background: var(--bs-camel-deep);
  border: 1px solid var(--bs-camel-deep);
  color: var(--bs-sheet);
  cursor: pointer;
}
.bs .stt-arm-go:hover:not(:disabled) { background: var(--bs-ink); border-color: var(--bs-ink); }
.bs .stt-arm-go:disabled { opacity: .5; cursor: default; }

.bs .stt-arm-no {
  margin-left: 10px;
  font-family: var(--bs-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 14px;
  background: none;
  border: none;
  color: var(--bs-ink-3);
  cursor: pointer;
  text-decoration: underline;
}
.bs .stt-arm-no:hover { color: var(--bs-ink); }

.bs .stt-end {
  margin-left: 10px;
  font-family: var(--bs-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 16px;
  background: none;
  border: 1px solid var(--bs-rule);
  color: var(--bs-ink-3);
  cursor: pointer;
}
.bs .stt-end:hover:not(:disabled) { border-color: var(--bs-pen); color: var(--bs-pen); }
.bs .stt-end:disabled { opacity: .5; cursor: default; }

/* ── phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .bs .stn-head, .bs .stt-bar { gap: 10px; }
  .bs .stn-clockwrap { text-align: left; }
  .bs .stn-q { grid-template-columns: 1fr; gap: 6px; }
  .bs .stn-qnum { font-size: 16px; }
  .bs .stt-station { border-right: none; }
  .bs .stt-plan {
    grid-template-columns: 1fr;
    grid-template-areas: 'head' 'main' 'act';
    align-items: start;
  }
  .bs .stt-plan-act { margin-top: 12px; }
  .bs .stt-start { width: 100%; }
}