/* teacher.css — the control room above the dive: the teacher page (the Feedback step) and the research back office.
   Same type and tokens as the dive, darker water with two soft glows, hairlines instead of boxes (v7 console). */

body.console-page { color: var(--c-text); background: radial-gradient(1200px 600px at 85% -10%, rgba(31, 166, 179, .16), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(255, 106, 61, .06), transparent 60%), var(--c-bg); background-attachment: fixed; }
body.console-page .sea, body.console-page .ocean { display: none; }

/* ---- teacher ---- */
.desk { max-width: 1180px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 44px) 72px; }
.desk__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding-bottom: 20px; border-bottom: 1px solid var(--c-line); margin-bottom: clamp(32px, 6vh, 56px); }
.desk__links { margin-left: auto; display: flex; gap: 22px; }
.hero3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px; align-items: start; margin-bottom: clamp(40px, 7vh, 72px); }
.hero3 .otternote { align-self: center; }
.bigstat { display: grid; gap: 12px; }
.bigstat__n { font: 200 clamp(84px, 10vw, 136px)/.84 var(--wide); letter-spacing: -.065em; padding-bottom: .04em; }
.bigstat__t { font: 300 17px/1.45 var(--text); color: var(--c-text); max-width: 30ch; }
.otternote { display: flex; gap: 18px; align-items: center; padding-bottom: 6px; }
.otternote p { font: 300 clamp(19px, 2vw, 23px)/1.35 var(--text); letter-spacing: -.02em; color: var(--c-hi); }
.otternote p b { font-weight: 400; color: var(--no); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; gap: 44px; } }
.cols > section { display: grid; gap: 14px; align-content: start; }
.cols .kicker + * { margin-top: 2px; }
/* the evidence slips the teacher stamps are paper, like the learner's dive log */
.slip { position: relative; display: grid; gap: 8px; background: var(--paper); color: var(--paper-ink); border-radius: 6px 16px 16px 6px; padding: 14px 16px 14px 24px; }
.slip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 6px 0 0 6px; background: repeating-linear-gradient(180deg, #B58A52 0 10px, #C9A36A 10px 20px); }
.slip__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.slip__head b { font: 500 17px/1.2 var(--text); }
.slip__head span { font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-mute); }
.slip p { font-size: 15.5px; line-height: 1.45; }
.slip__photo { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; }
.slip .pill { justify-self: start; }
.slip__check { font: 400 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-mute); }
.slip .row { gap: 8px; }
.console-page .stamp--returned { --c: var(--no); }
.console-page .stamp--review { --c: var(--mid); }
.console-page .stamp--verified { --c: var(--ok); }
.console-page .stamp--commended { --c: var(--brass); background: rgba(214, 176, 122, .14); }
.nudge { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.nudge b { min-width: 76px; font-weight: 500; color: var(--c-hi); }
.nudge .small { color: var(--c-text); }
.nudge .stamp { margin-left: auto; transform: none; }
.alert { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; border: 1px solid rgba(255, 132, 102, .4); background: rgba(255, 132, 102, .06); color: var(--no); border-radius: 14px; padding: 12px 16px; margin-bottom: 32px; font-weight: 500; }
.alert .small { color: var(--c-text); font-weight: 400; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--c-text); }
.tbl th { text-align: left; font: 400 10px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-mute); padding: 6px 8px 10px 0; border-bottom: 1px solid var(--c-line-2); }
.tbl td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.tbl tr.me td { color: var(--glow); font-weight: 500; }
.tbl .stamp { transform: none; }
.console-page .stamp--had, .console-page .stamp--stamped { --c: var(--ok); }
.console-page .stamp--partly, .console-page .stamp--logged { --c: var(--mid); }
.console-page .stamp--missed, .console-page .stamp--planned { --c: var(--no); }
.console-page .stamp--none { --c: var(--c-mute); }
.console-page .slip .stamp--stamped { --c: var(--stamp-ok); }
.console-page .small, .console-page .note { color: var(--c-text); }
.desk__note { margin-top: 36px; max-width: 80ch; }

