/* Sum Quest — cosy pixel.
 *
 * Pixel type is confined to chrome, labels and numbers. It never touches an
 * equation: indices and fractions in a pixel face are hard to read, and
 * misreading a question is a stupid way to lose a mark. Maths is JetBrains
 * Mono, prose is Nunito. */

:root {
  /* Warm dusk. Plum ink on peach paper; amber earns, mint confirms, rose burns. */
  --ink:        #3d2b45;
  --ink-soft:   #6b5570;
  --ground:     #fbeee2;
  --surface:    #fffaf4;
  --surface-2:  #f6e3d2;
  --line:       #3d2b45;

  --amber:      #e08b2c;
  --amber-soft: #f7d9ab;
  --mint:       #3f8f78;
  --mint-soft:  #cbe8de;
  --rose:       #d1466f;
  --rose-soft:  #f7d2dd;
  --clay:       #c0503a;
  --clay-soft:  #f3d3c9;

  /* Oakylane */
  --town-sky:   #f3e0cd;
  --town-wall:  #d9b28c;
  --town-roof:  #b4574a;
  --town-glass: #7fb7c9;
  --town-door:  #6b4630;
  --town-flag:  #d1466f;
  --town-stone: #a89a92;
  --town-ghost: #e6d3c2;

  --shadow:     4px 4px 0 var(--line);
  --shadow-sm:  3px 3px 0 var(--line);
  --ease:       cubic-bezier(0.85, 0, 0.15, 1);

  --font-pixel: "Silkscreen", "Courier New", monospace;
  --font-body:  "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-math:  "JetBrains Mono", ui-monospace, "Consolas", monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #f7e9dc;
    --ink-soft:   #b9a3bd;
    --ground:     #241b2c;
    --surface:    #322640;
    --surface-2:  #3f3050;
    --line:       #150f1c;
    --amber:      #f5b455;
    --amber-soft: #6a4a26;
    --mint:       #6fcfae;
    --mint-soft:  #24503f;
    --rose:       #f57ba0;
    --rose-soft:  #55243a;
    --clay:       #ef8a6f;
    --clay-soft:  #5c2b23;
    --town-sky:   #2e2340;
    --town-wall:  #8a6a55;
    --town-roof:  #9a4a45;
    --town-glass: #5d93a8;
    --town-door:  #4a3020;
    --town-flag:  #f57ba0;
    --town-stone: #6d6068;
    --town-ghost: #3a2d4a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink:        #f7e9dc;
  --ink-soft:   #b9a3bd;
  --ground:     #241b2c;
  --surface:    #322640;
  --surface-2:  #3f3050;
  --line:       #150f1c;
  --amber:      #f5b455;
  --amber-soft: #6a4a26;
  --mint:       #6fcfae;
  --mint-soft:  #24503f;
  --rose:       #f57ba0;
  --rose-soft:  #55243a;
  --clay:       #ef8a6f;
  --clay-soft:  #5c2b23;
  --town-sky:   #2e2340;
  --town-wall:  #8a6a55;
  --town-roof:  #9a4a45;
  --town-glass: #5d93a8;
  --town-door:  #4a3020;
  --town-flag:  #f57ba0;
  --town-stone: #6d6068;
  --town-ghost: #3a2d4a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  background-image:
    linear-gradient(var(--surface-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface-2) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 12px 14px 90px; }
.hidden { display: none !important; }
.sprite { image-rendering: pixelated; flex: none; }

/* ---------------------------------------------------------------- chrome */

.card {
  background: var(--surface);
  border: 3px solid var(--line);
  box-shadow: var(--shadow);
  padding: 16px;
}

.topbar { display: flex; align-items: stretch; gap: 6px; margin-bottom: 14px; }

.stat {
  flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
  background: var(--surface); border: 3px solid var(--line);
  box-shadow: var(--shadow-sm); padding: 7px 8px;
}
.stat-icon { width: 20px; height: 20px; }
.stat-val { font-family: var(--font-pixel); font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1; }
.stat-lab {
  font-family: var(--font-pixel); font-size: 7.5px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-top: 3px;
}

.icon-btn {
  flex: none; width: 40px; background: var(--surface); border: 3px solid var(--line);
  box-shadow: var(--shadow-sm); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; font-size: 16px; padding: 0;
}

h1 { font-family: var(--font-pixel); font-size: 20px; line-height: 1.3; margin: 4px 0 2px; text-wrap: balance; }
h2 { font-family: var(--font-pixel); font-size: 16px; line-height: 1.4; margin: 2px 0 8px; text-wrap: balance; }
.sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; max-width: 48ch; }
.hint { color: var(--ink-soft); font-size: 13px; margin: 6px 0; }

.eyebrow {
  font-family: var(--font-pixel); font-size: 8.5px; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--ink-soft); margin: 20px 0 8px;
}

