/* Harwood "survey instrument" — design direction for approval (mock-ups only).
   White paper, ink rules instead of boxes, mono door references like an engraved
   tag plate, one brand colour (oxblood) used sparingly, band colours reserved for
   priority. No shadows, no rounded pills, no grey card stacks. */

:root {
  --ink: #111111;
  --ink-2: #3a3833;
  --muted: #6b675f;
  --faint: #a29d94;
  --paper: #ffffff;
  --tint: #f7f6f3;
  --rule: #dedad3;
  --brand: #7a0e14;
  --brand-tint: #f6eded;
  --imm: #C0392B;
  --prog: #D68910;
  --repl: #1F618D;
  --ok: #1d6b3a;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sans: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font: 16px/1.4 var(--sans); font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ---------- brand mark: the Harwood tag ---------- */
.mark {
  width: 26px; height: 26px; background: var(--ink); position: relative; flex: none;
  display: grid; place-items: center; color: #fff; font: 800 13px/1 var(--sans);
}
.mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--brand); }

/* ---------- labels ---------- */
.lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mono { font-family: var(--mono); }

/* ---------- header: paper, closed by a 2px ink rule ---------- */
.hd {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px 12px; border-bottom: 2px solid var(--ink); background: var(--paper);
}
.hd .back { font-size: 30px; line-height: 1; color: var(--ink); width: 22px; text-decoration: none; }
.hd .t { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.hd .s { font-size: 13px; color: var(--muted); }
.hd .grow { flex: 1; min-width: 0; }

/* ---------- the door reference as a tag plate ---------- */
.plate {
  font: 700 26px/1 var(--mono); letter-spacing: 0.02em;
  border: 2px solid var(--ink); padding: 7px 10px 6px; position: relative;
}
.plate::before { content: ""; position: absolute; left: -2px; top: -2px; bottom: -2px; width: 6px; background: var(--brand); }
.plate { padding-left: 14px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 18px; border: 1.5px solid var(--ink); font-weight: 700; font-size: 15px;
}
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.ink { background: var(--ink); color: #fff; }
.btn.quiet { border-color: var(--rule); }
.btn.big { height: 60px; font-size: 17px; padding: 0 26px; }

/* ---------- segmented choices: square, ruled ---------- */
.seg { display: flex; }
.seg > * {
  flex: 1; height: 48px; display: grid; place-items: center; padding: 0 12px;
  border: 1.5px solid var(--ink); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.seg > * + * { border-left: none; }
.seg .on { background: var(--ink); color: #fff; }
.seg .on.bad { background: var(--imm); border-color: var(--imm); }

/* ---------- band marks ---------- */
.band { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.band i { width: 10px; height: 10px; display: inline-block; }
.band.imm { color: var(--imm); } .band.imm i { background: var(--imm); }
.band.prog { color: var(--prog); } .band.prog i { background: var(--prog); }
.band.repl { color: var(--repl); } .band.repl i { background: var(--repl); }
.band.none { color: var(--ink); } .band.none i { background: var(--ink); }
.band.na { color: var(--ink); } .band.na i { border: 2px solid var(--ink); }
.band.todo { color: var(--faint); } .band.todo i { border: 1.5px dashed var(--faint); }

/* ---------- bottom action bar (thumb zone) ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper);
  border-top: 2px solid var(--ink); display: flex; align-items: center; gap: 16px;
  padding: 12px 24px 18px;
}