/* =========================================================================
   worksheets.css — the screen UI, with the design-pass changes applied.
   Two worlds live below and must not leak into each other:
     SCREEN  the builder (everything prefixed ws-)
     PAPER   the sheets (.sheet …) — sized in mm and pt ONLY, never px/rem.
   ========================================================================= */

.ws-page-wrap { background: var(--bg); }

/* ------------------------------------------------------------------ intro */

.ws-intro {
  padding: 30px 24px 6px;
}
.ws-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sky);
  color: var(--blue-deep);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
}
.ws-intro h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  margin: 14px 0 10px;
  letter-spacing: -0.02em;
}
.ws-intro h1 .accent { color: var(--orange); }
.ws-intro p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.5;
}

/* ============================================================ BUILDER SHELL */

/* The content guardrail is the site's, not this page's. site.css sets
   `.wrap { max-width: 1040px; padding: 0 24px }` and steps that padding to
   18px at 640px — the shared nav and footer on this page are already inside
   it, so anything wider here makes the page step between two container
   widths as you scroll past the header. Match the shared value and the
   shared breakpoint; the vertical padding is this page's own. */
.ws-intro, .ws-shell { max-width: 1040px; margin: 0 auto; }
.ws-shell { padding: 16px 24px 70px; }
@media (max-width: 640px) {
  .ws-intro { padding: 24px 18px 6px; }
  .ws-shell { padding: 12px 18px 44px; }
}

.ws-stage { padding: 6px 0 0; }

/* --- the tab bar ---------------------------------------------------------
   After the diet: tabs on the left, Print on the right, nothing else. The
   page count rides ON the Print button (it is a fact about the print job)
   and "Different sums" lives down beside the sheet it re-rolls. */

.ws-tabbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 -1px;
}

.ws-tabs { display: flex; gap: 4px; align-items: flex-end; }

.ws-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--line);
  border-bottom-color: transparent;
  border-radius: 13px 13px 0 0;
  padding: 10px 16px 11px;
  cursor: pointer;
  transition: background .16s, color .16s, padding .16s;
}
.ws-tab svg { width: 17px; height: 17px; opacity: .9; }
.ws-tab:hover { background: rgba(255, 255, 255, .8); color: var(--blue-deep); }
.ws-tab[aria-selected="true"] {
  background: var(--card);
  color: var(--blue-deep);
  padding-top: 12px;
  box-shadow: 0 -3px 10px rgba(23, 33, 62, .06);
}
.ws-tab.is-key[aria-selected="true"] { color: #B0311F; }
.ws-tab.is-setup[aria-selected="true"] { color: var(--ink); }
.ws-tab[hidden] { display: none; }

.ws-tabbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  margin-right: 15px;  /* stepped in from the frame's right edge */
  /* The row bottom-aligns (the tabs must join the frame), so this sets the
     icons' height: 1px puts the glyph centres level with the tab labels. */
  padding-bottom: 1px;
}

/* Bare icon actions — no pill behind them, just the glyph. The rounded box
   exists only to give the focus ring and hit area a shape. The page count is
   visually hidden inside the print button but still feeds its accessible
   name, its tooltip, and the status announcement. */
.ws-btn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .15s, transform .12s;
}
/* An unsized inline SVG defaults to about 300x150. */
.ws-btn-icon svg { width: 21px; height: 21px; flex: none; }
.ws-btn-icon:hover { color: var(--blue-deep); }
.ws-btn-icon:active { transform: translateY(1px); }
.ws-btn-icon-print { color: var(--orange); }
.ws-btn-icon-print:hover { color: var(--orange-deep); }
/* Print is the button the whole page is for — give it 20% over the shuffle
   glyph so it reads first. The 38px button around it does not change, so
   both glyph centres stay level with the tab labels. */
