/* Fit-Check: a clinical field terminal. Dark by default, because that is what
   this is read on - a laptop in a biomedical workshop, not a brochure.

   Technical values carry the monospace face and ordinary prose does not. That
   split is the whole typographic system: if it is a rating, a standard, a
   provenance tag or a serial number, it is set in mono. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* surfaces */
  --plate:  #0B0E14;   /* page */
  --face:   #121721;   /* panel */
  --raise:  #19202C;   /* panel on panel */
  --rule:   #212838;   /* hairline */

  /* text */
  --ink:    #E9EEF8;   /* primary */
  --etch:   #A3B0C6;   /* secondary, AA on --face at body size */

  /* Clinical blue. The fill and the text tone are different colours on
     purpose: #3B82F6 reaches only 4.88:1 on --face, so text uses the lighter
     --accent-text (7.06:1) and the saturated tone is kept for fills, borders
     and the scanning reticle, where contrast is not a reading requirement. */
  --accent:      #3B82F6;
  --accent-deep: #2563EB;
  --accent-text: #60A5FA;
  --accent-wash: rgba(59, 130, 246, 0.10);
  --accent-line: rgba(59, 130, 246, 0.32);

  /* deterministic status. The wash/line pairs keep every badge on the same
     10%/30% footing so no status shouts louder than its severity. */
  --block:  #FB9090;  --block-wash: rgba(239, 68, 68, 0.10);  --block-line: rgba(239, 68, 68, 0.30);
  --hold:   #FCD34D;  --hold-wash:  rgba(245, 158, 11, 0.10); --hold-line:  rgba(245, 158, 11, 0.30);
  --clear:  #34D399;  --clear-wash: rgba(16, 185, 129, 0.10); --clear-line: rgba(16, 185, 129, 0.30);
  --query:  #60A5FA;  --query-wash: var(--accent-wash);       --query-line: var(--accent-line);

  --display: 'Inter', system-ui, sans-serif;
  --text: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 20px;
  --s5: 32px; --s6: 52px; --s7: 84px;
}

/* Technical values read as data, not prose. */
.specs b, .pairs dd, .chip, .tag, .coverage-count, .bar-num, .counter b,
.candidate-meta .chip, .ref { font-family: var(--mono); font-variant-numeric: tabular-nums; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plate);
  color: var(--ink);
  font: 400 16px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ---- chassis --------------------------------------------------------- */

/* The page is a workstation, not a document: the bar spans the viewport and
   the working area is a wide grid, so panels sit beside each other instead of
   stacking down a narrow column. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--face);
  border-bottom: 1px solid var(--rule);
}
.topbar-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--s5);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
/* Two items only: the mark and the live rule count. */

.mark {
  font: 800 17px/1 var(--display);
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.status {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font: 500 12px/1.6 var(--mono);
  color: var(--etch);
  white-space: nowrap;
}
.status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clear);
  box-shadow: 0 0 0 3px var(--clear-wash);
}
.deck { max-width: 1280px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s7); }

/* Two panels of unequal weight: the working surface and its readout. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
.split-wide { grid-template-columns: 1.15fr 0.85fr; }
.rowset { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }

@media (max-width: 900px) {
  .split, .split-wide { grid-template-columns: 1fr; }
  .topbar-in { height: auto; padding: var(--s3) var(--s4); flex-wrap: wrap; }
  .deck { padding: var(--s4) var(--s4) var(--s6); }
  .status { font-size: 10px; }
}

/* ---- plate --------------------------------------------------------- */

