/* Mobility Concepts, gate tablet.
 *
 * Designed for a folding table at a fairground gate: full sun at two in the
 * afternoon, floodlights at eleven at night, a queue waiting, and staff hired
 * three days ago. Everything below follows from that.
 *
 *   - Two themes. Day is near-black on white for glare. Night is a low-glare
 *     dark theme so the screen is not a torch in somebody's face. The app
 *     switches at dusk on its own; staff can pin either.
 *   - Brand matches mobilityconceptsllc.com: deep forest green, signal lime.
 *   - 56px minimum touch target, 64px for anything used every rental.
 *   - Numbers are the product here (cart numbers, box numbers, money, due
 *     times), so they get tabular figures and real size.
 *   - Colour never carries meaning alone. Every state also has a word or icon.
 */

/* ------------------------------------------------------------ tokens --- */

:root {
  color-scheme: light;

  /* brand */
  --brand: #0e3b2b;
  --brand-strong: #082a1e;
  --brand-ink: #ffffff;
  --lime: #c6f24e;
  --lime-ink: #10230a;

  /* surfaces */
  --bg: #eef2ee;
  --surface: #ffffff;
  --surface-2: #f4f7f4;
  --sunk: #e3e9e4;
  --line: #cfd8d1;
  --line-strong: #9fb0a5;

  /* text: ink-2 on surface is 8.6:1, ink-3 is 5.2:1, both pass in sun */
  --ink: #0b1510;
  --ink-2: #33423a;
  --ink-3: #56665d;

  /* primary action. Day: brand green, white text (11:1). */
  --primary: var(--brand);
  --primary-ink: #ffffff;
  --primary-press: var(--brand-strong);

  /* states, each with a tint for backgrounds and an ink that passes on it */
  --go: #0a7a3a;
  --go-tint: #e3f4e8;
  --go-ink: #07502a;
  --stop: #b3261e;
  --stop-tint: #fdeceb;
  --stop-ink: #7c1712;
  --warn: #8a5a00;
  --warn-tint: #fff3d1;
  --warn-ink: #5e3d00;
  --info: #1d5fae;
  --info-tint: #e6effb;

  --focus: #f5b400;

  /* shape and depth */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --e1: 0 1px 2px rgba(11, 21, 16, .08), 0 1px 1px rgba(11, 21, 16, .04);
  --e2: 0 2px 6px rgba(11, 21, 16, .08), 0 8px 24px rgba(11, 21, 16, .08);
  --e3: 0 12px 40px rgba(11, 21, 16, .22);

  /* rhythm */
  --touch: 56px;
  --touch-lg: 64px;
  --gap: 16px;
  --pad: 20px;

  /* type */
  --font: Roboto, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --t-xs: 13px;
  --t-sm: 15px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-xl: 26px;
  --t-2xl: 34px;
  --t-3xl: 48px;

  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --fast: 120ms;
  --med: 220ms;

  /* chrome heights, used to keep content clear of the fixed bars */
  --topbar-h: 68px;
  --tabbar-h: 72px;
  --actionbar-h: 88px;
}

/* Night. Applied by data-theme, which the app sets from the clock unless a
   person has pinned a theme. Lime becomes the primary so the one thing to
   press is still the brightest thing on a dark screen. */
:root[data-theme="night"] {
  color-scheme: dark;

  --bg: #07130f;
  --surface: #0f1f19;
  --surface-2: #132820;
  --sunk: #0b1914;
  --line: #22382d;
  --line-strong: #3a5446;

  --ink: #eef5ef;
  --ink-2: #b7c7bd;
  --ink-3: #8fa398;

  --primary: var(--lime);
  --primary-ink: var(--lime-ink);
  --primary-press: #b4df3f;

  --go: #4ade80;
  --go-tint: #0f2e1d;
  --go-ink: #9df0b9;
  --stop: #ff6b5e;
  --stop-tint: #3a1512;
  --stop-ink: #ffc2bc;
  --warn: #fbbf24;
  --warn-tint: #33260a;
  --warn-ink: #fde3a0;
  --info: #7cb4ff;
  --info-tint: #10233d;

  --e1: 0 1px 2px rgba(0, 0, 0, .4);
  --e2: 0 2px 8px rgba(0, 0, 0, .45);
  --e3: 0 16px 48px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Staff tap fast and often. A selection highlight or a double-tap zoom in the
   middle of a queue is pure friction. Pinch zoom is left alone. */
body {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--med) var(--ease-out), color var(--med) var(--ease-out);
}
input, textarea { user-select: text; -webkit-user-select: text; }