.ws-btn-icon-print svg { width: 25.2px; height: 25.2px; }
.ws-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 820px) {
  /* One row, no wrap: the tabs flex and scroll inside the space the two
     icons leave, so the actions never drop to a second line. The scroll is
     contained — the page itself never scrolls sideways. */
  .ws-tabbar { gap: 8px; flex-wrap: nowrap; }
  .ws-tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
  .ws-tab { padding: 9px 12px 10px; font-size: 12.5px; white-space: nowrap; }
  .ws-tabbar-actions { flex: none; }
}

/* --- the frame the tabs belong to ----------------------------------------
   The tab that is not showing is PARKED — absolutely positioned and
   invisible — rather than display:none, so it keeps real geometry and
   fitSheets() can measure it from any tab. */

.ws-panelbox { position: relative; }

#setupView[hidden], #sheetView[hidden] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}
#sheetView[hidden] { display: block; }
.ws-setup[hidden] { display: grid; }

.ws-panelbox {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
@media (max-width: 620px) { .ws-panelbox { padding: 14px; border-radius: var(--radius); } }

/* --- the pager (class runs only) ------------------------------------------
   A floating pill below the sticky nav while a taller-than-screen sheet
   scrolls — stepping a class run never means scrolling back up first.
   (width:fit-content is on this print-hidden pill, not any page wrapper —
   the fit-content dead end doesn't apply.) */

.ws-pager {
  position: sticky;
  top: 74px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: var(--shadow-sm);
}
.ws-pager[hidden] { display: none; }
.ws-pager-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
  min-width: 14ch;
  text-align: center;
}
.ws-pager-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 10px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s, color .15s, opacity .15s;
}
.ws-pager-btn svg { width: 18px; height: 18px; }
.ws-pager-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-deep); }
.ws-pager-btn:disabled { opacity: .35; cursor: default; }

/* --- SET UP ---------------------------------------------------------------
   Two fixed columns under a full-width style picker. LEFT is the maths
   (Which tables, Questions); RIGHT is the paperwork (On the sheet,
   Printing) — reading order matches decision order. Each column owns its
   cards outright, so collapsing one moves nothing else. */

.ws-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) { .ws-setup { grid-template-columns: minmax(0, 1fr); } }

#grpStyle { grid-column: 1 / -1; }

.ws-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.ws-group {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 4px 16px 6px;
}
.ws-group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 0 11px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  user-select: none;
  -webkit-user-select: none;
}
.ws-group > summary::-webkit-details-marker { display: none; }
.ws-group > summary::after {
  content: "";
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
  opacity: .75;
}
.ws-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ws-group > summary:hover { color: var(--blue-deep); }
.ws-group-body { padding: 2px 0 14px; }

/* --- fields --------------------------------------------------------------- */

.ws-field { margin: 0 0 12px; }
.ws-field:last-child { margin-bottom: 0; }
.ws-field label, .ws-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.ws-field input[type="text"],
.ws-field input[type="number"],
.ws-minmax input[type="number"],
.ws-field select,
.ws-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  font: inherit;
  font-size: 14.5px;
  background: #FBFCFE;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ws-field textarea { resize: vertical; min-height: 82px; line-height: 1.45; }
.ws-field input::placeholder, .ws-field textarea::placeholder { color: #9AA5BE; }
.ws-field input:hover, .ws-minmax input:hover, .ws-field select:hover, .ws-field textarea:hover { border-color: var(--line-strong); }
.ws-field input:focus, .ws-minmax input:focus, .ws-field select:focus, .ws-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3.5px var(--sky);
}
.ws-hint { font-size: 12px; color: var(--ink-faint); margin: 6px 0 0; line-height: 1.45; }
.ws-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* spacing utilities — replacing the old inline styles */
.ws-hint-lead { margin: 0 0 12px; }
.ws-mb { margin-bottom: 12px; }
.ws-mt { margin-top: 14px; }

/* --- style picker --------------------------------------------------------- */

