/* ============================================================================
   CMN123 / CMP123 / CBS108 / GDD  :  Algorithms and Data Structures
   TUTORIAL 10A (Week 12)  :  Greedy Method and Dynamic Programming
   Stylesheet. Palette lifted directly from beamerthemeADS.sty so the web
   activity, the slides and the printed worksheets all look like one unit.

   ADSpaper  #FEFDFA    ADSblue   #04B4D8    ADSbluedk  #0A7C93
   ADSgreen  #86CF64    ADSgreendk #3F7A28
   ADSyellow #FFD966    ADSred    #FF2E20    ADSreddk   #B01A10

   No external fonts, no CDN. Everything here works offline.
   ========================================================================= */

:root {
  --paper:      #FEFDFA;
  --blue:       #04B4D8;
  --bluedk:     #0A7C93;
  --blue-08:    rgba(4, 180, 216, 0.08);
  --blue-15:    rgba(4, 180, 216, 0.15);
  --blue-30:    rgba(4, 180, 216, 0.30);
  --green:      #86CF64;
  --greendk:    #3F7A28;
  --green-15:   rgba(134, 207, 100, 0.18);
  --yellow:     #FFD966;
  --yellow-25:  rgba(255, 217, 102, 0.28);
  --red:        #FF2E20;
  --reddk:      #B01A10;
  --red-10:     rgba(255, 46, 32, 0.10);

  --ink:        #16202b;
  --muted:      #5c6a75;
  --line:       #dfe3e6;
  --white:      #ffffff;

  --sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Courier New", monospace;

  --shadow-sm: 0 1px 2px rgba(10, 124, 147, 0.07);
  --shadow-md: 0 4px 16px rgba(10, 124, 147, 0.10);
  --shadow-lg: 0 10px 34px rgba(10, 124, 147, 0.14);

  --radius: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ============================================================
   THEME MOTIFS  (the array logo and the four-colour rule)
   ============================================================ */
.ads-logo {
  display: inline-flex;
  border: 1px solid rgba(0,0,0,0.55);
  height: 14px;
  vertical-align: -2px;
}
.ads-logo i { display: block; width: 14px; height: 100%; border-right: 1px solid rgba(0,0,0,0.55); }
.ads-logo i:last-child { border-right: 0; }
.ads-logo i:nth-child(1) { background: var(--blue); }
.ads-logo i:nth-child(2) { background: var(--green); }
.ads-logo i:nth-child(3) { background: var(--yellow); }
.ads-logo i:nth-child(4) { background: var(--red); }

.ads-rule { display: flex; height: 3px; margin: 10px 0 0; }
.ads-rule i:nth-child(1) { flex: 1 1 auto; background: var(--blue); }
.ads-rule i:nth-child(2) { width: 46px; background: var(--green); }
.ads-rule i:nth-child(3) { width: 28px; background: var(--yellow); }
.ads-rule i:nth-child(4) { width: 18px; background: var(--red); }

.node-trio { display: inline-flex; align-items: center; gap: 0; }
.node-trio i { width: 8px; height: 8px; border-radius: 50%; }
.node-trio b { display: block; width: 10px; height: 1px; background: #333; }
.node-trio i:nth-of-type(1) { background: var(--blue); }
.node-trio i:nth-of-type(2) { background: var(--green); }
.node-trio i:nth-of-type(3) { background: var(--red); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  background: var(--bluedk);
  color: var(--white);
}
.header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { font-weight: 700; font-size: 15px; letter-spacing: 0.10em; }
.brand-meta { font-size: 12.5px; color: rgba(255,255,255,0.78); }
.brand-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.35); }
.instructor { text-align: right; line-height: 1.3; }
.instructor-name { display: block; font-size: 13.5px; font-weight: 600; }
.instructor-email { display: block; font-size: 12px; color: rgba(255,255,255,0.72); font-family: var(--mono); }

/* ============================================================
   PHASE STRIP  (the 20 / 10 / 20 / 10 clock)
   ============================================================ */
.phase-strip {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.phase-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 9px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.phase-list { display: flex; gap: 6px; flex: 1 1 auto; flex-wrap: wrap; }
.phase-chip {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
  font-size: 12.5px;
  color: var(--muted);
  transition: all 0.25s ease;
}
.phase-chip .pn { font-weight: 700; font-family: var(--mono); }
.phase-chip .pm { font-size: 11px; opacity: 0.8; }
.phase-chip.active {
  background: var(--blue-08);
  border-color: var(--blue);
  color: var(--bluedk);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--blue-30);
}
.phase-chip.done { background: var(--green-15); border-color: var(--green); color: var(--greendk); }

.clock-wrap { display: flex; align-items: center; gap: 10px; }
.clock {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--bluedk);
  min-width: 74px;
  text-align: center;
  letter-spacing: 0.02em;
}
.clock.low { color: var(--reddk); }
.mini-btn {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 5px 11px;
  font-size: 12.5px;
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.18s ease;
}
.mini-btn:hover { border-color: var(--blue); color: var(--bluedk); background: var(--blue-08); }
.mini-btn.primary { background: var(--bluedk); color: var(--white); border-color: var(--bluedk); }
.mini-btn.primary:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ============================================================
   PAGE + HERO
   ============================================================ */
.page { max-width: 1140px; margin: 0 auto; padding: 26px 26px 90px; }

.hero {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: 26px 30px 24px;
  box-shadow: var(--shadow-md);
  margin-bottom: 22px;
}
.hero-tag {
  display: inline-block;
  background: var(--yellow-25);
  border: 1px solid var(--yellow);
  color: #7a5c00;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 12px;
}
.hero-title { font-size: 31px; margin: 0 0 6px; line-height: 1.2; letter-spacing: -0.01em; }
.hero-subtitle { font-size: 16.5px; color: var(--muted); margin: 0 0 4px; }
.hero-instructions { font-size: 15px; margin: 14px 0 0; max-width: 82ch; }

.glance {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 14px;
}
.glance th, .glance td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; }
.glance thead th { background: var(--yellow); color: var(--ink); font-size: 13px; letter-spacing: 0.03em; }
.glance tbody th { width: 172px; background: #fafbfc; font-weight: 700; }

.lo {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 3px;
  font-family: var(--mono);
}

/* progress */
.progress-wrap { margin-top: 18px; max-width: 520px; }
.progress-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.progress-track { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--green)); transition: width 0.45s ease; }

/* ============================================================
   SECTIONS + CARDS
   ============================================================ */
.section { margin-top: 34px; }
.section-head { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; }
.section-letter {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700;
  flex: 0 0 auto;
}
.section-letter.green { background: var(--greendk); }
.section-letter.red   { background: var(--reddk); }
.section-letter.grey  { background: var(--muted); }
.section-head h2 { margin: 0; font-size: 22px; color: var(--bluedk); }
.section-head .mins { font-size: 13px; color: var(--greendk); font-weight: 600; }
.section-lead { color: var(--muted); font-size: 14.5px; margin: 12px 0 0; max-width: 88ch; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 18px;
  box-shadow: var(--shadow-sm);
}
.card-header { display: flex; align-items: baseline; gap: 11px; margin-bottom: 8px; }
.card-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  background: var(--bluedk);
  padding: 2px 8px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.card-title { margin: 0; font-size: 17.5px; }
.card-lead { color: var(--muted); font-size: 14px; margin: 2px 0 12px; }