h1, h2, h3 { line-height: 1.2; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ----------------------------------------------------------- layout --- */

#app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

main {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 24px calc(var(--tabbar-h) + 28px);
}
main.has-actionbar { padding-bottom: calc(var(--tabbar-h) + var(--actionbar-h) + 28px); }
main.signed-out { padding-bottom: 32px; }

.grid { display: grid; gap: var(--gap); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* The row of smaller jobs under the two big buttons on the Gate screen. */
.grid.tools { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.grid.tools > button { justify-content: flex-start; position: relative; }
.grid.tools .badge {
  margin-left: auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.tight { gap: 8px; }
.push { margin-left: auto; }
.stack > * + * { margin-top: var(--gap); }

/* Keypad on the left, the details on the right, on the landscape tablet.
   Stacks to one column in portrait. */
.split { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(360px, 420px) 1fr; }
}
/* Landscape tablets are only 800px tall, and the tab bar plus the pinned
   action bar take 160 of that. The keypad column has to fit what is left,
   or its bottom row hides behind the bars. */
@media (min-width: 900px) and (max-height: 860px) {
  .split .card h2 + .hint { display: none; }
  .split input.big { min-height: 68px; font-size: var(--t-2xl); }
  .split .asset-hit { min-height: 72px; padding: 10px 14px; }
  .split .asset-hit .asset-no { height: 52px; min-width: 64px; font-size: var(--t-xl); }
  .split .keypad { gap: 8px; margin-top: 10px; }
  .split .keypad button { min-height: 60px; font-size: var(--t-xl); }
  main.has-actionbar { padding-top: 12px; }
  .split .split-side .card { padding: 16px 18px; }
  .split .split-side .card h2 { font-size: var(--t-lg); margin-bottom: 8px; }
  .split .split-side .field { margin-bottom: 10px; }
}

.section-title {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 12px;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
.section-title .count {
  font-variant-numeric: tabular-nums; color: var(--ink-2);
  background: var(--sunk); border-radius: 999px; padding: 2px 10px; letter-spacing: 0;
}

/* ----------------------------------------------------------- topbar --- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  min-height: var(--topbar-h);
  padding: 10px 24px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
:root[data-theme="night"] .topbar { background: #0a1a14; border-bottom: 1px solid var(--line); }

.brandmark { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brandmark .logo {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--lime); color: var(--lime-ink);
}
.brandmark h1 { margin: 0; font-size: var(--t-md); font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.brandmark .sub { font-size: var(--t-xs); opacity: .82; white-space: nowrap; }
.topbar .sub { font-size: var(--t-xs); opacity: .82; }
.topbar .spacer { flex: 1; }

.gate-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: inherit; font-weight: 800; font-size: var(--t-lg);
  white-space: nowrap;
}

.clock { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; opacity: .95; white-space: nowrap; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 12px;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .02em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: inherit;
  white-space: nowrap;
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.chip.live { background: rgba(198, 242, 78, .2); color: var(--lime); }
.chip.live .dot { box-shadow: 0 0 0 0 rgba(198, 242, 78, .7); animation: pulse 2.4s var(--ease-out) infinite; }
.chip.warn { background: var(--warn); color: #1d1300; }
.chip.stop { background: var(--stop); color: #fff; }
:root[data-theme="night"] .chip.stop { color: #1e0806; }
.chip.go { background: rgba(198, 242, 78, .2); color: var(--lime); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(198, 242, 78, .6); }
  70% { box-shadow: 0 0 0 8px rgba(198, 242, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 242, 78, 0); }
}

.iconbtn {
  min-height: 44px; min-width: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, .12); color: inherit;
  border: 0; border-radius: 999px; font-size: var(--t-sm); font-weight: 700;
}
.iconbtn:active { background: rgba(255, 255, 255, .22); filter: none; }

.avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lime); color: var(--lime-ink);
  font-weight: 800; font-size: 14px; letter-spacing: .02em;
}

.banner-offline {
  position: sticky; top: var(--topbar-h); z-index: 25;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px;
  background: var(--warn-tint); color: var(--warn-ink);
  border-bottom: 1px solid var(--warn);
  font-weight: 700; font-size: var(--t-sm);
}

/* ----------------------------------------------------------- tabbar --- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 8px max(12px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom));
  gap: 6px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(11, 21, 16, .06);
}
.tabbar button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 56px; padding: 4px 6px;
  border: 0; border-radius: 12px;
  background: transparent; color: var(--ink-3);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em;
}
.tabbar button svg { width: 26px; height: 26px; }
.tabbar button[aria-current=page] { background: var(--sunk); color: var(--ink); }
.tabbar button[aria-current=page]::before {
  content: ""; position: absolute; top: -9px; left: 28%; right: 28%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--primary);
}
.tabbar button .badge {
  position: absolute; top: 2px; left: calc(50% + 8px);
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--stop); color: #fff;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 2px solid var(--surface);
}
.tabbar button .badge.neutral { background: var(--ink-2); }
:root[data-theme="night"] .tabbar button .badge.neutral { background: var(--line-strong); color: var(--ink); }

/* -------------------------------------------------------------- card --- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  padding: var(--pad);
  margin-bottom: var(--gap);
}
.card h2 { margin: 0 0 6px; font-size: var(--t-xl); font-weight: 800; letter-spacing: -.01em; }
.card h3 {
  margin: 24px 0 10px; font-size: var(--t-sm); font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
}
.card h3:first-child { margin-top: 0; }
.card > h2 + .hint, .card p.hint { margin: 0 0 14px; }
.hint { color: var(--ink-2); font-size: var(--t-sm); }
.card.flush { padding: 0; overflow: hidden; }

/* ----------------------------------------------------------- buttons --- */

button {
  font: inherit;
  font-weight: 800;
  font-size: var(--t-md);
  min-height: var(--touch);
  padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 2px solid transparent;
  border-radius: var(--r);
  background: var(--primary);
  color: var(--primary-ink);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out),
              transform var(--fast) var(--ease-out), filter var(--fast) var(--ease-out);
}
/* Feedback is depth and colour, never movement of the layout. */
button:active { filter: brightness(.9); transform: scale(.985); }
button:disabled {
  opacity: .42; cursor: not-allowed; transform: none; filter: none;
  box-shadow: none;
}

button.go { background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 18px rgba(14, 59, 43, .22); }
:root[data-theme="night"] button.go { box-shadow: 0 6px 22px rgba(198, 242, 78, .18); }
button.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
button.ghost:active { background: var(--sunk); filter: none; }
button.stop { background: var(--stop); color: #fff; }
:root[data-theme="night"] button.stop { color: #1e0806; }
button.quiet {
  background: transparent; color: var(--ink-2); border-color: var(--line);
  min-height: 48px; padding: 0 16px; font-size: var(--t-sm);
}
button.quiet:active { background: var(--sunk); filter: none; }
button.danger-quiet { background: transparent; color: var(--stop); border-color: var(--stop); border-color: color-mix(in srgb, var(--stop) 40%, transparent); min-height: 48px; font-size: var(--t-sm); }
button.wide { width: 100%; }
button.xl { min-height: var(--touch-lg); font-size: var(--t-lg); padding: 0 28px; }

/* The two actions every rental starts with. */
.bigaction {
  position: relative; overflow: hidden;
  min-height: 176px; padding: 22px 26px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px;
  text-align: left; font-size: var(--t-2xl); letter-spacing: -.01em;
  border-radius: var(--r-lg);
}
.bigaction .ico {
  position: absolute; top: 20px; left: 24px;
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16);
}
.bigaction .ico svg { width: 30px; height: 30px; }
.bigaction .go-arrow { position: absolute; top: 24px; right: 24px; opacity: .7; }
.bigaction small { font-size: var(--t-sm); font-weight: 600; opacity: .88; letter-spacing: 0; }
.bigaction.go { background: var(--primary); color: var(--primary-ink); }
:root[data-theme="night"] .bigaction.go .ico { background: rgba(16, 35, 10, .12); }
.bigaction.alt { background: var(--surface); color: var(--ink); border: 2px solid var(--line-strong); box-shadow: var(--e1); }
.bigaction.alt .ico { background: var(--sunk); color: var(--ink); }

/* ------------------------------------------------------------- forms --- */

label {
  display: block; margin-bottom: 8px;
  font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3);
}

input[type=text], input[type=tel], input[type=number], input[type=search], input[type=password], input[type=date], input[type=time], input[type=datetime-local], input:not([type]), select, textarea {
  width: 100%;
  min-height: var(--touch);
  padding: 12px 16px;
  font: inherit; font-size: var(--t-lg); font-weight: 600;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out), box-shadow var(--fast);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); font-weight: 500; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); background: var(--surface);
  box-shadow: 0 0 0 4px var(--line-strong);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
}
input.big {
  min-height: 84px;
  font-family: var(--mono); font-size: var(--t-3xl); font-weight: 800;
  text-align: center; letter-spacing: .08em;
  background: var(--surface);
}
input.invalid, textarea.invalid { border-color: var(--stop); }
textarea { min-height: 100px; resize: vertical; font-size: var(--t-md); }
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