.ws-templates { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 900px) { .ws-templates { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) {
  /* A swipeable rail instead of six stacked rows: all twelve styles in one
     thumb-height band. The scrolling is contained inside the picker — the
     page itself still never scrolls sideways. */
  .ws-templates {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 31%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .ws-tpl { scroll-snap-align: start; }
}
.ws-tpl {
  /* One accent pair for every tile: a sky chip behind the drawing,
     blue-deep strokes. The thumbnails draw in currentColor, so this is the
     single place the picker's colour lives. */
  --tpl-ink: var(--blue-deep);
  --tpl-tint: var(--sky);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 11px 5px 10px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: var(--ink-soft);
  transition: border-color .16s, background .16s, color .16s, transform .12s, box-shadow .16s;
}
.ws-tpl:hover {
  border-color: var(--tpl-ink);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(23, 33, 62, .12);
}
.ws-tpl:active { transform: translateY(0) scale(.98); }
.ws-tpl[aria-pressed="true"] {
  border-color: var(--tpl-ink);
  background: var(--tpl-tint);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--tpl-ink);
}
/* A tick on the selected tile: colour alone is easy to miss across twelve
   tiles, and not everyone sees the colour. */
.ws-tpl[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--tpl-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
/* The drawing is the tile's whole job — let it use the room the tile has,
   sitting on its sky chip while the label stays on white below. */
.ws-tpl-art {
  width: 100%;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--tpl-tint);
  border-radius: 9px;
  color: var(--tpl-ink);   /* the currentColor strokes pick this up */
}
.ws-tpl[aria-pressed="true"] .ws-tpl-art { background: rgba(255, 255, 255, .6); }
.ws-th { width: 62px; height: 44px; display: block; }
.ws-tpl-name { font-size: 10.5px; font-weight: 800; line-height: 1.2; text-align: center; }
.ws-tpl-blurb {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-faint);
  background: var(--bg);
  border-radius: 10px;
  padding: 9px 11px;
}

/* --- number tiles ---------------------------------------------------------- */

.ws-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ws-chip {
  padding: 10px 0;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform .12s, background .16s, border-color .16s, color .16s;
}
.ws-chip:hover { border-color: var(--blue); color: var(--blue-deep); }
.ws-chip:active { transform: scale(.92); }
.ws-chip[aria-pressed="true"] {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: #fff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .28);
}
.ws-chip-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ws-mini-link {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-deep);
  background: var(--sky);
  border: 0;
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background .15s;
}
.ws-mini-link:hover { background: var(--lilac); }

/* --- full-width "Which tables" ---------------------------------------------
   The card takes the first position and spans both columns, so the twelve
   numbers stand in a single rank across the full width — the whole choice
   visible in one sweep, no wrap to scan past. Presets and the multiplier
   range share one line beneath it. */

#grpTables { grid-column: 1 / -1; }
#grpTables .ws-chips { grid-template-columns: repeat(12, 1fr); }
/* Narrower than ~680px, twelve across turns the chips into slivers — fall
   back to two ranks of six. */
@media (max-width: 680px) { #grpTables .ws-chips { grid-template-columns: repeat(6, 1fr); } }

.ws-tables-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 12px;
}
.ws-tables-foot .ws-chip-actions { margin-top: 0; }
.ws-minmax { display: flex; align-items: center; gap: 8px; }
.ws-minmax label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
.ws-minmax input[type="number"] {
  width: 76px;
  padding: 8px 10px;
  text-align: center;
}

/* --- checkboxes ------------------------------------------------------------ */

.ws-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 8px 9px;
  border-radius: 10px;
  transition: background .15s;
}
.ws-check:hover { background: var(--bg); }
.ws-check:last-child { margin-bottom: 0; }
.ws-check input { margin-top: 1px; width: 17px; height: 17px; accent-color: var(--blue-deep); flex: none; }
.ws-check span { line-height: 1.4; }

/* --- keyboard focus --------------------------------------------------------
   :focus-visible fires for keyboard focus, not mouse clicks, so nothing
   flashes when tapped. */

.ws-tab:focus-visible, .ws-btn-icon:focus-visible, .ws-chip:focus-visible,
.ws-tpl:focus-visible, .ws-mini-link:focus-visible, .ws-pager-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ============================================================= LIGHT TABLE */

.ws-warn {
  background: var(--peach);
  border: 1px solid #F0C68A;
  color: #8A4B00;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 14px;
}

