/* E-09 DVIR screen. Piece C of rc-2026-09-25-0630.

   tokens.css rule 1: NO PER-SCREEN COLOUR, EVER. Nothing in this file declares
   a colour value - only which token applies where. tokens.css is shared,
   byte-pinned and NOT edited by this lane.

   tokens.css rule 2: colour never carries meaning alone. An open defect is not
   "the red one": it is the word, the weight and the border. A warning is the
   inverse alert block (--c-alert-bg / --c-alert-text, 21:1), which is the only
   thing that survives a cracked screen in the sun at 6 AM.

   Targets: --tap (56px) is the FLOOR for anything tappable and --tap-primary
   (64px) for the one primary action per screen. Wet gloves, in the dark. */

/* THE `hidden` ATTRIBUTE WINS, ALWAYS. The browser's default rule for
   [hidden] is display:none at the lowest possible weight, so ANY author
   `display` rule outranks it - and this file has four. No element that ships
   hidden today carries one (checked: zero <button> and zero <a> in
   dvir.html ship hidden, and nothing in any web/*.js sets style.display), so
   nothing is exposed right now. This line exists for the week somebody
   extends `button, a.primary { display: block }` and a hidden control -
   an error, a repair certification, a carried defect - quietly appears.
   On a DVIR that is a man certifying something he did not mean to.
   Found by piece H and app-lead, 2026-09-25; verified here before taking it.
   A test asserts this rule is present, because the value is not today's
   line, it is that nobody deletes it in six months. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--sp-2);
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui);
}

h1 {
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-2) 0;
  padding-bottom: var(--sp-1);
  border-bottom: var(--bw-rule) solid var(--c-rule);
}

h2 {
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-text-2);
  margin: var(--sp-3) 0 var(--sp-1) 0;
}

p { margin: 0 0 var(--sp-1) 0; }

/* The unit number is the single biggest thing on the screen: it is the one
   fact that decides whether this record is about the right truck. */
.unit-number {
  font-size: var(--fs-number);
  font-weight: var(--fw-label);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-2);
}

button,
a.primary {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-bottom: var(--tap-gap);
  padding: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  text-align: center;
  text-decoration: none;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
}

/* The one primary action per screen. */
button.primary,
a.primary {
  min-height: var(--tap-primary);
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: var(--fw-head);
}

/* A chosen OK/Defect: the border thickens and the fill inverts. Two signals,
   neither of them colour alone. */
.choices { margin-bottom: var(--sp-2); }

button.choice { border-width: var(--bw); }

button.chosen {
  background: var(--c-text);
  color: var(--c-bg);
  border-color: var(--c-text);
  font-weight: var(--fw-head);
}

input, textarea {
  width: 100%;
  min-height: var(--tap);
  margin-bottom: var(--sp-2);
  padding: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-number);
  font-weight: var(--fw-label);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
}

textarea { font-size: var(--fs-body); min-height: calc(var(--tap) * 2); }

label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text-2);
}

/* One checklist line: the item name on its own line above two big targets, so
   a wet glove cannot hit the wrong one. */
.item {
  padding: var(--sp-1) 0 var(--sp-2) 0;
  border-bottom: var(--bw) solid var(--c-rule);
}

.item-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-label);
  margin-bottom: var(--sp-1);
}

/* An open defect carried forward from an earlier day. Boxed, not coloured. */
.defect,
.carried {
  margin-bottom: var(--sp-2);
  padding: var(--sp-1);
  border: var(--bw) solid var(--c-border);
  border-left-width: 8px;
  border-radius: var(--radius);
}

.defect-item { font-weight: var(--fw-head); }
.defect-note { color: var(--c-text-2); }
/* b8 R3: the Tree Shop's sign-off on a defect - the words carry it, by
   weight, never by colour (tokens.css rule 2). */
.defect-state { font-weight: var(--fw-head); }

.saved-row {
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: var(--bw) solid var(--c-rule);
}

.saved-kind {
  font-size: var(--fs-min);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-text-2);
}

.saved-line { font-size: var(--fs-head); font-weight: var(--fw-label); }

/* Warnings and the test-data banner use the inverse block: 21:1 either theme,
   and it reads as a block rather than as a colour. */
.alert,
.banner {
  padding: var(--sp-1);
  margin-bottom: var(--sp-2);
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  font-weight: var(--fw-label);
  border-radius: var(--radius);
}

.banner {
  font-size: var(--fs-min);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

:focus-visible {
  outline: var(--bw-focus) solid var(--c-accent);
  outline-offset: 2px;
}

/* The unit picker. 265 units grouped by prefix: the heading separates, the
   unit number carries the weight, the label underneath is what a man
   recognises the truck by. Two lines in one target, one tap. */
.group-head {
  margin: var(--sp-3) 0 var(--sp-1) 0;
  padding-bottom: var(--sp-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-head);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-text-2);
  border-bottom: var(--bw-rule) solid var(--c-rule);
}

button.unit-choice { text-align: left; padding: 12px; }

.u-num {
  display: block;
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
}

.u-label {
  display: block;
  font-size: var(--fs-min);
  font-weight: var(--fw-body);
  color: var(--c-text-2);
}

/* Home sits under the primary action, quieter than it: leaving is always
   available but it is never the thing a thumb finds first. Still a full
   target - JD's defect was a man trapped on a form, and a way out he cannot
   hit is the same defect. */
button.home {
  min-height: var(--tap);
  font-weight: var(--fw-body);
  color: var(--c-text-2);
}

/* E-99: where the record is. The line is body-size and weight 500 so a man
   reads "not sent yet" without hunting for it; "sent" and "not sent" differ
   in WORDS, never only in colour. The wiped-line is the one-time notice after
   the old plain copies were erased; a whole-width target, tap to dismiss. */
.sync-line {
  font-size: var(--fs-body);
  font-weight: var(--fw-label);
  margin: var(--sp-1) 0;
}
.sync-state { font-weight: var(--fw-label); }
.not-yet { color: var(--c-text-2); }
.wiped-line {
  margin: 0;
  padding: var(--sp-2);
  min-height: var(--tap);
  font-size: var(--fs-min);
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
}