/* callout blocks, mirroring the tcolorbox styles in the worksheets */
.block { border-radius: var(--radius); padding: 11px 14px; margin: 14px 0; font-size: 14px; }
.block .bt { display: block; font-weight: 700; margin-bottom: 3px; }
.block.blue   { background: var(--blue-08);  border: 1px solid var(--blue);   }
.block.blue .bt   { color: var(--bluedk); }
.block.green  { background: var(--green-15); border: 1px solid var(--green);  }
.block.green .bt  { color: var(--greendk); }
.block.alert  { background: var(--red-10);   border: 1px solid var(--red);    }
.block.alert .bt  { color: var(--reddk); }
.block.cost   { background: var(--yellow-25);border: 1px solid #e0b93c;       }
.block.cost .bt   { color: #7a5c00; }

.term { font-weight: 700; color: var(--bluedk); }
code, .mono { font-family: var(--mono); font-size: 0.92em; background: #f2f5f7; padding: 1px 5px; border-radius: 3px; }

/* ============================================================
   INTERACTIVE LABS  (shared shell)
   ============================================================ */
.lab {
  border: 1px solid var(--blue-30);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fbfeff, var(--white));
  padding: 16px 18px 18px;
  margin-top: 14px;
}
.lab-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.lab-bar .spacer { flex: 1 1 auto; }
.lab-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-right: 3px; }

.btn {
  border: 1px solid var(--bluedk);
  background: var(--bluedk);
  color: var(--white);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: 13.5px;
  font-family: var(--sans);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease, opacity 0.18s ease;
}
.btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost { background: var(--white); color: var(--bluedk); }
.btn.ghost:hover:not(:disabled) { background: var(--blue-08); color: var(--bluedk); }
.btn.green { background: var(--greendk); border-color: var(--greendk); }
.btn.green:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: #17330a; }
.btn.red { background: var(--reddk); border-color: var(--reddk); }
.btn.red:hover:not(:disabled) { background: var(--red); border-color: var(--red); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }

.val-input {
  width: 66px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 14px;
  text-align: center;
}
.val-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-15); }

/* toggle switch group */
.toggle-group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.toggle-group button {
  border: 0;
  background: var(--white);
  padding: 6px 13px;
  font-size: 12.5px;
  font-family: var(--sans);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.toggle-group button + button { border-left: 1px solid var(--line); }
.toggle-group button.on { background: var(--bluedk); color: var(--white); font-weight: 600; }

/* readouts */
.readout { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
.chip {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 11px;
  font-size: 12.5px;
  background: var(--white);
  min-width: 108px;
}
.chip b { display: block; font-family: var(--mono); font-size: 16px; color: var(--bluedk); }
.chip.warn b { color: var(--reddk); }
.chip.good b { color: var(--greendk); }
.chip span { color: var(--muted); font-size: 11.5px; }

.op-log {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  background: #f7f9fa;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 11px;
  max-height: 96px;
  overflow-y: auto;
  color: var(--muted);
}
.op-log div { padding: 1px 0; }
.op-log div.new { color: var(--bluedk); font-weight: 600; }

/* ============================================================
   THE ARRAY ROW
   Shared by Lab A (linear walk) and Lab B (binary halving).
   One row of numbered cells, 1-indexed the way the exam is.
   ============================================================ */
.array-stage {
  padding: 20px 10px 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(4,180,216,0.04) 26px 27px),
    var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
.array-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  min-width: 460px;
  padding: 4px 0 2px;
}
.acell {
  position: relative;
  width: 74px;
  min-height: 62px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  transition: background 180ms ease, border-color 180ms ease,
              transform 180ms ease, opacity 180ms ease, color 180ms ease;
}
/* the 1-based position, printed under every cell */
.acell .pos {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--muted);
}
/* the cell being compared right now */
.acell.looking {
  border-color: var(--blue);
  background: var(--blue-15);
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
/* already compared and rejected */
.acell.checked { border-color: var(--line); background: #f4f6f7; color: var(--muted); }
/* thrown away by a halving: the whole point of binary search */
.acell.dead    { opacity: 0.28; border-style: dashed; background: #f4f6f7; color: var(--muted); }
/* inside the range still under consideration */
.acell.live    { border-color: var(--blue-30); }
.acell.hit     { border-color: var(--greendk); background: var(--green-15); color: var(--greendk); }
.acell.miss    { border-color: var(--red); background: var(--red-10); }

/* markers that sit above the row: i for linear, low / mid / high for binary */
.marker-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  min-width: 460px;
  padding-bottom: 4px;
}
.mslot { width: 74px; min-height: 42px; display: flex; flex-direction: column;
         align-items: center; justify-content: flex-end; gap: 2px; }
.mtag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  color: var(--white);
  line-height: 1.5;
  white-space: nowrap;
}
.mtag.i     { background: var(--bluedk); }
.mtag.low   { background: var(--greendk); }
.mtag.high  { background: var(--reddk); }
.mtag.mid   { background: var(--bluedk); }
.mtag.arrow { background: none; color: var(--muted); font-size: 15px; padding: 0; }

/* the verdict line under the row */
.verdict {
  margin-top: 26px;
  min-height: 46px;
  padding: 9px 13px;
  border-left: 4px solid var(--blue);
  background: var(--blue-08);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14.5px;
}
.verdict.good { border-left-color: var(--greendk); background: var(--green-15); }
.verdict.bad  { border-left-color: var(--red); background: var(--red-10); }
.verdict b    { font-family: var(--mono); }

/* the little sorted / shuffled warning strip on Lab B */
.sorted-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
}
.sorted-flag.ok  { background: var(--green-15); color: var(--greendk); }
.sorted-flag.bad { background: var(--red-10);   color: var(--reddk); }

/* ============================================================
   LAB C: THE GUESSING GAME
   ============================================================ */
.guess-stage {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 16px;
  text-align: center;
}
.guess-range {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--bluedk);
  letter-spacing: 1px;
}
.guess-range .gone { color: var(--line); text-decoration: line-through; }
.guess-hint { font-size: 15px; min-height: 26px; margin-top: 6px; font-weight: 600; }
.guess-hint.up   { color: var(--greendk); }
.guess-hint.down { color: var(--reddk); }
.guess-hint.win  { color: var(--greendk); font-weight: 800; }
.guess-history {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  min-height: 30px;
}
.gpill {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f4f6f7;
  color: var(--muted);
}
.gpill.win { background: var(--green-15); border-color: var(--greendk); color: var(--greendk); }

/* ============================================================
   LAB D: THE COST METER
   Time grows for one search and barely moves for the other.
   Memory is a fixed handful of boxes for both, whatever n is.
   ============================================================ */
.cost-lab { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
@media (max-width: 900px) { .cost-lab { grid-template-columns: 1fr; } }

.cost-pane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 14px 16px;
}
.cost-pane h4 {
  margin: 0 0 4px;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.cost-pane.time h4   { color: var(--bluedk); }
.cost-pane.memory h4 { color: var(--greendk); }
.cost-pane .pane-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }

/* the two growing bars */
.bar-row { margin-bottom: 14px; }
.bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.bar-head .bval { font-family: var(--mono); font-size: 15px; }
.bar-track {
  height: 22px;
  background: #eef1f3;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.bar-fill {
  height: 100%;
  width: 0%;
  transition: width 400ms ease;
  border-radius: 3px 0 0 3px;
}
.bar-fill.linear { background: linear-gradient(90deg, var(--red), var(--reddk)); }
.bar-fill.binary { background: linear-gradient(90deg, var(--green), var(--greendk)); }
.bar-note { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* the memory boxes: these are the ones that must visibly NOT grow */
.mem-group { margin-bottom: 14px; }
.mem-head { font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.mem-boxes { display: flex; flex-wrap: wrap; gap: 6px; }
.mbox {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  border: 2px solid var(--green);
  background: var(--green-15);
  color: var(--greendk);
}
.mem-total { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.mem-total b { color: var(--greendk); font-family: var(--mono); font-size: 14px; }

/* the n slider */
.n-slider { width: 100%; margin: 2px 0 0; accent-color: var(--blue); }
.n-readout {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--bluedk);
  text-align: center;
}
.n-readout small { display: block; font-family: var(--sans); font-size: 12px;
                   font-weight: 600; color: var(--muted); letter-spacing: 0.6px; }
.cost-verdict {
  grid-column: 1 / -1;
  padding: 11px 14px;
  border-left: 4px solid var(--yellow);
  background: var(--yellow-25);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14.5px;
}
.cost-verdict b { font-family: var(--mono); }

/* twin trace stepper, recoloured for the two searches */
.twin-pane.linear h4 { color: var(--reddk); }
.twin-pane.binary h4 { color: var(--greendk); }
.twin-count { font-size: 13px; color: var(--bluedk); font-weight: 700; min-height: 22px; }
/* twin trace stepper */
.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.twin-pane { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--white); }
.twin-pane h4 { margin: 0 0 8px; font-size: 14.5px; }
.twin-pane.stack h4 { color: var(--bluedk); }
.twin-pane.queue h4 { color: var(--greendk); }
.twin-row { font-family: var(--mono); font-size: 15px; min-height: 30px; }
.twin-ret { font-size: 13px; color: var(--reddk); font-weight: 700; min-height: 22px; }

/* ============================================================
   QUESTIONS
   ============================================================ */
.q-card { border-left: 4px solid var(--blue); }
.q-card.solved { border-left-color: var(--green); }
.question-text { font-size: 15.5px; margin: 0 0 12px; }

.choice-group { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.choice {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius);
  padding: 10px 13px;
  font-size: 14.5px;
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.choice .kbd {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--muted);
  flex: 0 0 auto;
}
.choice:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-08); }
.choice.correct { border-color: var(--green); background: var(--green-15); }
.choice.correct .kbd { color: var(--greendk); }
.choice.incorrect { border-color: var(--red); background: var(--red-10); }
.choice.incorrect .kbd { color: var(--reddk); }
.choice:disabled { cursor: default; opacity: 0.92; }

.trace-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0 6px; }
.trace-table th, .trace-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.trace-table thead th { background: var(--yellow); font-size: 13px; }
.trace-table td.op { font-family: var(--mono); white-space: nowrap; }
.trace-table td.n { width: 34px; text-align: center; color: var(--muted); font-family: var(--mono); }
.trace-table tr.final td { background: var(--green-15); font-weight: 700; }

.cell-input {
  width: 100%;
  min-width: 60px;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px 7px;
  font-family: var(--mono);
  font-size: 14px;
}
.cell-input.narrow { width: 82px; text-align: center; }
.cell-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-15); }
.cell-input.cell-correct { border-color: var(--green); background: var(--green-15); }
.cell-input.cell-incorrect { border-color: var(--red); background: var(--red-10); }
.cell-input:disabled { opacity: 0.95; }

.inline-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 12px 0 4px; }
.inline-item { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }

.q-actions { display: flex; gap: 9px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.attempt-note { font-size: 12px; color: var(--muted); }

.feedback {
  display: none;
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.6;
}
.feedback.visible { display: block; }
.feedback.fb-correct   { background: var(--green-15); border: 1px solid var(--green); }
.feedback.fb-incorrect { background: var(--red-10);   border: 1px solid var(--red); }
.feedback.fb-partial   { background: var(--yellow-25);border: 1px solid #e0b93c; }

/* ============================================================
   ANSWER LOCK  (hidden until the lecturer unlocks)
   ============================================================ */
.review-gate {
  border: 1px dashed var(--muted);
  border-radius: var(--radius);
  background: #f8f9fa;
  padding: 16px 18px;
  margin-top: 20px;
}
.review-gate.unlocked { border-style: solid; border-color: var(--green); background: var(--green-15); }
.gate-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gate-icon { font-size: 20px; }
.gate-head h3 { margin: 0; font-size: 16px; }
.gate-sub { font-size: 13.5px; color: var(--muted); margin: 6px 0 0; }
.gate-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.gate-form input {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 11px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: 170px;
}
.gate-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-15); }
.gate-msg { font-size: 13px; margin-top: 8px; min-height: 18px; }
.gate-msg.bad { color: var(--reddk); }
.gate-msg.ok  { color: var(--greendk); }

.model-answer {
  display: none;
  margin-top: 14px;
  border: 1px solid var(--greendk);
  border-left: 4px solid var(--greendk);
  border-radius: var(--radius);
  background: #f4fbf0;
  padding: 12px 15px;
  font-size: 14px;
}
.model-answer.shown { display: block; animation: revealIn 0.4s ease; }
.model-answer .ma-title {
  display: block;
  font-weight: 700;
  color: var(--greendk);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.model-answer table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0; }
.model-answer th, .model-answer td { border: 1px solid #cfe2c4; padding: 5px 8px; text-align: left; }
.model-answer thead th { background: #ddf0d2; }
.model-answer td.op, .model-answer td.mono { font-family: var(--mono); }

@keyframes revealIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.locked-banner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  background: #f1f3f4;
  border: 1px dashed #c8d0d5;
  border-radius: var(--radius);
  padding: 5px 11px;
  margin-top: 12px;
}

/* ============================================================
   FINISH CARD + FOOTER
   ============================================================ */
.finish-card {
  border: 2px solid var(--green);
  background: var(--green-15);
  text-align: center;
  padding: 26px;
}
.finish-card h3 { margin: 0 0 6px; font-size: 21px; color: var(--greendk); }
.finish-score { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--greendk); margin: 8px 0; }

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 18px 26px 34px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}
.site-footer .refs { max-width: 760px; margin: 10px auto 0; text-align: left; line-height: 1.7; }
.site-footer .refs div { padding-left: 1.6em; text-indent: -1.6em; }

.scorm-pill {
  position: fixed;
  right: 12px; bottom: 12px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--muted);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 11px;
  z-index: 90;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .twin { grid-template-columns: 1fr; }
  .page { padding: 18px 14px 70px; }
  .hero { padding: 20px 18px; }
  .hero-title { font-size: 25px; }
  .header-inner, .phase-inner { padding: 10px 14px; }
  .instructor { text-align: left; }
  .glance tbody th { width: 108px; }
  .ring-stage { height: 340px; }
}

@media print {
  .phase-strip, .lab, .q-actions, .scorm-pill, .gate-form { display: none !important; }
  .model-answer { display: block !important; }
}

/* ==========================================================================
   TUTORIAL 8A ADDITIONS
   Everything above this line is the shared ADS tutorial stylesheet. The rules
   below are the ones sorting needs and searching did not: three side by side
   panes instead of two, record cards for the stability bench, and two small
   aliases so the markup can say what it means.
   ========================================================================== */

/* Three panes for the trio stepper. Collapses to one column on a narrow lab
   screen rather than squeezing three unreadable columns. */
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 980px) { .trio { grid-template-columns: 1fr; } }

.twin-pane.bub h4 { color: var(--reddk); }
.twin-pane.sel h4 { color: var(--bluedk); }
.twin-pane.ins h4 { color: var(--greendk); }

/* The stability bench: one card per student record, in current order. */
.rec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 4px;
}
.rec {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 132px;
  padding: 11px 14px 13px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color 200ms ease, background 200ms ease;
}
.rec .rec-pos {
  position: absolute;
  top: -9px;
  left: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted);
  background: var(--white);
  padding: 0 5px;
}
.rec .rec-name { font-weight: 700; font-size: 15px; }
.rec .rec-mark {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--bluedk);
}
/* The two students on the same mark. Everything the demonstration is about
   happens to these two, so they are marked before anything is sorted. */