.btn {
  font-family: var(--font-pixel); font-size: 11.5px; padding: 13px 16px;
  background: var(--amber); color: #2b1c0d; border: 3px solid var(--line);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.btn:hover  { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.btn.ghost  { background: var(--surface); color: var(--ink); }
.btn.wide   { width: 100%; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.mini {
  font-family: var(--font-pixel); font-size: 8.5px; padding: 6px 8px;
  background: var(--surface-2); color: var(--ink); border: 2px solid var(--line);
  cursor: pointer; white-space: nowrap;
}
.mini.go { background: var(--amber); color: #2b1c0d; }
.mini:active { transform: translate(1px, 1px); }

/* ------------------------------------------------------------- countdown */

.countdown {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.cd {
  flex: 1; border: 3px solid var(--line); background: var(--surface-2);
  padding: 8px 10px; box-shadow: var(--shadow-sm);
}
.cd.urgent { background: var(--clay-soft); }
.cd-days { font-family: var(--font-pixel); font-size: 17px; font-variant-numeric: tabular-nums; }
.cd-lab { font-family: var(--font-pixel); font-size: 7.5px; text-transform: uppercase;
          letter-spacing: 0.06em; color: var(--ink-soft); display: block; margin-top: 3px; }
.cd-note {
  font-size: 12.5px; color: var(--ink-soft); margin: 0 0 14px;
  border-left: 3px solid var(--clay); padding-left: 10px;
}

/* ------------------------------------------------------------- Oakylane */

.town-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.town-title { font-family: var(--font-pixel); font-size: 11px; }
.town-sub { font-size: 12px; color: var(--ink-soft); }

.town {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  background: var(--town-sky);
  border: 3px solid var(--line); box-shadow: var(--shadow);
  padding: 12px 8px 8px; margin-bottom: 16px;
  align-items: end;
}
.town-plot { text-align: center; min-width: 0; }
.town-b { width: 100%; height: auto; max-height: 96px; image-rendering: pixelated; display: block; }
.town-name {
  font-family: var(--font-pixel); font-size: 8px; margin-top: 6px;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.town-pct { font-family: var(--font-pixel); font-size: 9px; color: var(--ink-soft); }
.town-plot.done .town-name { color: var(--mint); }

/* ---------------------------------------------------------------- quests */

.quests { margin-top: 4px; }
.quest {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
  border: 2px solid var(--line); background: var(--surface); padding: 8px 10px; margin-bottom: 6px;
}
.quest.done { background: var(--mint-soft); }
.quest-box {
  width: 16px; height: 16px; border: 2px solid var(--line); background: var(--surface-2);
  display: grid; place-items: center; font-size: 11px; line-height: 1;
}
.quest.done .quest-box { background: var(--mint); color: var(--surface); }
.quest-text { font-size: 13.5px; }
.quest-xp { font-family: var(--font-pixel); font-size: 9px; color: var(--amber); }
.quest-won { font-family: var(--font-pixel); font-size: 10px; color: var(--mint); margin: 0 0 10px; }

.bosses { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.btn.boss { background: var(--rose); color: #fff; text-align: left; }
.btn.boss.beaten { background: var(--mint-soft); color: var(--ink); }

/* ----------------------------------------------------------------- path */

.path { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.path li:nth-child(odd)  .tile { margin-right: 20px; }
.path li:nth-child(even) .tile { margin-left: 20px; }

.tile {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;
  background: var(--surface); border: 3px solid var(--line); box-shadow: var(--shadow);
  padding: 9px 10px;
}
.tile.locked { opacity: 0.6; background: var(--surface-2); box-shadow: none; }
.tile-body { min-width: 0; }
.tile-name { font-family: var(--font-pixel); font-size: 10px; line-height: 1.5; display: block; }
.tile-meta { font-size: 12px; color: var(--ink-soft); margin-top: 3px; display: block; }
.tile-actions { display: flex; flex-direction: column; gap: 4px; }
.lock { font-size: 17px; text-align: center; }

.ring { display: block; }
.ring-track { stroke: var(--surface-2); }
.ring-fill  { stroke: var(--mint); transition: stroke-dashoffset 900ms var(--ease); }
.ring-num { font-family: var(--font-pixel); font-size: 12px; fill: var(--ink); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- misconceptions */

.slip-item { border-left: 4px solid var(--amber); padding: 8px 0 8px 10px; margin-bottom: 10px; }
.slip-topic { font-family: var(--font-pixel); font-size: 8.5px; color: var(--ink-soft); margin-bottom: 4px; }
.slip-say { font-size: 13.5px; }

/* ---------------------------------------------------------------- drill */

.qcard { display: flex; flex-direction: column; gap: 12px; }
.qcount {
  font-family: var(--font-pixel); font-size: 8.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.qmeta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-soft); }
.combo { font-family: var(--font-pixel); font-size: 9px; color: var(--amber); opacity: 0; }
.combo.on { opacity: 1; }
.tier { font-family: var(--font-pixel); font-size: 8.5px; color: var(--amber); margin-left: 6px; }

.pips { display: flex; gap: 3px; flex-wrap: wrap; }
.pip { width: 9px; height: 9px; border: 2px solid var(--line); background: var(--surface-2); }
.pip.hit  { background: var(--mint); }
.pip.miss { background: var(--clay); }

.qtext { font-family: var(--font-math); font-size: 21px; line-height: 1.5; margin: 4px 0; overflow-wrap: break-word; }
.qtext.prose { font-family: var(--font-body); font-size: 17px; }

.answer-row { display: flex; gap: 8px; }
input[type="text"] {
  flex: 1; min-width: 0; font-family: var(--font-math); font-size: 19px; padding: 12px;
  background: var(--surface); color: var(--ink); border: 3px solid var(--line); border-radius: 0;
}
input[type="text"]::placeholder { color: var(--ink-soft); opacity: 0.7; }

.keys { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.key {
  /* flex:1 so all eight share one row at 375px rather than orphaning the last */
  flex: 1 1 0; min-width: 30px;
  font-family: var(--font-math); font-size: 15px; padding: 7px 4px;
  background: var(--surface-2); color: var(--ink); border: 2px solid var(--line); cursor: pointer;
}
.key:active { transform: translate(1px, 1px); }

.verdict { border: 3px solid var(--line); padding: 12px; }
.verdict.right { background: var(--mint-soft); }
/* Deliberately NOT red. A pink alarm panel delivers a verdict before a single
   word is read, which is exactly the wrong first impression for someone who
   already assumes the fault is hers. Neutral ground, amber marker: this is
   information, not a telling-off. Correct answers stay mint, so the two are
   still instantly distinguishable. */
.verdict.wrong { background: var(--surface-2); border-left-width: 7px; border-left-color: var(--amber); }
.verdict-title { font-family: var(--font-pixel); font-size: 11px; margin: 0 0 6px; }
.verdict p { margin: 0 0 4px; font-size: 14px; }
.verdict .ans { font-family: var(--font-math); font-size: 18px; font-weight: 700; }
.watch { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px !important; }
.watch b { color: var(--ink); }

.xp-pop { font-family: var(--font-pixel); font-size: 12px; color: var(--mint); }
.drill-foot { display: flex; gap: 8px; margin-top: 14px; }
.drill-foot .btn { flex: 1; }

/* ------------------------------------------------------------- fractions */

.frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: -0.45em; margin: 0 0.14em; line-height: 1.05;
}
.frac-n { padding: 0 0.28em; }
.frac-d { padding: 0 0.28em; border-top: 0.09em solid currentColor; }
.mixed { display: inline-flex; align-items: center; gap: 0.16em; }
.mixed-w { line-height: 1; }
sup { font-size: 0.68em; vertical-align: super; line-height: 0; }

/* ----------------------------------------------------------- interactive */

.iv-host { display: flex; flex-direction: column; gap: 10px; }
.iv-svg { width: 100%; height: auto; max-height: 220px; background: var(--surface-2); border: 2px solid var(--line); }
.iv-line { stroke: var(--ink); stroke-width: 2; fill: none; }
.iv-transversal { stroke: var(--ink-soft); }
.iv-mark { stroke: var(--mint); stroke-width: 2; fill: none; }
.iv-tick { stroke: var(--ink-soft); stroke-width: 1.5; }
.iv-tick-label { font-family: var(--font-pixel); font-size: 8px; fill: var(--ink-soft); text-anchor: middle; }
.iv-label { font-family: var(--font-math); font-size: 13px; fill: var(--ink); }
.iv-unknown { fill: var(--clay); font-weight: 700; }
.iv-hit { fill: transparent; cursor: pointer; }
.iv-hit:hover { fill: var(--amber-soft); }
.iv-point { fill: var(--surface); stroke: var(--clay); stroke-width: 3; }
.iv-point.closed { fill: var(--clay); }
.iv-ray { stroke: var(--clay); stroke-width: 3; }
.iv-ray-head { fill: var(--clay); }
.iv-shape { fill: var(--amber-soft); stroke: var(--ink); stroke-width: 2.5; }
.iv-cand { stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 5 4; }
.iv-cand.on { stroke: var(--mint); stroke-width: 4; stroke-dasharray: none; }
.iv-cand-hit { stroke: transparent; stroke-width: 16; cursor: pointer; }

.iv-controls { display: flex; flex-direction: column; gap: 8px; }
.iv-sub { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0; }
.iv-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.iv-input {
  font-family: var(--font-math); font-size: 17px; padding: 9px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--line);
}
.iv-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-choice {
  font-family: var(--font-body); font-size: 13px; padding: 8px 10px; text-align: left;
  background: var(--surface-2); color: var(--ink); border: 2px solid var(--line); cursor: pointer;
}
.iv-choice.on { background: var(--mint-soft); border-color: var(--mint); }
.iv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.iv-pool { display: flex; flex-wrap: wrap; gap: 5px; }
.iv-chip {
  font-family: var(--font-math); font-size: 15px; padding: 7px 10px;
  background: var(--amber-soft); border: 2px solid var(--line); color: var(--ink); cursor: pointer;
}
.iv-chip.on { background: var(--amber); }
.iv-chip:disabled { opacity: 0.3; cursor: default; }

.sl { border: 2px solid var(--line); background: var(--surface-2); }
.sl-row { display: grid; grid-template-columns: 40px 1fr; border-bottom: 2px solid var(--line); }
.sl-row:last-child { border-bottom: none; }
.sl-stem {
  font-family: var(--font-math); font-size: 16px; font-weight: 700;
  background: var(--surface); border: none; border-right: 2px solid var(--line);
  color: var(--ink); cursor: pointer; padding: 8px;
}
.sl-stem:hover { background: var(--amber-soft); }
.sl-leaves { display: flex; gap: 8px; padding: 8px; flex-wrap: wrap; }
.sl-leaf { font-family: var(--font-math); font-size: 16px; }

/* -------------------------------------------------------------- rulebook */

.book { line-height: 1.62; }
.bk-lead { font-size: 15.5px; margin: 0 0 8px; }
.bk-why { font-size: 13.5px; color: var(--ink-soft); border-left: 3px solid var(--amber); padding-left: 10px; }
.bk-sec { margin-top: 26px; }
.bk-sec h3 { font-family: var(--font-pixel); font-size: 11px; margin: 0 0 8px; line-height: 1.5; }
.bk-sec p { font-size: 14.5px; margin: 0 0 10px; max-width: 62ch; }

.bk-rules { margin: 10px 0; display: flex; flex-direction: column; gap: 0; }
.bk-rules > div {
  display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--surface-2);
}
.bk-rules dt { font-family: var(--font-math); font-size: 13.5px; font-weight: 700; }
.bk-rules dd { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

.bk-eg { margin: 14px 0; padding: 12px; background: var(--surface-2); border: 2px solid var(--line); }
.bk-eg figcaption { font-family: var(--font-math); font-size: 16px; margin-bottom: 8px; }
.bk-eg ol { margin: 0 0 8px; padding-left: 20px; }
.bk-eg li { font-size: 14px; margin-bottom: 4px; }
.bk-ans { font-family: var(--font-math); font-size: 16px; font-weight: 700; color: var(--mint); margin: 0 !important; }
.bk-note { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0 !important; }

.bk-trap { border: 2px solid var(--line); padding: 10px; margin-bottom: 10px; background: var(--surface); }
.bk-trap-name { font-family: var(--font-pixel); font-size: 9.5px; color: var(--clay); margin-bottom: 6px; }
.bk-trap-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: start; margin-bottom: 4px; }
.bk-trap-row > span { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.bk-trap-row code { font-family: var(--font-math); font-size: 14px; }
.bk-trap-row p { margin: 0 !important; font-size: 13.5px; }

/* ----------------------------------------------------------------- misc */

.note { background: var(--amber-soft); border: 3px solid var(--line); padding: 12px; font-size: 13.5px; margin-top: 22px; }
.note b { display: block; font-family: var(--font-pixel); font-size: 9.5px; margin-bottom: 6px; }

.summary-stats { display: flex; gap: 8px; margin: 14px 0; }
.summary-stats div { flex: 1; text-align: center; border: 3px solid var(--line); padding: 10px 4px; background: var(--surface-2); }
.summary-stats strong { font-family: var(--font-pixel); font-size: 17px; display: block; }
.summary-stats span { font-family: var(--font-pixel); font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }

footer { margin-top: 28px; text-align: center; }

/* ---------------------------------------------------------------- juice */

.shake { animation: shake 260ms var(--ease); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(var(--shake, 4px) * -1)); }
  40% { transform: translateX(var(--shake, 4px)); }
  60% { transform: translateX(calc(var(--shake, 4px) * -0.6)); }
  80% { transform: translateX(calc(var(--shake, 4px) * 0.4)); }
}

.burst { position: fixed; pointer-events: none; z-index: 40; }
.burst i {
  position: absolute; width: 6px; height: 6px; display: block;
  animation: fly var(--d, 400ms) var(--ease) forwards;
}
@keyframes fly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* ------------------------------------------------------------------ a11y */

:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 420px) {
  .wrap { padding: 10px 10px 84px; }
  .path li:nth-child(odd)  .tile { margin-right: 10px; }
  .path li:nth-child(even) .tile { margin-left: 10px; }
  h1 { font-size: 17px; }
  .qtext { font-size: 19px; }
  .iv-grid { grid-template-columns: 1fr; }
  .stat-lab { font-size: 7px; }
  .town { gap: 4px; padding: 10px 6px 6px; }
  .bk-trap-row { grid-template-columns: 1fr; gap: 2px; }
  .bk-rules > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------------------------ tone layer */

/* The verdict is read in a fixed order: what happened, then the answer, then
   why it is not her fault, then what happens next. The attribution line is
   deliberately not styled as a warning. */
.verdict.wrong .verdict-title { color: var(--ink); }
.ans-line { margin-top: 8px !important; font-size: 14px; }
.kind {
  margin-top: 10px !important;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 3px solid var(--mint);
  padding-left: 10px;
}
.forward { margin-top: 8px !important; font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.recovered {
  font-family: var(--font-pixel); font-size: 9.5px; color: var(--mint);
  margin: 2px 0 6px !important; line-height: 1.6;
}
.run-note { font-size: 14px; line-height: 1.6; margin: 0 0 14px; }

/* A stacked fraction is two lines tall, so inside flowing prose it shoves the
   surrounding lines apart unevenly. Shrink it slightly and give those blocks a
   roomier line-height so the spacing stays even instead of jumping. */
.watch, .kind, .ans-line, .slip-say, .bk-sec p, .bk-eg li { line-height: 1.78; }
.watch .frac, .kind .frac, .slip-say .frac, .bk-sec p .frac, .bk-eg li .frac { font-size: 0.86em; }

/* =========================================================== multi-page */

.nav { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.nav-link {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 9px 11px; text-decoration: none;
  background: var(--surface); color: var(--ink-soft);
  border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--line);
}
.nav-link.on { background: var(--ink); color: var(--ground); }
.nav-link:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tab {
  flex: 1; font-family: var(--font-pixel); font-size: 9.5px; padding: 11px 8px;
  background: var(--surface); color: var(--ink-soft);
  border: 3px solid var(--line); box-shadow: var(--shadow-sm); cursor: pointer;
}
.tab.on { background: var(--amber); color: #2b1c0d; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.chip {
  font-family: var(--font-body); font-size: 12.5px; padding: 8px 10px;
  background: var(--surface-2); color: var(--ink-soft);
  border: 2px solid var(--line); cursor: pointer;
}
.chip.on { background: var(--mint-soft); color: var(--ink); border-color: var(--mint); }
.chip.locked { opacity: 0.55; cursor: not-allowed; }
.chip:active { transform: translate(1px, 1px); }

/* ============================================================== exams */

.exam-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  background: var(--surface); border: 3px solid var(--line);
  box-shadow: var(--shadow-sm); padding: 8px 10px;
  position: sticky; top: 0; z-index: 5;
}
.exam-clock {
  font-family: var(--font-pixel); font-size: 20px; font-variant-numeric: tabular-nums;
}
.exam-clock.low { color: var(--clay); }
.exam-prog { flex: 1; font-size: 12px; color: var(--ink-soft); }
.btn.small { padding: 8px 10px; font-size: 9.5px; }

.qgrid { display: flex; flex-wrap: wrap; gap: 5px; }
.qcell {
  width: 34px; height: 34px; font-family: var(--font-pixel); font-size: 10px;
  background: var(--surface-2); color: var(--ink-soft);
  border: 2px solid var(--line); cursor: pointer;
}
.qcell.done { background: var(--mint-soft); color: var(--ink); }
.qcell.here { border-color: var(--amber); border-width: 3px; }

.past-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--surface-2);
}
.past-date { flex: 1; font-size: 13px; }
.past-score { font-family: var(--font-math); font-size: 14px; }
.past-pct { font-family: var(--font-pixel); font-size: 11px; color: var(--ink-soft); }

.ex-q { border: 2px solid var(--line); background: var(--surface); margin-bottom: 8px; }
.ex-q summary {
  font-family: var(--font-pixel); font-size: 9.5px; padding: 9px 10px; cursor: pointer;
}
.ex-prompt { font-family: var(--font-math); font-size: 16px; padding: 0 10px; }
.ex-you { font-size: 13px; padding: 0 10px; color: var(--ink-soft); }
.ex-you b { font-family: var(--font-math); color: var(--ink); }
.ex-q .watch { padding: 0 10px; }
.ex-steps { margin: 8px 0 12px; padding-left: 30px; }
.ex-steps li { font-size: 13.5px; margin-bottom: 4px; }

.mark-row { display: grid; grid-template-columns: 1fr 62px 62px 34px; gap: 6px; margin-bottom: 6px; }
.mark-topic, .mark-num {
  font-family: var(--font-body); font-size: 13px; padding: 8px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--line);
  border-radius: 0; min-width: 0;
}
.mark-num { font-family: var(--font-math); text-align: center; }
.reteach { margin: 8px 0 0; padding-left: 22px; }
.reteach li { font-size: 14px; margin-bottom: 8px; }
.reteach .mini { margin-left: 6px; text-decoration: none; display: inline-block; }

/* ============================================================== focus */

:root {
  --room-wall: #e4cdb4;
  --room-window: #a8d4e0;
  --room-plant: #6f9e6a;
  --room-lamp: #6b4630;
  --room-lamplight: #f6d98a;
  --room-desk: #b9855c;
  --room-leg: #8a6144;
  --room-floor: #caa88a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --room-wall: #3b2f47; --room-window: #2a4a5c; --room-plant: #4a6f52;
    --room-lamp: #4a3020; --room-lamplight: #d8b45e; --room-desk: #6b4a34;
    --room-leg: #503626; --room-floor: #4a3a44;
  }
}
:root[data-theme="dark"] {
  --room-wall: #3b2f47; --room-window: #2a4a5c; --room-plant: #4a6f52;
  --room-lamp: #4a3020; --room-lamplight: #d8b45e; --room-desk: #6b4a34;
  --room-leg: #503626; --room-floor: #4a3a44;
}

.room-host { margin-bottom: 14px; }
.room {
  width: 100%; height: auto; display: block; image-rendering: pixelated;
  border: 3px solid var(--line); box-shadow: var(--shadow);
  background: var(--room-wall);
}
/* Time of day tints the whole room rather than recolouring every rect. */
.room-day   { filter: none; }
.room-dawn  { filter: saturate(0.9) brightness(1.02) hue-rotate(-8deg); }
.room-dusk  { filter: saturate(0.85) brightness(0.9) hue-rotate(12deg); }
.room-night { filter: saturate(0.7) brightness(0.72) hue-rotate(20deg); }

.focus-card { text-align: center; }
.timer-wrap { margin-bottom: 14px; }
.timer {
  font-family: var(--font-pixel); font-size: 46px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.timer.low { color: var(--clay); }
.timer-lab { font-size: 13px; color: var(--ink-soft); margin-top: 6px; min-height: 20px; }
.focus-controls { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.focus-controls .btn { flex: 1; }
.focus-card .chips { justify-content: center; }
.focus-card .eyebrow { text-align: center; }

.goal-field { display: block; text-align: left; margin-top: 16px; }
.goal-field span { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.goal-field input {
  width: 100%; font-family: var(--font-body); font-size: 15px; padding: 10px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: 0;
}

body.resting { --amber: var(--mint); }

@media (max-width: 420px) {
  .mark-row { grid-template-columns: 1fr 54px 54px 30px; }
  .timer { font-size: 38px; }
  .nav-link { font-size: 8px; padding: 8px 8px; }
}

/* Room palette. Warmer and more furnished than the first pass — it is meant to
   be somewhere she wants to sit, not a diagram of a room. */
:root {
  --room-frame: #8a6144;
  --room-shelf: #a97c53;
  --room-book: #b4574a;
  --room-pot: #b07a52;
  --room-mug: #d1466f;
  --room-rug: #c98f6e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --room-frame: #5a4230; --room-shelf: #6b4f38; --room-book: #9a4a45;
    --room-pot: #7a553a; --room-mug: #a8446090; --room-rug: #6b4a3c;
  }
}
:root[data-theme="dark"] {
  --room-frame: #5a4230; --room-shelf: #6b4f38; --room-book: #9a4a45;
  --room-pot: #7a553a; --room-mug: #a84460; --room-rug: #6b4a3c;
}

/* ------------------------------------------------------- room animation */

:root {
  --room-star: #f6ecd2;
  --room-cloud: #ffffff;
  --room-rain: #8fb8cc;
  --room-steam: #d9c9bd;
}

/* Everything below is decoration. The global prefers-reduced-motion block
   already zeroes every animation, so none of it needs its own guard. */
.plant {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway 7s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.1deg); }
}

/* The lamp only breathes while the timer runs — an idle room should be still. */
.glow { opacity: 0.85; }
.room.running .glow { animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.steam {
  transform-box: fill-box;
  opacity: 0;
  animation: rise var(--d, 3s) ease-out infinite;
  animation-delay: var(--o, 0s);
}
@keyframes rise {
  0%   { opacity: 0;    transform: translateY(2px) scaleY(0.6); }
  25%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translateY(-14px) scaleY(1.4); }
}

.star { animation: twinkle var(--d, 3s) ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

.cloud {
  opacity: 0.5;
  animation: drift var(--d, 40s) linear infinite;
  animation-delay: var(--o, 0s);
}
@keyframes drift {
  from { transform: translateX(-18px); }
  to   { transform: translateX(120px); }
}

.drop {
  opacity: 0.75;
  animation: fall var(--d, 0.7s) linear infinite;
  animation-delay: var(--o, 0s);
}
@keyframes fall {
  from { transform: translateY(-6px); opacity: 0; }
  20%  { opacity: 0.8; }
  to   { transform: translateY(26px); opacity: 0; }
}

/* A disabled button that looks identical to an enabled one is a lie about what
   the interface will do. Start stays amber while the timer runs otherwise. */
.btn:disabled,
.mini:disabled,
.chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn:disabled:hover,
.btn:disabled:active {
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------------ sync */

.sync-code {
  font-family: var(--font-math);
  font-size: 20px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 14px 8px;
  margin: 10px 0;
  background: var(--surface-2);
  border: 3px solid var(--line);
  user-select: all;          /* one tap selects the whole code */
  overflow-wrap: anywhere;
}
.sync-msg { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; min-height: 18px; }

/* --------------------------------------------------------- Oakylane scene */

:root {
  --town-lit:      #ffd98a;
  --town-flagpole: #6b5570;
  --town-chimney:  #8a6144;
  --town-dome:     #7fb7c9;
  --town-hill:     #b9c9a2;
  --town-ground:   #c2b391;
  --town-path:     #d6c9a8;
  --town-cloud:    #ffffff;
  --town-sun:      #f5c451;
  --town-moon:     #f6ecd2;
  --town-star:     #fff6de;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --town-lit: #ffcf6b; --town-flagpole: #5a4a60; --town-chimney: #5a4230;
    --town-dome: #4d7f92; --town-hill: #3d4a3c; --town-ground: #40384a;
    --town-path: #4d4356; --town-cloud: #4a4258; --town-sun: #c9a24a;
    --town-moon: #f0e6cf; --town-star: #fff6de;
  }
}
:root[data-theme="dark"] {
  --town-lit: #ffcf6b; --town-flagpole: #5a4a60; --town-chimney: #5a4230;
  --town-dome: #4d7f92; --town-hill: #3d4a3c; --town-ground: #40384a;
  --town-path: #4d4356; --town-cloud: #4a4258; --town-sun: #c9a24a;
  --town-moon: #f0e6cf; --town-star: #fff6de;
}

.town-frame {
  border: 3px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--town-sky);
  overflow: hidden;
  line-height: 0;              /* kills the inline-svg descender gap */
}
.town {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  shape-rendering: crispEdges; /* no anti-aliased seams between cells */
}

.town-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 6px 0 16px;
}
.town-key {
  border: 2px solid var(--line);
  background: var(--surface);
  padding: 5px 4px;
  text-align: center;
  min-width: 0;
}
.town-key-name {
  display: block;
  font-family: var(--font-pixel);
  font-size: 7.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.town-key-pct {
  display: block;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ink-soft);
  margin-top: 3px;
}

