/*
 * The results screen. Two views, one stylesheet, no components beyond what a
 * table and a list need.
 *
 * The verdict colours are the flow chart's own: green for a pin proved
 * connected, red for one we are raising, blue for one the datasheet explicitly
 * permits, grey for one nobody checked. Grey is not a neutral here — it is the
 * colour of an open question, and it is deliberately as visible as the others,
 * because a page that renders unchecked pins quietly reads as a clean board.
 */

:root {
  --ink: #111;
  --muted: #666;
  --faint: #8a8a8a;
  --rule: #d8d8d8;
  --rule-strong: #111;
  --surface: #f5f5f4;
  --paper: #fff;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fine: #157347;
  --fine-wash: #e8f3ec;
  --reported: #b3261e;
  --reported-wash: #fbeceb;
  --permitted: #0b5cad;
  --permitted-wash: #e9f0f9;
  --unchecked: #6b6b6b;
  --unchecked-wash: #efefed;

  /* A part a person marked. Amber, not red: a flag is somebody saying "come
     back to this", which is not the same claim as the check reporting a fault,
     and two things that mean different work must not wear one colour. */
  --flagged: #8a5a00;
  --flagged-wash: #fbf1de;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; border: 0; margin: 0; padding: 0; color: inherit; background: none; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
a { color: inherit; }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

main { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 80px; }

/* ------------------------------------------------------------------ header */

.crumb {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
}

.crumb a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.crumb a:hover { border-bottom-color: var(--ink); }

h1 {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 640;
  letter-spacing: -0.025em;
}

.lead { margin: 0 0 26px; color: var(--muted); }

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

.coverage {
  padding: 16px 18px;
  margin: 0 0 20px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  background: var(--surface);
}

.coverage strong { font-variant-numeric: tabular-nums; }

.coverage p { margin: 0; }
.coverage p + p { margin-top: 6px; color: var(--muted); font-size: 13px; }

/* The one sentence the whole page is not allowed to omit. */
.scope-note {
  margin: 0 0 24px;
  padding-left: 12px;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  font-size: 13px;
}

/* ------------------------------------------------------------------ counts */

.counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }

.count {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
}

.count strong { font-variant-numeric: tabular-nums; font-size: 15px; }
.count.is-fine { border-color: var(--fine); background: var(--fine-wash); color: var(--fine); }
.count.is-reported { border-color: var(--reported); background: var(--reported-wash); color: var(--reported); }
.count.is-permitted { border-color: var(--permitted); background: var(--permitted-wash); color: var(--permitted); }
.count.is-not_a_power_pin { border-color: var(--rule); background: var(--unchecked-wash); color: var(--unchecked); }
.count.is-unresolved { border-color: var(--rule); background: var(--unchecked-wash); color: var(--unchecked); }
.count.is-not_checked { border-color: var(--rule); background: var(--unchecked-wash); color: var(--unchecked); }

/* ------------------------------------------------------------------- table */

table { width: 100%; border-collapse: collapse; }

thead th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

