/* Layout: «Режимы + Стол» (art-direction/v03-hybrid.html, F2). One phone column.
   Settings: a swipe carousel of two rule cards (violet «Тейбл Тайм», green «Классика»),
   three tiles under it, a round start button, a print button that shows the sheet.
   The current rules colour the whole round: dictation ground, chips, held cell, buttons. */
:root {
  --bg: #F5F4F0;
  --surface: #FFFFFF;
  --line: #DCD7EA;
  --text: #1B1830;
  --muted: #6A6580;
  /* --tt / --cl: marks (selected chip, held cell, buttons); --*-fill: big areas (rule cards,
     dictation ground, word card). Checked by scripts/check_contrast.py. */
  --tt: #3B2A8C;  --tt-fill: #3B2A8C;  --tt-soft: #E3DDF7;  --tt-text: #3B2A8C;
  --cl: #1E5E3B;  --cl-fill: #1E5E3B;  --cl-soft: #D6EADF;  --cl-text: #1E5E3B;
  --on-mode: #FFFFFF;
  --cross: #7D7795; /* viewed number: a calm graphite cross over the digit */
  --scrim: rgb(20 16 40 / .5);
  /* printed sheet: real paper in both themes, toner-light lines */
  --p-paper: #FFFFFF;
  --p-text: #17181C;
  --p-muted: #5A5D66;
  --p-line: #8C96AB;
  --p-ink: #28389C;

  --f-display: "Alumni Sans", "Arial Narrow", "Roboto Condensed", sans-serif; /* printed sheet only */
  --f-body: "Rubik", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --mode: var(--tt); --mode-fill: var(--tt-fill); --mode-soft: var(--tt-soft); --mode-text: var(--tt-text);
  --col: 460px;
  --r: 24px;
  --r-sm: 16px;
  --pad-l: max(20px, env(safe-area-inset-left, 0px));
  --pad-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
/* dark is the default; the player's switch sets t-light */
:root.t-dark {
  --bg: #17142B; --surface: #221E3B; --line: #3A3459; --text: #F1EEFF; --muted: #A9A3C6;
  --tt: #735AD8; --tt-fill: #4E3AB8; --tt-soft: #2F2862; --tt-text: #CBC1FF;
  --cl: #2A7E53; --cl-fill: #23704A; --cl-soft: #1C3A2D; --cl-text: #9FDDBA;
  --cross: #857FA6;
  --scrim: rgb(5 4 15 / .65);
  color-scheme: dark;
}
:root[data-mode="classic"] { --mode: var(--cl); --mode-fill: var(--cl-fill); --mode-soft: var(--cl-soft); --mode-text: var(--cl-text); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
/* страница не тянется пальцем: ни резинки на iPhone, ни «потяни вниз — обновить» на Android */
html, body { overscroll-behavior: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.45 var(--f-body);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  transition: background-color .25s;
}
/* dictation paints the whole phone in the colour of the rules */
html[data-screen="dict"] body { background: var(--mode-fill); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--mode-text); outline-offset: 2px; }

#app {
  position: relative;
  max-width: var(--col);
  min-height: 100%;
  margin: 0 auto;
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
  padding-top: max(16px, env(safe-area-inset-top, 0px));
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}

.screen { display: flex; flex-direction: column; gap: 16px; flex: 1; }

/* ---------- type ---------- */
.wordmark { margin: 0 0 0 -6px; font: 800 24px/1 var(--f-body); color: var(--mode-text); line-height: 0; }
/* vector sticker logo (app/brand, scripts/build_logo.py): reads on both themes thanks to its white outline */
.wordmark img { display: block; height: 31px; width: auto; }
.title { margin: 0; font: 800 clamp(30px, 9vw, 38px)/1 var(--f-body); text-wrap: balance; }
.label { font: 600 15px/1.2 var(--f-body); color: var(--muted); }
.note { margin: 0; font-size: 15px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--text); cursor: pointer; padding: 0;
}
.icon-btn.round { border-radius: 50%; }
.icon-btn svg { width: 22px; height: 22px; }

