/* ─────────────────────────────────────────────────────────────────────────
   Headcount — shares Shelfmark's design language verbatim.
   Tokens, fonts, radii, and control shapes are copied from Shelfmark.htm so
   the two tools read as one system. Do not fork these values locally; if a
   token needs to change it changes in both files.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --paper:#f3efe4; --paper-2:#ece6d6; --card:#fbf9f3;
  --ink:#26221a; --ink-soft:#6b6353; --line:#d8cfba;
  --green:#5b7d3a; --green-soft:#dde7cb;
  --orange:#c66a25; --orange-soft:#f3ddc6;
  --char:#3a3631; --char-soft:#d7d2c8;
  --slate:#6a7080; --slate-soft:#cdd2dc;
  --accent:#7a2e1e; --good:#3b6d3b; --hi:#1d9e75;
  --ink-faint:#9a9080; --r:12px;
  --mono:'Spline Sans Mono', ui-monospace, monospace;
  --disp:'Fraunces', Georgia, serif;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--mono); font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--paper-2) 0.5px, transparent 0.5px); background-size:14px 14px;
  /* R8: pull-to-refresh reloads the page mid-count. It is not a gesture we can afford. */
  overscroll-behavior:none;}
/* While a sheet is open the page behind it must not scroll — on iOS the
   background scrolling under a modal is how you lose your place in a count. */
body.sheet-open{overflow:hidden}

/* Every control: no 300ms double-tap delay, no grey flash box, no press that
   moves the page. Applied once here rather than per component so a new button
   cannot forget it. */
button, select, a.btn, label.chk, input[type=checkbox]{
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}

/* Landscape on a notched phone puts the cutout on the long edge, so the side
   insets are not optional. */
.wrap{max-width:640px; margin:0 auto;
  padding:22px calc(14px + env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}

header{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; border-bottom:2px solid var(--ink); padding-bottom:14px}
h1{font-family:var(--disp); font-size:26px; font-weight:600; margin:0; letter-spacing:-0.4px; line-height:1.05}
h1 .sub{display:block; font-size:11px; font-weight:400; color:var(--ink-soft); letter-spacing:1.6px; text-transform:uppercase; margin-top:6px}
.status{font-size:11px; color:var(--ink-soft); text-align:right; line-height:1.6}
.status .n{color:var(--accent); font-size:16px}
.status .dot{display:inline-block; width:7px; height:7px; border-radius:99px; background:var(--good); margin-right:5px; vertical-align:1px}
.status.off .dot{background:var(--orange)}

/* ── context line: which building you are walking. Page context, not a form field,
      so it sits above the panels the way Shelfmark's library picker does. ── */
.whereami{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:18px 0 0; padding:0 2px}
.whereami label{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft)}
/* 16px on every screen, not just the small breakpoint: anything under 16px in a
   form control makes iOS Safari zoom the page on focus, and a zoomed page in
   the stacks is a page you have to pinch back out of one-handed. */
.whereami select{font:inherit; font-size:16px; font-weight:500; padding:9px 10px; min-height:44px; border:1px solid var(--line);
  border-radius:8px; background:var(--card); color:var(--ink); max-width:100%}
.whereami select:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--orange-soft)}
.whereami-note{font-size:11px; color:var(--ink-faint)}
/* Same checkbox shape as Shelfmark's search options, raised to the 44px touch
   floor because this one is pressed with a thumb while walking. */
.chk{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); cursor:pointer; min-height:44px}
.chk input{width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex:none}
.chk:has(input:checked){color:var(--ink)}
.chk:focus-within{color:var(--ink)}