/* Lit windows breathe very slightly, so a finished district looks inhabited
   rather than painted. Reduced-motion already switches this off globally. */
.town-lit { animation: townGlow 5s ease-in-out infinite; }
@keyframes townGlow { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }

.town-star { animation: twinkle 4s ease-in-out infinite; }
.town-cloud { animation: townDrift 70s linear infinite; }
.town-cloud-2 { animation-duration: 95s; animation-delay: -30s; }
@keyframes townDrift {
  from { transform: translateX(-10px); }
  to   { transform: translateX(56px); }
}

@media (max-width: 420px) {
  .town-key-name { font-size: 7px; }
}

/* Finishing flourishes: the Foundry's forge running, the Observatory lit up. */
:root { --town-smoke: #cfc4b8; --town-dome-lit: #a8e0ef; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --town-smoke: #59506a; --town-dome-lit: #7fd0e6; }
}
:root[data-theme="dark"] { --town-smoke: #59506a; --town-dome-lit: #7fd0e6; }

.town-smoke {
  opacity: 0;
  animation: townSmoke 4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 1.1s);
}
@keyframes townSmoke {
  0%   { opacity: 0;    transform: translateY(1px); }
  30%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translateY(-3px); }
}

/* ============================================================ WILDLANDS
 * The Environmental Management region. Same token triplet pattern as the town
 * above: light on bare :root, dark redefined in both the media query and the
 * explicit attribute so the toggle wins in both directions. */

