/* shell-overrides.css — NOT part of the handoff.
   Additions required by the reconstructed page shells, kept in their own file so
   the author's styles.css stays byte-for-byte as recovered. Delete this file when
   the original .html shells arrive.

   Why this exists: styles.css handles narrow screens for .hero, .counters, .tiles,
   .briefs and .foot-cols, and for the nav it only sets `gap: 0`. It contains no
   wrap or collapse rule, so the author's own masthead nav must have been shorter
   than any usable link set here — five links still measured 404px against a 390px
   viewport. This lets the nav wrap instead, which is additive and changes nothing
   at tablet width or above. */
@media (max-width: 760px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 14px;
    justify-content: flex-start;
  }
  /* the masthead already wraps, so give the nav the full row once it does */
  .masthead-row > .nav { flex: 1 1 100%; }
}

/* Inline accent inside a heading. styles.css has no such class — its `.pull` is a
   pull-quote block with an accent background and its own padding, which inside an
   <h1> would render as a blue box rather than emphasis. */
.h-accent { color: var(--color-accent); }

/* Slot aspect ratios. styles.css sets one only for .demo-slot (16/9), so every
   other slot had no height driver and collapsed. Ratios come from the media_slots
   spec in data.js; `.slot img { object-fit: cover }` absorbs any difference
   between the spec and the supplied file's own dimensions. */
.slot-4x3  { aspect-ratio: 4 / 3; }
.slot-16x9 { aspect-ratio: 16 / 9; }

/* Search results reuse the wire list. Each row is a hit with its score, kind,
   source and confidence, so the page carries the same provenance furniture as
   every other list on the site. */
#results .item { grid-template-columns: 74px 1fr auto; }
#results .score { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent); }
#results .kindtag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-mute); border: 1px solid var(--color-line);
  border-radius: 999px; padding: 1px 8px; }
#results .empty-state p { text-transform: none; letter-spacing: 0; }
@media (max-width: 760px) { #results .item { grid-template-columns: 1fr; } }

/* Belt and braces for syndicated text. styles.css already applies this pattern to
   .srcrow and .job children; briefs need it too because RSS summaries are outside
   our control and one unbreakable token widened the page to 3,667px. */
.briefs li, .briefs li > * { min-width: 0; overflow-wrap: anywhere; }

/* Wide data tables. styles.css has no scroll container — .tablewrap is a class I
   used from my own earlier mockups and it does not exist there, so these tables had
   nothing to scroll inside and pushed the page to 901px on a 390px viewport. The
   author's own tables are three columns and fit; the database-backed ones are seven
   to nine, so the table scrolls inside its wrapper and the page never does. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.tablewrap > .table { min-width: 760px; }
.tablewrap .table td, .tablewrap .table th { white-space: nowrap; }
.tablewrap .table td:first-child { white-space: normal; min-width: 190px; }
@media (max-width: 760px) { .tablewrap > .table { min-width: 680px; } }

/* ══════════════════════════════════════════════════════════════════════════
   READABILITY LAYER — overrides styles.css. Non-negotiable, do not weaken.

   Two absolute rules govern type on this network:
     1. Type is never lightened. Hierarchy comes from size, weight, letter-spacing
        and case — never from fading the ink toward the background.
     2. Nothing that carries information is set below 14px.

   styles.css states rule 1 itself ("type is never lightened", and it sets
   --color-mute to the same #101215 as --color-text so a "muted" class cannot
   fade anything). It then contradicts that in five places with `opacity`, which
   fades the ink exactly as a gray hex would, and it sets 34 rules between 9px
   and 13px. Rendered, that produced faded legal text on all 16 pages, 10px
   status lines, and — worst — FAQ answers stranded at opacity 0, invisible
   rather than merely gray.

   Colour is not touched here: every text node on the site already computes to
   rgb(16,18,21) or the #007ba7 accent. There is no gray hex to remove. What
   read as gray was opacity and undersizing, and that is what this fixes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. no lightened type, anywhere ─────────────────────────────────────── */
.legal,
.rank,
.pull cite,
.nav sup,
.brief-tags .label,
.dateline,
.caption,
.entry-meta,
.label,
.kicker { opacity: 1; }

/* Catch-all: any element carrying text must render at full ink. Scoped to the
   document body so genuine non-text uses of opacity — the video cross-fade in
   .slot, the reveal transform below, the modal backdrop — are untouched. */
main .legal, main .rank, main cite, main .label, main .caption,
main .entry-meta, main dt, main dd, main p, main li, main td, main th,
main strong, main em, main a, main span:not(.job-dot):not(.bar):not(.dot) {
  opacity: 1;
}

/* ── 2. reveal animation must never hide text ───────────────────────────── */
/* styles.css sets [data-reveal].pending { opacity: 0 } and relies on an observer
   to clear .pending. On /methodology the observer never reached the FAQ block, so
   eight answers sat at opacity 0 — unreadable, and invisible to a reader who
   simply never triggered it. The reveal now animates position only. It still
   reads as a reveal; it can no longer fail into invisible text. */
[data-reveal].pending { opacity: 1; transform: translateY(14px); }
[data-reveal] { transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal].pending { transform: none; }
}

