/* PIECE H - the owners' view. rc-2026-09-25-0630.

   tokens rule 1: NO PER-SCREEN COLOUR, EVER. Nothing in this file declares a
   colour value; every colour below is a var() out of web/tokens.css, which
   this lane imports and does not edit (it is byte-pinned and the design lane
   owns it). tests/test_owners_guards.py asserts there is no hex, rgb(), hsl()
   or named colour in this file.

   tokens rule 2: colour never carries meaning alone. The one band that
   carries a state - the SAMPLE band - is the inverse alert block (white on
   black / black on white, 21:1) plus words plus a border, never a tint.

   JD READS THIS STANDING UP, ON A PHONE, IN 10 SECONDS. So: one column, no
   table that scrolls sideways, the two figures he came for (crew, hours) at
   --fs-number, everything else at --fs-label or --fs-min, and no control on
   the page that is not the way back. */

* { box-sizing: border-box; }

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

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

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

/* ---- the bar: the way back, and the title ----------------------------- */
.bar {
  display: flex;
  align-items: center;
  gap: var(--tap-gap);
  padding-bottom: var(--sp-1);
  border-bottom: var(--bw-rule) solid var(--c-rule);
  margin-bottom: var(--sp-2);
}

/* the ONLY interactive element on this screen, and it navigates - it does
   not change a record. --tap is the floor for anything tappable. */
.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 12px;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-accent);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  text-decoration: none;
}

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

/* ---- the count line: the first thing he reads ------------------------- */
.count {
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
  margin: var(--sp-2) 0 var(--sp-1);
}

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

/* ---- one crew day, one card ------------------------------------------ */
#list-rows > * + * { margin-top: var(--sp-2); }

.crewday {
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding: 12px;
}

/* label left, value right; the label column is fixed so four rows line up */
.grid {
  display: grid;
  grid-template-columns: 8.5ch 1fr;
  gap: var(--sp-1) var(--sp-2);
  align-items: baseline;
}

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

.v {
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  overflow-wrap: anywhere;
}

/* the two figures he came for */
.big {
  font-size: var(--fs-number);
  font-weight: var(--fw-label);
  line-height: var(--lh-tight);
}

/* sent / not yet sent, in words - never an icon a man has to interpret */
.sent {
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: var(--bw-rule) solid var(--c-rule);
  font-size: var(--fs-min);
  font-weight: var(--fw-label);
}

/* the quiet mark on a correction */
.mark {
  margin-top: var(--sp-1);
  color: var(--c-text-2);
  font-size: var(--fs-min);
}

/* ---- the named bands -------------------------------------------------- */
.band {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: var(--bw-rule) solid var(--c-rule);
}

.band p { font-size: var(--fs-min); color: var(--c-text-2); }

/* the inverse alert block - a state carried by ground, words and border,
   not by a tint on text */
.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-size: var(--fs-label);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-caps);
}

/* ---- the CSV export block (piece I's module, adopted here) ------------ */
.export > * + * { margin-top: var(--tap-gap); }
#list-export > * + * { margin-top: var(--sp-3); }

/* the download links are real anchors JD taps - one tap, one file - so they
   carry the same glove floor as every other target on the app */
.export .back { display: flex; width: 100%; justify-content: flex-start; }

/* the export report: a plain-text page, so it is rendered as plain text.
   It wraps rather than scrolling sideways, because a phone held in one hand
   cannot pan a wide block and a report nobody reads is not a control. */
.report {
  margin: 0;
  padding: 12px;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text-2);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-min);
  line-height: var(--lh-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

[hidden] { display: none !important; }