:root {
  --wild-rock:       #9d8f86;
  --wild-rock-dark:  #7a6d66;
  --wild-grass:      #8fae6b;
  --wild-tree:       #5f8f57;
  --wild-trunk:      #7a5636;
  --wild-water:      #6fa8bf;
  --wild-water-lit:  #a8d4e2;
  --wild-metal:      #8a847e;
  --wild-metal-lit:  #3f8f78;
  --wild-soil:       #a67b52;
  --wild-crop:       #d4a94e;
  --wild-lava:       #e0622c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wild-rock: #6d6068; --wild-rock-dark: #4e4450; --wild-grass: #4a6b45;
    --wild-tree: #3a5c3c; --wild-trunk: #56402c; --wild-water: #3f6f86;
    --wild-water-lit: #5d93a8; --wild-metal: #9a949a; --wild-metal-lit: #6fcfae;
    --wild-soil: #6b5237; --wild-crop: #9a7a38; --wild-lava: #d4551f;
  }
}
:root[data-theme="dark"] {
  --wild-rock: #6d6068; --wild-rock-dark: #4e4450; --wild-grass: #4a6b45;
  --wild-tree: #3a5c3c; --wild-trunk: #56402c; --wild-water: #3f6f86;
  --wild-water-lit: #5d93a8; --wild-metal: #9a949a; --wild-metal-lit: #6fcfae;
  --wild-soil: #6b5237; --wild-crop: #9a7a38; --wild-lava: #d4551f;
}

