/* Dark, mobile-first. Hand-written on purpose: this app pulls in no build
   step and no design system — it must stay thin enough to ship in a day and
   keep running untouched for two months of baseline capture. */
/* Surface ladder approved by the operator 2026-09-02. Every surface here is a
   TOKEN — five of these were previously written straight into the rules below,
   which meant a palette change was a hunt rather than an edit. The ladder holds a
   consistent blue lift of +7/+8 (blue channel minus red); the values it replaced
   ranged +9 to +15, so borders and input wells read bluer than the card they sat
   on. If you add a surface, give it a token and keep it in the family. */
:root{
  --bg:#0a0a12; --card:#13131a; --line:#24242c; --ink:#E8E8EC; --muted:#9a9aae;
  --bar:#0c0c12; --input:#0e0e15; --btn:#1a1a22;
  --on:#1d2440; --on-line:#4d63b8; --focus:#6b82d6;
  --accent:#10b981; --accent-ink:#04120c; --warn:#fbbf24; --danger:#f87171;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding:0 0 env(safe-area-inset-bottom);
  -webkit-text-size-adjust:100%;
}
main{padding:16px; max-width:720px; margin:0 auto}

.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line); background:var(--bar);
  position:sticky; top:0; z-index:5;
}
.cust{font-weight:700; font-size:17px; letter-spacing:-.01em}
.site{font-size:12px; color:var(--muted)}
.back{color:var(--muted); text-decoration:none; font-size:14px; padding:8px}

.h2{font-size:15px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--muted); margin:22px 0 10px; font-weight:700}

/* Buttons — 44px+ targets throughout (thumb use at end of shift). */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 16px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--btn); color:var(--ink);
  font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.danger{background:transparent; border-color:#5b2b2b; color:var(--danger)}
.btn.big{width:100%; min-height:54px; font-size:16px}
.btn.small{min-height:40px; font-size:14px; flex:1}
.actions{display:flex; gap:10px; margin:18px 0 8px}
.actions .btn{flex:1}
.exports{display:flex; gap:10px; margin:18px 0}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin:12px 0;
}
.card h3{margin:0 0 10px; font-size:15px}
/* F2 (operator, 2026-09-02): the question is what has to be READ; the answer is
   what gets tapped. This was 13px muted against a 16px bright value — the wrong
   way round for a phone at 19:30 after a shift. */
/* Control BESIDE the label, not under it (operator annotation, 2026-09-02).
   The two-up daypart grid had to go first: at 375px a cell is ~165px, which
   cannot hold a label and a control on one line — the grid was what forced the
   stack. Full-width rows give the label its room back AND end up shorter than
   the grid they replace. */
label{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin:4px 0; min-height:44px; font-size:15px; color:var(--ink);
}
label > input, label > select{
  margin-top:0; width:auto; flex:0 0 auto; min-height:38px; padding:8px 11px;
}
label > select{width:158px}
label > input[name^="sellout_time"]{width:104px}
/* Measured at 375px: these two were the only rows still wrapping their label.
   A row has ~313px to spend, so the control width is what decides whether the
   question fits on one line — not the wording. */
label > select[name^="binned"]{width:142px}
label > input[name="time_completed"]{width:130px}
/* Free text needs the full width to be usable, so those rows stay stacked. */
label:has(> input[name^="notes"]), label:has(> textarea),
label:has(> input[name="other_runouts"]), label:has(> input[name="recorded_by_other"]){
  display:block; min-height:0;
}
label:has(> input[name^="notes"]) > input, label:has(> textarea) > textarea,
label:has(> input[name="other_runouts"]) > input,
label:has(> input[name="recorded_by_other"]) > input{
  width:100%; margin-top:5px; min-height:40px;
}
.field{margin:10px 0}
.flabel{display:block; font-size:15px; color:var(--ink); margin-bottom:6px}
/* A hint sits under its own control, so pull it back up out of the field gap. */
.field .hint{margin-top:6px}
input,select,textarea{
  display:block; width:100%; margin-top:5px; padding:12px;
  min-height:46px; border-radius:10px; border:1px solid var(--line);
  background:var(--input); color:var(--ink); font-size:16px; /* 16px = no iOS zoom */
  font-family:inherit;
}
textarea{min-height:auto}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
/* Was a 2-up grid; see the label rule above for why it is stacked now. */
.grid2{display:block}
.hidden{display:none}