/* Toggles are big tap targets, not checkboxes. A 16px box is unusable with
   cold hands. */
.toggle {
  display: flex; align-items: center; gap: 16px;
  min-height: var(--touch-lg); padding: 12px 18px;
  border: 2px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  color: var(--ink); text-align: left; font-weight: 800; font-size: var(--t-md);
  justify-content: flex-start;
}
.toggle .box {
  width: 32px; height: 32px; flex: none;
  border: 2.5px solid var(--line-strong); border-radius: 9px;
  display: grid; place-items: center;
  color: var(--primary-ink);
  transition: background-color var(--fast), border-color var(--fast);
}
.toggle[aria-pressed=true] { border-color: var(--go); background: var(--go-tint); }
.toggle[aria-pressed=true] .box { background: var(--go); border-color: var(--go); color: #fff; }
:root[data-theme="night"] .toggle[aria-pressed=true] .box { color: #04210f; }
.toggle small { display: block; margin-top: 2px; font-weight: 500; font-size: var(--t-sm); color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.toggle:active { filter: none; background: var(--sunk); }

.segmented { display: flex; gap: 8px; flex-wrap: wrap; }
.segmented button {
  flex: 1 1 auto; min-width: 116px;
  background: var(--surface); color: var(--ink);
  border-color: var(--line); font-weight: 700;
}
.segmented button:active { filter: none; background: var(--sunk); }
.segmented button[aria-pressed=true] {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
.segmented button small { font-weight: 600; opacity: .75; }

/* Name picker at sign in: initials make a long roster scannable. */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.person {
  justify-content: flex-start; gap: 12px;
  min-height: 64px; padding: 8px 14px;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--line); text-align: left;
  font-size: var(--t-md);
}
.person:active { filter: none; background: var(--sunk); }
.person .avatar { background: var(--sunk); color: var(--ink-2); }
.person .who-name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.person .who-name small { font-size: 12px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.person[aria-pressed=true] { border-color: var(--primary); background: var(--bg); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.person[aria-pressed=true] .avatar { background: var(--primary); color: var(--primary-ink); }

/* ------------------------------------------------------------ keypad --- */

.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: 100%; max-width: 420px; margin-top: 14px;
}
.keypad button {
  min-height: 72px;
  font-size: var(--t-2xl); font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--r);
  box-shadow: 0 2px 0 var(--line);
}
.keypad button:active { transform: translateY(2px); box-shadow: 0 0 0 var(--line); background: var(--sunk); filter: none; }
.keypad button.util { font-size: var(--t-sm); font-weight: 800; background: var(--surface-2); color: var(--ink-2); }

/* Letters on the unit labels, as a compact second block under the digits.
   Same keys, smaller, so the digits stay the thing the thumb lands on. */
.keypad-wrap { width: 100%; max-width: 420px; }
.keypad-letters {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px;
}
.keypad-letters button {
  min-height: 52px; min-width: 0; padding: 0; font-size: var(--t-lg); font-weight: 800;
  background: var(--surface-2); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--r);
  box-shadow: 0 2px 0 var(--line);
}
.keypad-letters button:active { transform: translateY(2px); box-shadow: 0 0 0 var(--line); background: var(--sunk); filter: none; }

/* Picking one unit out of several that share a label. Big cards, same
   family as the sign-in people tiles. */
.unit-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.unit-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 132px; padding: 14px 16px; text-align: left;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--e1);
}
.unit-pick:active { filter: none; background: var(--sunk); }
.unit-pick .unit-pick-label { font-family: var(--mono); font-size: var(--t-2xl); font-weight: 800; line-height: 1.05; }
.unit-pick .unit-pick-kind { font-size: var(--t-md); font-weight: 800; }
.unit-pick .unit-pick-traits { font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; }
.unit-pick .tag { margin-top: auto; }
.unit-pick.not-ready { border-style: dashed; }