/* day / night: a pill with the sun and the moon, the current one sits in a coloured circle */
.daynight {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  width: 82px; height: 44px; padding: 4px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface); cursor: pointer;
}
.daynight::before {
  content: ""; position: absolute; top: 4px; left: 4px;
  width: 33px; height: 33px; border-radius: 50%;
  background: var(--mode);
  transition: transform .22s ease-out;
}
.t-dark .daynight::before { transform: translateX(38px); }
.daynight span { position: relative; z-index: 1; width: 33px; height: 33px; display: grid; place-items: center; color: var(--muted); transition: color .22s; }
.daynight svg { width: 19px; height: 19px; }
.t-light .dn-sun, .t-dark .dn-moon { color: var(--on-mode); }

/* ---------- settings: rule cards ---------- */
.settings { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.modes-wrap { display: flex; flex-direction: column; gap: 10px; }
.modes {
  display: flex; gap: 12px;
  margin-left: calc(-1 * var(--pad-l)); margin-right: calc(-1 * var(--pad-r));
  padding: 0 var(--pad-r) 0 var(--pad-l);
  scroll-padding: 0 var(--pad-r) 0 var(--pad-l);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.modes::-webkit-scrollbar { display: none; }
.mode {
  position: relative;
  flex: 0 0 82%;
  height: clamp(190px, 31svh, 270px);
  padding: 20px 20px 18px;
  border-radius: var(--r);
  color: var(--on-mode);
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-user-select: none; user-select: none;
}
.mode:last-child { scroll-snap-align: end; }
.mode[data-mode="tt"] { background: var(--tt-fill); }
.mode[data-mode="classic"] { background: var(--cl-fill); }
.mode-title { font: 800 clamp(28px, 8.4vw, 34px)/1.02 var(--f-body); letter-spacing: -.01em; }
.mode-sub { font-size: 17px; opacity: .88; }
.mode-art {
  position: absolute; right: 12px; bottom: 10px;
  width: 50%; max-width: 170px; aspect-ratio: 1;
  background: var(--on-mode);
  -webkit-mask: var(--img) center / contain no-repeat;
          mask: var(--img) center / contain no-repeat;
}
.mode:has(input:focus-visible) { outline: 3px solid var(--mode-text); outline-offset: 3px; }
.dots { display: flex; justify-content: center; gap: 8px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; transition: background-color .2s, width .2s; }
.dots i.on { width: 22px; border-radius: 4px; background: var(--mode); }

/* ---------- settings: three tiles, every option visible ---------- */
/* the cells tile holds a short number, the speed tile a long word («Медленно»): widths follow */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .84fr) minmax(0, 1.16fr); gap: 10px; }
.tile {
  min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 10px 7px 8px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface);
}
.tile-label { font-size: 13px; line-height: 1.1; color: var(--muted); text-align: center; }
.tile-value {
  flex: 1; min-height: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0; border: 0; background: none; cursor: pointer;
  touch-action: manipulation;
}
.tile-value b { display: block; max-width: 100%; font: 800 clamp(22px, 6.6vw, 28px)/1 var(--f-body); color: var(--text); white-space: nowrap; letter-spacing: -.01em; }
.tile-value small { font-size: 12px; line-height: 1.1; color: var(--muted); text-align: center; }
.mini-grid {
  --cols: 4; --rows: 5;
  display: grid; gap: 2px;
  grid-template-columns: repeat(var(--cols), 6px);
  grid-auto-rows: 6px;
}
.mini-grid i { border: 1.2px solid var(--muted); border-radius: 1.5px; }
/* the tile keeps one height for every grid: room for 5 × 5, smaller grids sit in the middle */
.tile-value .mini-grid { width: 38px; height: 38px; place-content: center; }
.chips { display: grid; gap: 4px; }
.chips.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips.big.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chips label { position: relative; min-width: 0; }
.chips input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chips span {
  display: flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 1px;
  border: 1.5px solid var(--line); border-radius: 10px;
  /* на 320 px «голос» и «игрок» иначе не влезают в половину узкой плитки */
  font: 600 clamp(12px, 3.75vw, 14px)/1 var(--f-body); color: var(--mode-text);
  white-space: nowrap;
}
@media (max-width: 340px) { .tile { padding-left: 5px; padding-right: 5px; } .chips { gap: 3px; } }
.chips.big span { height: 46px; font-size: 17px; border-radius: 14px; }
.chips input:checked + span { background: var(--mode); border-color: var(--mode); color: var(--on-mode); }
.chips input:focus-visible + span { outline: 3px solid var(--mode-text); outline-offset: 2px; }

