/* =============================================================================
   OpenMFDA Foundry — hardware.css
   Styles for /hardware/ ("Hardware and process") only.

   The page's whole job is to attach a provenance tier to every figure it
   prints, so the tier pill is the load-bearing component here. Four tiers,
   four visually distinct treatments, no overlap with the catalog's status
   badges (which make claims about CHIPS; these make claims about where a
   NUMBER came from):

     PUBLISHED  deep-blue fill      — from a cited paper, not measured here
     LOCAL      navy fill           — recorded in a tracked project file
     REPORTED   ice + accent-ink    — stated by the lab, in no tracked file
     NOT KNOWN  outlined, muted     — no value exists

   REPORTED sits deliberately between LOCAL and NOT KNOWN: it is a real
   figure, so it is not an empty outline, but it has no citable file, so it
   does not get LOCAL's solid authority fill. It is the one tier that marks
   work still to do, which is why it is the only one drawing on --color-accent.
   That respects the sparing-orange rule in main.css (accent as a BACKGROUND
   only on .badge-phase2): here the accent appears as border and, via
   --color-accent-ink, as text — the token main.css defines for exactly this.
   "We do not know this number" is not an alarm state and stays grey.

   Conventions inherited from main.css: no inline hex below :root (there is
   no :root here — every colour is a var()), mobile-first, 48em breakpoint.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Provenance tier pill
   -------------------------------------------------------------------------- */
.prov {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
  vertical-align: 0.05em;
  border: 1px solid transparent;
}

.prov--published {
  background: var(--color-deep-blue);
  color: var(--color-white);
}

.prov--local {
  background: var(--color-navy);
  color: var(--color-white);
}

/* Held by the lab, absent from the repository. Warm enough to catch the eye
   on a scan — these are the figures that disappear if the person holding them
   moves on — without claiming the filed authority of LOCAL. */
.prov--reported {
  background: var(--bg-soft);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

/* Outlined, not filled. A missing value should read as an empty slot in the
   record, not as a third kind of answer. */
.prov--unknown {
  background: var(--bg-page);
  color: var(--fg-muted);
  border-color: var(--color-muted);
}


/* -----------------------------------------------------------------------------
   2. Provenance key — the legend block under the standfirst
   -------------------------------------------------------------------------- */
.hw-key {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-12);
}

.hw-key h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  color: var(--color-navy);
  margin-bottom: var(--sp-3);
}

.hw-key dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--fg-body);
}

.hw-key dd { margin: 0; }

.hw-key__foot {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--fg-muted);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(28, 114, 147, 0.14);
}


/* -----------------------------------------------------------------------------
   3. Fact tables
   Extends .bench-table (library.css). The source column is deliberately
   monospaced and small: people copy file paths out of it.
   -------------------------------------------------------------------------- */
.hw-table-wrap {
  overflow-x: auto;
  margin-top: var(--sp-4);
}

.hw-table {
  min-width: 44rem;
}

.hw-table td.hw-val {
  font-variant-numeric: tabular-nums;
  color: var(--fg-body);
  font-weight: 600;
}

.hw-table td.hw-val--none {
  color: var(--fg-muted);
  font-weight: 400;
  font-style: italic;
}

.hw-table td.hw-tier { white-space: nowrap; }

.hw-table td.hw-src {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--fg-muted);
  word-break: break-word;
}

.hw-table td.hw-src cite {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--fs-300);
}

/* At phone width a fact table stacks: each row a block, its first cell the
   row's name, and every other cell under its column's name, which the cell
   carries in data-label. No table then scrolls sideways. Until 2026-09-30
   each kept its 44rem and scrolled sideways inside its box. Only tables whose
   cells carry the labels stack (.hw-table--stack): the hardware page's. */
@media (max-width: 40rem) {
  .hw-table--stack { min-width: 0; }
  .hw-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hw-table--stack,
  .hw-table--stack tbody,
  .hw-table--stack tr,
  .hw-table--stack td { display: block; }
  .hw-table--stack tr {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid rgba(28, 114, 147, 0.14);
  }
  .hw-table--stack td {
    padding: 0.125rem 0;
    border-bottom: 0;
  }
  .hw-table--stack td:first-child {
    font-weight: 600;
    color: var(--color-navy);
  }
  .hw-table--stack td[data-label]:not(:first-child)::before {
    content: attr(data-label) ": ";
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    font-style: normal;
    color: var(--fg-muted);
  }
  .hw-table--stack td.hw-tier { white-space: normal; }
}

/* A source note can hold a file path with no space in it, longer than a phone
   is wide: it breaks where it has to rather than push the page sideways. */
.detail-section .tool-card__note { overflow-wrap: anywhere; }


/* -----------------------------------------------------------------------------
   4. Sub-heads inside a section
   -------------------------------------------------------------------------- */
.hw-sub {
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  color: var(--color-navy);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
}

.hw-sub:first-child { margin-top: 0; }

.hw-sub__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  font-weight: 400;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}


/* -----------------------------------------------------------------------------
   5. "Not known" panel — used where an entire subsection has no content
   because no value exists. Dashed rule, because the box is an absence.
   -------------------------------------------------------------------------- */
.hw-none {
  border: 1px dashed var(--color-muted);
  border-radius: var(--radius);
  background: var(--bg-page);
  padding: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-4);
}

.hw-none h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  color: var(--color-navy);
  margin-bottom: var(--sp-2);
}

.hw-none p {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--fg-muted);
}

.hw-none p + p { margin-top: var(--sp-3); }

.hw-none ul {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-6);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.7;
  color: var(--fg-muted);
}


/* Flagged open item inside a .hw-none panel — something nobody has checked,
   as distinct from something nobody has recorded. */
.hw-open {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}


/* -----------------------------------------------------------------------------
   6. Process-behaviour records — one card per thing that actually happened
   -------------------------------------------------------------------------- */
.hw-events {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.hw-event {
  background: var(--bg-page);
  border: 1px solid rgba(28, 114, 147, 0.16);
  border-left: 4px solid var(--color-teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4) var(--sp-6);
}

.hw-event__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}

.hw-event__name {
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  color: var(--color-navy);
  margin: 0;
}

.hw-event p {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.65;
  color: var(--fg-body);
}

.hw-event p + p { margin-top: var(--sp-3); }

.hw-event__outcome {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

.hw-event__outcome--open { color: var(--fg-muted); }

.hw-event__src {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--fg-muted);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed rgba(28, 114, 147, 0.22);
  word-break: break-word;
}


/* -----------------------------------------------------------------------------
   7. Reference list
   -------------------------------------------------------------------------- */
.hw-refs {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  counter-reset: hwref;
}

.hw-refs li {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--fg-body);
  padding-left: var(--sp-8);
  text-indent: calc(-1 * var(--sp-8));
  margin-bottom: var(--sp-3);
}

.hw-refs li::before {
  counter-increment: hwref;
  content: "[" counter(hwref) "]";
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--color-teal);
  display: inline-block;
  width: var(--sp-8);
  text-indent: 0;
}


/* -----------------------------------------------------------------------------
   8. Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  .hw-events { gap: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   Design review 2026-10-03, item 3 (with main.css): the provenance key reads
   at body size, and on a phone each label sits above its explanation.
   -------------------------------------------------------------------------- */
.hw-key dd { max-width: 68ch; font-size: 1rem; line-height: 1.6; }

@media (max-width: 40rem) {
  .hw-key { padding: 1rem; }
  .hw-key dl { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .hw-key dd + dt { margin-top: 1rem; }
}