/* E-05 — the training review screen's own stylesheet.

   EVERY colour, size, weight, tap target and rule here comes from
   web/tokens.css (Rev 1.1, byte-pinned, imported by web/training.html).
   tokens rule 1: NO PER-SCREEN COLOUR, EVER. Nothing below declares a colour
   value — only which token applies where. tokens rule 2: colour never carries
   meaning alone, so a state is words plus weight plus border, and a warning
   is the INVERSE ALERT BLOCK (--c-alert-bg / --c-alert-text), never an amber
   word on the black ground.

   Dark is the default and is not the OS's to decide; there is no
   prefers-color-scheme query here. This file is a near-copy of the base rules
   already proved on web/crewday.html, kept in a separate file because this
   piece owns web/training.css and does not edit that screen.

   No webfont is fetched. BRAND.md §2 fixes Roboto, tokens.css names it first,
   no font file ships in this repo, and a webfont fetch from a crew phone is
   both an offline-first failure and an outbound request from a field device —
   so this renders in Arial, BRAND.md's own named substitute, already in the
   token's stack. */

* { box-sizing: border-box; }

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

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

button {
  min-height: var(--tap); min-width: var(--tap);
  font-size: var(--fs-label); font-weight: var(--fw-label);
  border-radius: var(--radius);
  border: var(--bw) solid var(--c-border);
  background: var(--c-bg); color: var(--c-text);
}

/* the ONE primary action per screen (tokens --tap-primary) */
#entry-submit, #list-new, #saved-done, #signin-go {
  min-height: var(--tap-primary); font-weight: var(--fw-head);
}

/* a chosen one-tap choice is the accent block, and it also says so in
   aria-pressed — colour is never the only carrier. E-67 (2026-09-27): the
   rule now lives once, app-wide, in tokens.css (same values). */

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

/* >= --tap-gap between adjacent targets, in both axes — wet gloves */
.row { display: flex; gap: var(--tap-gap); align-items: center;
       flex-wrap: wrap; }
.stack > * + * { margin-top: var(--tap-gap); }

fieldset { border: var(--bw) solid var(--c-border);
           border-radius: var(--radius); margin: var(--sp-2) 0;
           padding: 12px; }
legend { padding: 0 6px; font-weight: var(--fw-label); }
label { display: block; margin: var(--sp-2) 0 6px;
        font-size: var(--fs-label); font-weight: var(--fw-label); }

h1, h2 { font-size: var(--fs-head); font-weight: var(--fw-head);
         line-height: var(--lh-tight); }
hr, .rule { border: 0; border-top: var(--bw-rule) solid var(--c-rule); }

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

/* the inverse alert block — NOT a colour on text. Carries the NON-DELEGABLE
   band, the paper-origin mark, the open-item line and every refusal. */
.warn { background: var(--c-alert-bg); color: var(--c-alert-text);
        border: var(--bw) solid var(--c-alert-text);
        border-radius: var(--radius); padding: 12px;
        font-weight: var(--fw-label); }
.warn .muted { color: var(--c-alert-text); }

/* a verbatim sentence out of the signed program, set apart so a man can see
   it is quoted and a reviewer in two years can see it was not reworded */
.quote { border-left: var(--bw) solid var(--c-accent);
         padding-left: 12px; font-weight: var(--fw-body); }

/* the date band, and the module title on a saved record */
.big { font-size: var(--fs-date); font-weight: var(--fw-head);
       line-height: var(--lh-tight); margin: 0 0 12px; }

/* the record's own headline, used as the way into it from the list. It is a
   button because it does something; it reads as the headline because that is
   what a man is looking at. */
.rec-title { display: block; width: 100%; text-align: left;
             font-size: var(--fs-date); font-weight: var(--fw-head);
             line-height: var(--lh-tight); margin: 0 0 12px; padding: 8px 0;
             border: 0; background: none; color: var(--c-text); }

/* the review sheet's questions. One question, one answer, room for a glove. */
.qa { border-top: var(--bw-rule) solid var(--c-rule);
      padding-top: 12px; margin-top: var(--tap-gap); }
.qa > * + * { margin-top: var(--tap-gap); }

/* a table of safety distances is a table, never prose */
table { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0; }
th, td { border: var(--bw-rule) solid var(--c-rule); padding: 8px;
         text-align: left; font-size: var(--fs-label); }
th { font-weight: var(--fw-head); }

/* one saved review, read back */
.rec { border: var(--bw) solid var(--c-border); border-radius: var(--radius);
       padding: 12px; margin-top: var(--tap-gap); }
.rec p { margin: 0 0 6px; }
.lbl { color: var(--c-text-2); font-weight: var(--fw-body);
       font-size: var(--fs-min); }
.rec .warn .lbl { color: var(--c-alert-text); }

/* the way out, at the top of every screen. JD 2026-09-25: a man must be able
   to leave a form without saving it. Same tap target as everything else - wet
   gloves do not get a smaller button because it is navigation. */
.nav { display: flex; gap: var(--tap-gap); align-items: center;
       margin-bottom: var(--sp-2); }

/* [hidden] MUST WIN over any display above it. .nav is display:flex, and a
   flex rule beating `hidden` is exactly the kind of thing neither test
   harness can see - so it is stated here rather than left to specificity. */
[hidden] { display: none !important; }

/* E-99: where the review is, in words; the one-time wipe notice. */
.sync-line, .sync-state { font-size: var(--fs-body); font-weight: var(--fw-label); }
.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);
}