/* THE DRIVER APP — Apple's visual language, on a phone, in a yard, at 05:00.
   ==========================================================================
   The preview James approved: system font stack so it renders in SF Pro on the
   drivers' own phones, #F5F5F7 grounds with no borders, pill buttons, iOS inset
   list separators, a translucent blurred nav, large tight-tracked semibold
   headings, Apple's semantic green and red for satisfactory and defect, and one orange
   as the only accent. Full dark mode on true black.

   EVERYTHING IS SIZED FOR ONE THUMB at 380x667. The two answer buttons on the
   walk are the largest targets in the app because they are pressed 27 times
   before the lorry moves. */

:root {
  --ground: #F5F5F7;
  --card: #FFFFFF;
  --ink: #1D1D1F;
  --ink-2: #3C3C43;
  --muted: #8E8E93;
  --sep: rgba(60, 60, 67, 0.18);
  --green: #34C759;   /* Apple semantic green */
  --green-ink: #1B7F33;
  --red: #FF3B30;     /* Apple semantic red */
  --red-ink: #C0271D;
  --orange: #E8720C;  /* the only accent */
  --nav: rgba(245, 245, 247, 0.72);
  --radius: 18px;
  --radius-pill: 980px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #000000;          /* true black: an OLED phone in a dark cab */
    --card: #1C1C1E;
    --ink: #FFFFFF;
    --ink-2: #EBEBF5;
    --muted: #98989F;
    --sep: rgba(84, 84, 88, 0.65);
    --green-ink: #30D158;
    --red-ink: #FF453A;
    --nav: rgba(0, 0, 0, 0.72);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* `hidden` MEANS HIDDEN. The attribute's default is `display: none`, which any
   later rule with a display wins against — and `.btn { display: block }` did
   exactly that: the "Not applicable" button showed on all 27 items, so a driver
   could mark "fuel and oil leaks" as not applicable. Found in the gallery, on
   item 1, before anybody had it on a phone. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* QUIET MOTION, and none at all for anyone who asked their phone for none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- the nav: translucent, blurred, app icon  ---------------------------- */
.dnav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px);
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--nav);
  border-bottom: 0.5px solid var(--sep);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dnav { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
/* The logo: height fixed and the box reserved by the img's own width/height
   attributes, so the header never jumps while it loads. */
.dnav .logo { display: flex; align-items: center; }
.dnav .logo img { height: 28px; width: auto; }
.dnav .dnav-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.dnav .spacer { flex: 1; }
/* Gloves at 05:00: nothing tappable in the nav is under 44px. */
.dnav a, .dnav button {
  font-family: var(--font); font-size: 16px; color: var(--orange); letter-spacing: inherit;
  background: none; border: 0; padding: 6px 2px; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer;
}

/* ---- layout ------------------------------------------------------------- */
.wrap { padding: 8px 16px 32px; max-width: 560px; margin: 0 auto; }
h1 {
  font-size: 32px; line-height: 1.08; font-weight: 600; letter-spacing: -0.022em;
  margin: 14px 0 4px; text-wrap: balance;
}
h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 22px 0 8px; text-wrap: balance; }
.sub { color: var(--muted); font-size: 15px; margin: 0 0 14px; }

/* ---- iOS inset list: separators inset 20px, and none on the last row ----- */
.list { background: var(--card); border-radius: var(--radius); overflow: hidden; margin: 0 0 18px; }
.list .row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; color: inherit; text-decoration: none;
  min-height: 52px;
}
.list .row + .row::before {
  content: ''; position: absolute; left: 20px; right: 0; top: 0;
  height: 0.5px; background: var(--sep);
}
.list .row .grow { flex: 1; min-width: 0; }
.list .row .chev { color: var(--muted); font-size: 20px; }
/* Blocks, so a title and its description never run into one sentence. */
.row-title { display: block; font-size: 17px; font-weight: 500; }
.row-sub { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }

/* ---- pill buttons ------------------------------------------------------- */
.btn {
  display: block; width: 100%; border: 0; border-radius: var(--radius-pill);
  font-family: var(--font); font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  padding: 17px 20px; min-height: 56px; cursor: pointer; text-align: center;
  text-decoration: none; color: #fff; background: var(--orange);
  transition: transform .12s ease;
}
/* The press state is scale, not colour: quiet, and visible through a glove. */
.btn:active { transform: scale(.975); }
.btn:focus-visible, button:focus-visible {
  outline: none; box-shadow: 0 0 0 4px rgba(232, 114, 12, .35);
}
.btn.secondary { background: var(--card); color: var(--orange); }
.btn.green { background: var(--green); }
.btn.red { background: var(--red); }
.btn.ghost { background: transparent; color: var(--orange); font-weight: 500; }
.btn + .btn { margin-top: 10px; }
.btn[disabled] { opacity: .4; }

/* THE TWO ANSWERS. The largest targets in the app: pressed 27 times before the
   lorry moves, with gloves, in the dark. */
.answers { display: grid; gap: 12px; margin-top: 18px; }
.answers .btn { min-height: 68px; font-size: 20px; }

/* ---- the walk ----------------------------------------------------------- */
.progress { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.progress .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--sep); overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--orange); transition: width .2s ease; }
.progress .count { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.item-no { color: var(--muted); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.item-label { font-size: 27px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 10px; }
.item-hint { font-size: 16px; color: var(--ink-2); margin: 0 0 4px; }

/* ---- the plate ---------------------------------------------------------- */
.plate {
  display: inline-block; background: #FFD400; color: #000; border-radius: 6px;
  padding: 6px 12px; font-weight: 700; font-size: 22px; letter-spacing: .06em;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
}
.cnum-chip {
  display: inline-block; background: var(--card); color: var(--ink-2);
  border: 0.5px solid var(--sep); border-radius: var(--radius-pill);
  padding: 5px 12px; font-size: 15px; font-weight: 600;
}

/* ---- form fields -------------------------------------------------------- */
label.field { display: block; margin: 0 0 14px; }
label.field .lab { display: block; font-size: 15px; color: var(--muted); margin: 0 0 6px; }
input[type="text"], input[type="number"], input[type="tel"], textarea, select {
  width: 100%; font-family: var(--font); font-size: 18px; color: var(--ink);
  background: var(--card); border: 0; border-radius: var(--radius);
  padding: 15px 16px; min-height: 54px;
}
textarea { min-height: 110px; line-height: 1.4; }
input:focus, textarea:focus, select:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(232, 114, 12, .35);
}

/* ---- states ------------------------------------------------------------- */
.note {
  background: var(--card); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px;
  font-size: 15px; color: var(--ink-2);
}
.note.warn { color: var(--red-ink); }
.note.good { color: var(--green-ink); }
.tag { display: inline-block; border-radius: var(--radius-pill); padding: 4px 11px; font-size: 13px; font-weight: 600; }
.tag.nil { background: rgba(52, 199, 89, .16); color: var(--green-ink); }
.tag.defect { background: rgba(255, 149, 0, .18); color: #9A5B00; }
.tag.vor { background: rgba(255, 59, 48, .16); color: var(--red-ink); }
.tag.queued { background: rgba(142, 142, 147, .18); color: var(--muted); }

/* ---- the signature ------------------------------------------------------ */
.sigpad { background: var(--card); border-radius: var(--radius); touch-action: none; width: 100%; height: 180px; display: block; }

/* ---- review ------------------------------------------------------------- */
.review-row { display: flex; align-items: center; gap: 12px; }
.review-row .answer { font-size: 15px; font-weight: 600; }
.review-row .answer.sat { color: var(--green-ink); }
.review-row .answer.def { color: var(--red-ink); }
.review-row .answer.na { color: var(--muted); }

/* Nothing is ever wider than the phone. */
img, canvas { max-width: 100%; }