/* ---------- start + print ---------- */
/* «Поехали» по центру; слева от неё — возврат к вопросам прошлого раунда: в том же ряду, высоту меню не меняет */
.setup-go { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 10px; align-items: center; margin-top: auto; padding-top: 4px; }
.setup-go .go { grid-column: 2; }
.resume {
  grid-column: 1; grid-row: 1; justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 104px; padding: 4px 0;
  border: 0; background: none;
  color: var(--mode-text); font: 600 13px/1.2 var(--f-body); text-align: center;
  cursor: pointer; touch-action: manipulation;
}
.resume[hidden] { display: none; }
.resume-ico {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface);
}
.resume-ico svg { width: 20px; height: 20px; }
.resume:active .resume-ico { transform: scale(.94); }
.go {
  width: 118px; height: 118px; border-radius: 50%;
  border: 0; background: var(--mode); color: var(--on-mode);
  font: 800 21px/1 var(--f-body);
  cursor: pointer; touch-action: manipulation;
  transition: transform .12s;
}
.go:active { transform: scale(.96); }
.go:disabled { opacity: .5; cursor: progress; }
.print-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 64px; padding: 10px 16px 10px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  text-align: left; cursor: pointer;
}
/* a tiny A4 sheet with the chosen grid: it shows what will come out of the printer */
.mini-sheet {
  flex: none;
  width: 32px; height: 45px;
  padding: 5px 4px 4px;
  display: flex; flex-direction: column; gap: 3px;
  background: #FFFFFF; border: 1px solid #C7C2D6; border-radius: 3px;
}
.mini-sheet::before { content: ""; width: 60%; height: 3px; border-radius: 1px; background: var(--tt); }
.mini-sheet .mini-grid { flex: 1; gap: 1px; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); grid-auto-rows: auto; }
.mini-sheet .mini-grid i { border: .8px solid #9AA3B8; border-radius: 0; }
.print-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.print-text b { font-weight: 600; font-size: 16px; line-height: 1.2; }
.print-text small { font-size: 13px; color: var(--muted); }
.print-ico { width: 22px; height: 22px; flex: none; color: var(--mode-text); }

/* ---------- buttons (questions, dialogs) ---------- */
.actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 22px;
  border: 0; border-radius: 999px;
  font: 700 18px/1 var(--f-body);
  cursor: pointer; touch-action: manipulation;
}
.btn.primary { background: var(--mode); color: var(--on-mode); }
.btn.primary:active { filter: brightness(.92); }
.btn.link { min-height: 44px; padding: 0 8px; background: none; color: var(--mode-text); font-weight: 600; font-size: 16px; }
.btn:disabled { opacity: .5; cursor: progress; }
a.btn { text-decoration: none; }

/* ---------- dictation: one side, it is listened to ---------- */
.dict { gap: 0; color: var(--on-mode); }
.dict-top { display: flex; justify-content: flex-end; min-height: 44px; }
.icon-btn.on-mode { background: transparent; border-color: rgb(255 255 255 / .45); color: var(--on-mode); }
/* words: number and word pressed to the left edge, so the start of the word is always in one place;
   the countdown 3-2-1 and the closing tick (no-word) stay big in the centre */
.dict-stage {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
  text-align: left; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.dict.no-word .dict-stage { align-items: center; text-align: center; }
.dict-num {
  font-family: var(--f-body);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--on-mode);
  font-variant-numeric: tabular-nums;
  font-size: min(78vw, 50vh, 400px);
  font-size: min(78vw, 50svh, 400px);
}
.dict-num.two { font-size: min(56vw, 42vh, 300px); font-size: min(56vw, 42svh, 300px); }
.dict-num.is-countdown { opacity: .7; }
.dict-num.stamp { animation: stamp .16s ease-out; }
.done-check {
  display: block;
  width: min(48vw, 32vh, 240px); width: min(48vw, 32svh, 240px); height: auto;
  fill: none; stroke: var(--on-mode); stroke-width: 10;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  animation: draw .38s ease-out;
}
@keyframes draw { from { stroke-dashoffset: 100; } }
@keyframes stamp { from { transform: scale(1.06); } to { transform: none; } }
/* the word is the biggest thing in both modes (voice and reader); the number steps back above it.
   Little jumps: the word size is one of five steps from --word-max (app.js fitWordStep), the box is two
   top-step lines tall with the text at its top-left, the number is one fixed size above it. */