/* ── banners ── */
.banner{border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin:12px 0 0; font-size:12px; line-height:1.65}
.banner h2{font-family:var(--disp); font-size:15px; font-weight:600; margin:0 0 5px}
.banner p{margin:5px 0}
.banner code{font-family:var(--mono); font-size:11px; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--accent)}
.banner .row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.banner.stop{background:var(--orange-soft); border-color:#e0bfa2; color:var(--ink)}
.banner.stop h2{color:var(--accent)}
.banner.ok{background:var(--green-soft); border-color:#bcce9e}
.banner.ok h2{color:var(--good)}
.banner.wait{background:var(--slate-soft); border-color:var(--slate)}
.banner.note{background:var(--paper-2)}
.banner ul{margin:6px 0 0; padding-left:18px}
.banner li{margin:3px 0}

/* ── panels (shared shell with Shelfmark's .route / .cat) ── */
.panel{margin:16px 0 0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; cursor:pointer; width:100%; text-align:left; font:inherit; background:none; border:0; color:inherit; min-height:48px}
.panel-head h2{font-family:var(--disp); font-size:17px; font-weight:600; margin:0; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.h2-sub{font-family:var(--mono); font-size:11px; font-weight:400; color:var(--ink-faint); letter-spacing:0.03em}
.panel-head .tag{font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); background:var(--orange-soft); padding:3px 8px; border-radius:99px}
.panel-head .tag.q{color:var(--slate); background:var(--slate-soft)}
.panel-head .caret{width:18px; height:18px; display:block; color:var(--accent); flex:none; transition:transform .15s}
.panel[open] .caret, .panel.open .caret{transform:rotate(90deg)}
.panel-body{padding:0 14px 14px; border-top:1px solid var(--line)}
.panel-hint{font-size:12px; color:var(--ink-soft); line-height:1.65; margin:12px 0}
.panel-hint b{color:var(--ink)}

/* ── round header: day + slot ── */
.sect{display:flex; gap:6px; align-items:center; margin:12px 2px 0; flex-wrap:wrap}
.sect-label{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px; margin-right:4px; flex:1 0 100%}
.pill{font-family:var(--mono); font-size:11px; padding:6px 13px; background:var(--card); color:var(--ink-soft); border:1px solid var(--line); border-radius:99px; cursor:pointer; transition:.15s; min-height:44px}
.pill:hover{border-color:var(--ink-soft); color:var(--ink)}
.pill:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--orange-soft)}
.pill.active{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* An even grid rather than a wrapping row: every slot is the same width, so
   the last row does not stretch and ten slots fit in two rows on a 375px
   screen instead of four. */
.slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:5px; margin:8px 0 0}
.slot{font-family:var(--mono); font-size:13px; font-weight:500; min-height:46px; padding:6px 4px; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:8px; cursor:pointer; color:var(--ink-soft)}
.slot:hover{border-color:var(--ink-soft); color:var(--ink)}
.slot:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--orange-soft)}
.slot.active{background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:600}
.slot small{display:block; font-size:9px; font-weight:400; margin-top:2px; letter-spacing:.4px; text-transform:uppercase; opacity:.9}
.slot.snapped:not(.active){border-style:dashed; border-color:var(--ink-soft)}
.slot.snapped small{color:var(--accent)}
.slot.active small{color:var(--paper); opacity:.75}
.snapnote{font-size:11px; color:var(--ink-soft); margin:9px 2px 0; line-height:1.6}
.snapnote b{color:var(--accent)}

/* ── counters ── */
.counters{margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
/* Two forms means two stacks of counters. The grand total sits outside both
   so it cannot be mistaken for either form's row. */
.total.grand{margin-top:10px; border:1px solid var(--line); border-top:2px solid var(--ink); border-radius:var(--r); background:var(--paper-2)}
.total.grand .tv{color:var(--accent)}
/* A form whose row is already in the sheet. Still readable — it is the record
   of what was sent — but not editable, because this endpoint cannot correct it. */
.counters.locked{opacity:.72}
.counters.locked .counters-h{background:var(--green-soft); border-bottom-color:#bcce9e}
.crow.locked{background:var(--paper-2)}
.crow.locked .cval{cursor:default}
.counters-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:10px 14px; background:var(--paper-2); border-bottom:1px solid var(--line)}
.counters-h .lv{font-family:var(--disp); font-size:15px; font-weight:600}
.counters-h .ct{font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.5px}

/* No text selection anywhere in the counter list. A long press is a reset
   gesture here, and iOS would otherwise answer it with a selection handle and
   a callout menu over the number you are trying to read. */
.crow{display:flex; align-items:center; gap:10px; padding:9px 12px; border-top:1px solid var(--line);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.crow:first-child{border-top:0}
.crow.touched{background:var(--green-soft)}
.crow .cname{flex:1 1 auto; min-width:0; font-size:13px; line-height:1.35}
.crow .cname small{display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); margin-top:2px}
.total.sub{background:var(--card); border-top:1px solid var(--line); padding:9px 14px}
.total.sub .tl{flex:1 1 auto}
.total.sub .tv{font-family:var(--mono); font-size:15px; font-weight:600}
.total .chip{margin-left:8px}
/* Tabular figures: the column must not shuffle sideways between 9 and 10. */
/* 48px tall, not 42: this is the long-press reset target, so it has to clear
   the 44pt floor like every other control. */
.crow .cval{flex:none; width:56px; min-height:48px; text-align:center; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:600; line-height:1;
  padding:10px 0; border:0; background:none; color:inherit; border-radius:8px; cursor:pointer;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.crow .cval.zero{color:var(--ink-faint); font-weight:400}
.crow .cval:focus-visible{outline:none; box-shadow:0 0 0 3px var(--orange-soft)}
.crow .cval.holding{background:var(--orange-soft); color:var(--accent)}

.tapbtn{flex:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-family:var(--mono); border-radius:10px; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); transition:background .12s, border-color .12s}
.tapbtn:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--orange-soft)}
.tapbtn svg{display:block; width:20px; height:20px}
.minus{width:48px; height:48px; color:var(--ink-soft)}
.plus{width:64px; height:56px; background:var(--ink); border-color:var(--ink); color:var(--paper)}
.plus svg{width:24px; height:24px}
/* iOS Safari does not apply :active to a plain button, so the pressed look is
   driven by a class from pointerdown as well. Both are declared together so
   they can never drift apart.
   Press feedback changes colour only — a transform would move the row and the
   next tap would land somewhere else. */