/* Event and location choices carry a second line: dates, or where it is. */
.segmented.two-line button { flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 2px; padding: 10px 18px; }
.segmented.two-line button small { font-size: var(--t-xs); }

.pin-dots { display: flex; justify-content: center; gap: 18px; min-height: 84px; align-items: center; }
.pin-dots span {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--line-strong);
  transition: background-color var(--fast), transform var(--fast) var(--ease-out), border-color var(--fast);
}
.pin-dots span.on { background: var(--ink); border-color: var(--ink); transform: scale(1.08); }
.pin-dots.shake { animation: shake 360ms var(--ease-out); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); } 40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(4px); }
}

/* ---------------------------------------------------------- lookups --- */

.asset-hit {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; border-radius: var(--r);
  background: var(--surface-2); border: 2px solid var(--line);
  min-height: 84px;
}
.asset-hit .asset-no {
  min-width: 76px; height: 64px; padding: 0 10px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--surface);
  font-family: var(--mono); font-size: var(--t-2xl); font-weight: 800;
}
.asset-hit .asset-name { font-size: var(--t-lg); font-weight: 800; line-height: 1.2; }
.asset-hit .hint { margin-top: 2px; }
.asset-hit.ok { border-color: var(--go); background: var(--go-tint); }
.asset-hit.bad { border-color: var(--stop); background: var(--stop-tint); }
.asset-hit.empty-hit { color: var(--ink-3); font-weight: 600; justify-content: center; text-align: center; }