.pp{width:100%; border-collapse:collapse}
/* These are field headers like any other and were left at 12px muted while the
   rest of the form moved to 15px ink (operator, 2026-09-02). */
.pp th{font-size:15px; color:var(--ink); font-weight:600; text-align:left; padding:4px}
.pp td{padding:2px}
.pp tbody th{width:92px}

.dpblock{border-top:1px dashed var(--line); padding-top:6px; margin-top:6px}
.dpblock:first-of-type{border-top:0; padding-top:0; margin-top:0}
.fam{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:2px}

.hint{font-size:12.5px; color:var(--muted); margin:8px 0 0; line-height:1.45}
.note{border-radius:10px; padding:11px 13px; margin:12px 0; font-size:13.5px; line-height:1.5}
.note.ok{background:rgba(16,185,129,.10); border:1px solid rgba(16,185,129,.35); color:#8ff0cd}
.note.warn{background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.35); color:#fbe08a}

.loglist{list-style:none; margin:0; padding:0}
.loglist li{margin:8px 0}
.loglist a{
  display:block; text-decoration:none; color:inherit; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px;
}
.row1{display:flex; align-items:center; gap:10px}
.date{font-weight:700; font-variant-numeric:tabular-nums}
.row2{margin-top:3px; font-size:12.5px; color:var(--muted)}
.row3{margin-top:5px; font-size:12.5px; color:#fbe08a}
.sep{margin:0 6px; opacity:.5}
.corr{color:var(--warn)}
.chip{
  margin-left:auto; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:3px 9px; border-radius:999px; border:1px solid;
}
.chip.draft{color:var(--warn); border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.10)}
.chip.submitted{color:var(--accent); border-color:rgba(16,185,129,.45); background:rgba(16,185,129,.10)}
.chip.missed{color:var(--muted); border-color:var(--line); background:var(--btn)}

.missed{margin:18px 0 6px; border:1px solid var(--line); border-radius:var(--radius); padding:12px}
.missed summary{cursor:pointer; font-size:14px; color:var(--muted)}
.empty{color:var(--muted); font-size:14px}
.login{max-width:420px; margin:24px auto}

.foot{
  text-align:center; color:var(--muted); font-size:11.5px;
  padding:22px 16px 28px; opacity:.75;
}
@media (min-width:640px){ .actions{max-width:420px} }


/* F1 (operator, 2026-09-02) — tri-state segmented answer. Replaces a select that
   cost two taps and a full row to show three options. Radios, not buttons: the
   value posts with no JavaScript, arrow keys work, and screen readers get a real
   radiogroup. The BLANK segment is a first-class choice, never a disabled
   placeholder — "not asked" is an answer this record has to be able to hold. */
.seg{display:flex; gap:6px}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg label{
  flex:1; margin:0; text-align:center; font-size:15px; color:var(--muted);
  padding:11px 4px; min-height:44px; line-height:22px;   /* 44px = a real thumb target */
  border:1px solid var(--line); border-radius:10px; background:var(--input);
  cursor:pointer; user-select:none;
}
.seg input:checked + label{
  background:var(--on); border-color:var(--on-line); color:var(--ink); font-weight:600;
}
/* Keyboard focus must stay visible — the checked style alone is not focus. */
.seg input:focus-visible + label{outline:2px solid var(--focus); outline-offset:2px}

/* F3 — a count is one to three characters. A full-bleed box for "4" reads as a
   demand for more than the shift has. Notes and free text stay wide. */
.num{max-width:120px}

/* Form v2 (the shorter sheet): "what happened to the leftovers" as tap chips, any
   that apply, blank until tapped. The optional block is a collapsed card. */
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips input{position:absolute; opacity:0; width:0; height:0}
.chips label{
  margin:0; min-height:44px; padding:10px 14px; font-size:15px; color:var(--muted); line-height:22px;
  border:1px solid var(--line); border-radius:10px; background:var(--input); cursor:pointer; user-select:none;
}
.chips input:checked + label{background:var(--on); border-color:var(--on-line); color:var(--ink); font-weight:600}
.chips input:focus-visible + label{outline:2px solid var(--focus); outline-offset:2px}
.more summary{cursor:pointer; font-size:15px; font-weight:600; padding:4px 0}
.foot-help{margin:14px 0 0}

.inday{display:flex; gap:8px; align-items:center}
.inday .num{margin-top:0}