.minus:active, .minus.pressing{background:var(--paper-2); border-color:var(--ink-soft)}
.plus:active, .plus.pressing{background:var(--accent); border-color:var(--accent)}
.tapbtn[disabled]:active, .tapbtn[disabled].pressing{background:var(--paper); border-color:var(--line)}
.plus[disabled]:active, .plus[disabled].pressing{background:var(--ink); border-color:var(--ink)}
.tapbtn[disabled]{opacity:.38; cursor:default}

.total{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:11px 14px; border-top:2px solid var(--ink); background:var(--paper-2)}
.total .tl{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-soft)}
.total .tv{font-family:var(--disp); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums}

/* ── walk mode ──────────────────────────────────────────────────────────
   The counting surface. Everything here is sized for a thumb finding it by
   memory rather than an eye finding it by looking. */
.walkstart{display:flex; flex-direction:column; gap:4px; margin:16px 0 0; padding:20px 16px; min-height:76px}
.walkstart small{font-size:10px; font-weight:400; letter-spacing:.6px; text-transform:none; opacity:.72}

.walk{position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  background:var(--paper); background-image:radial-gradient(var(--paper-2) 0.5px, transparent 0.5px); background-size:14px 14px;
  padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  gap:10px; overscroll-behavior:none; touch-action:none;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
body.walking{overflow:hidden}

.walk-top{display:flex; align-items:center; gap:10px; flex:none}
.walk-top .btn{padding:9px 14px}
.walk-count{font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}
.walk-sound{flex:none; padding:9px 11px; min-width:44px}
.walk-sound svg{display:block; width:18px; height:18px}
.walk-sound[aria-pressed="false"]{color:var(--ink-faint)}
/* One pip per stop. Position is the only thing worth reading here mid-walk,
   so it is the only thing shown. */
.walk-progress{flex:1 1 auto; display:flex; gap:3px; align-items:center; min-width:0}
.walk-progress i{flex:1 1 0; height:4px; border-radius:99px; background:var(--line)}
.walk-progress i.seen{background:var(--ink-soft)}
.walk-progress i.at{background:var(--accent); height:7px}
/* Stops belonging to the other form read as a different colour, but they still
   have to show as passed — .other listed after .seen would otherwise leave the
   Hub looking unvisited for the rest of the walk. */
.walk-progress i.other{background:var(--slate-soft)}
.walk-progress i.other.seen{background:var(--slate)}
.walk-progress i.other.at, .walk-progress i.at{background:var(--accent)}

/* The whole middle of the screen is the add button. */
.walk-stage{flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:100%; min-height:0; padding:16px 12px; cursor:pointer;
  font-family:var(--mono); text-align:center; color:var(--ink);
  background:var(--card); border:2px solid var(--line); border-radius:18px;
  touch-action:none; -webkit-tap-highlight-color:transparent;
  transition:background .09s ease-out, border-color .09s ease-out}
.walk-stage:focus-visible{outline:none; border-color:var(--accent)}
/* Flash on add. Colour and border only — nothing that moves the target under
   a thumb that is already coming back down for the next tap. */
.walk-stage.hit{background:var(--green-soft); border-color:var(--green)}
.walk-stage.dim{background:var(--paper-2); border-color:var(--line)}
.walk-form{font-size:11px; text-transform:uppercase; letter-spacing:1.6px; color:var(--accent); min-height:14px}
.walk-name{font-family:var(--disp); font-size:30px; font-weight:600; line-height:1.08; letter-spacing:-0.4px}
.walk-value{font-size:104px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-4px}
.walk-value.zero{color:var(--ink-faint); font-weight:400}
.walk-hint{font-size:11px; color:var(--ink-faint); letter-spacing:.4px; min-height:15px}

.walk-bottom{flex:none; display:flex; gap:8px}
.walk-bottom .btn{flex:1 1 0; min-height:56px; font-size:12px}
.walk-minus{flex:0 0 88px !important; font-size:18px !important; letter-spacing:0}
/* Unavailable, not disabled — these still take a press so they can answer it.
   They look the same as a disabled control; only the behaviour differs. */
.walk [aria-disabled="true"]{opacity:.38}
.walk-stage[aria-disabled="true"]{opacity:.6; cursor:default}

@media (max-height:520px){
  .walk-value{font-size:64px; letter-spacing:-2px}
  .walk-name{font-size:22px}
  .walk-bottom .btn{min-height:46px}
}

/* ── submit zone: deliberately far from the counters (R8) ── */
.gap{height:34px}
.submitzone{border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:14px}
.submitzone h2{font-family:var(--disp); font-size:17px; font-weight:600; margin:0 0 3px}
.recap{font-size:12px; color:var(--ink-soft); line-height:1.7; margin:8px 0 12px}
.recap b{color:var(--ink)}
.recap .warn{color:var(--accent)}

.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  font-family:var(--mono); font-size:11px; font-weight:600; padding:11px 16px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:8px; cursor:pointer; text-transform:uppercase; letter-spacing:.8px; min-height:44px}
.btn.ghost{background:transparent; color:var(--ink-soft); border-color:var(--line)}
.btn.danger{background:var(--accent); border-color:var(--accent); color:var(--paper)}
.btn:hover{opacity:.88}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--orange-soft)}
.btn[disabled]{opacity:.38; cursor:default}
.btn.big{width:100%; font-size:13px; padding:18px 16px; min-height:60px; letter-spacing:1.2px}
.btnrow{display:flex; gap:8px; flex-wrap:wrap}
.btnrow .btn{flex:1 1 0; min-width:120px}
.linky{font:inherit; font-size:11.5px; color:var(--accent); background:none; border:0; border-bottom:1px solid currentColor; padding:0; cursor:pointer}
.linky:hover{color:var(--ink)}

