/* keypad.css — the number pad, wherever it appears.
 *
 * Same design system as everything else: it is linked alongside board.css and
 * uses its tokens, so a status pill means the same thing and is the same colour
 * on a pad as on the board. Nothing here redefines a colour.
 *
 * What is different is the situation. A pad is used standing up, one-handed,
 * sometimes in gloves, sometimes in a drive with the sun on the 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
 *   - 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.
 */

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

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

.pad-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;
}
.pad-bar .who { min-width: 0; }
.pad-bar .store { font-weight: 650; font-size: .875rem; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad-bar .state { color: var(--muted); font-size: .75rem; display: flex; align-items: center; gap: 6px; }
.pad-bar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.pad-body { padding: 14px 16px 24px; flex: 1; }
.pad-body h1 { font-size: 1.125rem; margin-bottom: 2px; }
.pad-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> anywhere a pad is used,
   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: used one-handed, at speed, outdoors. */
  min-height: 64px; 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: 1rem; 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;
}

.btn-big { width: 100%; min-height: 52px; font-size: 1rem; justify-content: center; }
.btn-sm  { min-height: 34px; padding: 5px 11px; font-size: .875rem; }

.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; }

/* 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: 72px; font-size: 1.875rem; }
  .readout-value { font-size: 3rem; }
}