:root {
  --ink: #14181f;
  --muted: #5b6470;
  --faint: #8b939e;
  --line: #e2e5e9;
  --line-soft: #eef0f3;
  --surface: #ffffff;
  --canvas: #f5f6f8;
  --accent: #17706b;
  --accent-soft: #e6f1f0;
  --accent-line: #b9d7d4;
  --miss: #b3261e;
  --miss-soft: #fbeceb;
  --warn: #8a6410;
  --warn-soft: #f7efdc;
  --radius: 10px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--canvas); color: var(--ink);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: -0.01em; }

button {
  font-family: inherit; font-size: 15px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: 12px 16px; cursor: pointer;
  touch-action: manipulation;
}
button:active { transform: scale(0.985); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button:disabled { opacity: 0.45; cursor: default; }
button.wide { width: 100%; }
button.link {
  border: 0; background: none; color: var(--accent); padding: 10px 0 0;
  font-size: 14px; font-weight: 600;
}

input, select, textarea {
  font-family: inherit; font-size: 16px; width: 100%;
  padding: 12px 13px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-line); outline-offset: -1px;
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px;
}
.card.mt, .mt { margin-top: 12px; }
.center { text-align: center; }
.pad-lg { padding: 34px 20px; }
.pad-xl { padding: 48px 20px; }
.muted { color: var(--faint); font-size: 14px; }
.empty { font-size: 13px; color: var(--faint); margin: 0; }

.label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--faint); font-weight: 600;
}
.lede { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; }
.lede.center { text-align: center; }
.err { font-size: 13px; color: var(--miss); margin: 10px 0 0; }
.cnt { font-size: 15px; font-weight: 700; }
.big { font-size: 26px; font-weight: 700; }
.rowb { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ------------------------------------------------------------ phone client */

.phone-wrap { max-width: 520px; margin: 0 auto; padding: 14px 14px 40px; min-height: 100vh; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 2px 14px;
}
.topbar .t1 { font-size: 15px; font-weight: 600; line-height: 1.25; }
.topbar .t2 { font-size: 12px; color: var(--faint); margin-top: 2px; }
.chip {
  font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}

.field { margin-bottom: 14px; }
.field > .label { display: block; margin-bottom: 7px; }
.opts { display: grid; gap: 8px; }
.opt {
  display: block; width: 100%; text-align: left; padding: 13px 14px;
  font-size: 15px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); line-height: 1.35;
}
.opt[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); font-weight: 600;
}