.ws-fitnote {
  background: var(--sky);
  color: var(--blue-ink);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 12px;
}
.ws-fitnote[hidden] { display: none; }

.ws-paper { display: block; position: relative; }

/* Every page stays in the DOM because Print needs the whole stack; hidden
   pages are PARKED (laid out, not painted) so fitSheets() can measure them. */
.ws-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}
.ws-page.is-shown {
  position: static;
  visibility: inherit;   /* not `visible` — a child must not undo a parked parent */
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
  animation: ws-page-in .34s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes ws-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-page { animation: none; }
  .ws-tpl, .ws-chip, .ws-tab, .ws-btn-icon { transition: none; }
}

.ws-scaler {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  outline: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(23, 33, 62, .10), 0 20px 44px -16px rgba(23, 33, 62, .28);
}
.ws-scaler > .sheet { transform-origin: top left; }

/* ==================================================================== PAPER
   Everything below draws on the sheet. mm/pt only — never px, never rem. */

.sheet {
  --ws-ink: #101010;
  --ws-label: #3d3d3d;
  --ws-quiet: #757575;
  --ws-rule: 0.35mm solid var(--ws-ink);
  --ws-hair: 0.22mm solid #8b8b8b;
  --ws-edge: 0.5mm solid var(--ws-ink);
  --ws-gutter: 7.5mm;

  background: #fff;
  color: var(--ws-ink);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 12pt;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
}

.sheet-inner { position: relative; height: 100%; box-sizing: border-box; padding-bottom: 7mm; }

/* The masthead is a small FORM: labelled boxes in one bordered strip, not
   rules floating in space. The strip itself closes the head, so the old
   heavy rule has gone. All mm/pt, as everywhere on paper. */
/* The brand signs the footer only — nothing sits above the strip now, so
   the head starts at the top edge and the saved room goes below it instead. */
.sheet-head { margin-bottom: 7mm; }

.sheet-school {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6mm;
  margin-bottom: 2.5mm;
}
.sheet-school-name {
  font-size: 10.5pt;
  font-weight: 800;
  letter-spacing: .01em;
}

/* One bordered strip of labelled boxes. Column ratios keep the old field
   proportions: Name widest, Date next, Class smallest. */
.sheet-form {
  display: grid;
  grid-template-columns: 5.2fr 2.6fr 3.4fr;
  border: 0.3mm solid var(--ws-ink);
  border-radius: 2mm;
  overflow: hidden;
}
/* Four boxes when School / Teacher joins the strip (nothing typed). */
.sheet-form-4 { grid-template-columns: 5.6fr 4fr 2.4fr 3fr; }
.sheet-cell { padding: 1.5mm 3mm 1.2mm; }
.sheet-cell-div { border-left: var(--ws-hair); }
.sheet-cell b {
  display: block;
  font-size: 6.5pt;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ws-label);
  margin-bottom: 0.6mm;
}
/* The box IS the field: a typed value prints in it, a blank one is simply
   room to write — no underline needed. */
.sheet-cell .fill {
  display: block;
  min-height: 6mm;
  font-size: 10.5pt;
  font-weight: 600;
  line-height: 1.2;
}

.sheet-title { position: relative; text-align: center; margin: 0 0 4mm; }
.sheet-title h1 {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 17pt;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.sheet-sub {
  font-size: 9.5pt;
  color: var(--ws-label);
  margin: 1.2mm auto 0;
  max-width: 130mm;
  line-height: 1.35;
}
.sheet-score {
  position: absolute;
  right: 0;
  top: 0;
  border: var(--ws-hair);
  border-radius: 1.5mm;
  padding: 1.6mm 3.5mm;
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ws-label);
  text-align: center;
  line-height: 1.3;
}
.sheet-score i { display: block; font-style: normal; font-size: 13pt; letter-spacing: 0; }

.sheet-body { margin-top: 5mm; }