.plate {
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: var(--s5);
  margin: 0 0 var(--s4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.plate-tight { padding: var(--s5); }

h1 {
  font: 700 39px/1.1 var(--display);
  letter-spacing: -0.025em;
  margin: 0 0 var(--s3);
}
h2 { font: 600 20px/1.3 var(--text); margin: var(--s6) 0 var(--s3); }
h2:first-child { margin-top: 0; }

.sub { color: var(--etch); max-width: 58ch; margin: 0 0 var(--s5); font-size: 17px; }
.note { color: var(--etch); font-size: 14px; margin: var(--s2) 0 0; }

/* ---- forms ---------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: var(--s5); }
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field > .name { font-weight: 600; font-size: 15px; }

input[type="text"], textarea, select {
  font: 400 15px/1.5 var(--text);
  color: var(--ink);
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--s3) var(--s4);
  width: 100%;
}
input[type="text"]:hover, textarea:hover, select:hover { border-color: #2E3850; }
input[type="text"]::placeholder, textarea::placeholder { color: #5A6880; }
textarea { resize: vertical; min-height: 128px; }
input[type="text"]:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible, .pick:focus-within, .tile:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="text"]:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* the nameplate drop target: a ghost of the thing being photographed */
.nameplate {
  position: relative;
  display: block;
  border: 2px dashed var(--rule);
  border-radius: 3px;
  background: var(--plate);
  padding: var(--s5);
  cursor: pointer;
}
.nameplate:hover { border-color: var(--etch); }
.nameplate-grid {
  display: grid;
  grid-template-columns: auto minmax(90px, 200px) auto minmax(90px, 200px);
  justify-content: start;
  gap: var(--s2) var(--s4);
  font-size: 13px;
  color: var(--etch);
  margin-bottom: var(--s4);
}
.nameplate-grid b { font-weight: 600; }
.nameplate-grid u { text-decoration: none; border-bottom: 1px solid var(--rule); min-width: 64px; }
.nameplate-call { font-weight: 600; font-size: 15px; color: var(--ink); }
.nameplate input[type="file"] { margin-top: var(--s3); font: inherit; font-size: 14px; color: var(--etch); }

button.go, a.go {
  font: 600 15px/1 var(--text);
  background: var(--accent-deep);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: var(--s3) var(--s5);
  cursor: pointer;
  align-self: flex-start;
}
button.go:hover, a.go:hover { background: var(--accent); }

a.link { color: var(--accent-text); text-underline-offset: 3px; }

/* ---- clinic picker ------------------------------------------------- */

.picks { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.pick {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s4);
  align-items: start;
  padding: var(--s4) var(--s2);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.pick:has(input:checked) { background: var(--plate); box-shadow: inset 3px 0 0 var(--ink); }
.pick input { margin-top: 5px; accent-color: var(--ink); }
.pick-name { font: 700 20px/1.2 var(--display); letter-spacing: -0.015em; }
.pick-where { color: var(--etch); font-weight: 400; font-size: 15px; font-family: var(--text); }
.pick-note { color: var(--etch); font-size: 14px; margin-top: var(--s2); max-width: 70ch; }

.specs { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s2); font-size: 14px; }
.specs b { font-weight: 600; font-variant-numeric: tabular-nums; }
.specs span { color: var(--etch); }

/* ---- the stamp ------------------------------------------------------ */

.readout {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 340px);
  gap: var(--s6);
  align-items: start;
}
.readout-side { display: flex; flex-direction: column; gap: var(--s5); }

.ident { min-width: 0; }
.ident-name { font: 800 31px/1.08 var(--display); letter-spacing: -0.03em; margin: 0; }
.ident-kind { color: var(--etch); margin: var(--s2) 0 var(--s4); }

.pairs { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); font-size: 15px; }
.pairs dt { color: var(--etch); }
.pairs dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.dest { padding-top: var(--s4); border-top: 1px solid var(--rule); }
.dest-name { font-weight: 700; }
.dest-name em { font-style: normal; color: var(--etch); font-weight: 400; }

.stamp {
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: var(--s4) var(--s5);
  text-align: center;
  min-width: 268px;
}
.stamp b { display: block; font: 800 30px/1.05 var(--display); letter-spacing: -0.02em; text-transform: uppercase; }
.stamp i { display: block; font-style: normal; font-size: 14px; margin-top: var(--s2); font-weight: 600; }
.oversight {
  color: var(--etch);
  font-size: 13px;
  line-height: 1.45;
  margin: calc(-1 * var(--s3)) 0 0;
  max-width: 34ch;
}

.stamp.bad { color: var(--block); background: var(--block-wash); border-color: var(--block-line); }
.stamp.hold { color: var(--hold); background: var(--hold-wash); border-color: var(--hold-line); }
.stamp.good { color: var(--clear); background: var(--clear-wash); border-color: var(--clear-line); }

/* ---- diagnostic rail ------------------------------------------------ */

