/* PIECE D — the Job Briefing ROW. Screen styling only.

   TOKENS RULE 1: no per-screen colour, ever. Nothing in this file declares a
   colour value — only which token from web/tokens.css applies where.
   web/tokens.css is SHARED AND BYTE-PINNED and is not edited by this piece.

   TOKENS RULE 2: colour never carries meaning alone. The one emphatic block
   on this screen (the paper line, and the "off the paper" mark) is the
   INVERSE ALERT BLOCK — words plus weight plus border, 21:1 either ground.

   Dark is the default and is not the OS's to decide: there is no
   prefers-color-scheme query in this file. Light is an explicit
   <html data-theme="light">, which tokens.css scopes.

   Roboto is NOT self-hosted in this repo and this screen does NOT fetch it:
   a webfont fetch on a crew phone is both an offline-first failure and an
   outbound request from a field device. It renders in Arial, BRAND.md's own
   named substitute, already in the token stack. */

* { box-sizing: border-box; }

body {
  padding: var(--sp-2);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui);
}

/* THE `hidden` ATTRIBUTE IS DEFENDED, NOT ASSUMED.

   `hidden` is only a browser DEFAULT of `display: none`, and ANY author
   `display` rule outranks a default. This file used to say `main[hidden]`
   alone, which covered the 7 <main> screens and left the 9 other hidden
   elements — 4 <p>, 2 <label>, 2 <input> and one <button> — leaning on that
   default.

   THE BUTTON IS THE ONE THAT MATTERS. `#read-replaced` is hidden until a
   record actually has something it replaced, and the `button { }` rule below
   sets font, min-height and width but no `display` — so it is correct today
   BY LUCK. `button` is exactly the selector someone adds `display: block` to
   next month, and that would put "Read the one this replaced" on screen for a
   record that replaced nothing. On a screen whose entire purpose is what it
   can prove about an event, a replacement notice that appears when there was
   no replacement is not a cosmetic bug.

   Checked before tightening it: NO script in any page in web/ sets
   `style.display` — everything toggles the `hidden` property, as
   briefing.js's show() does with `el.hidden = (s !== id)`. And removing the
   attribute removes the match, so `!important` can never pin down something
   this screen means to show. index.html and crewday.html already carry the
   identical line; this page was the odd one out. Found by app-lead's
   by-hand pass across all six pages, from piece H's warning that a parsed or
   hand-built DOM gets you ids, keys and nesting but never CSS — so no
   harness built tonight, including this piece's, could see it.

   tests/test_briefing_screen_static.py asserts this rule is present. The
   value is not today's line; it is that nobody deletes it in six months. */
[hidden] { display: none !important; }

/* THE WAY OUT — JD, 2026-09-25 06:1x: "a way to go back to the page before or
   a way to go back to home page. Now I have to save my input to go back."
   Above the title, on every screen, both full tap targets with the token gap
   between them so a wet glove cannot hit Home when it meant Back. */
.wayout {
  display: flex;
  gap: var(--tap-gap);
  margin-bottom: var(--sp-2);
}

.wayout button,
.wayout a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin: 0;
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-bg);
  color: var(--c-accent);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  font: var(--fw-head) var(--fs-label)/var(--lh-tight) var(--font-ui);
  text-decoration: none;
}

h1, h2 {
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-2) 0;
}

/* The blue rule is the only decorative use of --c-rule: non-text, always. */
h1 {
  border-bottom: var(--bw-rule) solid var(--c-rule);
  padding-bottom: var(--sp-1);
}

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

.muted { color: var(--c-text-2); }

/* THE HONEST LINE. A9 is a decision, not a footnote, so it is the inverse
   block at the top of every screen that records or reads a briefing — not
   grey type at the bottom that a man at 6 AM never reads. */
.paper-line {
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-2);
  font-weight: var(--fw-label);
  margin: 0 0 var(--sp-3) 0;
}

fieldset {
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-2);
  margin: 0 0 var(--sp-3) 0;
}

legend {
  font-size: var(--fs-label);
  font-weight: var(--fw-head);
  padding: 0 var(--sp-1);
}

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

input, select, textarea {
  font: var(--fw-label) var(--fs-body)/var(--lh-body) var(--font-ui);
  min-height: var(--tap);
  width: 100%;
  padding: var(--sp-1);
  background: var(--c-bg);
  color: var(--c-text);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
}

/* A figure a man types or checks — tokens' --fs-number. */
input[inputmode="numeric"] {
  font-size: var(--fs-number);
  font-weight: var(--fw-label);
  max-width: 6ch;
}

/* ---- Tick rows. THE WHOLE ROW IS THE TARGET, not the 20px box: wet gloves,
   cracked screen, dark. --tap is the floor for height AND width, --tap-gap
   the clear space between two of them. */
.tick {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-1);
  margin-bottom: var(--tap-gap);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  cursor: pointer;
}

.tick input[type="checkbox"],
.tick input[type="radio"] {
  width: var(--sp-4);
  height: var(--sp-4);
  min-height: 0;
  flex: 0 0 auto;
  accent-color: var(--c-accent);
}