.hero { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.hero .pct { font-size: 24px; font-weight: 600; }
.hero-sm { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.bandname { font-size: 16px; font-weight: 600; color: var(--accent); margin-top: 6px; }
.qtext { font-size: 17px; line-height: 1.45; margin: 16px 0 14px; font-weight: 500; }

.progress { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s; }

.sheet {
  display: grid;
  grid-template-columns: calc(7ch + 8px) calc(8ch + 8px) calc(8ch + 8px) calc(5ch + 8px) minmax(0, 1fr);
  gap: 3px; font-family: var(--mono); font-size: 11px; user-select: none;
}
.sheet .hd {
  font-family: var(--sans); font-size: 10px; font-weight: 600; color: var(--faint);
  padding: 4px 3px 6px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2;
}
.sheet .cl {
  padding: 12px 4px; min-height: 46px; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 6px;
  color: var(--ink); white-space: nowrap; line-height: 1.3;
  touch-action: manipulation; cursor: pointer;
}
.sheet .cl.c5 { white-space: normal; word-break: break-word; }
.sheet .cl.hit { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sheet .cl.miss { background: var(--miss-soft); border-color: var(--miss); color: var(--miss); }

.feedback { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); min-height: 40px; }
.feedback.good { color: var(--accent); }
.feedback.bad { color: var(--miss); }
.misscount { font-size: 12px; color: var(--faint); margin-top: 2px; }

.answer { border-top: 1px solid var(--line-soft); padding: 13px 0; }
.answer:first-child { border-top: 0; }
.a-top { display: flex; align-items: center; gap: 8px; }
.a-mark {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
}
.a-mark.no { background: var(--faint); }
.a-label { font-size: 14px; font-weight: 600; }
.a-why { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 6px 0 0 28px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  font-size: 13px; padding: 9px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}
.chip-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

table.piv { width: 100%; border-collapse: collapse; font-size: 13px; }
table.piv th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--faint); font-weight: 600; padding: 0 6px 7px; border-bottom: 1px solid var(--line);
}
table.piv td { padding: 9px 6px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
table.piv td.num, table.piv th.num { text-align: right; }
table.piv tr:last-child td { border-bottom: 0; }

.dq { border-top: 1px solid var(--line-soft); padding: 12px 0; }
.dq:first-child { border-top: 0; }
.dq-t { font-size: 14px; font-weight: 500; margin: 0 0 9px; line-height: 1.4; }

.refrow { border-top: 1px solid var(--line-soft); padding: 14px 0; }
.refrow:first-child { border-top: 0; }
.refq { font-size: 14px; line-height: 1.45; margin: 0 0 9px; font-weight: 500; }
.stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line-soft); }
.seg { height: 100%; }
.seg-allow { background: var(--accent); }
.seg-guardrail { background: #d0a43c; }
.seg-block { background: var(--miss); }
.reflg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px; font-size: 12px; color: var(--muted); }
.reflg .votes { color: var(--faint); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dot-allow { background: var(--accent); }
.dot-guardrail { background: #d0a43c; }
.dot-block { background: var(--miss); }
.mine { font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 6px; }
.bysize { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.bschip { font-size: 11px; color: var(--faint); background: var(--canvas); padding: 4px 8px; border-radius: 6px; }

.exrow { border-top: 1px solid var(--line-soft); padding: 10px 0; }
.exrow:first-child { border-top: 0; }
.ex-t { font-size: 14px; line-height: 1.4; }
.ex-m { font-size: 12px; color: var(--faint); margin-top: 3px; }

.promptbox {
  margin-top: 10px; padding: 12px; background: var(--canvas);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto;
}

/* ----------------------------------------------------- phone: teach phases */

/* The idle screen while somebody is talking. One slow dot, nothing to read. */
.idledot {
  width: 12px; height: 12px; border-radius: 50%; margin: 0 auto;
  background: var(--accent); animation: idlepulse 2.4s ease-in-out infinite;
}
@keyframes idlepulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .idledot { animation: none; opacity: 0.7; }
}

/* ------------------------------------------------------ phone: roster join */

.hits { margin-top: 8px; display: grid; gap: 6px; }
/* NOT .hit: that is the autopsy grid's found-cell state, and reusing the name
   here restyled every found cell to 15px inside a column sized for 11px, which
   clipped the value the moment someone got one right. */
.namehit {
  display: block; width: 100%; text-align: left; padding: 11px 13px;
  font-size: 15px; line-height: 1.3;
}
.pn-co { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.taken { display: block; font-size: 11px; color: var(--warn); margin-top: 3px; font-weight: 600; }
.picked-name {
  padding: 12px 13px; border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: var(--radius); font-size: 16px; font-weight: 600; color: var(--accent);
}
.picked-name .pn-co { color: var(--accent); opacity: 0.75; font-weight: 500; }

/* An anchor that has to read as a button (the toolkit link opens a new tab,
   so it cannot be a real button). */
a.btn {
  display: block; text-align: center; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: 12px 16px; font-size: 15px; font-weight: 600;
}

.brow { margin-bottom: 10px; }
.bh { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.bp { font-weight: 700; font-variant-numeric: tabular-nums; }
.bt { height: 10px; background: var(--line-soft); border-radius: 5px; overflow: hidden; }
.bf { height: 100%; background: var(--accent); border-radius: 5px; transition: width 0.35s; }
.bf.cold { background: var(--miss); }

/* ------------------------------------------------------ presenter console */

/* Bottom padding clears the floating stepper. Without it the arrows sit on top
   of the last row of whatever board is on screen. */
.pres { padding: 16px 20px 108px; max-width: 1640px; margin: 0 auto; }
.pres-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.phasebar { display: flex; gap: 6px; flex-wrap: wrap; }
.stagebtn {
  padding: 9px 16px; font-size: 13px; font-weight: 600; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}
.stagebtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.console { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start; }
.rail { padding: 12px; position: sticky; top: 14px; }
.rail-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 6px 10px; }
.rail-clock { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rail-i {
  display: flex; align-items: center; gap: 8px; padding: 8px 6px;
  border-radius: 6px; cursor: pointer; border-left: 2px solid transparent;
}
.rail-i:hover { background: var(--canvas); }
.rail-i.on { background: var(--accent-soft); border-left-color: var(--accent); }
.rail-i.on .rl { color: var(--accent); font-weight: 600; }
.rail-n { width: 16px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rl { font-size: 13px; flex: 1; line-height: 1.25; }
.rsub { display: block; font-size: 11px; color: var(--faint); font-weight: 400; margin-top: 1px; }
.rm { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rail-i.done .rl, .rail-i.done .rsub, .rail-i.done .rm { color: var(--faint); }
.rail-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); text-align: center; }
.qr-mini img { width: 100%; max-width: 150px; height: auto; image-rendering: pixelated; }
.qrurl { font-family: var(--mono); font-size: 11px; font-weight: 600; margin-top: 6px; word-break: break-all; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.metric .m-v { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.metric .m-l {
  font-size: 11px; color: var(--faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;
}

.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; align-items: start; }

.bar-row { margin-bottom: 12px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 5px; }
.bar-head .bl { font-weight: 500; }
.bar-track { height: 12px; background: var(--line-soft); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width 0.4s; }
.bar-fill.cold { background: var(--miss); }
.bar-note { font-size: 12px; color: var(--faint); margin-top: 4px; line-height: 1.45; }

table.lb { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; }
table.lb th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--faint); font-weight: 600; padding: 0 8px 8px; border-bottom: 1px solid var(--line);
}
table.lb td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
table.lb tr:last-child td { border-bottom: 0; }
table.lb td.num, table.lb th.num { text-align: right; }
table.lb tr.total td { border-top: 2px solid var(--line); font-weight: 700; border-bottom: 0; }

.dist { display: flex; align-items: flex-end; gap: 5px; height: 110px; }
.d-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.d-bar { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; transition: height 0.4s; }
.d-n { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.d-v { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

.bigclock { font-size: 92px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 14px 0 0; font-variant-numeric: tabular-nums; }
.bigq { font-size: 24px; line-height: 1.35; font-weight: 500; margin: 12px 0 0; }
.pq { font-size: 14px; line-height: 1.5; margin: 6px 0 14px; color: var(--muted); }

.specrow { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-soft); padding: 11px 0; }
.specrow:first-child { border-top: 0; }
.specrow.picked { background: var(--accent-soft); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.spec-b { flex: 1; min-width: 0; }
.spec-t { font-size: 14px; line-height: 1.4; }
.spec-m { font-size: 12px; color: var(--faint); margin-top: 3px; }
.spec-a { display: flex; gap: 6px; flex: 0 0 auto; }
.spec-a button { padding: 8px 12px; font-size: 13px; }

.card.warn { border-color: var(--warn); background: var(--warn-soft); }

/* ------------------------------------------------------- console: the deck */

.stagebtn.teach { border-style: dashed; }
.stagebtn.teach.on { border-style: solid; }

.slide {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 46px 52px 22px; min-height: 460px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.slide-body { flex: 1; }
.slide-t { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; }
.slide-lead { font-size: 21px; line-height: 1.45; color: var(--muted); margin: 14px 0 0; max-width: 34em; }
.slide-pts { margin: 30px 0 0; padding-left: 24px; max-width: 40em; }
.slide-pts li { font-size: 21px; line-height: 1.5; margin-bottom: 16px; }
.slide-pts li:last-child { margin-bottom: 0; }
.slide-img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* Slide diagrams. Three shapes, all built from the same tokens as the rest of
   the console so a slide never looks like it came from somewhere else. */
.g-steps { display: flex; align-items: stretch; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.g-step {
  flex: 1 1 0; min-width: 120px; padding: 16px 18px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 10px; font-size: 17px; line-height: 1.35; color: var(--ink);
  display: flex; align-items: center;
}
.g-arrow { align-self: center; color: var(--accent); font-size: 22px; flex: 0 0 auto; }

.g-cols { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.g-col {
  flex: 1 1 0; min-width: 150px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.g-h {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; color: var(--accent); margin-bottom: 8px;
}
.g-b { font-size: 16px; line-height: 1.45; color: var(--ink); }
.g-b.mono { font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: nowrap; }

/* A small bar chart on a slide. Same bones as the dashboard bars, sized to be
   read from the back of the room. */
.g-bars { margin-top: 30px; max-width: 640px; }
.g-bar { margin-bottom: 16px; }
.g-bar:last-child { margin-bottom: 0; }
.g-bar-head {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 16px; margin-bottom: 6px;
}
.g-bar-head b { font-variant-numeric: tabular-nums; }
.g-bar-track { height: 14px; background: var(--line-soft); border-radius: 7px; overflow: hidden; }
.g-bar-fill { height: 100%; background: var(--accent); border-radius: 7px; }
.g-bar-fill.soft { background: var(--accent-line); }
body.screenmode .g-bars { max-width: 900px; margin-top: clamp(14px, 3vh, 30px); }
body.screenmode .g-bar-head { font-size: clamp(15px, 2.2vh, 21px); }
body.screenmode .g-bar-track { height: clamp(12px, 2.2vh, 20px); }

body.screenmode .g-step {
  font-size: clamp(15px, 2.2vh, 21px); padding: clamp(11px, 2.2vh, 20px) 22px;
}
body.screenmode .g-b { font-size: clamp(15px, 2.1vh, 20px); }
body.screenmode .g-b.mono { font-size: clamp(12px, 1.7vh, 16px); }
body.screenmode .g-steps,
body.screenmode .g-cols { margin-top: clamp(14px, 3vh, 30px); }
.slide-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.slide-n { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.sdots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.sdot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--line);
  cursor: pointer; transition: background 0.2s;
}
.sdot.on { background: var(--accent); }
.slide-nav { display: flex; gap: 8px; }
.slide-nav button { padding: 9px 18px; font-size: 14px; }
.pnote { font-size: 15px; line-height: 1.55; margin: 8px 0 0; }

/* Screen mode is the projector: the deck takes the whole width and the run
   order rail gets out of the way. */
body.screenmode.teaching .console { grid-template-columns: minmax(0, 1fr); }
body.screenmode.teaching .rail { display: none; }
/* Sized off the viewport height, not off a fixed number. A five-bullet slide at
   27px runs off the bottom of a 760px screen, and the bottom of the screen is
   where the last bullet lives. Clamped so it still reads big on a real
   projector and never shrinks below legible on a laptop. */
body.screenmode .slide { min-height: 72vh; padding: clamp(28px, 5vh, 60px) 68px 26px; }
body.screenmode .slide-t { font-size: clamp(30px, 5.4vh, 56px); }
body.screenmode .slide-lead { font-size: clamp(17px, 2.7vh, 27px); margin-top: clamp(8px, 1.6vh, 14px); }
body.screenmode .slide-pts { margin-top: clamp(14px, 3vh, 30px); }
body.screenmode .slide-pts li {
  font-size: clamp(16px, 2.6vh, 27px); margin-bottom: clamp(9px, 2vh, 22px);
}

/* ---------------------------------------------------- console: showcase Q&A */

.qlist { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 4px; }
.qrow { font-size: 14px; line-height: 1.45; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.qrow:last-child { border-bottom: 0; }
.qt { font-size: 11px; color: var(--faint); font-weight: 600; margin-right: 8px;
      text-transform: uppercase; letter-spacing: 0.04em; }

body.screenmode .hide-on-screen { display: none !important; }
body.screenmode .metric .m-v { font-size: 42px; }
body.screenmode table.lb { font-size: 17px; }
body.screenmode .bar-head { font-size: 16px; }
body.screenmode .refq { font-size: 17px; }
body.screenmode .spec-t { font-size: 17px; }
body.screenmode .qrow { font-size: 17px; }

/* ------------------------------------------------- phone: sort game (basics) */

.sortcard {
  margin: 16px 0 14px; padding: 22px 16px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--canvas); font-size: 19px; line-height: 1.35; font-weight: 600;
}
.sort2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sort2 .opt { text-align: center; font-weight: 600; padding: 16px 10px; }
.sort2 .opt:disabled { opacity: 1; }
.sort2 .opt.right {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.sort2 .opt.wrong {
  border-color: var(--miss); background: var(--miss-soft); color: var(--miss);
}

/* --------------------------------------------------- phone: pulse ladders */

.ladq { font-size: 14px; color: var(--muted); line-height: 1.4; margin: 6px 0 10px; }
.rungs { display: grid; gap: 6px; }
.rung {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; font-size: 14px; line-height: 1.35; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.rung .rn {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; font-size: 11px;
  font-weight: 700; display: grid; place-items: center; color: var(--faint);
  border: 1px solid var(--line);
}
.rung.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rung.on .rn { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ----------------------------------------------------- phone: prompt lab */

/* The live one gets an accent edge so it reads as the thing being built
   rather than as a block of output. */
.promptbox.live { border-color: var(--accent-line); background: var(--accent-soft); }

/* ------------------------------------------------- console: prompt lab wall */

.promptwall {
  margin-top: 14px; padding: 16px 18px; background: var(--canvas);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  font-family: var(--mono); font-size: 13px; line-height: 1.55; white-space: pre-wrap;
}
.promptwall.lazy { color: var(--muted); font-style: italic; }
body.screenmode .promptwall { font-size: 18px; line-height: 1.6; }
.blockrow { margin-bottom: 16px; }
.blockrow:last-child { margin-bottom: 0; }
.blk-h {
  display: flex; justify-content: space-between; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint);
  margin-bottom: 8px;
}

/* -------------------------------------------------- console: step-through */

/* Two arrows, always in the same place, that walk the run order. The presenter
   holds a clicker; this is what the clicker is pressing. */
.stepper {
  position: fixed; right: 18px; bottom: 18px; display: flex; align-items: center;
  gap: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 6px 20px rgba(15, 20, 30, 0.12); z-index: 40;
}
.stepper button { font-size: 18px; line-height: 1; padding: 10px 16px; }
.stepper button:disabled { opacity: 0.35; }
.stepn { text-align: center; min-width: 44px; font-variant-numeric: tabular-nums; }
.stepn b { display: block; font-size: 15px; }
.stepn span { display: block; font-size: 10px; color: var(--faint); }

.fullhint {
  position: fixed; right: 18px; bottom: 18px; padding: 8px 12px; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; color: var(--muted); transition: opacity 0.6s;
}
.fullhint.gone { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------- the projector view */

/* Everything the audience should never see is either absent from the payload
   or gone from the layout here. The rail carries the clock and the run order,
   which is the presenter's business and nobody else's. */
body.audience .rail { display: none; }
body.audience .console { grid-template-columns: minmax(0, 1fr); }
body.audience .pres { max-width: none; padding: 0; }
body.audience .stepper { display: none; }
/* No header on the wall. The module name and its one-liner are presenter
   furniture; a slide carries its own title. */
body.audience .pres-top { display: none; }
body.audience .slide { min-height: 96vh; border: 0; border-radius: 0; }
body.audience { cursor: default; }

.slide.aud { display: block; padding: 54px 64px; }
.slide.aud .slide-t { font-size: 52px; }
.slide.aud .slide-lead { font-size: 25px; max-width: 46em; }
.aud-body { margin-top: 34px; }
.slide.center-slide { display: grid; place-content: center; text-align: center; }

/* Big numbers, three at most. A wall can hold three numbers; a dashboard row
   of eight is something you read on a laptop. */
.audstats { display: flex; gap: 56px; margin-bottom: 30px; flex-wrap: wrap; }
.audstats b {
  display: block; font-size: 62px; line-height: 1; letter-spacing: -0.03em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.audstats span {
  display: block; margin-top: 8px; font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted);
}

.audbars .bar-row { margin-bottom: 18px; }
.audbars .bar-head { font-size: 21px; }
.audbars .bar-track { height: 16px; }
.audbars .bar-note { font-size: 15px; line-height: 1.45; }

.audbig { font-size: 30px; line-height: 1.45; margin: 0 0 18px; max-width: 30em; }
.audbig b { color: var(--accent); }

/* Join screen: the code has to be readable from the back of a ballroom. */
.joingrid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px;
  align-items: center;
}
.qrbig img { width: 300px; height: 300px; display: block; }
.qrbig .qrurl {
  font-family: var(--mono); font-size: 14px; color: var(--muted); margin-top: 12px;
  text-align: center; word-break: break-all; max-width: 300px;
}
.agenda-h {
  margin-top: 40px; font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--faint);
}
.agenda {
  margin: 14px 0 0; padding: 0; list-style: none; columns: 3; column-gap: 44px;
}
.agenda li {
  break-inside: avoid; margin-bottom: 12px; font-size: 17px; line-height: 1.3;
  padding-left: 14px; border-left: 2px solid var(--accent-line);
}
.agenda li b { display: block; font-weight: 600; }
.agenda li span { color: var(--muted); font-size: 15px; }

.auddemos { display: grid; gap: 26px; }
.auddemo .ad-t { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
.auddemo .stack { height: 20px; }
.auddemo .reflg { font-size: 16px; }
.audrefs .refq { font-size: 22px; }
.audrefs .refrow { margin-bottom: 22px; }
.audrefs .reflg { font-size: 16px; }
.audjobs { display: grid; gap: 12px; }
.audjob { font-size: 22px; line-height: 1.35; }
.audjob span { color: var(--faint); font-size: 15px; margin-left: 10px; }
.audvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.audvs-h {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--faint); margin-bottom: 10px;
}
.audvs .promptwall { margin-top: 0; font-size: clamp(13px, 1.9vh, 18px); }

@media (max-width: 1180px) {
  .console { grid-template-columns: 1fr; }
  .rail { position: static; }
  .grid-2 { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .slide { padding: 30px 26px 18px; min-height: 380px; }
  .slide-t { font-size: 30px; }
  .slide-lead, .slide-pts li { font-size: 18px; }
}

@media (max-width: 400px) {
  .phone-wrap { padding-left: 10px; padding-right: 10px; }
  .phone-wrap .card { padding: 14px; }
}