/* ── 3. 14px floor ──────────────────────────────────────────────────────── */
/* Every rule in styles.css that set 9–13px, raised to the floor. Hierarchy is
   preserved because these are mono, uppercase and letter-spaced against a 16px
   body face — they still read as secondary without being small. */
.nav sup            { font-size: 14px; }
.kbd                { font-size: 14px; }
.dateline           { font-size: 14px; }
.kicker             { font-size: 14px; }
.label              { font-size: 14px; }
.caption            { font-size: 14px; }
.band figcaption    { font-size: 14px; }
.strip p            { font-size: 14px; }
.tile p             { font-size: 14px; }
.rail button        { font-size: 14px; }
.rank               { font-size: 14px; }
.entry-meta         { font-size: 14px; }
.status             { font-size: 14px; }
.figures p          { font-size: 14px; }
.ledger-count       { font-size: 14px; }
.cite               { font-size: 14px; }
.cite-pop .note     { font-size: 14px; }
.bar-v              { font-size: 14px; }
.chart-source       { font-size: 14px; }
.pull cite          { font-size: 14px; }
.brief-tags .cat    { font-size: 14px; }
.table th           { font-size: 14px; }
.phase              { font-size: 14px; }
.dialog dt          { font-size: 14px; }
.legal              { font-size: 14px; }
.job p              { font-size: 14px; }
.srcrow             { font-size: 14px; }
.srcn               { font-size: 14px; }
.srcn.strong        { font-size: 14px; }
.briefs li.empty    { font-size: 14px; }
.demo-proof strong  { font-size: 14px; }
.faq-a .faq-link    { font-size: 14px; }
#results .score     { font-size: 14px; }
#results .kindtag   { font-size: 14px; }
select, option, input, button, textarea { font-size: 14px; }

/* Two rules need geometry adjusted for the larger type rather than just a size
   bump: the source row reserved 60px for a count that is now 14px mono, and the
   pills were sized for 10px. */
.srcrow { grid-template-columns: minmax(0, 1fr) 78px auto; }
.status, .phase, .brief-tags .cat { padding: 3px 9px; }

/* ── /demos evidence panel ──────────────────────────────────────────────────
   styles.css lays .demo out as two columns: media frame | claim. With no footage
   ever supplied, the first column was an empty 16:9 box and a dead video player,
   so half of every row was void. demos-live.js drops the frame when there is no
   footage and adds an evidence panel; these rules give that layout its geometry.
   .demo keeps its own two-column proportions when footage does exist. */
.demo.no-media { grid-template-columns: 1.15fr 0.85fr; align-items: start; }

.demo-evidence {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-6);
}
.demo-evidence .label { color: var(--color-accent); margin: 0 0 var(--space-3); }
.demo-evidence .label + .ev-list { margin-top: 0; }
.demo-evidence .ev-list + .label { margin-top: var(--space-6); }

.ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ev-list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.ev-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ev-list a { font-size: 15px; line-height: 1.4; font-weight: 500; display: block; }
/* RSS headlines are outside our control; one unbreakable token must not widen
   the page, the same guard .briefs needs. */
.ev-list li, .ev-list li > * { min-width: 0; overflow-wrap: anywhere; }
.ev-list .entry-meta { margin-top: 4px; }

.demo-none {
  margin: var(--space-4) 0 0; font-size: 14px; line-height: 1.5;
  padding-top: var(--space-3); border-top: 1px solid var(--color-line);
}

/* Below the breakpoint where styles.css collapses .demo to one column, the panel
   becomes a full-width block under the claim rather than a narrow rail. */
@media (max-width: 1080px) {
  .demo.no-media { grid-template-columns: 1fr; }
  .demo-evidence { border-left: 0; border-top: 2px solid var(--color-accent);
    padding-left: 0; padding-top: var(--space-6); }
}

/* The filter rails reserve a fixed 88px column for their label so the button rows
   line up under each other. That width was measured against 11px type; at the 14px
   floor "Confidence" needs 91px, and as a flex item it shrank to fit and spilled
   its text over the first button. Widened to keep the alignment the design intends,
   and pinned so it can never shrink below its content again. */
.rail > .label { width: 104px; flex: 0 0 auto; }

/* Segment provenance, shown under the segment tag on /landscape. Segment is the
   one derived field in that table: 111 rows are quoted from the FDA's own device
   classification, 143 carry a fallback because nothing established one. Unmarked,
   those two look identical to a reader. Colour is not used to carry the meaning —
   the label says it in words — and no text is lightened. */
.basis {
  display: block; margin-top: 3px;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: .02em;
  color: var(--color-text);
}
.basis-default { font-style: italic; }
.basis-regulator { font-weight: 600; }