.wildlands { max-height: 300px; }
.wild-wave { animation: wild-wave 4s steps(2) infinite; }
@keyframes wild-wave { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.4; } }

/* ====================================================== CONTENT ITEMS
 * Item types for subjects whose answers cannot be computed. Everything is a
 * button rather than a drag target: dragging on a phone is fiddly and none of
 * these skills are about motor control. */

.ce-host { gap: 12px; }
.ce-hint { font-size: 0.86rem; color: var(--ink-soft); margin: 2px 0 0; }
.ce-label { font-weight: 700; font-size: 0.9rem; }

.ce-text {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; padding: 10px; color: var(--ink);
  background: var(--surface-2); border: 2px solid var(--line); border-radius: 8px;
}

/* --- multiple choice --- */
.ce-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ce-opt {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 11px 13px; color: var(--ink); background: var(--surface-2);
  border: 2px solid var(--line); border-radius: 10px; line-height: 1.45;
}
.ce-opt:hover { background: var(--surface); }
.ce-opt.on { background: var(--amber-soft); box-shadow: var(--shadow-sm); }

/* --- classify --- */
.ce-classify { display: flex; flex-direction: column; gap: 8px; }
.ce-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--surface-2);
  border: 2px solid var(--line); border-radius: 10px;
}
.ce-row-label { flex: 1 1 130px; font-weight: 600; }
.ce-row-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-cat {
  font: inherit; font-size: 0.82rem; cursor: pointer; padding: 6px 10px;
  color: var(--ink); background: var(--surface); border: 2px solid var(--line);
  border-radius: 999px;
}
.ce-cat.on { background: var(--mint-soft); font-weight: 700; }