.segments { display: flex; gap: 3px; margin: var(--s5) 0 var(--s3); }
.seg {
  flex: 1;
  height: 34px;
  border-radius: 2px;
  display: block;
  text-decoration: none;
}
.seg.bad { background: var(--block); }
.seg.hold { background: var(--hold); }
.seg.good { background: var(--clear); }
.seg.ask { background: var(--query); }

.key { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 14px; color: var(--etch); }
.key i { font-style: normal; display: inline-flex; align-items: center; gap: var(--s2); }
.key u { text-decoration: none; width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.key .bad { background: var(--block); }
.key .hold { background: var(--hold); }
.key .good { background: var(--clear); }
.key .ask { background: var(--query); }

/* ---- callouts -------------------------------------------------------- */

.flag { border-left: 3px solid; padding: var(--s4) var(--s5); margin: var(--s5) 0; border-radius: 0 3px 3px 0; }
.flag h2 { margin: 0 0 var(--s3); font-size: 17px; }
.flag ul { margin: 0; padding-left: var(--s4); }
.flag li { margin: var(--s2) 0; }
.flag.bad { border-color: var(--block); background: var(--block-wash); }
.flag.bad h2 { color: var(--block); }
.flag.hold { border-color: var(--hold); background: var(--hold-wash); }
.flag.hold h2 { color: var(--hold); }
.flag.ask { border-color: var(--query); background: var(--query-wash); }
.flag.ask h2 { color: var(--query); }

/* ---- tables ---------------------------------------------------------- */

.grid { width: 100%; border-collapse: collapse; font-size: 15px; }
.grid th {
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: var(--etch);
  border-bottom: 2px solid var(--ink);
  padding: var(--s2) var(--s3);
}
.grid td { padding: var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.grid tr:last-child td { border-bottom: none; }
.grid .what { font-weight: 600; white-space: nowrap; border-left: 3px solid transparent; }
.grid .remedy { color: var(--etch); }
.grid .from { color: var(--etch); font-size: 13px; white-space: nowrap; }
.grid .num { font-variant-numeric: tabular-nums; font-weight: 600; }

tr.is-bad .what { border-left-color: var(--block); color: var(--block); }
tr.is-hold .what { border-left-color: var(--hold); }
tr.is-ask .what { border-left-color: var(--query); }
tr.is-good .what { border-left-color: var(--clear); }

/* ---- dashboard ------------------------------------------------------- */

.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s4); }
.counter { border: 1px solid var(--rule); border-radius: 3px; padding: var(--s4); background: var(--face); }
.counter b { display: block; font: 800 44px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.counter span { color: var(--etch); font-size: 14px; }
.counter.bad b { color: var(--block); }
.counter.hold b { color: var(--hold); }
.counter.good b { color: var(--clear); }

.bars { display: grid; grid-template-columns: minmax(130px, auto) 1fr auto; gap: var(--s3) var(--s4); align-items: center; }
.bars .bar-name { font-size: 14px; }
.bars .track { display: block; background: var(--plate); border-radius: 2px; height: 22px; }
.bars .fill { display: block; background: var(--hold); height: 100%; border-radius: 2px; min-width: 3px; }
.bars .bar-num { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }

.pill {
  font: 600 12px/1.5 var(--mono);
  letter-spacing: 0.02em;
  padding: 3px var(--s2);
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill.bad { background: var(--block-wash); color: var(--block); border-color: var(--block-line); }
.pill.hold { background: var(--hold-wash); color: var(--hold); border-color: var(--hold-line); }
.pill.good { background: var(--clear-wash); color: var(--clear); border-color: var(--clear-line); }
.pill.ask { background: var(--query-wash); color: var(--query); border-color: var(--query-line); }

.empty { color: var(--etch); border: 1px dashed var(--rule); border-radius: 3px; padding: var(--s6); text-align: center; }

.after { display: flex; gap: var(--s4); align-items: baseline; margin-top: var(--s6); }
.ref { color: var(--etch); font-size: 13px; margin-top: var(--s4); }


@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 760px) {
  .readout { grid-template-columns: 1fr; gap: var(--s5); }
  .stamp { min-width: 0; }
  .plate { padding: var(--s5) var(--s4); }
  h1 { font-size: 31px; }
  .ident-name { font-size: 25px; }
  .grid .what, .grid .from { white-space: normal; }
  .nameplate-grid { grid-template-columns: auto 1fr; }
}

/* ---- two doors ------------------------------------------------------- */

.doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s5) 0; }
.door {
  display: flex; flex-direction: column; gap: var(--s2);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: var(--s5); text-decoration: none; color: var(--ink);
  background: var(--plate);
}
.door:hover { border-color: var(--ink); }
.door-name { font: 700 20px/1.2 var(--display); letter-spacing: -0.015em; }
.door-note { font-size: 14px; color: var(--etch); }
.door-go { margin-top: var(--s3); font-weight: 600; font-size: 14px; }