.sheet-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4mm;
  padding-top: 1.5mm;
  border-top: var(--ws-hair);
  /* Same type as the masthead's NAME/CLASS/DATE labels (.sheet-cell b), so
     the strip that opens the sheet and the strip that closes it are set in
     one voice instead of two. */
  font-size: 6.5pt;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ws-label);
}
/* URL on the left, page number on the right, the teacher's own note between
   them. The note is the one thing here they wrote themselves, so it keeps the
   case they typed — "Homework — due Friday" should not come back shouted. */
.sheet-foot .foot-note { text-transform: none; letter-spacing: .03em; }

.sheet-key .ans { color: #B3261E; font-weight: 800; }
.sheet-key-badge {
  display: inline-block;
  vertical-align: 0.8mm;
  background: #B3261E;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: .1em;
  border-radius: 1.2mm;
  padding: 1mm 2.5mm;
  margin-left: 2.5mm;
}

/* Furniture that holds handwriting scales WITH the text: em resolves
   against the sheet's pt font-size, so it stays physical in print, and at
   the default 12pt these match the old mm values to within half a
   millimetre. */
.q-grid { display: grid; gap: 4mm 8mm; }
.q {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  break-inside: avoid;
  page-break-inside: avoid;
}
.q-num {
  flex: none;
  width: var(--ws-gutter);
  text-align: right;
  font-size: 8.5pt;
  font-weight: 700;
  color: var(--ws-quiet);
}
/* One line per question, always: a sum that wraps mid-expression is
   unreadable. If the line is too wide for its column, fitSheets measures
   that and reduces the column count instead. */
.q-body { display: flex; align-items: baseline; gap: 1.6mm; flex: 1 1 auto; white-space: nowrap; }
.q-blank {
  display: inline-block;
  min-width: 3.5em;              /* was 15mm at 12pt */
  border-bottom: var(--ws-rule);
  text-align: center;
  padding-bottom: 0.3mm;
}
.q-box {
  display: inline-block;
  min-width: 2.4em;              /* was 10mm at 12pt */
  height: 1.8em;                 /* was 7.5mm */
  border: var(--ws-rule);
  border-radius: 1mm;
  text-align: center;
  line-height: 1.8em;
  vertical-align: -0.45em;
}

.drill { display: grid; gap: 3mm 6mm; }
.drill .q-num { display: none; }
.drill .q { font-size: .96em; justify-content: center; }   /* 11.5pt at 12pt */
.drill .q-blank { min-width: 2.7em; }                       /* was 11mm */
.ws-timebar {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ws-label);
  border: var(--ws-hair);
  border-radius: 1.5mm;
  padding: 2mm 4mm;
  margin-bottom: 5mm;
}

.col-grid { display: grid; gap: 9mm 8mm; }
.colsum { break-inside: avoid; page-break-inside: avoid; }
.colsum-num { font-size: 8.5pt; font-weight: 700; color: var(--ws-quiet); margin-bottom: 1.5mm; }
.colsum-pad {
  display: inline-block;
  font-size: 1.17em;             /* 14pt at 12pt */
  font-weight: 600;
  text-align: right;
  min-width: 5.3em;              /* was 26mm */
}
.colsum-pad .r { display: block; padding: 0 1.5mm; letter-spacing: 2mm; }
.colsum-pad .r.op { border-bottom: var(--ws-rule); padding-bottom: 1.2mm; position: relative; }
.colsum-pad .r.op .sign { position: absolute; left: 0; letter-spacing: 0; }
.colsum-pad .r.blank { min-height: 1.7em; }                 /* was 8.5mm */
.colsum-pad .r.blank2 { min-height: 1.7em; border-bottom: var(--ws-hair); }