/* ── queue + log ── */
.qrow{border-top:1px solid var(--line); padding:10px 0}
.qrow:first-child{border-top:0}
.qrow-h{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.qrow-h .qw{font-size:13px; font-weight:600; flex:1 1 auto}
.qrow .qmeta{display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.55; margin-top:3px}
.chip{font-size:10px; text-transform:uppercase; letter-spacing:.7px; padding:3px 8px; border-radius:99px; border:1px solid var(--line); color:var(--ink-soft); background:var(--card); white-space:nowrap}
.chip.ok{color:var(--good); border-color:#bcce9e; background:var(--green-soft)}
.chip.no{color:var(--accent); border-color:#e0bfa2; background:var(--orange-soft)}
.chip.wait{color:var(--slate); border-color:var(--slate-soft); background:var(--slate-soft)}
.chip.old{color:var(--paper); border-color:var(--accent); background:var(--accent)}
.qrow .qacts{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.qrow .qacts .btn{font-size:10px; padding:8px 11px; min-height:38px}
.payload{font-family:var(--mono); font-size:11px; white-space:pre-wrap; word-break:break-all; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:9px 11px; margin-top:8px; max-height:220px; overflow:auto; color:var(--ink-soft)}
.empty{font-size:12.5px; color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; line-height:1.7; margin-top:12px}
.empty .k{color:var(--ink)}

/* The round column ("Biomed · Thursday · 2:00 PM") cannot shrink below its
   content. Rather than truncate a value someone is reconciling against a
   spreadsheet, the table scrolls inside its own box and the page does not. */
.logscroll{overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; margin-top:10px}
.logtable{width:100%; min-width:340px; border-collapse:collapse; font-size:11.5px}
.logtable th{text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); font-weight:400; padding:6px 8px 6px 0; border-bottom:1px solid var(--line); white-space:nowrap}
.logtable td{padding:7px 8px 7px 0; border-bottom:1px dotted var(--line); vertical-align:top; font-variant-numeric:tabular-nums}
.logtable td.r{text-align:right; padding-right:0}

/* ── confirm sheet ── */
.scrim{position:fixed; inset:0; background:rgba(38,34,26,.55); display:flex; align-items:flex-end; justify-content:center; z-index:100; padding:0}
.scrim[hidden]{display:none}
.sheet{width:100%; max-width:640px; background:var(--card); border:1px solid var(--line); border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;
  padding:18px calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  /* dvh, not vh: with the iOS URL bar expanded, 88vh puts the buttons under
     the chrome and the only visible action is the one you must not press by
     accident. The vh line is the fallback for browsers without dvh. */
  max-height:88vh; max-height:88dvh;
  overflow:auto; -webkit-overflow-scrolling:touch;
  /* Scrolling to the end of a long confirm must not start scrolling the page
     behind the sheet. */
  overscroll-behavior:contain;
  animation:rise .22s cubic-bezier(.2,.8,.3,1)}
@keyframes rise{from{transform:translateY(14px); opacity:.6} to{transform:none; opacity:1}}
.sheet h2{font-family:var(--disp); font-size:19px; font-weight:600; margin:0 0 4px}
.sheet .meta{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px}
.sheet .frow{display:flex; gap:12px; padding:7px 0; border-top:1px solid var(--line); font-size:13px}
.sheet .frow .fl{flex:1 1 auto; color:var(--ink-soft)}
.sheet .frow .fr{font-weight:600; font-variant-numeric:tabular-nums}
.sheet .frow.sum{border-top:2px solid var(--ink); font-size:15px}
/* The picker shows one house time format for both forms; where the string
   Google actually stores differs, the read-back says so. */
.sheet .fr .lit{display:block; font-weight:400; font-size:10.5px; color:var(--ink-faint); letter-spacing:.2px}
/* Each form's block in the two-form confirm is labelled, so the read-back is
   never a single undifferentiated list of numbers. */
.sheet .sheet-sect{margin:16px 0 2px; font-size:9.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--accent)}
.sheet .sheet-sect:first-of-type{margin-top:10px}
.sheet .btnrow{margin-top:16px}

footer{margin-top:26px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-soft); line-height:1.75}
footer a{color:var(--ink-soft)}
footer .by{display:block; margin-top:10px; color:var(--ink-faint)}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* Off-screen but still rendered. display:none or visibility:hidden would stop
   the switch producing its haptic, which is the only reason it exists. */
.haptic-probe{position:fixed; top:-100px; left:-100px; width:1px; height:1px; opacity:0; pointer-events:none}
[hidden]{display:none !important}

@media (max-width:430px){
  .wrap{padding:16px calc(10px + env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}
  h1{font-size:22px}
  .crow{gap:8px; padding:8px 10px}
  .crow .cval{width:50px; font-size:22px}
  .plus{width:58px}
  /* Picker and checkbox each get their own line rather than sharing a cramped
     row with the counter summary. */
  .whereami{gap:2px 9px}
  .whereami select{flex:1 1 100%}
  .whereami .chk, .whereami-note{flex:1 1 100%}
  /* Online/queue status reads as its own line under the title rather than a
     right-aligned column squeezed against it. */
  header{gap:4px}
  .status{flex:1 1 100%; text-align:left}
  /* The form name and its hint stack instead of the name wrapping mid-word
     against a hint pinned to the right edge. */
  .counters-h{flex-direction:column; align-items:flex-start; gap:2px}
  .counters-h .chip{align-self:flex-start}
}
/* Short landscape: the header and the round panel would eat the whole screen
   before a single counter is visible. */
@media (max-height:460px) and (orientation:landscape){
  .wrap{padding-top:12px}
  header{padding-bottom:10px}
  h1{font-size:20px}
  h1 .sub{display:none}
  .gap{height:24px}
  .sheet{max-height:94dvh; padding-top:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}