.rec.tied { border-color: var(--yellow); background: var(--yellow-25); }
.rec.tied .rec-mark { color: #7a5c00; }

/* A third verdict tone, for a lab setting that is not wrong but is worth
   pausing on, such as the stop early flag being switched off. */
.verdict.warn { border-left-color: var(--yellow); background: var(--yellow-25); }

/* Alias, so the markup can say what the block is rather than what it was
   first used for. Identical to .block.cost. */
.block.yellow { background: var(--yellow-25); border: 1px solid #e0b93c; }
.block.yellow .bt { color: #7a5c00; }

/* ============================================================================
   TUTORIAL 10A ADDITIONS
   Greedy change, the satellite link board, the Fib call tree, the voucher
   boxes (the Week 12 coin table, resized for nine boxes) and the race strip.
   Same palette throughout: blue working, green kept, yellow being looked at,
   red wasted or wrong, grey passed over.
   ========================================================================= */


@keyframes cellPop { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ---- Lab A: coins ------------------------------------------------------- */
.coin-rack { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 18px 0 8px; }
.coin {
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff6d6, var(--yellow) 70%);
  border: 3px solid #d9b441;
  font-family: var(--mono); font-weight: 700; font-size: 17px; color: #5b4608;
  transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}
.coin.trying { transform: translateY(-6px); box-shadow: 0 0 0 5px var(--blue-30); border-color: var(--blue); }
.coin.passed { opacity: 0.35; }
.coin.small { width: 46px; height: 46px; font-size: 12.5px; border-width: 2px; animation: cellPop 300ms ease-out; }
.coin-tray {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 64px;
  padding: 8px 10px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--white);
}
.tray-empty { color: var(--muted); font-size: 13.5px; }

/* ---- Lab B: the satellite link ----------------------------------------- */
.sat-queue { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 14px 0 10px; min-height: 32px; }
.q-label { font-size: 13.5px; color: var(--muted); margin-right: 4px; }
.q-item {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--white);
  font-family: var(--mono); font-weight: 700;
}
.q-item.next { border-color: var(--blue); background: var(--blue-15); }
.q-item.yes  { border-color: var(--greendk); background: var(--green-15); color: var(--greendk); }
.q-item.no   { color: #9aa6ae; text-decoration: line-through; }

.sat-board { overflow-x: auto; }
.sat-hours, .sat-row { display: flex; align-items: center; min-width: 560px; }
.sat-row { height: 42px; border-top: 1px solid var(--line); }
.sat-name { flex: 0 0 118px; font-size: 14px; }
.sat-name b { font-family: var(--mono); color: var(--bluedk); margin-right: 4px; }
.sat-track { position: relative; flex: 1 1 auto; height: 100%; }
.sat-hours .sat-track { height: 22px; }
.sat-hour { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sat-grid { position: absolute; top: 0; bottom: 0; border-left: 1px dotted var(--line); }
.sat-bar {
  position: absolute; top: 7px; height: 28px;
  border: 2px solid var(--blue); border-radius: var(--radius); background: var(--blue-08);
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--bluedk);
  cursor: pointer; padding: 0; transition: background 160ms ease, border-color 160ms ease;
}
.sat-bar:hover { background: var(--blue-15); }
.sat-bar.yes   { background: var(--green); border-color: var(--greendk); color: #183a0c; }
.sat-bar.clash { background: var(--red-10); border-color: var(--red); color: var(--reddk); }
.sat-bar.no    { background: var(--paper); border-color: #b9c2c8; border-style: dashed; color: #9aa6ae; text-decoration: line-through; }
.sat-bar.next  { box-shadow: 0 0 0 4px var(--yellow); }

/* ---- Lab C: the Fib call tree ------------------------------------------- */
.fib-scroll { overflow-x: auto; margin-top: 12px; text-align: center; }
.fib-tree { display: inline-block; }
.fib-edge { stroke: #b9c2c8; stroke-width: 1.6; }
.fib-node circle { stroke-width: 2.4; }
.fib-node text { font-family: var(--mono); font-size: 13px; font-weight: 700; text-anchor: middle; }
.fib-node.k-first circle  { fill: #dff2d4; stroke: var(--greendk); }
.fib-node.k-first text    { fill: var(--greendk); }
.fib-node.k-repeat circle { fill: #ffe0dd; stroke: var(--red); }
.fib-node.k-repeat text   { fill: var(--reddk); }
.fib-node.k-look circle   { fill: #fff3cc; stroke: #d9b441; }
.fib-node.k-look text     { fill: #5b4608; }
.fib-node.now circle      { stroke: var(--blue); stroke-width: 4; }
.fib-key { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; font-size: 13px; color: var(--muted); margin-top: 6px; }
.fib-key i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 5px; vertical-align: -2px; border: 2px solid; }
.fib-key i.k-first  { background: #dff2d4; border-color: var(--greendk); }
.fib-key i.k-repeat { background: #ffe0dd; border-color: var(--red); }
.fib-key i.k-look   { background: #fff3cc; border-color: #d9b441; }

/* ---- Lab D: the voucher boxes (from the Week 12 package) ---------------- */
.dp-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.dp-stage { position: relative; margin: 14px auto 0; }
.dp-arcs { position: absolute; left: 0; top: 0; overflow: visible; }
.dp-arcs path { fill: none; }
.dp-arcs marker path { stroke: none; }
.arc { color: var(--red); }
.arc path { stroke: currentColor; stroke-width: 2; }
.arc .arclab {
  fill: currentColor; font-family: var(--sans); font-size: 12px; font-weight: 700; text-anchor: middle;
  stroke: var(--paper); stroke-width: 4px; paint-order: stroke fill;
}
.arc.win  { color: var(--greendk); }
.arc.win path { stroke-width: 3.4; }
.arc.lose { color: #9aa6ae; }
.arc.lose path { stroke-dasharray: 5 4; }
.dpbox {
  position: absolute; display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 2px solid var(--blue); border-radius: var(--radius);
  font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--ink);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.dpbox.empty { color: var(--muted); border-color: var(--line); background: var(--paper); }
.dpbox.known { background: var(--green-15); border-color: var(--greendk); color: var(--greendk); }
.dpbox.cur   { background: var(--blue-08); border-color: var(--blue); box-shadow: var(--shadow-md); }
.dpbox.win   { background: rgba(134, 207, 100, 0.42); border-color: var(--greendk); color: var(--greendk); border-width: 3px; }
.dpbox.hot   { background: var(--yellow-25); border-color: #e0b93c; transform: translateY(-5px); }
.dpbox.new   { background: var(--blue-15); border-color: var(--blue); color: var(--bluedk); }
.dpbox.pop   { animation: cellPop 340ms ease-out; }
.dplab { position: absolute; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); font-family: var(--mono); }
.dp-lines { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; min-height: 30px; }
.dp-lines.empty { min-height: 30px; }
.dpline { display: inline-block; padding: 4px 10px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 4px; background: var(--white); font-size: 13.5px; }
.dpline.win  { border-color: var(--greendk); border-left-color: var(--greendk); background: var(--green-15); font-weight: 700; color: var(--greendk); }
.dpline.lose { opacity: 0.55; text-decoration: line-through; }
.box-table .cell-input.narrow { width: 52px; }

/* ---- the race ----------------------------------------------------------- */
.race-strip { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; margin: 12px 0 14px; }
.race-strip span {
  text-align: center; padding: 4px 0; border-radius: 4px; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; border: 2px solid transparent;
}
.race-strip span.ok   { background: var(--green-15); color: var(--greendk); }
.race-strip span.lose { background: var(--red-10); color: var(--reddk); }
.race-strip span.now  { border-color: var(--blue); }
.race-rows { display: grid; gap: 8px; }
.race-row { display: flex; align-items: center; gap: 12px; }
.race-who { flex: 0 0 70px; font-weight: 700; color: var(--bluedk); }
.race-bag { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.race-bag b { font-family: var(--mono); font-size: 18px; margin-left: 8px; }
.vchip {
  display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 8px;
  border-radius: 4px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--white);
}
.vchip::after { content: " GB"; font-size: 10.5px; margin-left: 2px; }
.vchip.v1 { background: #7a8a95; }
.vchip.v4 { background: var(--bluedk); }
.vchip.v5 { background: var(--greendk); }

@media (max-width: 720px) {
  .coin { width: 56px; height: 56px; font-size: 14px; }
  .race-strip { grid-template-columns: repeat(10, 1fr); }
}
.arc.look { color: var(--red); }
.dpv { line-height: 1; }
.check-btn { min-width: 110px; }
.sat-hours, .sat-row { padding-right: 16px; }
.cell-input.mid { width: 130px; }
.race-lab { position: relative; }
.race-lock { display: none; }
.race-lab.locked .race-lock {
  display: flex; align-items: center; justify-content: center;
  position: absolute; inset: 0; z-index: 5;
  background: rgba(254, 253, 250, 0.9); border-radius: var(--radius);
  font-weight: 700; color: var(--bluedk); font-size: 16px;
}

/* ============================================================================
   TUTORIAL 10A QUESTION TYPES
   Typed boxes and menus share the cell colours. Cards can be dragged or
   clicked into a group or a numbered slot, as in the IoT 9A and 9B packages.
   ========================================================================= */

.q-type {
  display: inline-block; margin: -2px 0 8px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--blue-08); color: var(--bluedk);
  font-size: 12.5px; font-weight: 700;
}

/* ---- drop-down menus inside a sentence ---------------------------------- */
.menus-line { line-height: 2.5; }
select.menu {
  font: inherit; font-size: 14.5px;
  padding: 4px 8px; margin: 0 3px;
  border: 2px solid var(--blue); border-radius: var(--radius);
  background: var(--white); color: var(--ink); cursor: pointer;
}
select.menu:focus { outline: 3px solid var(--blue-30); }
select.menu.cell-correct { border-color: var(--greendk); background: var(--green-15); }
select.menu.cell-incorrect { border-color: var(--red); background: var(--red-10); }
select.menu:disabled { cursor: default; opacity: 1; }

/* ---- tick all that apply ------------------------------------------------ */
.choice-group.multi .kbd.tick {
  width: 18px; height: 18px; margin-top: 2px;
  border: 2px solid var(--muted); border-radius: 4px; background: var(--white);
}
.choice-group.multi .choice.on { border-color: var(--blue); background: var(--blue-08); }
.choice-group.multi .choice.on .kbd.tick { background: var(--blue); border-color: var(--blue); }
.choice-group.multi .choice.on .kbd.tick::after {
  content: ""; display: block; width: 5px; height: 9px; margin: 1px 0 0 5px;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.choice-group.multi .choice.correct .kbd.tick { background: var(--greendk); border-color: var(--greendk); }

/* ---- cards -------------------------------------------------------------- */
.dnd { margin: 10px 0 4px; user-select: none; -webkit-user-select: none; }
.dnd-pool {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  min-height: 58px; padding: 10px;
  border: 2px dashed var(--line); border-radius: var(--radius); background: var(--white);
}
.dnd.pool-empty .dnd-pool { min-height: 34px; }
.dnd.pool-empty .dnd-pool::before { content: "All placed. Press Check."; color: var(--muted); font-size: 13px; }
.dnd.locked .dnd-pool { display: none; }

.dcard {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 2px solid var(--blue); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
  font: inherit; font-size: 14px; cursor: grab; touch-action: none;
  box-shadow: var(--shadow-sm);
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.dcard b { font-family: var(--mono); color: var(--bluedk); }
.dcard span { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.dcard:hover { background: var(--blue-08); }
.dcard.picked { background: var(--yellow-25); border-color: #d9b441; box-shadow: 0 0 0 4px var(--yellow-25); }
.dcard.dragging { position: relative; z-index: 50; cursor: grabbing; box-shadow: var(--shadow-lg); }
.dcard.ok  { border-color: var(--greendk); background: var(--green-15); }
.dcard.bad { border-color: var(--red); background: var(--red-10); }
.dnd.locked .dcard { cursor: default; }

.drop.over { outline: 3px solid var(--blue); outline-offset: 2px; }

/* groups */
.dnd-bins { display: grid; gap: 10px; margin-top: 10px; }
.dnd-bins.two   { grid-template-columns: repeat(2, 1fr); }
.dnd-bins.three { grid-template-columns: repeat(3, 1fr); }
.dnd-bin {
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
  min-height: 130px; padding: 10px;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper);
  cursor: pointer;
}
.bin-title { font-weight: 700; color: var(--bluedk); font-size: 14.5px; }
.bin-title.good { color: var(--greendk); }
.bin-title.bad  { color: var(--reddk); }

/* numbered slots */
.dnd-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.dnd-slot {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 16px 4px 6px;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer;
}
.slot-n {
  position: absolute; top: 3px; left: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted);
}
.dnd-slot .dcard { padding: 6px 8px; font-size: 13px; }

.table-scroll { overflow-x: auto; }

@media (max-width: 720px) {
  .dnd-bins.three { grid-template-columns: 1fr; }
  .dnd-slots { grid-template-columns: repeat(3, 1fr); }
  .dnd-bin { min-height: 90px; }
}
.dnd.sort .dnd-pool, .dnd.order .dnd-pool { justify-content: flex-start; }
.dnd-slot.one { min-width: 0; }
.fine-print { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }


/* ============================================================================
   TUTORIAL 10B BLOCKS (Week 12 class game)
   Appended to the Tutorial 10A stylesheet above, which is unchanged. Every
   class here starts with g- so nothing collides with the 10A rules.
   ========================================================================= */

/* ---- live page: controls and scaling ----------------------------------- */
.g-live .page { max-width: 1280px; }
.g-live .phase-inner, .g-live .header-inner { max-width: 1280px; }
.g-stage { transition: none; }
.g-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.phase-list button.phase-chip { font-family: var(--sans); cursor: pointer; }
.phase-list button.phase-chip:hover { border-color: var(--blue); color: var(--bluedk); }
kbd.g-k { font-family: var(--mono); font-size: 11px; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 5px; opacity: 0.7; }

.g-controls {
  position: sticky; bottom: 0; z-index: 55;
  background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -1px 2px rgba(10,124,147,0.07);
}
.g-controls-inner { max-width: 1280px; margin: 0 auto; padding: 9px 26px; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.g-timer { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; }
.g-timer .progress-track { flex: 1; height: 10px; }
.g-timer .progress-fill { width: 100%; transition: width 0.9s linear; }
.g-timer.low .progress-fill { background: var(--red); }
.g-controls .hide { display: none; }

/* ---- question text, larger for the projector --------------------------- */
.g-live .card-title { font-size: 21px; }
.g-prompt { font-size: 27px; line-height: 1.3; font-weight: 600; margin: 4px 0 16px; max-width: 46ch; }
.g-data {
  display: inline-block; font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--bluedk);
  background: var(--blue-08); border: 1px solid var(--blue); border-radius: var(--radius); padding: 8px 16px; margin-bottom: 14px;
}
.g-code {
  font-family: var(--mono); font-size: 21px; line-height: 1.45; background: #f7f9fa;
  border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 14px; overflow-x: auto;
}
.g-live .choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-live .choice { font-size: 21px; padding: 14px 16px; cursor: default; }
.g-live .choice .kbd { font-size: 22px; }
.choice.g-dim { opacity: 0.4; }
.g-answer { font-family: var(--mono); font-size: 36px; font-weight: 700; color: var(--greendk); line-height: 1.2; }
.g-live .model-answer { font-size: 18px; }
.g-live .model-answer .ma-title { font-size: 13px; }

/* ---- ticking pairs ------------------------------------------------------- */
.g-marks { display: none; }
.g-marks.on { display: block; }
.g-row { margin: 8px 0 12px; }
.g-row .lab-label { display: block; margin-bottom: 6px; }
.g-ticks { display: flex; flex-wrap: wrap; gap: 7px; }
.g-tick {
  border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: var(--radius);
  padding: 6px 11px; font-size: 14.5px; font-family: var(--sans); font-weight: 600; cursor: pointer; user-select: none;
}
.g-tick:hover { border-color: var(--blue); background: var(--blue-08); }
.g-tick.on { border-color: var(--greendk); background: var(--green-15); color: var(--greendk); }
.g-tick.on::before { content: "\2713  "; }
.g-tick.locked { cursor: default; }
.g-tick:focus-visible, .g-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---- pairs ---------------------------------------------------------------- */
.g-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 18px; }
.g-pair { display: flex; gap: 12px; align-items: center; margin-top: 0; padding: 12px 14px; }
.g-pair.g-solo { border-style: dashed; }
.g-pair .card-num { font-size: 14px; }
.g-pair .g-who { line-height: 1.45; font-size: 16px; font-weight: 600; }
.g-pair .g-prog { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--bluedk); background: var(--blue-08); border-radius: 3px; padding: 1px 5px; margin-left: 5px; }
.g-dealing .g-pair { animation: revealIn 0.4s ease both; }

/* ---- round intro ------------------------------------------------------------ */
.g-intro .section-lead { font-size: 19px; max-width: 60ch; }
.g-intro .block { font-size: 18px; max-width: 70ch; }
.g-live .section-head h2 { font-size: 26px; }

/* ---- game shop ---------------------------------------------------------------- */
.g-shop { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.g-owed { font-family: var(--mono); font-weight: 700; font-size: 110px; line-height: 0.95; color: var(--bluedk); }
.g-owed small { display: block; font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.g-shop .coin-rack { justify-content: flex-start; margin: 0 0 10px; }
.g-compare { display: grid; grid-template-columns: 110px 1fr 60px; gap: 10px 14px; align-items: center; margin: 6px 0; }
.g-compare .lab-label { font-size: 13px; }
.g-compare .g-n { font-family: var(--mono); font-size: 30px; font-weight: 700; text-align: right; }
.g-compare .coin-tray { min-height: 58px; }

/* ---- bilum board ---------------------------------------------------------------- */
.g-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; }
.g-cat { text-align: center; font-weight: 700; color: var(--bluedk); font-size: 16px; padding-bottom: 8px; border-bottom: 3px solid var(--blue); line-height: 1.2; }
.g-tile {
  height: 110px; border: 1px solid var(--bluedk); background: var(--bluedk); color: var(--white); border-radius: var(--radius);
  font-family: var(--mono); font-size: 36px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background 0.18s ease, transform 0.12s ease;
}
.g-tile:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); }
.g-tile:active:not(:disabled) { transform: translateY(1px); }
.g-tile:disabled { background: #f4f6f7; border-color: var(--line); color: var(--line); cursor: default; box-shadow: none; }
.g-tile.g-ok { background: var(--green-15); border-color: var(--green); color: var(--greendk); }
.g-tile.g-miss { background: var(--red-10); border-color: var(--red); color: var(--reddk); }
.g-picker { margin-top: 16px; font-size: 18px; }
.g-picker b { background: var(--yellow-25); border: 1px solid var(--yellow); border-radius: 3px; padding: 1px 7px; }

/* ---- final bets -------------------------------------------------------------------- */
.g-bets { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px 18px; margin: 14px 0; }
.g-bet { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding: 6px 0; font-size: 15.5px; font-weight: 600; }
.g-bet small { color: var(--muted); font-weight: 400; }
.g-bet .val-input { width: 92px; font-size: 16px; }

/* ---- scoreboard -------------------------------------------------------------------- */
.g-overlay { position: fixed; inset: 0; z-index: 100; background: var(--paper); overflow: auto; display: none; padding: 22px 26px; }
.g-overlay.on { display: block; }
.g-overlay .card { max-width: 1280px; margin: 0 auto; box-shadow: var(--shadow-lg); border-top: 4px solid var(--blue); }
.g-racehead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.g-racehead h2 { margin: 0; font-size: 26px; color: var(--bluedk); }
.g-racehead .attempt-note { font-size: 14px; }
.g-racehead .spacer { flex: 1 1 auto; }
.g-race { position: relative; margin-top: 16px; }
.g-lane { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 34px 230px 1fr 90px; gap: 12px; align-items: center;
  height: 44px; transition: transform 0.9s cubic-bezier(.3,.8,.3,1); }
.g-lane .g-rk { font-family: var(--mono); font-weight: 700; color: var(--muted); text-align: right; }
.g-lane .g-nm { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-lane .progress-track { height: 16px; border-radius: 8px; position: relative; overflow: visible; }
.g-lane .progress-track::after { content: ""; position: absolute; right: 0; top: -6px; bottom: -6px; border-right: 3px dashed var(--bluedk); }
.g-lane .progress-fill { border-radius: 8px; transition: width 0.9s cubic-bezier(.3,.8,.3,1); }
.g-lane.g-lead .progress-fill { background: var(--yellow); box-shadow: inset 0 0 0 1px #d9b441; }
.g-lane.g-lead .g-nm { color: #7a5c00; }
.g-lane .g-sc { font-family: var(--mono); font-size: 22px; font-weight: 700; text-align: right; color: var(--bluedk); line-height: 1.05; }
.g-lane .g-bump { display: block; font-size: 12px; color: var(--greendk); }
.g-lane .g-bump.neg { color: var(--reddk); }
.g-lane .g-adj { display: none; gap: 4px; }
.g-overlay.g-editing .g-lane { grid-template-columns: 34px 230px 1fr 90px 110px; }
.g-overlay.g-editing .g-lane .g-adj { display: flex; }
.g-can { width: 26px; vertical-align: middle; }
.g-finishnote { text-align: right; margin-top: 10px; }

/* ---- winners ------------------------------------------------------------------------ */
.g-live .finish-card h3 { font-size: 24px; }
.g-names { font-size: 44px; font-weight: 700; line-height: 1.15; color: var(--ink); margin: 10px 0; letter-spacing: -0.01em; }
.g-cans svg { width: 64px; margin: 0 6px; }
.g-standings { max-width: 640px; margin: 18px auto 0; text-align: left; }
.g-standings td:last-child { text-align: right; font-family: var(--mono); font-weight: 700; }

.g-toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 120; background: var(--bluedk); color: var(--white);
  padding: 8px 16px; border-radius: var(--radius); box-shadow: var(--shadow-md); display: none; font-size: 14px; }
.g-toast.on { display: block; }

/* ---- keepsake --------------------------------------------------------------------------- */
.g-keep .g-prompt { font-size: 17px; }
.g-keep .g-data { font-size: 17px; padding: 5px 11px; }
.g-keep .g-code { font-size: 14.5px; }
.g-keep .g-owed { font-size: 64px; }
.g-keep .g-answer { font-size: 22px; }
.g-row-inline { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.g-row-inline .val-input { width: 120px; }
.g-keep .val-input.g-wide { width: 260px; text-align: left; }
.g-keep .toggle-group button { font-size: 13.5px; padding: 7px 13px; }

@media (max-width: 860px) {
  .g-live .choice-group { grid-template-columns: 1fr; }
  .g-board { gap: 5px; }
  .g-tile { height: 70px; font-size: 20px; }
  .g-cat { font-size: 11.5px; }
  .g-lane { grid-template-columns: 24px 120px 1fr 60px; }
  .g-owed { font-size: 72px; }
  .g-prompt { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-lane, .g-lane .progress-fill, .g-dealing .g-pair, .g-timer .progress-fill { transition: none !important; animation: none !important; }
}

/* ---- roll call: absent students struck through ---------------------------- */
.g-tick[data-present]:not(.on) { color: var(--muted); text-decoration: line-through; background: #f4f6f7; }

/* ---- phones mode (served by tutorial10b_server.py) --------------------------- */
.g-said { font-family: var(--mono); font-weight: 700; color: var(--bluedk); margin-left: 4px; }
.g-tick.on .g-said { color: var(--greendk); }
.g-join { margin-left: auto; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.g-join.in { color: var(--greendk); font-weight: 700; }
.g-join.away { color: #7a5c00; font-weight: 700; }
.g-join .mini-btn { padding: 2px 7px; font-size: 11.5px; }
.g-addr { font-size: 1.15em; }
.gpill.hide, .mini-btn.hide { display: none; }

/* ---- student page ------------------------------------------------------------- */
.g-player .page { max-width: 760px; padding-bottom: 60px; }
.g-me { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.g-me .g-pts { margin-left: auto; font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--bluedk); }
.g-player .choice-group .choice { font-size: 17px; padding: 13px 14px; }
.g-player .choice.g-pick { border-color: var(--blue); background: var(--blue-08); box-shadow: inset 0 0 0 1px var(--blue); }
.g-player .val-input { font-size: 20px; width: 100%; max-width: 320px; text-align: left; padding: 10px 12px; }
.g-lockbtn { font-size: 17px; padding: 11px 22px; }
.g-wait { text-align: center; padding: 34px 20px; }
.g-wait .g-big { font-size: 24px; font-weight: 700; color: var(--bluedk); margin: 0 0 6px; }
.g-joinlist { display: grid; gap: 8px; margin-top: 12px; }
.g-joinlist .choice { font-size: 17px; font-weight: 600; }
.g-status { position: fixed; right: 12px; bottom: 12px; }
.g-status.bad { color: var(--reddk); border-color: var(--red); }
.g-player .toggle-group button { font-size: 15px; padding: 10px 14px; }

/* ============================================================================
   WEEK 14 BLOCKS (Graph Trail: Lecture 12, Graphs, BFS and DFS)
   Appended to the Tutorial 10A stylesheet (base_styles.css) and the
   Tutorial 10B blocks (tut10b_blocks.css), both unchanged, the same way the
   Tutorial 11A blocks were. The page frame (header, phase strip, hero,
   section heads, cards, buttons, footer) is the house style; only the graph,
   trace and registration pieces are new. Graph look matches the 11A trees.
   ========================================================================= */
:root {
  /* names used by the Week 14 scripts, mapped onto the house palette */
  --cream: var(--white); --ink-mid: var(--muted); --ink-soft: #9aa7b0;
  --display: var(--sans); --body: var(--sans);
  --border: 1px solid var(--line); --shadow: var(--shadow-md);
}
.hide { display: none !important; }
.w14 .page { max-width: 1280px; }
.w14 .phase-inner, .w14 .header-inner { max-width: 1280px; }
.w14 h1, .w14 h2, .w14 h3 { font-family: var(--sans); line-height: 1.25; }
.w14 h2 { color: var(--bluedk); }
.w14 .section-head { margin: 4px 0 6px; }

/* ---------------------------------------------------------------- stage chips
   Student tabs and projector stage buttons look like the house phase chips. */
.tabs, .stages .day { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.stages { display: grid; gap: 6px; flex: 1 1 auto; }
.stages .day b { font-family: var(--mono); font-size: 11.5px; color: var(--muted); width: 66px; }
.tabs button, .stages button {
  padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fbfcfd; font-family: var(--sans); font-size: 12.5px; color: var(--muted);
  cursor: pointer; transition: all .2s ease;
}
.tabs button:hover, .stages button:hover { border-color: var(--blue); color: var(--bluedk); }
.tabs button.done { background: var(--green-15); border-color: var(--green); color: var(--greendk); }
.tabs button.now, .stages button.cur {
  background: var(--blue-08); border-color: var(--blue); color: var(--bluedk); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--blue-30);
}
.tabs button.sel { outline: 2px solid var(--bluedk); outline-offset: 1px; }

/* ---------------------------------------------------------------- cards */
.w14 .card { margin: 0 0 18px; }
.w14 .card.ok { border-left: 4px solid var(--green); }
.card .prompt { font-size: 16.5px; font-weight: 600; margin: 0 0 12px; }
.card .tick { float: right; }
.card .tick, .pill {
  font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 2px 9px;
  border-radius: 12px; border: 1px solid var(--line); background: #f4f6f7; color: var(--muted);
}
.card .tick { background: var(--green-15); border-color: var(--greendk); color: var(--greendk); }
.card .hint {
  display: none; margin-top: 12px; padding: 11px 14px; border-radius: var(--radius); font-size: 14px;
  background: var(--yellow-25); border: 1px solid #e0b93c;
}
.card .hint.show { display: block; }
.card.teach { border-top: 4px solid var(--blue); box-shadow: var(--shadow-md); padding: 22px 26px; }
.card.teach h2 { font-size: 24px; margin: 0 0 8px; }
.card.teach ul { margin: 6px 0 10px 1.2em; padding: 0; }
.card.teach li { margin: 4px 0; }
.msg {
  padding: 11px 14px; margin-bottom: 16px; border-radius: var(--radius); font-weight: 600;
  background: var(--yellow-25); border: 1px solid var(--yellow); color: #5c4500;
}
.big { font-size: 26px; font-weight: 700; color: var(--bluedk); }
.muted { color: var(--muted); }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }

/* ---------------------------------------------------------------- buttons
   .btn is the house button; the Week 14 "light" variant is the house ghost. */
.btn.light { background: var(--white); color: var(--bluedk); }
.btn.light:hover:not(:disabled) { background: var(--blue-08); color: var(--bluedk); }
.choices { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; }
.choice { width: 100%; }
.choice.right { border-color: var(--green); background: var(--green-15); color: var(--greendk); font-weight: 600; }
.choice.wrong { border-color: var(--red); background: var(--red-10); text-decoration: line-through; color: var(--muted); }
input.numin {
  font: inherit; font-size: 17px; width: 8rem; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
input.numin:focus { outline: 2px solid var(--blue-30); border-color: var(--blue); }

/* ---------------------------------------------------------------- graphs
   Same look as the Tutorial 11A trees: white vertices with an ink ring,
   grey edges, red for the hot path, blue for search-tree edges. */
.gbox { max-width: 560px; width: 100%; }
svg.graph { width: 100%; height: auto; display: block; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); }
.edge { stroke: #7d8a94; stroke-width: 2.4; }
.edge.dashed { stroke: var(--reddk); stroke-dasharray: 8 6; stroke-width: 3.5; }
.edge.pick { stroke: var(--bluedk); stroke-width: 6; }
.edge.hot { stroke: var(--reddk); stroke-width: 4.5; }
.edge.tree { stroke: var(--bluedk); stroke-width: 4.5; }
.edge.cold { stroke: #b8c2c9; stroke-width: 1.6; stroke-dasharray: 4 4; }
.ehit { stroke: transparent; stroke-width: 22; }
.clickable { cursor: pointer; }
.vertex { fill: #fff; stroke: var(--ink); stroke-width: 2.2; transition: fill .2s, stroke .2s; }
.vgrp.clickable:hover .vertex { fill: #fff3cc; }
.vlabel { font-family: var(--sans); font-weight: 700; font-size: 17px; text-anchor: middle; fill: var(--ink); pointer-events: none; }
.badge { fill: var(--ink); stroke: #fff; stroke-width: 1.2; }
.badgetext { font-family: var(--sans); font-weight: 700; font-size: 11px; text-anchor: middle; fill: #fff; pointer-events: none; }
.nlabel { font-family: var(--sans); font-size: 12.5px; text-anchor: middle; font-weight: 600; fill: var(--muted); pointer-events: none; }

/* ---------------------------------------------------------------- queue / stack strips
   Small array cells, after the house .acell. */
.strip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 44px; margin: 8px 0; }
.strip .cell {
  min-width: 40px; height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--white);
  font-family: var(--mono); font-weight: 700; font-size: 16px; color: var(--ink);
}
.strip .cell.front { border-color: var(--blue); background: var(--blue-15); }
.strip .cell.top { border-color: var(--red); background: var(--red-10); }
.strip .lbl { font-size: 12px; color: var(--muted); margin: 0 6px 0 0; font-weight: 600; }

/* ---------------------------------------------------------------- adjacency list and matrix */
.alist .arow { display: flex; align-items: center; gap: 6px; margin: 4px 0; padding: 3px 6px; border-radius: var(--radius); }
.alist .arow.act { background: var(--yellow-25); }
.alist .head, .alist .chip {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; border-radius: 4px;
}
.alist .head { background: var(--bluedk); color: #fff; }
.alist .chip { border: 2px solid var(--blue); background: var(--white); min-width: 34px; padding: 0; font-size: 16px; color: var(--ink); }
.keys { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.keys button {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); font-family: var(--mono); font-weight: 700; font-size: 17px; cursor: pointer;
}
.keys button:hover { border-color: var(--blue); background: var(--blue-08); }
table.mx { border-collapse: collapse; font-family: var(--mono); }
table.mx td, table.mx th { width: 38px; height: 36px; text-align: center; border: 1px solid var(--line); font-weight: 700; }
table.mx th { background: var(--blue-08); color: var(--bluedk); }
table.mx td { cursor: pointer; background: var(--white); color: #b8c2c9; }
table.mx td:hover { background: #fff3cc; }
table.mx td.on { background: var(--green-15); color: var(--greendk); }

/* ---------------------------------------------------------------- matching (stage 14) */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.match .fact, .match .lens {
  display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  font-family: var(--sans); font-size: 14.5px; cursor: pointer;
}
.match .lens:hover, .match .fact:hover { border-color: var(--blue); background: var(--blue-08); }
.match .fact.sel { border-color: var(--blue); background: var(--blue-15); }
.match .fact.done { border-color: var(--green); background: var(--green-15); color: var(--greendk); }

/* ---------------------------------------------------------------- wrong answers */
.shake { animation: w14shake .45s; border-color: var(--red) !important; }
@keyframes w14shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* ---------------------------------------------------------------- projector */
.w14-host .page { max-width: 1400px; }
.w14-host .phase-inner, .w14-host .header-inner, .w14-host .g-controls-inner { max-width: 1400px; }
.grid2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; }
.reggrid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 22px; align-items: start; }
.bar { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; margin: 6px 0 4px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); }
.heat .opt { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.heat .opt span { flex: 0 0 45%; }
.heat .opt .bar { flex: 1; margin: 0; }
.heat .opt .bar i { background: var(--blue); }
.heat .opt.right { color: var(--greendk); font-weight: 700; }
.heat .opt.right .bar i { background: var(--greendk); }
.names { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.names h3 { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.names .cols2 { column-count: 2; column-gap: 8px; }
.names button {
  display: block; width: 100%; text-align: left; margin: 0 0 6px; break-inside: avoid;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  padding: 6px 10px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.names button:not(.reg):hover { border-color: var(--blue); background: var(--blue-08); color: var(--bluedk); }
.names button.reg { background: #f1f3f4; color: #9aa7b0; text-decoration: line-through; border-style: dashed; }
.pending { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--red);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 16px 18px; margin-bottom: 16px; }
.codebig { font-family: var(--mono); font-size: 46px; font-weight: 700; color: var(--reddk); letter-spacing: .04em; }
.nextup { font-size: 34px; font-weight: 700; color: var(--bluedk); line-height: 1.15; }
#toasts { position: fixed; right: 16px; top: 120px; width: 360px; z-index: 95; }
.toast { background: var(--white); color: var(--ink); padding: 10px 13px; margin-bottom: 8px; font-weight: 600; font-size: 14px;
  border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.toast.err { border-left-color: var(--red); } .toast.cp { border-left-color: var(--yellow); }
.addr { font-family: var(--mono); }
@media (max-width: 980px) { .grid2, .reggrid, .match { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- class turns and timers */
.timer { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--bluedk);
  border: 1px solid var(--blue); background: var(--blue-08); border-radius: var(--radius); padding: 3px 10px; }
.timer.paused { opacity: .6; }
.timer.warn { color: #7a5c00; border-color: #e0b93c; background: var(--yellow-25); }
.timer.over { color: #fff; border-color: var(--reddk); background: var(--reddk); }
.timer.big { font-size: 34px; padding: 4px 16px; }
.pill.mins { margin-left: auto; white-space: nowrap; }
.card .card-header .prompt { flex: 1; margin-bottom: 0; }
.card .card-header { align-items: flex-start; margin-bottom: 12px; }
.card.together { border-left: 4px solid var(--blue); background: #fbfdfe; }
.livepanel { border-top: 4px solid var(--blue); box-shadow: var(--shadow-md); }
.livepanel.mine { border-top-color: var(--red); box-shadow: 0 0 0 3px var(--red-10), var(--shadow-md); }
.livehead { font-size: 20px; font-weight: 700; color: var(--bluedk); margin-bottom: 10px; }
.livepanel.mine .livehead { color: var(--reddk); }
.picked { font-size: 40px; font-weight: 700; color: var(--reddk); line-height: 1.1; }
.picked-sub { color: var(--muted); font-weight: 600; }
.modes { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.modes button { border: 0; border-right: 1px solid var(--line); background: var(--white); padding: 4px 9px;
  font-family: var(--sans); font-size: 12px; color: var(--muted); cursor: pointer; }
.modes button:last-child { border-right: 0; }
.modes button.on { background: var(--bluedk); color: #fff; font-weight: 700; }
.modes button:disabled { opacity: .35; cursor: not-allowed; }
.trow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); margin-bottom: 8px; }
.trow.live { border-color: var(--blue); box-shadow: inset 4px 0 0 var(--blue); }
.trow .tl { font-size: 14px; font-weight: 600; }
.trow .ts { font-size: 12.5px; color: var(--muted); }
.wrongflash { color: var(--reddk); font-weight: 700; }
.roll button.present { background: var(--green-15); border-color: var(--greendk); color: var(--greendk); }
.roll .joined { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--bluedk); margin-left: 6px; }

.pill:empty { display: none; }

/* ---------------------------------------------------------------- teach-card diagrams */
.tpics { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; align-items: flex-start; }
.tpic { margin: 0; flex: 1 1 240px; max-width: 360px; }
.tpic-strip, .tpic-bars { flex-basis: 100%; max-width: 100%; }
.tpic figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.tpic svg.graph { max-height: 230px; }
table.mx.small td, table.mx.small th { width: 28px; height: 26px; font-size: 13px; cursor: default; }
.tpic .alist .head, .tpic .alist .chip { width: 28px; height: 28px; min-width: 28px; font-size: 14px; }
.tbar { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; align-items: center; margin: 5px 0; font-size: 13.5px; }
.tbar i { display: block; height: 14px; border-radius: 3px; }
.tbar b { font-family: var(--mono); }

/* ---------------------------------------------------------------- hover colours
   Buttons sitting on the teal header (Not me) and other dark or tinted
   buttons keep readable text on hover. */
.site-header .mini-btn { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.6); }
.site-header .mini-btn:hover { background: var(--blue); color: #fff; border-color: #fff; }
.mini-btn.primary:hover, .btn:hover:not(:disabled):not(.light) { color: #fff; }
a.mini-btn { text-decoration: none; display: inline-block; }
a.mini-btn:hover { color: var(--bluedk); }
.modes button:not(.on):not(:disabled):hover { background: var(--blue-08); color: var(--bluedk); }
.modes button.on:hover { background: var(--blue); color: #fff; }
.tabs button.now:hover, .stages button.cur:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.tabs button.done:hover { background: var(--green); color: #17330a; border-color: var(--greendk); }
.names button.present:hover { background: var(--greendk) !important; color: #fff !important; }
.choice.right:hover:not(:disabled) { background: var(--green-15); color: var(--greendk); }
.keys button:hover, .match .lens:hover, .match .fact:hover { color: var(--bluedk); }