tbody td { padding: 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:hover { background: var(--surface); }

td.designator { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
td.number { font-family: var(--mono); white-space: nowrap; }
td.net { font-family: var(--mono); }
td.reason { color: var(--muted); font-size: 13px; }

/* Was this part checked against a datasheet? A mark, because it is scanned down
   the column rather than read. Green yes, muted no — the no is a gap in the
   evidence, not a fault in the board, so it is not alarm-coloured. */
td.datasheet-checked, th.datasheet-checked { text-align: center; white-space: nowrap; }
td.datasheet-checked { font-size: 15px; line-height: 1; cursor: help; }
td.datasheet-checked.is-yes { color: var(--fine); }
td.datasheet-checked.is-no { color: var(--unchecked); }

/* The person's own answer, first on the row because working a board is going
   down the list ticking things off. Narrow: it is a box, not a column of text. */
td.signed-off, th.signed-off { width: 1%; white-space: nowrap; text-align: center; }
.sign-off-box { width: 16px; height: 16px; cursor: pointer; accent-color: var(--fine); }
.sign-off-box:disabled { cursor: progress; opacity: 0.5; }

.row-link { display: block; width: 100%; text-align: left; }
.row-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.badge.is-fine { border-color: var(--fine); background: var(--fine-wash); color: var(--fine); }
.badge.is-reported { border-color: var(--reported); background: var(--reported-wash); color: var(--reported); }
.badge.is-permitted { border-color: var(--permitted); background: var(--permitted-wash); color: var(--permitted); }
.badge.is-not_a_power_pin { border-color: #c9c9c5; background: var(--unchecked-wash); color: var(--unchecked); }
.badge.is-unresolved { border-color: #c9c9c5; background: var(--unchecked-wash); color: var(--unchecked); }
.badge.is-not_checked { border-color: #c9c9c5; background: var(--unchecked-wash); color: var(--unchecked); }

/* The PART badges. A separate vocabulary from the pin ones above, and coloured
   to say so: a part is not a verdict, it is a question about whether anybody
   still has work here. Outstanding borrows the alarm colour because it is the
   pile to work through; validated is a quieter green than a passing pin,
   because it is a person's word rather than the check's. */
.badge.is-outstanding { border-color: var(--reported); background: var(--reported-wash); color: var(--reported); }
.badge.is-clear { border-color: var(--fine); background: var(--fine-wash); color: var(--fine); }
.badge.is-flagged { border-color: var(--flagged); background: var(--flagged-wash); color: var(--flagged); }
.badge.is-validated { border-color: var(--fine); background: var(--paper); color: var(--fine); }

/* ------------------------------------------------------------------ states */

.empty { padding: 40px 0; color: var(--muted); }

.waiting {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  margin: 0 0 20px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-size: 13px;
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; opacity: 0.6; }
}

@media (max-width: 640px) {
  td.reason, th.reason { display: none; }
}

/* The datasheet's own words, beside the verdict drawn from them. Narrower and
   quieter than the reason: it is what we read, not what we concluded. */
.said {
  color: var(--muted);
  max-width: 22rem;
}

/* The two views of the run list. */
.tabs { display: flex; gap: 1.1rem; margin: 0 0 1.2rem; }
.tabs strong { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.tabs a { color: var(--muted); text-decoration: none; padding-bottom: 2px; }
.tabs a:hover { color: var(--ink); }
/* Tallies read down a column, so they are right-aligned and tabular. */
td.number { text-align: right; font-variant-numeric: tabular-nums; }

/* What a verdict rests on. Quiet when we read the document, marked when we
   did not — the reader needs to know before they trust a row. */
.datasheets { color: var(--muted); margin: -0.4rem 0 1rem; }
.datasheets.is-short { color: var(--reported); }

/* ------------------------------------------------------------------ filter */

/* One row of the board at a time. The chips carry their counts, so the size of
   each pile is visible before anybody clicks — "Outstanding 7" is the number
   somebody came to the page for. */
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }

.chip {
  display: inline-block;
  padding: 3px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--rule-strong); color: var(--ink); }
strong.chip { border-color: var(--rule-strong); background: var(--ink); color: var(--paper); font-weight: 600; }
strong.chip:hover { color: var(--paper); }

/* ------------------------------------------------------------------ review */

/* Where a person's answer goes. Set apart from the evidence above it by a
   surface of its own, because everything else on this page is something the
   check found and this is the one thing somebody adds themselves. */
.review {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
}
.review-state { margin: 0 0 0.6rem; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.review-state .muted { color: var(--muted); font-size: 12px; }
.review-caption { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

.review-note {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
}
.review-note:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.review-buttons { display: flex; gap: 0.5rem; margin: 0.6rem 0 0; }

.act {
  padding: 5px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 13px;
  background: var(--paper);
  transition: background 120ms ease, color 120ms ease;
}
.act:hover { background: var(--ink); color: var(--paper); }
.act:disabled { opacity: 0.45; cursor: progress; }
.act.is-validated { border-color: var(--fine); color: var(--fine); }
.act.is-validated:hover { background: var(--fine); color: var(--paper); }
.act.is-flagged { border-color: var(--flagged); color: var(--flagged); }
.act.is-flagged:hover { background: var(--flagged); color: var(--paper); }
.act.is-none { border-color: var(--rule); color: var(--muted); }

/* A write that did not land says so. A button that looks like it worked and did
   not is the worst outcome here: the whole point is knowing which rows are done. */
.review-error { margin: 0.6rem 0 0; color: var(--reported); font-size: 13px; }

/* A document that names its pins and says nothing else. Not a failure, but the
   reader has to know every verdict under it rests on a name. */
.datasheets.is-thin { color: var(--ink); }

/* The part number, beside the badge somebody is about to sign off against. */
.review-mpn { margin-right: 0.6rem; }

/* Stepping through the parts still to certify. Big enough to hit without
   aiming, and quiet enough not to compete with Sign off. */
.step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--rule); border-radius: 6px;
  color: var(--ink); text-decoration: none; font-size: 1rem; line-height: 1;
}
.step:hover { border-color: var(--ink); }
/* The end of the queue is shown, not hidden: a reader needs to know they have
   reached the last part rather than that the control has vanished. */
.step.is-end { color: var(--rule); border-style: dashed; cursor: default; }
.review-buttons { display: flex; align-items: center; gap: 0.6rem; }


/* --------------------------------------------------------------- datasheet */

/* The document beside the verdicts drawn from it, page by page. Scrolls in its
   own box so the verdicts and the tab strip stay put while a reader hunts for
   the pin table. */
.datasheet-pane {
  max-height: min(78vh, 900px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--rule);
  background: var(--surface);
}

.datasheet-sheet { margin: 0 0 18px; }
.datasheet-sheet:last-child { margin-bottom: 0; }

.datasheet-page {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #fff;
}

.datasheet-sheet figcaption {
  padding-top: 6px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.datasheet-loading { color: var(--muted); padding: 24px; text-align: center; }

.datasheet-provenance {
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 13px;
}

/* Parts worked through, under the pin tallies. Counts a different thing from
   the strip above it, so it reads as a sentence rather than more chips. */
.progress { color: var(--muted); margin: 0.2rem 0 1.1rem; }
.count.is-validated { border-color: var(--fine); background: var(--fine-wash); color: var(--fine); }
.badge.is-validated { border-color: var(--fine); background: var(--fine-wash); color: var(--fine); }

/* A tally you can open. The tile keeps its colour; the link just makes the
   whole of it a target. */
/* The link IS the tile's layout. Making it a plain block left the number and
   the label as inline children of the anchor rather than of `.count`, so the
   flex gap above no longer applied and they ran together: "13Correctly
   connected". */
.count-link {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: inherit;
  text-decoration: none;
}
.count.is-on { outline: 2px solid currentColor; outline-offset: 1px; }

/* The strip on a part page is a control, so it says so. Without a word for it
   a reader has no reason to think a tally is clickable. */
.counts-row { display: flex; align-items: baseline; gap: 10px; margin: 0 0 24px; }
.counts-row .counts { margin: 0; }
.counts-caption {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* "All" is the resting state, so it is the plainest tile on the strip. */
.count.is-all { border-color: var(--rule); background: transparent; color: var(--ink); }

/* A part with a hole in what we read, and no fault found. Not an error — it is
   us going back for a better datasheet — so it wears the unchecked colour
   rather than the reported one. */

/* The working pile: a roll-up, so it reads as a heading over the states it
   gathers rather than as another one beside them. */

/* ------------------------------------------------------ the filter's colours

   One scheme over the whole strip, so the colour carries the meaning rather
   than marking which chips happened to be added last. Three groups:

     needs an engineer   red      a finding against the board
     needs us            grey     a hole in what we read, not a fault
     settled             green    nothing left to do

   `All` and `Remaining` are navigation rather than states, so they stay ink:
   neither is a verdict about anything, and colouring them would put them in a
   group they do not belong to.
*/
.chip.is-all { border-color: var(--rule); color: var(--muted); }
.chip.is-remaining { border-color: var(--ink); color: var(--ink); font-weight: 600; }

.chip.is-outstanding,
.chip.is-outstanding_unresolved,
.badge.is-outstanding,
.badge.is-outstanding_unresolved {
  border-color: var(--reported); background: var(--reported-wash); color: var(--reported);
}
/* Both-at-once carries a finding, so it is red — and dashed, because the part
   is also not fully read and the badge should not look as settled as a plain
   finding does. */
.chip.is-outstanding_unresolved,
.badge.is-outstanding_unresolved { border-style: dashed; }

.chip.is-unresolved,
.badge.is-unresolved {
  border-color: var(--unchecked); background: var(--unchecked-wash); color: var(--unchecked);
  border-style: dashed;
}

.chip.is-flagged, .badge.is-flagged {
  border-color: var(--flagged); background: var(--flagged-wash); color: var(--flagged);
}
.chip.is-clear, .badge.is-clear,
.chip.is-validated, .badge.is-validated {
  border-color: var(--fine); background: var(--fine-wash); color: var(--fine);
}

/* A pile with nothing in it is not a place to go. Shown, so a reader can see
   the count is zero, but not offered as a link to an empty table. */
.chip.is-empty {
  border-color: var(--rule); background: transparent; color: var(--faint);
  border-style: solid;
}

/* The chosen chip inverts, whatever its colour: one unmistakable "you are
   here" rather than eight variations on emphasis.
   The doubled class is deliberate. Every rule above is two classes wide
   (`.chip.is-outstanding`), so a one-class-plus-element selector loses to all
   of them — which painted the selected chip's own grey text onto the black
   background and made it unreadable. */
strong.chip.chip {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-style: solid;
}

/* What we asked for against what we got. Reads as one line so the two are
   compared rather than hunted for. */
.document-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem;
  margin: -0.5rem 0 1.1rem;
}
.document-caption { color: var(--muted); }
.document-title { font-family: var(--mono); font-size: 13px; color: var(--ink); }

/* Said once, at the top, because every row below inherits it. */
.mismatch {
  border-left: 3px solid var(--flagged);
  background: var(--flagged-wash);
  color: var(--flagged);
  padding: 0.6rem 0.9rem;
  margin: 0 0 1.1rem;
}