/* --------------------------------------------------------- messages --- */

.alert {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px;
  border: 1.5px solid; font-weight: 700;
}
.alert > svg { margin-top: 1px; }
.alert .alert-body { flex: 1; min-width: 0; }
.alert.stop { background: var(--stop-tint); border-color: var(--stop); color: var(--stop-ink); }
.alert.warn { background: var(--warn-tint); border-color: var(--warn); color: var(--warn-ink); }
.alert.ok { background: var(--go-tint); border-color: var(--go); color: var(--go-ink); }
.alert.info { background: var(--info-tint); border-color: var(--info); color: var(--ink); }
.alert ul { margin: 6px 0 0; padding-left: 20px; font-weight: 600; }
.alert.say { font-size: var(--t-lg); }

/* Toasts: bottom centre, clear of the tab bar, announced but never focused. */
.toasts {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 18px); z-index: 200;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  width: min(640px, calc(100vw - 32px)); pointer-events: none;
}
.has-actionbar-page .toasts { bottom: calc(var(--tabbar-h) + var(--actionbar-h) + 18px); }
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 16px 18px;
  border-radius: var(--r);
  background: var(--ink); color: var(--surface);
  box-shadow: var(--e3);
  font-weight: 700; font-size: var(--t-md);
  animation: toast-in var(--med) var(--ease-out);
}
.toast.leaving { animation: toast-out 160ms var(--ease-in) forwards; }
.toast .t-ico { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.toast.ok .t-ico { background: var(--go); color: #fff; }
.toast.warn .t-ico { background: var(--warn); color: #1d1300; }
.toast.stop .t-ico { background: var(--stop); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------- data --- */

.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 18px;
  box-shadow: var(--e1);
  display: flex; flex-direction: column-reverse; gap: 4px;
}
.stat .n { font-size: var(--t-2xl); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .k { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 800; }
.stat.alarm { border-color: var(--stop); background: var(--stop-tint); }
.stat.alarm .n, .stat.alarm .k { color: var(--stop-ink); }
.stat.good .n { color: var(--go); }

table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
th {
  text-align: left; font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); padding: 10px 12px; border-bottom: 2px solid var(--line);
}
td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
td.neg { color: var(--stop); font-weight: 800; }
.mono { font-family: var(--mono); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 10px;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .03em;
  border-radius: 999px;
  background: var(--sunk); color: var(--ink-2);
  border: 1.5px solid var(--line);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tag.stop { background: var(--stop-tint); border-color: var(--stop); color: var(--stop-ink); }
.tag.warn { background: var(--warn-tint); border-color: var(--warn); color: var(--warn-ink); }
.tag.go { background: var(--go-tint); border-color: var(--go); color: var(--go-ink); }

.list-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 4px; border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: none; }
.list-row .id {
  min-width: 68px; height: 56px; padding: 0 10px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--sunk); color: var(--ink);
  font-family: var(--mono); font-size: var(--t-xl); font-weight: 800;
}
.list-row.late .id { background: var(--stop); color: #fff; }
.list-row .who { flex: 1; min-width: 180px; }
.list-row .who b { font-size: var(--t-lg); }
.list-row .who small { display: block; color: var(--ink-2); font-size: var(--t-sm); margin-top: 2px; }
.list-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* A booking row leads with its pickup time, not a unit number. */
.list-row .id.when { min-width: 88px; font-size: var(--t-md); }

/* The way into today's online bookings, on the Gate screen. */
.booking-entry { justify-content: flex-start; gap: 14px; min-height: var(--touch-lg); text-align: left; }
.booking-entry .booking-entry-text { display: flex; flex-direction: column; line-height: 1.2; font-weight: 800; }
.booking-entry .booking-entry-text small { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.booking-card table td:first-child { color: var(--ink-2); width: 40%; }

.empty { text-align: center; padding: 44px 20px; color: var(--ink-2); font-weight: 600; }
.empty .big { margin-bottom: 10px; color: var(--ink-3); display: grid; place-items: center; }
.empty .big svg { opacity: .6; }
.empty .hint { margin-top: 6px; font-weight: 500; }

/* ----------------------------------------------------- action bar --- */

/* The button that finishes a rental is always on screen, with the total on
   it. It used to sit below the fold, so staff scrolled for it with a queue
   watching. */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 29;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(11, 21, 16, .08);
}
.actionbar-inner {
  max-width: 1240px; margin: 0 auto;
  min-height: var(--actionbar-h);
  padding: 12px 24px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.actionbar .status { flex: 1; min-width: 180px; font-weight: 700; color: var(--ink-2); font-size: var(--t-sm); display: flex; align-items: center; gap: 8px; }
.actionbar .status.ready { color: var(--go); }
.actionbar .status.blocked { color: var(--stop); }
.actionbar .primary { min-width: 260px; min-height: var(--touch-lg); font-size: var(--t-lg); }

/* ------------------------------------------------------------- modal --- */

.modal-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: rgba(3, 10, 7, .58);
  animation: fade-in var(--med) var(--ease-out);
}
.modal {
  width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; overflow: auto;
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  padding: 26px; box-shadow: var(--e3);
  animation: sheet-in var(--med) var(--ease-out);
}
.modal h2 { margin: 0 0 8px; font-size: var(--t-xl); font-weight: 800; }
.modal p { color: var(--ink-2); }
.modal .row { margin-top: 18px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .modal-backdrop { place-items: end center; padding: 0; }
  .modal { border-radius: var(--r-lg) var(--r-lg) 0 0; max-width: none; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
}

/* ----------------------------------------------------------- receipt --- */

.receipt {
  font-family: var(--mono); font-size: var(--t-md);
  background: var(--surface-2);
  border: 1.5px dashed var(--line-strong); border-radius: var(--r);
  padding: 20px 22px;
}
.receipt .line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.receipt .rule { border-top: 1.5px dashed var(--line-strong); margin: 10px 0; }
.receipt .total { font-weight: 800; font-size: var(--t-lg); }

.success-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; margin-bottom: var(--gap);
  border-radius: var(--r-lg);
  background: var(--go-tint); border: 1.5px solid var(--go); color: var(--go-ink);
  animation: sheet-in var(--med) var(--ease-out);
}
.success-hero .mark {
  width: 64px; height: 64px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--go); color: #fff;
}
:root[data-theme="night"] .success-hero .mark { color: #04210f; }
.success-hero b { display: block; font-size: var(--t-xl); color: var(--ink); }
.success-hero .say-it { font-size: var(--t-lg); font-weight: 700; }
.box-callout {
  display: inline-grid; place-items: center;
  min-width: 64px; padding: 4px 12px; margin: 0 4px;
  border-radius: 10px; background: var(--ink); color: var(--surface);
  font-family: var(--mono); font-size: var(--t-xl); font-weight: 800;
}

/* -------------------------------------------------------- sign in --- */

.signin { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 960px) { .signin { grid-template-columns: 1fr 440px; } }
.signin .pin-card { text-align: center; }
.signin .pin-card .keypad { margin: 10px auto 0; }
.signin .who-picked { font-size: var(--t-lg); font-weight: 800; min-height: 30px; }

/* -------------------------------------------------------- due list --- */

.due-list .list-row { padding: 12px 4px; }
.countdown { font-family: var(--mono); font-weight: 800; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- responsive --- */

@media (max-width: 720px) {
  :root { --pad: 16px; --t-2xl: 30px; --t-3xl: 42px; }
  main { padding: 14px 14px calc(var(--tabbar-h) + 24px); }
  main.has-actionbar { padding-bottom: calc(var(--tabbar-h) + var(--actionbar-h) + 40px); }
  .topbar { padding: 8px 14px; gap: 10px; }
  /* On a phone the bar is full once someone is signed in. The logo keeps its
     size; the business name and the gate name give way instead of pushing
     the staff chip off the screen. */
  .topbar .brandmark { flex: 0 1 auto; overflow: hidden; min-width: 40px; }
  .topbar .brandmark > div { min-width: 0; }
  .topbar .brandmark h1 { overflow: hidden; text-overflow: ellipsis; }
  .topbar .gate-pill { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; font-size: var(--t-md); }
  .topbar .spacer { flex: 1 1 0; min-width: 0; }
  .clock, .brandmark .sub.hide-sm, .hide-sm { display: none; }
  .bigaction { min-height: 140px; font-size: var(--t-xl); }
  .actionbar-inner { padding: 10px 14px; }
  .actionbar .primary { flex: 1; min-width: 0; }
}

@media print {
  .topbar, .tabbar, .actionbar, button, .banner-offline, .toasts { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .card { box-shadow: none; border: none; }
}

/* Motion is feedback here, never information. Somebody who has asked their
   device to stop moving things gets an app that works identically. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Money, counts, box numbers and times are scanned down columns. */
.stat .n, td, th, .receipt, .list-row .id, input.big, .keypad button, .clock, .tag, .countdown {
  font-variant-numeric: tabular-nums;
}

button, .toggle, a[href] { cursor: pointer; }
button:disabled { cursor: not-allowed; }
.toggle .box svg { color: currentColor; }

/* Portrait tablet and narrower: the gate is the one thing staff need in the
   bar, so the wordmark gives way to the logo alone. */
@media (max-width: 1000px) {
  .brandmark > div { display: none; }
}
.brandmark > div { min-width: 0; }

/* Single column: the keypad is centred and a little wider, so it is not
   hugging one edge with dead space beside it. */
@media (max-width: 899px) {
  .keypad { max-width: 520px; margin-left: auto; margin-right: auto; }
  .signin .pin-card .keypad { max-width: 420px; }
}

/* Pages whose header is plain markup (dashboard, board) rather than the
   tablet's brandmark still get the same weight. */
.topbar > div > h1 { margin: 0; font-size: var(--t-lg); font-weight: 800; letter-spacing: .01em; }

/* The label pad: one height, two faces. Numbers in a 4-column grid with a
   full-width 0, letters in a 5-column grid, same four rows either way. */
.keypad.k4 { grid-template-columns: repeat(4, 1fr); }
.keypad.k5 { grid-template-columns: repeat(5, 1fr); }
.keypad .span-all { grid-column: 1 / -1; }
.keypad.k5 button { font-size: var(--t-xl); }
.keypad.k5 button.util, .keypad.k4 button.util { font-size: var(--t-sm); }
.keypad button.flip { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 800; letter-spacing: .04em; }
.keypad-wrap { width: 100%; }

/* "No mobile" and "No email" under their fields. */
.check-inline { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .95rem; font-weight: 500; }
.check-inline input { width: 22px; height: 22px; }