/* ---- form furniture -------------------------------------------------- */

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); }
.checks { display: flex; flex-direction: column; gap: var(--s2); }
.checks label { display: flex; gap: var(--s2); align-items: center; font-size: 15px; }
.checks input { accent-color: var(--ink); }
select {
  font: 400 16px/1.5 var(--text); color: var(--ink); background: var(--plate);
  border: 1px solid var(--rule); border-radius: 2px; padding: var(--s3) var(--s4); width: 100%;
}

/* ---- candidate list -------------------------------------------------- */

.candidate { border-top: 1px solid var(--rule); padding: var(--s5) 0; }
.candidate-head { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.candidate-name { font: 700 20px/1.2 var(--display); letter-spacing: -0.015em; margin: 0; }
.candidate-donor { color: var(--etch); font-size: 14px; margin: var(--s1) 0 0; }
.candidate-meta { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.candidate-needs { font-size: 14px; margin: var(--s3) 0 0; max-width: 72ch; }
.candidate-act { margin-top: var(--s4); }

.confirm-acts { display: flex; gap: var(--s4); flex-wrap: wrap; margin: var(--s5) 0 var(--s3); }
button.go-quiet {
  font: 600 16px/1 var(--text); background: none; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: var(--s3) var(--s5); cursor: pointer;
}
button.go-quiet:hover { border-color: var(--block); color: var(--block); }

@media (max-width: 680px) { .doors { grid-template-columns: 1fr; } }


/* ---- requirement bundle ---------------------------------------------- */

.bundle { margin-top: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.bundle-head { font-size: 14px; margin: 0 0 var(--s2); }
.bundle-row {
  display: flex; justify-content: space-between; gap: var(--s4);
  font-size: 14px; padding: var(--s2) 0 var(--s2) var(--s3);
  border-left: 3px solid var(--rule); flex-wrap: wrap;
}
.bundle-row.is-covered { border-left-color: var(--clear); }
.bundle-row.is-gap { border-left-color: var(--block); }
.bundle-row.is-arranged { border-left-color: var(--query); }
.bundle-what { max-width: 58ch; }
.bundle-src { color: var(--etch); white-space: nowrap; }
.bundle-row.is-covered .bundle-src { color: var(--clear); font-weight: 600; }
.bundle-row.is-gap .bundle-src { color: var(--block); }

/* ---- request lines --------------------------------------------------- */

.lines { border: 1px solid var(--rule); border-radius: 3px; padding: var(--s4); margin: 0; }
.lines legend { padding: 0 var(--s2); }

.line-row { display: flex; gap: var(--s3); align-items: flex-end; margin-bottom: var(--s3); }
.line-row .field { flex: 1; }
.line-qty { flex: 0 0 110px !important; }

.line-drop, .line-add {
  font: 600 14px/1 var(--text);
  color: var(--ink);
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 11px var(--s3);
  cursor: pointer;
}
.line-drop[disabled] { opacity: 0.4; cursor: default; }
.line-add { margin-top: var(--s2); }

/* ---- coverage summary ------------------------------------------------ */

.coverage { margin-top: var(--s4); border-top: 1px solid var(--rule); }

.coverage-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.coverage-what { font-weight: 600; min-width: 14ch; }
.coverage-count { font-variant-numeric: tabular-nums; }
.coverage-line.is-met .coverage-count { color: var(--clear); font-weight: 600; }
.coverage-line.is-short .coverage-count { color: var(--hold); font-weight: 600; }
.coverage-note { color: var(--etch); font-size: 14px; }

/* ---- provenance tags and the audit table ----------------------------- */

/* Where a fact came from, never decoration: the tag is the audit trail. */
.tag {
  font: 500 11px/1.6 var(--mono);
  color: var(--etch);
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.tag.is-trusted { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-wash); }

.audit { width: 100%; border-collapse: collapse; margin-top: var(--s4); font-size: 14px; }
.audit th {
  text-align: left;
  font: 600 12px/1.6 var(--text);
  color: var(--etch);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule);
}
.audit td { padding: var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.audit tr:last-child td { border-bottom: 0; }
.audit .audit-name { font-weight: 600; color: var(--ink); }
.audit .audit-value { font-family: var(--mono); color: var(--etch); }
.audit .audit-detail { color: var(--etch); max-width: 54ch; }

/* ---- rating plate scanner ------------------------------------------- */

.scan { text-align: center; padding: var(--s6) var(--s5); }
.scan-reticle {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s4);
  border: 2px solid var(--accent);
  border-radius: 6px;
  position: relative;
  background: var(--accent-wash);
}
/* Four corner ticks and a centre line: a viewfinder, not a cloud icon. */
.scan-reticle::before, .scan-reticle::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
}
.scan-reticle::before { top: 50%; width: 28px; height: 2px; }
.scan-reticle::after { top: 30%; width: 14px; height: 2px; opacity: 0.6; }
.scan-head { font: 700 19px/1.2 var(--display); margin: 0 0 var(--s2); }
.scan-sub { color: var(--etch); font-size: 14px; max-width: 52ch; margin: 0 auto var(--s4); }
.scan input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.scan .scan-act {
  display: inline-block;
  font: 600 15px/1 var(--text);
  background: var(--accent-deep);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: var(--s3) var(--s5);
}
.scan-file { display: block; margin-top: var(--s3); font-family: var(--mono); font-size: 13px; color: var(--etch); }

/* ---- hero badge and demo presets ------------------------------------- */

.badge {
  display: inline-block;
  font: 500 12px/1.6 var(--mono);
  color: var(--accent-text);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 3px var(--s3);
  margin: 0 0 var(--s4);
}

.presets { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.presets-head { font-size: 14px; color: var(--etch); margin: 0 0 var(--s3); }
.preset-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); }