.dict-word {
  width: 100%;
  font: 800 var(--word-max, 60px)/1.02 var(--f-body);
  height: calc(var(--word-max, 60px) * 2.04);
  color: var(--on-mode); overflow-wrap: normal; hyphens: none;
}
.dict .dict-num:not(.is-countdown) { font-size: min(16vw, 8.5vh, 72px); font-size: min(16vw, 8.5svh, 72px); opacity: .62; }
.dict-next { font-size: 18px; line-height: 1.3; min-height: 1.3em; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dict.no-word .dict-word, .dict.no-word .dict-next { display: none; }
.dict-bottom { display: flex; align-items: flex-end; gap: 16px; }
.dict-sheet { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), 18px); gap: 4px; flex: none; }
.dict-sheet i { width: 18px; height: 18px; border-radius: 5px; background: rgb(255 255 255 / .16); }
.dict-sheet i.done { background: var(--on-mode); }
.dict-sheet i.now { background: transparent; box-shadow: inset 0 0 0 2.5px var(--on-mode); }
.dict-cue { font: 700 22px/1.15 var(--f-body); }
/* звук раунда не скачался за полторы секунды: можно не ждать */
.dict-skip { margin-top: 24px; background: none; color: var(--on-mode); box-shadow: inset 0 0 0 2px var(--on-mode); }
.dict-skip[hidden] { display: none; }
.dict-timer { height: 4px; margin-top: 16px; border-radius: 2px; background: rgb(255 255 255 / .2); overflow: hidden; }
.dict-timer i { display: block; height: 100%; background: var(--on-mode); transform-origin: left; transform: scaleX(0); }

/* ---------- questions: hold a cell, see the word ---------- */
.ask { gap: 14px; }
.ask .actions { margin-top: auto; }
/* fixed height: holding a cell must not push the grid under the finger */
.peek {
  height: 156px;
  overflow: hidden;
  padding: 18px 22px;
  border-radius: var(--r);
  background: var(--mode-soft); color: var(--mode-text);
  display: flex; flex-direction: column; justify-content: center;
  transition: background-color .12s;
}
.peek.is-showing { background: var(--mode-fill); color: var(--on-mode); }
.peek .note { color: inherit; opacity: .8; }
.peek-idle { display: flex; flex-direction: column; gap: 6px; }
.peek-show { display: flex; flex-direction: column; gap: 4px; }
.peek-num { margin: 0; font: 700 22px/1 var(--f-body); opacity: .85; font-variant-numeric: tabular-nums; }
.peek-num .no { margin-right: 4px; }
/* a word is never broken in the middle: phrases wrap at spaces only, app.js shrinks the size to fit */
.peek-word {
  margin: 0;
  font: 800 clamp(44px, 14vw, 68px)/1.02 var(--f-body);
  text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.cells {
  --cols: 4; --rows: 5;
  /* the whole screen fits without scrolling: the grid narrows on short phones */
  width: min(100%, calc((100vh - 380px) * var(--cols) / var(--rows)));
  width: min(100%, calc((100svh - 380px) * var(--cols) / var(--rows)));
  align-self: center;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 8px;
}
.cells.c5 { gap: 6px; }
.cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--surface);
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.cells.c5 .cell { border-radius: 12px; }
.cell .c-big {
  font: 800 36px/1 var(--f-body);
  font-size: min(36px, calc(100cqi / var(--cols) * .42));
  color: var(--mode-text);
  font-variant-numeric: tabular-nums;
}
/* numbers already looked at: a thin graphite cross from corner to corner, drawn over the digit
   like a pencil mark; its colour differs from the digit so the two do not merge */
.cell .c-big { position: relative; z-index: 1; }
.cell.is-done { background: var(--mode-soft); border-color: transparent; }
.cell.is-done::before, .cell.is-done::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 92%; height: clamp(2px, .75cqi, 3.5px);
  border-radius: 2px;
  background: var(--cross);
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}
.cell.is-done::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cell.is-held { background: var(--mode); border-color: var(--mode); }
.cell.is-held .c-big { color: var(--on-mode); }
.cell.is-held::before, .cell.is-held::after { background: rgb(255 255 255 / .6); }