.square { border-collapse: collapse; margin: 0 auto; }
.square td, .square th {
  border: var(--ws-hair);
  text-align: center;
  font-size: 11pt;
  padding: 0;
}
.square th { background: #EFEFEF; font-weight: 800; }
.square .corner { background: var(--ws-ink); color: #fff; font-size: 12pt; }

.wheels { display: grid; gap: 7mm; justify-items: center; }
.wheel-title {
  text-align: center;
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ws-label);
  margin-bottom: 1.5mm;
}

.match { display: grid; grid-template-columns: 62mm 1fr 62mm; align-items: stretch; gap: 0 5mm; }
.match-col { display: flex; flex-direction: column; justify-content: space-between; }
.match-item {
  border: var(--ws-hair);
  border-radius: 2mm;
  padding: 2.4mm 3mm;
  font-size: 1.04em;             /* 12.5pt at 12pt */
  font-weight: 700;
  text-align: center;
}
.match-note {
  align-self: center;
  justify-self: center;
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ws-quiet);
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.tri-grid { display: grid; gap: 6mm; justify-items: center; }
.tri-cell { text-align: center; break-inside: avoid; page-break-inside: avoid; }
.tri-lines { font-size: .83em; margin-top: 2mm; text-align: left; }   /* 10pt at 12pt */
.tri-lines .l { border-bottom: var(--ws-hair); min-height: 1.55em; margin-bottom: 2mm; }

.skip-list { display: grid; gap: 5mm; }
.skip-row { break-inside: avoid; page-break-inside: avoid; }
.skip-label {
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ws-label);
  margin-bottom: 2mm;
}
.skip-seq { display: flex; flex-wrap: wrap; gap: 2mm; align-items: center; }
.skip-cell { min-width: 3.1em; text-align: center; font-size: 1em; font-weight: 600; padding: 1mm; }
.skip-cell.blank { border: var(--ws-rule); border-radius: 1.5mm; min-height: 2em; }
.skip-arrow { color: #a5a5a5; font-size: 9pt; }

.wp-list { display: grid; gap: 6mm; }
.wp { break-inside: avoid; page-break-inside: avoid; }
.wp-text { font-size: .92em; line-height: 1.5; }            /* 11pt at 12pt */
.wp-work { border: var(--ws-hair); border-radius: 2mm; height: 3.5em; margin-top: 2.5mm; }
.wp-ans { font-size: .88em; margin-top: 2.5mm; font-weight: 700; }
.wp-ans .q-blank { min-width: 8em; }                        /* was 34mm */

.ladder-block { break-inside: avoid; page-break-inside: avoid; }
.ladder-title {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: .92em;              /* 11pt at 12pt */
  font-weight: 600;
  text-align: center;
  border-bottom: var(--ws-edge);
  padding-bottom: 1.5mm;
  margin-bottom: 3mm;
}

/* ================================================================== PRINT */

@media print {
  /* Nothing of the builder survives onto paper. */
  .nav, .footer, .ws-tabbar, .ws-setup, .ws-intro, .ws-pager, .ws-warn,
  .ws-empty, .ws-print-hide { display: none !important; }

  /* Print takes the whole stack, whichever tab happens to be showing. */
  #sheetView, #sheetView[hidden] {
    display: block !important;
    position: static !important;
    visibility: visible !important;
  }
  .ws-panelbox {
    border: 0 !important; box-shadow: none !important;
    padding: 0 !important; border-radius: 0 !important; background: none !important;
  }
  /* The break belongs on .ws-page — .sheet:last-child matched every sheet. */
  .ws-page, .ws-page.is-shown {
    position: static !important;
    visibility: visible !important;
    animation: none !important;
    break-after: page;
    page-break-after: always;
  }
  .ws-page:last-child { break-after: auto; page-break-after: auto; }

  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .ws-shell { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .ws-stage { padding: 0 !important; }
  .ws-paper { display: block !important; gap: 0 !important; }
  /* width:fit-content centres the page on screen; on paper it shrinks the
     sheet to its own questions — hand the width back. */
  .ws-page {
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    animation: none !important;
  }

  .ws-scaler {
    width: auto !important; height: auto !important;
    overflow: visible !important;
    border-radius: 0 !important; box-shadow: none !important; outline: 0 !important;
  }
  .ws-scaler > .sheet { transform: none !important; }

  .sheet {
    box-shadow: none !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .square th, .square .corner, .ladder-title, .sheet-key .ans, .sheet-key-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}