.preset {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s3) var(--s4);
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
}
.preset:hover { border-color: var(--accent); background: var(--accent-wash); }
.preset-name { font-weight: 600; font-size: 14px; }
.preset-where { font-size: 13px; color: var(--etch); }
.preset-spec { font: 500 12px/1.6 var(--mono); color: var(--accent-text); margin-top: 2px; }

/* Role cards: the two doors take different accents so they never blur. */
.door:hover { border-color: var(--accent); background: var(--accent-wash); }
.doors a[href="/clinic"]:hover { border-color: var(--clear); background: var(--clear-wash); }

/* ---- recipient trust ------------------------------------------------- */

.trust { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin: var(--s4) 0; }
.trust-note { color: var(--etch); font-size: 14px; max-width: 58ch; }

/* ---- landing workstation --------------------------------------------- */

.masthead { margin-bottom: var(--s5); max-width: 68ch; }
.masthead h1 { margin-bottom: var(--s3); }

/* The two roles are panels of equal weight, told apart by the rule on top. */
.role {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: var(--s5);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
}
.role-rule { position: absolute; inset: 0 0 auto 0; height: 2px; }
.role-donor .role-rule { background: var(--accent); }
.role-clinic .role-rule { background: var(--clear); }
.role-donor:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.role-clinic:hover { border-color: var(--clear-line); background: var(--clear-wash); }

.role-kicker { font: 500 11px/1.6 var(--mono); color: var(--etch); }
.role-donor .role-kicker { color: var(--accent-text); }
.role-clinic .role-kicker { color: var(--clear); }
.role-name { font: 700 23px/1.2 var(--display); letter-spacing: -0.02em; margin: var(--s2) 0 var(--s4); }

.role-points { margin: 0 0 var(--s5); padding: 0; list-style: none; display: grid; gap: var(--s2); }
.role-points li {
  font-size: 14px;
  color: var(--etch);
  padding-left: var(--s4);
  position: relative;
  line-height: 1.5;
}
.role-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.role-go { margin-top: auto; font-weight: 600; font-size: 14px; }
.role-donor .role-go { color: var(--accent-text); }
.role-clinic .role-go { color: var(--clear); }