/* ---------- dialogs ---------- */
dialog { color: var(--text); background: var(--surface); border: 0; padding: 0; }
dialog::backdrop { background: var(--scrim); }
dialog.sheet {
  width: min(100%, var(--col));
  max-width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  margin: auto auto 0;
  border-radius: var(--r) var(--r) 0 0;
  padding: 24px max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
}
dialog.sheet[open] { animation: rise .2s ease-out; }
@keyframes rise { from { transform: translateY(32px); } to { transform: none; } }
.sheet-body { display: flex; flex-direction: column; gap: 14px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-title { margin: 0; font: 800 32px/1 var(--f-body); color: var(--mode-text); }
.sheet-text { margin: 0; font-size: 17px; }
.sheet-actions { display: flex; flex-direction: column; gap: 6px; }
.field { display: flex; flex-direction: column; gap: 8px; }

.rules h3 { margin: 6px 0 0; font: 800 24px/1.1 var(--f-body); color: var(--mode-text); }
.rules ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; }
.rules p { margin: 0; }
.score { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 15px; }
.score b { font: 800 18px/1.25 var(--f-body); color: var(--mode-text); font-variant-numeric: tabular-nums; }
/* where to write with questions and suggestions: the bottom of «Как играть», not the main screen */
.contact { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.contact a { color: var(--mode-text); font-weight: 600; text-underline-offset: 3px; }

/* ---------- printable A4 sheet ---------- */
.print-row { display: flex; gap: 16px; align-items: flex-start; }
.print-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ps-preview {
  flex: none;
  width: 132px; height: 186px; /* 129 × 182.4 px inside the border = A4 */
  overflow: hidden;
  border: 1.5px solid var(--line); border-radius: 6px;
  background: var(--p-paper);
}
.ps-preview .ps-paper { width: 210mm; height: 297mm; padding: 9mm 9mm 12mm; transform: scale(.1625); transform-origin: 0 0; }

@page { size: A4 portrait; margin: 9mm 9mm 12mm; }
.print-sheet { display: none; }
.ps-page {
  width: 192mm; height: 275mm;
  display: flex; flex-direction: column; gap: 4mm;
  background: var(--p-paper); color: var(--p-text);
  font-family: var(--f-body);
}
.ps-head { display: flex; align-items: flex-end; gap: 7mm; }
.ps-mark { margin-right: auto; font: 800 34pt/.74 var(--f-display); color: var(--p-ink); }
.ps-field { display: flex; align-items: flex-end; gap: 2mm; font: 500 9pt/1 var(--f-body); color: var(--p-muted); }
.ps-field::after { content: ""; display: block; width: var(--w, 20mm); border-bottom: .3mm solid var(--p-text); }
.ps-name { --w: 78mm; }
.ps-round { --w: 16mm; }
.ps-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  border: .6mm solid var(--p-text);
}
.ps-cell { position: relative; border-right: .3mm solid var(--p-line); border-bottom: .3mm solid var(--p-line); }
.ps-grid.c3 .ps-cell:nth-child(3n), .ps-grid.c4 .ps-cell:nth-child(4n), .ps-grid.c5 .ps-cell:nth-child(5n) { border-right: 0; }
.ps-grid.c3 .ps-cell:nth-last-child(-n+3), .ps-grid.c4 .ps-cell:nth-last-child(-n+4), .ps-grid.c5 .ps-cell:nth-last-child(-n+5) { border-bottom: 0; }
/* the number sits in a small tab: that corner is not for drawing */
.ps-n {
  position: absolute; top: 0; left: 0;
  min-width: 9mm; padding: 1.5mm 1.8mm 1.2mm;
  border-right: .3mm solid var(--p-line); border-bottom: .3mm solid var(--p-line);
  font: 700 15pt/1 var(--f-display); text-align: center; color: var(--p-text);
  font-variant-numeric: tabular-nums;
}
.ps-n.mark { text-decoration: underline; text-decoration-thickness: .35mm; text-underline-offset: .7mm; }

@media print {
  :root { color-scheme: light !important; } /* the dark theme's #121212 canvas would fill the page margins */
  html, body { height: auto; }
  body { background: var(--p-paper) !important; }
  body > :not(.print-sheet) { display: none !important; }
  .print-sheet { display: block; }
}
/* index.html#print-20: the sheet alone on screen, for checks and the PDF build */
@media screen {
  .print-view body { background: var(--p-paper); }
  .print-view body > :not(.print-sheet) { display: none !important; }
  .print-view .print-sheet { display: block; width: 210mm; padding: 9mm 9mm 12mm; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .modes { scroll-behavior: auto; }
}
@media (min-width: 700px) {
  #app { padding-top: 40px; }
}