/* Ticked state is a BORDER WEIGHT and the box itself, never colour alone. */
.tick:has(input:checked) { border-width: var(--bw-focus); }

.choices { display: block; }

button {
  font: var(--fw-head) var(--fs-label)/var(--lh-tight) var(--font-ui);
  min-height: var(--tap);
  width: 100%;
  margin-bottom: var(--tap-gap);
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-bg);
  color: var(--c-accent);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  cursor: pointer;
}

/* The ONE primary action per screen — tokens --tap-primary. */
button.primary {
  min-height: var(--tap-primary);
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}

/* E-73: "Find a briefing" sits next to "Record one" on the list screen as a
   PLAIN LINK to the new page (web/briefing-list.html), not a JS handler —
   same pattern as dvir.css / near-miss.css's own a.primary. Every rule a
   button gets, an anchor styled as one gets too: block layout, no
   underline, centred, so it reads as a button and not a stray link. */
a.primary {
  display: block;
  font: var(--fw-head) var(--fs-label)/var(--lh-tight) var(--font-ui);
  min-height: var(--tap-primary);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--tap-gap);
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-accent);
  color: var(--c-on-accent);
  border: var(--bw) solid var(--c-accent);
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* What he must fix before it saves. Inverse block: never colour alone. */
.problem {
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-2);
  font-weight: var(--fw-head);
  margin: 0 0 var(--sp-2) 0;
}

/* ---- The saved line read back, and the list of what this phone holds. */
.record {
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-2);
  margin: 0 0 var(--sp-2) 0;
}

.record dt {
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text-2);
  margin-top: var(--sp-1);
}

.record dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-label);
}

.record .big {
  font-size: var(--fs-date);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
}

.record ul { margin: 0; padding-left: var(--sp-3); }

.saved-list { list-style: none; margin: 0; padding: 0; }
.saved-list li { margin-bottom: var(--sp-2); }

/* "off the paper" (E-19) and "a later record replaces this one" are marks a
   man must see without reading the whole card. Inverse block, upper case with
   the only tracking tokens allow (capitals only). */
.mark {
  display: inline-block;
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding: 2px var(--sp-1);
  font-size: var(--fs-min);
  font-weight: var(--fw-head);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

/* ---- WHO WAS HERE (JD finding #5). One row per man: who he is, the pad he
   signs on, whether he has signed, and a way to do it again. */
.attest {
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-2);
  font-weight: var(--fw-label);
}

.who-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  margin-bottom: var(--sp-2);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
}

.who-name { flex: 1 1 100%; font-weight: var(--fw-head); }

/* The pad is WHITE and stays white in both themes: a man signs on paper and
   the mark has to read the same way a pen on a form does. This is the one
   place the ground is not the token ground, and it is deliberate. */
.sigpad {
  flex: 1 1 100%;
  height: 90px;
  background: #FFFFFF;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  touch-action: none;   /* the stroke must not scroll the page */
}

.who-state { font-weight: var(--fw-label); }
.who-row button { width: auto; min-width: var(--tap); margin: 0; }

#photo-thumb {
  display: block;
  max-width: 100%;
  margin-top: var(--sp-2);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
}

/* ---- THE SHEET (JD #9). The artefact that works when everything else has
   failed: another man's phone, no signal, gloves, someone hurt. Big type,
   and the emergency block bigger still. */
.sheet-block { margin-bottom: var(--sp-4); }
.sheet-block h2 { font-size: var(--fs-head); margin-bottom: var(--sp-1); }
.sheet-block p { font-size: var(--fs-body); margin: 0 0 var(--sp-1) 0; }

/* EMERGENCY FIRST AND BIGGEST. A man reading this is looking for the
   hospital under pressure. Inverse block so it survives sun and a cracked
   screen, and so colour is never carrying the meaning alone. */
.sheet-block.emergency {
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  border: var(--bw-focus) solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-2);
}
.sheet-block.emergency h2 { font-size: var(--fs-number); font-weight: var(--fw-head); }
.sheet-block.emergency p { font-size: var(--fs-date); font-weight: var(--fw-label); }

/* E-94 job pick: each circuit is one full-width, glove-size target. */
.job-pick { display: block; width: 100%; min-height: var(--tap); text-align: left; }
.job-pick-circuit { display: block; font-weight: 700; }
.job-pick-crew, .job-pick-where { display: block; }

/* E-97 other hazard rows: every control full width and at least --tap high;
   a struck row stays on the glass, struck through (never taken off). */
.oh-row { border-top: var(--bw) solid var(--c-border); padding-top: var(--tap-gap); margin-top: var(--sp-2, 16px); }
.oh-row input[type="text"], .oh-row select { display: block; width: 100%; min-height: var(--tap); box-sizing: border-box; }
.oh-row button { display: block; width: 100%; min-height: var(--tap); margin-top: var(--tap-gap); }
.oh-struck input.oh-hazard, .oh-struck input.oh-control, li.oh-struck { text-decoration: line-through; }
#other-hazard-add { display: block; width: 100%; min-height: var(--tap); }