/* ---- research: left rail + one editorial headline per tab ---- */
.lab-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 860px) { .lab-shell { grid-template-columns: 1fr; } .rail { border-right: 0; border-bottom: 1px solid var(--c-line); } .rail nav { flex-direction: row; flex-wrap: wrap; } }
.rail { display: flex; flex-direction: column; gap: 14px; padding: 24px 18px; border-right: 1px solid var(--c-line); }
.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail__tab { text-align: left; padding: 9px 12px; border-radius: 10px; color: var(--c-mute); font: 500 14px/1.3 var(--text); }
.rail__tab:hover { color: var(--c-hi); }
.rail__tab[aria-current="true"] { color: var(--c-hi); background: rgba(255, 255, 255, .05); box-shadow: inset 2px 0 0 var(--glow); }
.rail__foot { margin-top: auto; }
.stage { padding: 44px clamp(18px, 4vw, 56px) 72px; max-width: 1000px; min-width: 0; }
.stage .tbl { display: block; overflow-x: auto; }      /* wide tables scroll inside themselves on a phone */
.vtitle { font: 200 clamp(44px, 6vw, 76px)/.95 var(--wide); letter-spacing: -.055em; margin: 12px 0 14px; padding-bottom: .06em; background: linear-gradient(180deg, #FFFFFF 0%, #EEF9F8 50%, #B9E7E8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vlede { color: var(--c-text); font: 300 18px/1.5 var(--text); max-width: 62ch; }
.vlede b { font-weight: 400; color: var(--c-hi); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 30px 0; border-top: 1px solid var(--c-line-2); }
.stat { padding: 14px 14px 0 0; display: grid; gap: 4px; align-content: start; }
.stat + .stat { padding-left: 14px; border-left: 1px solid var(--c-line); }
.stat b { font: 300 32px/1.05 var(--text); letter-spacing: -.035em; color: var(--c-hi); font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; line-height: 1.4; color: var(--c-text); }
.rules { display: grid; gap: 8px; max-width: 72ch; }
.rules .lab { margin-top: 18px; }
.rules p { color: var(--c-text); font-size: 15.5px; line-height: 1.55; }
.rules code { font: 400 13px var(--mono); color: var(--glow); }
.tbl--dark { margin-top: 14px; }
.note--dark { color: var(--c-mute); margin-top: 26px; font-size: 13.5px; }
.csv-out { margin-top: 16px; font: 400 12px/1.5 var(--mono); color: var(--c-text); border: 1px solid var(--c-line-2); border-radius: 10px; padding: 10px 12px; }
/* ship deck: the captain's switch (scooping on · off · win-win) */
.deckrules { display: grid; gap: 12px; padding: 18px 0 22px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin-bottom: clamp(32px, 6vh, 56px); }
.deckrules .row { gap: 10px; }
.deckrules .small { max-width: 80ch; }

/* ---- the review's additions (28 Oct) ---- */
/* the evidence board: two hypotheses in the W5 format, each a card with its facts and the demo controls that take a typed result */
.hyp { display: grid; gap: 14px; padding: 22px 0 26px; border-top: 1px solid var(--c-line); }
.hyp__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hyp__head .stamp { transform: none; } .hyp__res { font-weight: 400; color: var(--c-hi); }
.hyp__if { font: 300 clamp(19px, 2.2vw, 24px)/1.4 var(--text); letter-spacing: -.015em; color: var(--c-text); max-width: 60ch; } .hyp__if b { font-weight: 400; color: var(--c-hi); }
.hyp__grid { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 18px; max-width: 76ch; font-size: 15px; line-height: 1.5; margin: 0; }
.hyp__grid dt { font: 400 10px/1.8 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-mute); } .hyp__grid dd { color: var(--c-text); margin: 0; } .hyp__grid dd b { font-weight: 500; color: var(--c-hi); }
@media (max-width: 560px) { .hyp__grid { grid-template-columns: 1fr; gap: 2px 0; } .hyp__grid dd { margin-bottom: 8px; } }
.hyp__under { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hyp__means { font-size: 14.5px; line-height: 1.5; color: var(--c-mute); max-width: 70ch; margin: -4px 0 0; }
.hyp__edit { display: grid; gap: 10px; padding-top: 6px; } .hyp__edit .row { gap: 10px; } .hyp__edit .field { flex: 1 1 260px; max-width: 460px; font-size: 16px; padding: 6px 0 8px; }
.under { color: var(--c-mute); font-size: 13.5px; margin: -2px 0 20px; } .under b { color: var(--c-hi); font-weight: 400; } .under .textlink { padding: 0 0 0 6px; letter-spacing: .14em; }
/* the partner report */
.rep__lede { margin-bottom: clamp(32px, 6vh, 56px); display: grid; gap: 10px; }
.rep__title { font: 200 clamp(34px, 4.6vw, 58px)/1 var(--wide); letter-spacing: -.05em; padding-bottom: .06em; max-width: 20ch; }
.rep__stats .bigstat__n { font-size: clamp(60px, 7vw, 100px); }
@media (min-width: 1100px) { .rep__stats { grid-template-columns: repeat(4, 1fr); gap: 32px; } }   /* the four readings in one row on a laptop, not three and a straggler */
.rep__photos { display: flex; gap: 14px; flex-wrap: wrap; } .rep__photo { width: 160px; display: grid; gap: 8px; margin: 0; }
.rep__photo img, .rep__none { width: 160px; height: 112px; border-radius: 10px; object-fit: cover; }
.rep__none { display: grid; place-items: center; border: 1px dashed var(--c-line-2); color: var(--c-mute); font: 400 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 10px; }
.rep__photo figcaption { font-size: 13.5px; line-height: 1.4; color: var(--c-text); } .rep__photo figcaption b { font-weight: 500; color: var(--c-hi); }
.scale { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; counter-reset: s; margin: 10px 0 0; padding: 0; }
.scale li { display: grid; gap: 6px; align-content: start; padding: 14px 14px 14px 0; border-top: 1px solid var(--c-line-2); }
.scale li::before { counter-increment: s; content: counter(s); font: 300 28px/1 var(--text); color: var(--glow); } .scale b { font-weight: 500; color: var(--c-hi); } .scale span { font-size: 14px; line-height: 1.45; color: var(--c-text); }
/* "How it's run" on the partner report (29 Oct): a two-column list, the terms in the left column */
.howrun { margin-top: clamp(36px, 6vh, 56px); display: grid; gap: 14px; }
.howrun__grid { display: grid; grid-template-columns: minmax(120px, 170px) 1fr; gap: 10px 20px; margin: 0; }
.howrun__grid dt { font-weight: 500; color: var(--c-hi); } .howrun__grid dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--c-text); }
@media (max-width: 640px) { .howrun__grid { grid-template-columns: 1fr; gap: 4px; } .howrun__grid dd { margin-bottom: 10px; } }
/* 31 Oct: who makes a lesson, one row per step; the step is the row's heading. Below 760 px it stacks like the research tables. */
.howrun__who { font-size: 14px; line-height: 1.45; margin-bottom: 10px; } .howrun__who td:first-child { font-weight: 500; color: var(--c-hi); white-space: nowrap; }
@media (max-width: 760px) {
  .howrun__who, .howrun__who tbody, .howrun__who tr { display: block; } .howrun__who thead { display: none; }
  .howrun__who tr { padding: 10px 0 8px; border-bottom: 1px solid var(--c-line); }
  .howrun__who td { display: block; padding: 3px 0; border: 0; }
  .howrun__who td:first-child { font-size: 16px; padding-bottom: 4px; }
  .howrun__who td:not(:first-child)[data-label]::before { content: attr(data-label); display: block; font: 400 10px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-mute); }
}
/* the study's arm A: a plain lesson page (29 Oct) — deliberately a standard page, nothing of the game */
.lesson { max-width: 820px; } .lesson .vtitle { max-width: 24ch; } .lesson__who { margin-left: auto; }   /* the participant line at the right end of the bar, never over the wordmark */ .lesson__pic { display: block; width: 100%; max-width: 560px; border-radius: 10px; margin: 6px 0 10px; }
.lesson__body h2 { font: 500 20px/1.3 var(--text); color: var(--c-hi); margin: 26px 0 8px; } .lesson__body p, .lesson__body li { font-size: 16px; line-height: 1.6; color: var(--c-text); } .lesson__body ul { padding-left: 22px; }
.lesson__q { margin-top: 36px; display: grid; gap: 18px; } .lesson__q h2 { font: 500 22px/1.3 var(--text); color: var(--c-hi); margin: 0; }
.lesson__qq { border: 0; border-top: 1px solid var(--c-line); margin: 0; padding: 16px 0 4px; display: grid; gap: 10px; } .lesson__qq legend { padding: 0 0 8px; font-size: 16px; color: var(--c-hi); } .lesson__qq .cloze { font-size: 17px; line-height: 2.1; } .lesson__qq .blank { width: 9em; display: inline-block; margin: 0 4px; padding: 2px 6px; font-size: 16px; }
.lesson__score { font-size: 18px; color: var(--c-hi); } .lesson__score b { font-weight: 600; }
.lesson .pill { font: 500 14px/1 var(--text); letter-spacing: 0; text-transform: none; }   /* plain buttons on the plain page, not the game's mono pills */
/* the A-vs-B table (the evidence board, the study tab) */
.abx { margin-top: clamp(28px, 5vh, 44px); display: grid; gap: 12px; } .abx .kicker { align-items: center; gap: 12px; } .abx .kicker .stamp { transform: none; } .abx__t { display: block; overflow-x: auto; } .abx__t td, .abx__t th { white-space: nowrap; }
/* the audit log and study mode's steps */
.audit { margin-top: clamp(36px, 6vh, 56px); display: grid; gap: 14px; } .audit .mono, .study__steps .mono { color: var(--c-mute); white-space: nowrap; }
.audit .tbl, .study__steps { display: block; overflow-x: auto; }
@media (max-width: 640px) {   /* on a phone each audit entry stacks: when, who, the stamp to the right, what underneath — nothing scrolls sideways or clips */
  .audit .tbl { overflow: visible; } .audit thead { display: none; } .audit tbody { display: block; }
  .audit tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--c-line); }
  .audit td { display: block; padding: 0; border: 0; } .audit td:nth-child(2) { font-weight: 500; }
  .audit td:nth-child(3) { grid-column: 1 / -1; padding-top: 2px; } .audit td:nth-child(4) { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}