/* --- sequence --- */
.ce-seq-chosen { list-style: decimal inside; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ce-seq-chosen:empty { display: none; }
.ce-seq-pool { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-seq {
  font: inherit; font-size: 0.86rem; cursor: pointer; text-align: left;
  padding: 8px 11px; color: var(--ink); background: var(--surface-2);
  border: 2px solid var(--line); border-radius: 10px;
}
.ce-seq.on { background: var(--mint-soft); }

/* --- match --- */
.ce-match { display: flex; gap: 10px; align-items: flex-start; }
.ce-match-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ce-pair {
  font: inherit; font-size: 0.84rem; text-align: left; cursor: pointer;
  padding: 9px 10px; color: var(--ink); background: var(--surface-2);
  border: 2px solid var(--line); border-radius: 10px; line-height: 1.35;
  overflow-wrap: anywhere;
}
.ce-pair.on { background: var(--amber-soft); }
.ce-pair.linked { background: var(--mint-soft); border-style: dashed; }

/* --- structured, and its mark scheme --- */
.ce-struct { display: flex; flex-direction: column; gap: 10px; }
.ce-marks { margin: 0; font-family: var(--font-pixel); font-size: 0.78rem; color: var(--ink-soft); }
.ce-cmd {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--amber-soft); color: var(--ink);
}
.ce-lock { align-self: flex-start; }
.ce-h { margin: 4px 0 0; font-size: 0.95rem; }
.ce-yours {
  padding: 10px; background: var(--surface-2);
  border: 2px dashed var(--line); border-radius: 10px;
}
.ce-yours-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ce-scheme { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ce-tick {
  display: flex; gap: 10px; width: 100%; text-align: left; font: inherit;
  cursor: pointer; padding: 10px; color: var(--ink); background: var(--surface-2);
  border: 2px solid var(--line); border-radius: 10px;
}
.ce-tick.on { background: var(--mint-soft); }
.ce-tick-box {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
  border: 2px solid var(--line); border-radius: 4px; background: var(--surface);
}
.ce-tick.on .ce-tick-box { background: var(--mint); }
.ce-tick-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ce-point { font-weight: 700; line-height: 1.4; }
.ce-dev { color: var(--ink-soft); line-height: 1.4; }
.ce-pm { font-family: var(--font-pixel); font-size: 0.7rem; color: var(--ink-soft); }
.ce-score { margin: 0; font-family: var(--font-pixel); font-size: 0.95rem; }

/* Where a question came from. Shown so it is always clear that nothing here
 * was made up by the app. */
.cite {
  margin: 10px 0 0; font-size: 0.78rem; color: var(--ink-soft);
  font-family: var(--font-pixel);
}

/* --- the syllabus view --- */
.book-quote {
  margin: 6px 0; padding: 8px 12px; border-left: 4px solid var(--amber);
  background: var(--surface-2); font-style: italic;
}
.book-guide, .book-case { color: var(--ink-soft); }
.book-case { font-style: italic; }

@media (max-width: 460px) {
  .ce-match { flex-direction: column; }
  .ce-match-col { width: 100%; }
  .ce-row-label { flex: 1 1 100%; }
}

/* ================================================== AO2 DATA RESPONSE
 * Tables and charts she reads a number off. Deliberately plain: the exam
 * prints values rather than expecting them to be estimated off a gridline, so
 * these print them too. */

.emd-scroll { overflow-x: auto; }
.emd-table {
  border-collapse: collapse; width: 100%; min-width: 240px;
  background: var(--surface-2); border: 2px solid var(--line);
}
.emd-table caption {
  caption-side: top; text-align: left; padding: 0 0 6px;
  font-size: 0.82rem; color: var(--ink-soft);
}
.emd-table th, .emd-table td {
  border: 1px solid var(--line); padding: 7px 10px; text-align: left;
  font-variant-numeric: tabular-nums;
}
.emd-table thead th { background: var(--amber-soft); font-size: 0.85rem; }
.emd-table tbody th { font-weight: 600; }

.emd-chart {
  width: 100%; height: auto; max-height: 230px;
  background: var(--surface-2); border: 2px solid var(--line);
}
.emd-cap { margin: 4px 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.emd-grid { stroke: var(--line); stroke-width: 0.4; opacity: 0.28; }
.emd-axisline { stroke: var(--line); stroke-width: 1.2; }
.emd-bar { fill: var(--mint); stroke: var(--line); stroke-width: 1; }
.emd-line { fill: none; stroke: var(--mint); stroke-width: 2; }
.emd-pt { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.emd-axis { font-family: var(--font-pixel); font-size: 7px; fill: var(--ink-soft); text-anchor: middle; }
.emd-left { text-anchor: start; }
.emd-right { text-anchor: end; }
.emd-val { font-family: var(--font-pixel); font-size: 7px; fill: var(--ink); text-anchor: middle; }

.emd-input {
  width: 100%; box-sizing: border-box; font: inherit; padding: 10px;
  color: var(--ink); background: var(--surface-2);
  border: 2px solid var(--line); border-radius: 8px;
}

/* =========================================================== CASEBOOK
 * Her own case study notes. The empty state is deliberately visible rather
 * than tidy: a slot with nothing in it is a question she cannot answer yet. */

.cb-count {
  font-family: var(--font-pixel); font-size: 0.9rem;
  padding: 8px 12px; background: var(--amber-soft);
  border: 2px solid var(--line); border-radius: 8px; display: inline-block;
}
.cb-slot {
  margin: 18px 0; padding: 14px;
  background: var(--surface-2); border: 2px solid var(--line); border-radius: 12px;
}
.cb-slot.empty { border-style: dashed; opacity: 0.92; }
.cb-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
}
.cb-ref { font-family: var(--font-pixel); font-size: 0.72rem; color: var(--ink-soft); }
.cb-pct { font-family: var(--font-pixel); font-size: 0.8rem; }
.cb-required {
  margin: 8px 0 14px; padding: 8px 12px;
  border-left: 4px solid var(--amber); background: var(--surface); font-style: italic;
}
.cb-field { margin: 10px 0; }
.cb-label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 4px; }
.cb-input, .cb-text {
  width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px;
  color: var(--ink); background: var(--surface);
  border: 2px solid var(--line); border-radius: 8px;
}
.cb-text { resize: vertical; }
.cb-hint { margin: 3px 0 0; font-size: 0.78rem; color: var(--ink-soft); }

/* ============================================================= DIAGRAMS
 * Environmental Management diagrams. Exam-style: boxes, arrows and labels,
 * not scenery. Themed with the same tokens as everything else so dark mode
 * needs no second set of drawings. */

:root {
  --dg-box:     #f6e3d2;
  --dg-sky:     #e9f0f6;
  --dg-sea:     #6fa8bf;
  --dg-land:    #b9c9a2;
  --dg-cloud:   #ffffff;
  --dg-plate:   #b3a79c;
  --dg-lava:    #e0622c;
  --dg-water:   #4f8fa8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dg-box: #3f3050; --dg-sky: #26303c; --dg-sea: #3f6f86; --dg-land: #3d4a3c;
    --dg-cloud: #55617a; --dg-plate: #6a5f58; --dg-lava: #d4551f; --dg-water: #5d93a8;
  }
}
:root[data-theme="dark"] {
  --dg-box: #3f3050; --dg-sky: #26303c; --dg-sea: #3f6f86; --dg-land: #3d4a3c;
  --dg-cloud: #55617a; --dg-plate: #6a5f58; --dg-lava: #d4551f; --dg-water: #5d93a8;
}

.dg-fig { margin: 14px 0; }
.dg-fig figcaption {
  margin-top: 6px; font-size: 0.8rem; color: var(--ink-soft);
  font-family: var(--font-pixel);
}
.dg {
  width: 100%; height: auto; max-height: 300px; display: block;
  background: var(--surface-2); border: 2px solid var(--line); border-radius: 8px;
}
.dg-wide { max-height: 240px; }

.dg-box { fill: var(--dg-box); stroke: var(--line); stroke-width: 1.4; }
.dg-label { font-size: 8.5px; fill: var(--ink); text-anchor: middle; font-weight: 600; }
.dg-title { font-family: var(--font-pixel); font-size: 9px; fill: var(--ink); text-anchor: middle; }
.dg-side { font-size: 8px; fill: var(--ink-soft); }
.dg-mid { text-anchor: middle; }

.dg-arrow { stroke: var(--ink); stroke-width: 1.6; marker-end: url(#dgArrow); }
.dg-head { fill: var(--ink); }
.dg-faint { stroke: var(--ink-soft); stroke-width: 1.1; stroke-dasharray: 3 3; }
.dg-tagbox { fill: var(--surface); stroke: none; opacity: 0.9; }
.dg-tag { font-size: 7.5px; fill: var(--ink); text-anchor: middle; }
.dg-faint-tag { fill: var(--ink-soft); font-style: italic; }

/* rock cycle */
.dg-igneous { fill: var(--rose-soft); }
.dg-sed     { fill: var(--amber-soft); }
.dg-meta    { fill: var(--mint-soft); }
.dg-magma   { fill: var(--dg-lava); }

/* water cycle */
.dg-sky   { fill: var(--dg-sky); }
.dg-land  { fill: var(--dg-land); stroke: var(--line); stroke-width: 1.2; }
.dg-sea   { fill: var(--dg-sea); }
.dg-cloud { fill: var(--dg-cloud); stroke: var(--line); stroke-width: 1; }
.dg-up    { stroke: var(--rose); }
.dg-down  { stroke: var(--dg-water); }
.dg-flow  { stroke: var(--dg-water); }
.dg-watertable { stroke: var(--dg-water); stroke-width: 1.2; stroke-dasharray: 4 3; }
.dg-tree rect { fill: var(--wild-trunk); }
.dg-tree circle { fill: var(--wild-tree); stroke: var(--line); stroke-width: 1; }

/* Earth and plate margins */
.dg-core-outer { fill: var(--dg-plate); stroke: var(--line); stroke-width: 1.6; }
.dg-mantle { fill: var(--amber-soft); stroke: var(--line); stroke-width: 1.2; }
.dg-core { fill: var(--dg-lava); stroke: var(--line); stroke-width: 1.2; }
.dg-plate { fill: var(--dg-plate); stroke: var(--line); stroke-width: 1.3; }
.dg-plate-sub { fill: var(--dg-plate); stroke: var(--line); stroke-width: 1.3; opacity: 0.75; }
.dg-lava { fill: var(--dg-lava); stroke: var(--line); stroke-width: 1; }
.dg-verdict { font-size: 8px; fill: var(--ink-soft); text-anchor: middle; }
.dg-yes { fill: var(--mint); font-weight: 700; }
.dg-no  { fill: var(--rose); font-weight: 700; }

/* atmosphere */
.dg-atm { stroke: var(--line); stroke-width: 1.2; }
.dg-atm-1 { fill: var(--mint-soft); }
.dg-atm-2 { fill: var(--amber-soft); }
.dg-atm-3 { fill: var(--dg-sky); }
.dg-atm-4 { fill: var(--dg-box); }
.dg-atm-name { font-size: 8px; fill: var(--ink); font-weight: 600; }
.dg-ground { fill: var(--dg-land); stroke: var(--line); stroke-width: 1.2; }

/* pyramids */
.dg-pop { fill: var(--mint); stroke: var(--line); stroke-width: 0.9; }
.dg-pop-f { fill: var(--rose); }
.dg-axis { stroke: var(--line); stroke-width: 1.2; }
.dg-tier { stroke: var(--line); stroke-width: 1.2; }
.dg-tier-num { fill: var(--amber-soft); }
.dg-tier-energy { fill: var(--mint-soft); }
.dg-tier-label { font-size: 7.5px; fill: var(--ink); text-anchor: middle; }

/* water distribution */
.dg-bar { stroke: var(--line); stroke-width: 1.3; }
.dg-bar-salt { fill: var(--dg-sea); }
.dg-bar-ice { fill: var(--dg-sky); }
.dg-bar-liquid { fill: var(--mint-soft); }
.dg-bar-label { font-size: 8px; fill: var(--ink); text-anchor: middle; font-weight: 600; }
.dg-faint-fill { fill: var(--ink-soft); opacity: 0.18; }

/* carbon cycle */
.dg-air    { fill: var(--dg-sky); }
.dg-plant  { fill: var(--mint-soft); }
.dg-animal { fill: var(--rose-soft); }
.dg-fossil { fill: var(--dg-plate); }
.dg-in  { stroke: var(--mint); }
.dg-out { stroke: var(--rose); }
.dg-lead { stroke: var(--ink-soft); stroke-width: 1; }

/* =========================================================== PHOTOGRAPHS
 * Rock specimens. The only image files in the project, and they earn it:
 * 1.1 asks for the characteristics of named rocks, and crystal size is a
 * thing you see rather than read. */

.ph-grid { margin: 14px 0; }
.ph-group-block { margin: 0 0 16px; }
.ph-group-head {
  margin: 0 0 8px; font-family: var(--font-pixel); font-size: 0.8rem;
  color: var(--ink-soft);
}
.ph-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ph-fig {
  margin: 0; flex: 1 1 180px; min-width: 0;
  background: var(--surface-2); border: 2px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.ph {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; background: var(--surface);
}
.ph-fig figcaption {
  display: block; padding: 8px 10px 10px; font-size: 0.84rem; line-height: 1.4;
}
.ph-group { display: block; font-family: var(--font-pixel); font-size: 0.68rem; color: var(--ink-soft); }
.ph-why { display: block; margin-top: 4px; color: var(--ink-soft); }
.ph-credit { margin: 6px 0 0; font-size: 0.76rem; color: var(--ink-soft); }

/* In a question the photo stands alone: the caption would name the answer. */
.ce-host .ph-fig { flex: 1 1 100%; margin-bottom: 10px; }
.ce-host .ph { aspect-ratio: auto; max-height: 260px; object-fit: contain; }

@media (max-width: 460px) {
  .ph-row { gap: 10px; }
  .ph-fig { flex: 1 1 100%; }
}

/* Attribution shown on the page, for the images whose licence requires it. */
.ph-attr {
  display: block; margin-top: 6px; font-size: 0.72rem; color: var(--ink-soft);
}
.ph-bare figcaption { padding: 6px 10px; }
.ph-bare-credit { font-size: 0.72rem; color: var(--ink-soft); }