/* ---- facility testbeds ------------------------------------------------ */

/* ---- split workspace -------------------------------------------------- */

.panel-head {
  font: 600 12px/1.6 var(--mono);
  color: var(--etch);
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
}
.workbench .nameplate { margin-bottom: var(--s4); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }

.inspector { position: sticky; top: 72px; }
.inspector-table { margin-top: var(--s3); }
.inspector-table td { padding: var(--s3) var(--s2); }
.audit-value.is-empty { color: #8795AD; }
.inspector-msg { font-size: 13px; color: var(--etch); margin: var(--s3) 0 0; min-height: 1.2em; }

.go-quiet {
  font: 600 14px/1 var(--text);
  background: var(--raise);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--s3) var(--s4);
  cursor: pointer;
}
.go-quiet:hover { border-color: var(--accent); color: var(--accent-text); }
.go-quiet[disabled] { opacity: 0.55; cursor: progress; }

/* ---- numeric inputs with fixed unit caps ------------------------------ */

.measure { position: relative; display: flex; align-items: stretch; }
.measure input[type="text"] { padding-right: 64px; }
.measure .unit {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  display: flex;
  align-items: center;
  padding: 0 var(--s3);
  font: 500 12px/1 var(--mono);
  color: var(--etch);
  background: var(--raise);
  border-left: 1px solid var(--rule);
  border-radius: 0 5px 5px 0;
  pointer-events: none;
}

/* ---- utility tiles ---------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
.tile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.tile .tile-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3A465C;
}
.tile .tile-name { font-size: 14px; }
.tile:has(input:checked) { border-color: var(--clear-line); background: var(--clear-wash); }
.tile:has(input:checked) .tile-dot { background: var(--clear); box-shadow: 0 0 0 3px var(--clear-wash); }
.tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- tactile hardware tiles ------------------------------------------ */

/* The dot is an indicator lamp: dark when the utility is absent, lit when
   present. The glow is the only non-functional flourish in the sheet, and it
   earns its place by making state readable at a glance across a grid. */
.tile { transition: border-color 120ms ease, background 120ms ease; }
.tile:hover { border-color: #39455C; }
.tile:has(input:checked) .tile-dot {
  background: var(--clear);
  box-shadow: 0 0 8px var(--clear), 0 0 0 3px var(--clear-wash);
}
.tile:has(input:checked) .tile-name { color: #A7F3D0; }

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
}

/* ---- provenance badges, coloured by what they assert ------------------ */

/* Read off the plate, read off a document, taken from the standard, or not
   established at all. Four different kinds of claim, four treatments. */
.tag[data-source="nameplate"] { color: var(--clear); border-color: var(--clear-line); background: var(--clear-wash); }
.tag[data-source="spec sheet"] { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-wash); }
.tag[data-source="IEC 60601-1 default"],
.tag[data-source="model knowledge"] { color: #C4B5FD; border-color: rgba(167, 139, 250, 0.32); background: rgba(167, 139, 250, 0.10); }
.tag[data-source="unverified"],
.tag[data-source="unknown"] { color: #94A2B8; border-color: var(--rule); background: var(--raise); }

/* ---- source tabs ------------------------------------------------------ */

.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--rule); margin-bottom: var(--s4); }
.tab {
  font: 600 13px/1 var(--text);
  color: var(--etch);
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--plate);
  border-color: var(--rule);
  border-bottom: 1px solid var(--plate);
}
.tab-panel[hidden] { display: none; }

/* ---- inspector status banner ------------------------------------------ */

.telemetry {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font: 600 11px/1.6 var(--mono);
  letter-spacing: 0.04em;
  color: var(--etch);
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s3);
}
.telemetry .dot { width: 7px; height: 7px; border-radius: 50%; background: #4A5670; }
.telemetry.is-live { color: var(--clear); border-color: var(--clear-line); background: var(--clear-wash); }
.telemetry.is-live .dot { background: var(--clear); box-shadow: 0 0 6px var(--clear); }
.telemetry.is-working { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-wash); }
.telemetry.is-working .dot { background: var(--accent); }

/* ---- role capability rows --------------------------------------------- */