/* the happy path on the evidence board (29 Oct, round 5): the fixed scenario as a strip of steps, the feature tests at their steps */
.path { display: grid; gap: 12px; }
.path__lede { font-size: 14.5px; line-height: 1.5; color: var(--c-mute); max-width: 72ch; margin: 0; }
.path__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; list-style: none; margin: 2px 0 6px; padding: 0; }
.path__step { font: 500 13px/1.3 var(--text); color: var(--c-text); padding: 7px 12px; border: 1px solid var(--c-line); border-radius: 999px; }
.path__arrow { color: var(--c-mute); font-size: 13px; }
.path__line { font-size: 14.5px; line-height: 1.5; color: var(--c-text); max-width: 72ch; margin: 2px 0 6px; }
.path__t .textlink, .tbl--who .textlink { display: inline; min-height: 0; padding: 0; text-align: left; vertical-align: top; }   /* the owner column reads like the others: top-left, not centred in its row */

/* 29 Oct, round 5b: below 600 px every research table stacks — one block per row, the column's name over each value (data-label, set by
   app.js from the header) — so nothing scrolls sideways or is clipped. tbl--who: the first two cells are the block's heading (the step,
   the owner); tbl--arm: the first cell is (the arm, the participant). Desktops keep the tables. */
@media (max-width: 600px) {
  .stage .tbl, .abx__t { display: block; overflow: visible; }
  .stage .tbl thead { display: none; }
  .stage .tbl tbody, .stage .tbl tr { display: block; }
  .stage .tbl tr { padding: 12px 0 10px; border-bottom: 1px solid var(--c-line); }
  .stage .tbl td { display: block; padding: 4px 0; border: 0; white-space: normal; }
  .stage .tbl td[data-label]::before { content: attr(data-label); display: block; font: 400 10px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-mute); }
  .stage .tbl--who td:first-child, .stage .tbl--arm td:first-child { font-size: 16px; font-weight: 500; color: var(--c-hi); padding-bottom: 2px; }
  .stage .tbl--who td:first-child::before, .stage .tbl--who td:nth-child(2)::before, .stage .tbl--arm td:first-child::before { display: none; }
  .stage .tbl--who td:nth-child(2) { color: var(--c-mute); padding: 0 0 8px; }
  .stage .tbl--who td:nth-child(2) .textlink { color: var(--c-mute); }
  .stage .tbl tr.me td { color: var(--glow); }
}