:root {
  color-scheme: light dark;
  --bg: #f6f3ee;
  --panel: #fffdfa;
  --ink: #221f1c;
  --muted: #5f594f;
  --line: #ddd5c8;
  --accent: #8a4b2a;
  --bad: #b3261e;
  --btn-ink: #fffdfa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1917;
    --panel: #242120;
    --ink: #f2ede6;
    --muted: #b4aca1;
    --line: #3a3532;
    --accent: #e0a075;
    --bad: #ff8f86;
    --btn-ink: #241f1b;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
h1 { font-size: 1.9rem; margin: 0.5rem 0 0.25rem; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; margin: 0 0 0.35rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 0.35rem; }
.lead { margin: 0 0 0.5rem; color: var(--muted); }
.hint { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.75rem; }
/* The worked examples under the title: a fixed illustration of what the page
   does, written to match the boxes as they arrive. */
.example {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.example strong { color: var(--ink); }
/* The four examples live in a folded <details> panel, so on a phone the first
   gauge box is one press away instead of a wall of prose away. The summary is
   the pressable row and is drawn like one of the examples it opens; while the
   panel is open the row joins the first example below it so the five read as a
   single block rather than five separate cards. A folded panel is not laid
   out, which is why copy.js opens it for the print job (see its own note). */
.examples { margin: 0.75rem 0 0.25rem; }
.examples summary {
  padding: 0.5rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.examples summary::marker { color: var(--accent); }
.examples summary:hover { background: var(--bg); }
.examples summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.examples[open] summary { border-radius: 0 8px 0 0; }
.examples[open] .example:first-of-type {
  margin-top: 0;
  border-top: 0;
  border-radius: 0;
}
.examples[open] .example:last-of-type { margin-bottom: 0; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
}
.grid { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.field { flex: 1 1 11rem; min-width: 0; }
.field label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
input, select, button, textarea { font: inherit; color: inherit; }
input, select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
/* A tick box is a tick box: it keeps its own size instead of filling the column.
   (In print it goes with the other controls: the .grid rule below hides it.) */
input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}
.pair { display: flex; gap: 0.4rem; }
.pair select { width: auto; flex: 0 0 auto; }
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}
.out {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.7rem;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-variant-numeric: tabular-nums;
}
/* A result box with nothing in it is a blank strip: leave it out of the page
   rather than showing an empty panel where a figure would be. :empty matches
   only an element with no children at all, which is how the markup is written. */
.out:empty { display: none; }
.msg {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--bad);
  border-radius: 8px;
  color: var(--bad);
  font-weight: 600;
}
input.bad { border-color: var(--bad); }
.hidden { display: none; }
button {
  padding: 0.5rem 0.85rem;
  background: var(--accent);
  color: var(--btn-ink);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 0.88rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}
footer {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  color: var(--muted);
  font-size: 0.9rem;
}
a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Printing: send the answers to paper, not the form. The boxes, the drop-downs,
   the tick box, the buttons and the footer are left off the sheet — the same
   list the page's section 8 hint and About note give the reader — and everything
   prints black on white, whichever colour scheme the screen is set to.

   A refused box is the one thing that must NOT be left off: if a box was
   refused, the message says so on the sheet as well, so a printed page can
   never look like a clean set of figures when one of them was not worked out.
   (.msg:not(.hidden) beats the plain .hidden rule further up, and an empty
   message stays hidden because it carries .hidden.)

   The summary box is left off too while it is still empty (see the rule below
   the control list): an empty textarea prints as a tall blank frame, a box
   sitting where a block of figures should be, which reads as an answer that
   failed to appear. */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.4;
  }
  main { max-width: none; padding: 0; }
  h1 { font-size: 16pt; }
  h2 { font-size: 12pt; }
  h3 { font-size: 11pt; }
  .lead, .hint, .example { color: #333; }
  .card {
    background: #fff;
    border: 1px solid #999;
    border-radius: 0;
    padding: 0.4rem 0.6rem;
    margin: 0.5rem 0;
  }
  .example {
    background: #fff;
    border: 1px solid #999;
    border-left: 2px solid #666;
    border-radius: 0;
    padding: 0.3rem 0.6rem;
    margin: 0.4rem 0;
  }
  /* The worked-examples panel is opened for the print job by copy.js, so its
     summary row prints as the quiet heading of the four examples below it:
     flat, no marker, no colour. */
  .examples { margin: 0.5rem 0; }
  .examples summary {
    background: #fff;
    border: 1px solid #999;
    border-left: 2px solid #666;
    border-radius: 0;
    padding: 0.3rem 0.6rem;
    color: #333;
    font-size: 10pt;
  }
  .examples summary::marker { content: ""; }
  .examples[open] summary { border-radius: 0; }
  .out {
    background: #fff;
    border-left: 2px solid #666;
    border-radius: 0;
    padding: 0.2rem 0 0.2rem 0.6rem;
  }
  /* Everything you could type into or click: the boxes, the drop-downs, the
     tick box in section 1 and the gather button. */
  .grid, .pair, input, select, button, footer { display: none; }
  /* The summary box and its label: on the sheet only once there is a block in
     it. :placeholder-shown is true while the textarea still holds nothing, so
     this hides the whole field (label and box together) until the gather button
     has filled it; copy.js writes the block into the box, the placeholder state
     ends and the field prints from then on. If a browser does not know :has(),
     the rule is simply skipped and the empty box prints as it used to. */
  .summary-field:has(#summary:placeholder-shown) { display: none; }
  .msg:not(.hidden) {
    display: block;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
  }
  textarea {
    background: #fff;
    color: #000;
    border: 1px solid #999;
    border-radius: 0;
    min-height: 12rem;
    resize: none;
  }
  /* Keep a heading beside the figures it names, and keep a short block off a
     page edge: a border split across two sheets reads as two answers. */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .example, .out, .msg { break-inside: avoid; page-break-inside: avoid; }
  a { color: #000; }
}