/* Testbed cards read as something you press. */
.bed { transition: border-color 120ms ease, background 120ms ease; position: relative; }
.bed::after {
  content: "\2192";
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  color: var(--etch);
  font-size: 15px;
}
.bed:hover::after { color: var(--accent-text); }
.bed-name { padding-right: var(--s5); }

@media (prefers-reduced-motion: reduce) { .bed { transition: none; } }

/* ---- role cards ------------------------------------------------------- */

.role-line { color: var(--etch); font-size: 14px; line-height: 1.55; margin: 0 0 var(--s5); max-width: 46ch; }
.role .go { margin-top: auto; text-decoration: none; }
.go-clinic { background: #0F7A5A; border-color: var(--clear); }
.go-clinic:hover { background: #14946E; }

/* ---- compact testbed strip -------------------------------------------- */

.beds-strip { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.beds-head { font: 500 11px/1.6 var(--mono); color: var(--etch); margin: 0 0 var(--s3); }
.beds-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

.bed-chip {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}
.bed-chip:hover { border-color: var(--accent); background: var(--accent-wash); }
.chip-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip-specs { font: 400 11px/1 var(--mono); color: var(--etch); white-space: nowrap; }
.chip-specs b { font-weight: 600; color: var(--ink); }
.chip-specs b.is-hot { color: var(--hold); }

/* ---- footer ----------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); margin-top: var(--s6); }
.footer-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s4) var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  font-size: 12px;
  color: var(--etch);
}
.footer-links { display: flex; gap: var(--s4); align-items: center; }
.footer-links a { color: var(--etch); text-decoration: none; }
.footer-links a:hover { color: var(--accent-text); text-decoration: underline; }
.footer-mark { font-family: var(--mono); color: #6F7D96; }

@media (prefers-reduced-motion: reduce) { .bed-chip { transition: none; } }

/* ---- [B6] role toggle (§7.1) -------------------------------------------- */

/* A cookie and a colour: the role tints the bar and the primary buttons and
   hides nothing. Amber for the donor, teal for the clinic, slate for the
   nonprofit. Each fill keeps white text at AA (amber 5.0:1, teal 5.5:1,
   slate 7.6:1). */
:root { --role: var(--accent-deep); --role-edge: var(--accent); --role-wash: var(--accent-wash); }
body[data-role="donor"]     { --role: #B45309; --role-edge: #F59E0B; --role-wash: rgba(245, 158, 11, 0.12); }
body[data-role="clinic"]    { --role: #0F766E; --role-edge: #14B8A6; --role-wash: rgba(20, 184, 166, 0.12); }
body[data-role="nonprofit"] { --role: #475569; --role-edge: #94A3B8; --role-wash: rgba(148, 163, 184, 0.14); }

body[data-role] .topbar { border-bottom: 2px solid var(--role-edge); background: linear-gradient(var(--role-wash), var(--role-wash)), var(--face); }
body[data-role] button.go, body[data-role] a.go { background: var(--role); border-color: var(--role-edge); }
body[data-role] button.go:hover, body[data-role] a.go:hover { background: var(--role-edge); color: #0B0E14; }

.role-toggle { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; gap: 2px; margin: 0; }
.role-btn {
  font: 600 12px/1 var(--text);
  color: var(--etch);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.role-btn:hover { color: var(--ink); }
.role-btn-donor[aria-pressed="true"]     { background: #B45309; color: #fff; }
.role-btn-clinic[aria-pressed="true"]    { background: #0F766E; color: #fff; }
.role-btn-nonprofit[aria-pressed="true"] { background: #475569; color: #fff; }

.desk-links { display: flex; gap: var(--s3); margin-right: auto; margin-left: var(--s4); }
.desk-links a { font: 500 13px/1 var(--text); color: var(--ink); text-decoration: none; padding: 6px 10px;
  border: 1px solid var(--role-edge, var(--rule)); border-radius: 6px; }
.desk-links a:hover { background: var(--role-wash); }

/* ---- [B6] landing: two intake forms, the operator between them ------------ */

.flow { display: grid; grid-template-columns: 1fr 0.8fr 1fr; gap: var(--s4); align-items: stretch; }
.operator {
  display: flex; flex-direction: column; justify-content: center;
  border: 1px dashed #94A3B8; border-radius: 8px; padding: var(--s4);
  background: rgba(148, 163, 184, 0.06); text-align: center;
}
.operator .role-kicker { color: #94A3B8; }
.operator-name { font: 700 23px/1.2 var(--display); margin: var(--s2) 0 var(--s3); }
.operator-line { color: var(--etch); font-size: 14px; margin: 0 0 var(--s4); }
.middlemen { list-style: none; margin: 0; padding: var(--s3) 0 0; border-top: 1px solid var(--rule);
  display: grid; gap: var(--s1); color: #6F7D96; font-size: 13px; }
.middlemen::before { content: "also in the chain"; display: block; font: 500 11px/1.6 var(--mono); color: #6F7D96; }
.role-alt { font-size: 13px; margin-top: var(--s3); }
.country-list { margin: 0; padding-left: var(--s4); display: grid; gap: var(--s2); }

/* ---- [B6] candidate verdict page (§7.2) and matches links ------------------ */

.candidate-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.candidate-link:hover { color: var(--accent-text); }
.candidate-act .link, .candidate-act a.link { margin-left: var(--s4); font-size: 14px; align-self: center; }
.candidate-questions { margin: var(--s2) 0 0; padding-left: var(--s4); font-size: 14px; color: var(--etch); }
.candidate-questions li { margin: var(--s1) 0; }
.candidate-acts { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.candidate-acts form { margin: 0; }
.candidate-acts a.go, .after a.go { text-decoration: none; }
.sendwith .addon { font-size: 13px; margin: var(--s1) 0 var(--s2) var(--s4); color: var(--etch); }
.sendwith .addon .pill { margin-right: var(--s2); }
.sendwith .addon.is-rejected { color: var(--block); }
.audit-scroll { overflow-x: auto; }
.audit-source { min-width: 14ch; }
.audit-source .source-cite { display: block; font-size: 12px; margin-top: var(--s1); overflow-wrap: anywhere; }
.audit-source .source-aside { display: block; color: var(--etch); margin-top: 2px; }
.flag .note { display: block; color: var(--etch); margin-top: 2px; }
.stamp.ask { color: var(--query); background: var(--query-wash); border-color: var(--query-line); }

/* ---- [B6] narrow screens: the 16px side gutter, no sideways scroll ---------- */

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; }
  .desk-links { margin-left: 0; }
}
@media (max-width: 480px) {
  .deck { padding-left: 16px; padding-right: 16px; }
  .topbar-in, .footer-in { padding-left: 16px; padding-right: 16px; }
  .plate { padding: var(--s4) 16px; }
  .role-toggle { width: 100%; justify-content: space-between; }
  .role-btn { flex: 1; }
  h1 { font-size: 30px; }
  .bundle-src { white-space: normal; overflow-wrap: anywhere; }
  .bed-chip { flex-wrap: wrap; max-width: 100%; }
  .chip-name { white-space: normal; }
  .candidate-act .link, .candidate-act a.link { margin-left: 0; }
  .candidate-act { flex-wrap: wrap; gap: var(--s3); }
}

/* ---- [B6] impact paragraph (§7.3) ---------------------------------------- */

.counter.ask b { color: var(--query); }
.impact-summary { margin: var(--s4) 0 var(--s5); padding: var(--s4); border-left: 3px solid var(--accent-line);
  background: var(--raise); border-radius: 0 6px 6px 0; max-width: 72ch; }
.impact-summary p { margin: 0 0 var(--s2); }
.impact-summary .note { margin: 0; font-size: 12px; }

/* The landing's doors keep their role's colour whoever is looking: amber for
   the donor's form, teal for the clinic's, slate for the operator. */
.flow .role-donor .role-rule { background: #F59E0B; }
.flow .role-donor .role-kicker { color: #FBBF24; }
.flow .role-clinic .role-rule { background: #14B8A6; }
.flow .role-clinic .role-kicker { color: #2DD4BF; }
.flow a.go.go-donor { background: #B45309; border-color: #F59E0B; color: #fff; }
.flow a.go.go-clinic { background: #0F766E; border-color: #14B8A6; color: #fff; }
.flow a.go.go-donor:hover { background: #F59E0B; color: #0B0E14; }
.flow a.go.go-clinic:hover { background: #14B8A6; color: #0B0E14; }