/* walk.css — the counting surface.
 *
 * Same design system as the desk view: it imports board.css for the tokens, so
 * a status pill means the same thing and is the same colour in a manager's hand
 * as on the office screen. Nothing here redefines a colour.
 *
 * What is different is the situation, not the language. This is used at the end
 * of a shift, outdoors, one-handed, sometimes in gloves, sometimes in sunlight
 * bright enough to wash out a screen. So:
 *
 *   - targets are large and far apart enough to hit without looking twice
 *   - the number being typed is the biggest thing on the display
 *   - contrast is pushed past the desk view's, because a parking lot at 7pm is
 *     not an office
 *   - nothing on the page can take focus and raise a soft keyboard over the pad
 */

/* board.css is linked alongside this file rather than @imported. An @import
   cannot begin downloading until this file has arrived, which serialises two
   requests on exactly the connection least able to afford it — a phone, on
   store wifi, in the far corner of the lot. */

body {
  /* The walk is a full-screen task. The page itself must never rubber-band or
     scroll sideways while somebody is jabbing at a number pad. */
  overscroll-behavior: none;
  background: var(--bg);
}

.walk-shell {
  max-width: 520px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------------- header ---------------- */

.walk-bar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 10px 16px; display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 10;
}
.walk-bar .who { min-width: 0; }
.walk-bar .store { font-weight: 650; font-size: .875rem; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.walk-bar .state { color: var(--muted); font-size: .75rem; display: flex; align-items: center; gap: 6px; }
.walk-bar .right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.gear {
  appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 8px; color: var(--text-2);
  width: 38px; height: 38px; cursor: pointer; font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center;
}
.gear:active { background: var(--surface-3); }

.walk-body { padding: 14px 16px 20px; flex: 1; }
.walk-body h1 { font-size: 1.125rem; margin-bottom: 2px; }
.walk-sub { color: var(--muted); font-size: .8125rem; margin-bottom: 12px; }

/* ---------------- the readout ----------------
   The number being typed is the one thing that must be readable at arm's length
   in daylight, so it gets the size budget of the whole screen. */

.readout {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 16px; text-align: center; margin-bottom: 12px;
}
.readout-value {
  display: block; font-size: 2.75rem; line-height: 1.05; font-weight: 650;
  font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--text);
  /* Fixed height and tabular figures together mean the readout never reflows as
     digits arrive — no layout pass per keystroke, and nothing below it shifts. */
  min-height: 1.05em;
  user-select: none; -webkit-user-select: none;
}
.readout-value.is-empty { color: var(--line-strong); }
.readout-hint { display: block; color: var(--muted); font-size: .8125rem; margin-top: 6px; }

/* ---------------- the pad ----------------
   Every control is a <button>. There is no <input> on the walk surface, which
   is what makes a soft keyboard impossible rather than merely unlikely. */

.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key {
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); border-radius: var(--radius-lg);
  font-size: 1.75rem; font-weight: 550; font-variant-numeric: tabular-nums;
  /* Well past the 44px minimum: this is used one-handed, at speed, in the dark. */
  min-height: 66px; cursor: pointer;
  box-shadow: var(--shadow);

  /* `manipulation` drops the browser's wait for a possible double-tap-to-zoom,
     which is latency the user feels on every single key. `none` on selection
     stops a fast repeat press turning into a text highlight, which looks like
     the pad has jammed. */
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;

  /* Transform and opacity only, so the press feedback runs on the compositor
     and never waits on layout. */
  transition: transform .045s ease-out, background-color .08s linear;
}
.key:active { transform: scale(.97); background: var(--surface-3); }

/* Somebody who has asked their device to stop animating gets no springing
   keys — but still gets the colour change, so a press is still confirmed. */
@media (prefers-reduced-motion: reduce) {
  .key { transition: background-color .08s linear; }
  .key:active { transform: none; }
}
.key-del { color: var(--high); font-size: 1.3rem; }
.key-enter {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
  font-size: 1.05rem; font-weight: 650;
}
.key-enter:active { background: #0d5395; }
.key-enter:disabled {
  background: var(--surface-3); border-color: var(--line);
  color: var(--muted); box-shadow: none;
}

/* ---------------- what has been counted ---------------- */

.counted { margin-top: 18px; }
.counted-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; gap: 10px;
}
.counted-head .n { font-size: 1.05rem; font-weight: 650; }
.chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-variant-numeric: tabular-nums; font-size: .875rem; font-weight: 550;
  /* No transition: chips are appended mid-interaction, and animating each one
     in costs a paint on every keystroke for something nobody is looking at. */
}
.chips li.is-dup { border-color: var(--attn-line); background: var(--attn-soft); color: var(--attn); }

.btn-big {
  width: 100%; min-height: 52px; font-size: 1rem; justify-content: center;
}

/* ---------------- results ---------------- */

.result-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.result-list li {
  background: var(--surface); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.result-list .n { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 1.0625rem; }
.w4 { border-left-color: var(--crit); }
.w3 { border-left-color: var(--high); }
.w2 { border-left-color: var(--attn); }
.w1 { border-left-color: var(--muted); }
.w0 { border-left-color: var(--ok); }

.verdict {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px;
}
.verdict .line { font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; }
.verdict.crit { border-left: 4px solid var(--crit); }
.verdict.crit .line { color: var(--crit); }
.verdict.high { border-left: 4px solid var(--high); }
.verdict.high .line { color: var(--high); }
.verdict.attn { border-left: 4px solid var(--attn); }
.verdict.ok   { border-left: 4px solid var(--ok); }
.verdict.ok .line { color: var(--ok); }

/* ---------------- settings ---------------- */

.setting {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.setting-head { font-weight: 650; margin-bottom: 6px; font-size: .9375rem; }
.toggle { display: flex; align-items: center; gap: 11px; margin: 12px 0 6px; cursor: pointer; }
.toggle input { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.toggle span { font-size: .9375rem; font-weight: 550; }

/* ---------------- an armed test count ----------------
   A test that looks exactly like the real thing is a test somebody will mistake
   for one. When it is armed the surface says so and keeps saying so. */

.testflag {
  display: none; background: var(--attn-soft); border: 1px solid var(--attn-line);
  color: var(--attn); font-weight: 650; font-size: .8125rem; text-align: center;
  padding: 9px; border-radius: var(--radius); margin-bottom: 12px;
}
body.is-test-count .testflag { display: block; }
body.is-test-count .readout { border-color: var(--attn-line); border-style: dashed; }
body.is-test-count .key-enter { background: var(--attn); border-color: var(--attn); color: #2a1d00; }
body.is-test-count .btn-primary { background: var(--attn); border-color: var(--attn); color: #2a1d00; }

/* Wider phones and tablets in landscape get a roomier pad rather than a
   stretched one — a key that spans half the screen is harder to aim at, not
   easier. */
@media (min-width: 560px) {
  .key { min-height: 74px; font-size: 1.875rem; }
  .readout-value { font-size: 3rem; }
}