/* ─────────────────────────────────────────────────────────────────────
   zc.css — Zombie Corp shared layer
   CULT+MATH LLC · Ipalibo Da-Wariboko · August 5, 2026

   This file owns the components that failed mobile QA on 2026-08-05.
   Do not re-declare any of these rules in a page's inline <style> —
   qa_investigation.py will fail the build if you do.

   Canonical breakpoints:  700px (primary) · 860px (component collapse)
   Owns: tokens · links · callout · tables · diagram scroll ·
         noscript nav · reduced motion
   ───────────────────────────────────────────────────────────────────── */

:root{
  --black:#0A0A0A;
  --dark:#111111;
  --surface:#1A1A1A;
  --card:#1E1E1E;
  --white:#FAFAF8;

  /* --muted raised from #7A7A7A on 2026-08-05.
     #7A7A7A measured 3.88:1 on --card, below WCAG AA.
     #8A8A8A measures 4.83:1 on --card and 5.73:1 on --black. */
  --muted:#8A8A8A;
  --muted-lt:#AAAAAA;

  --green:#00C96A;
  --green-dim:#0D2E1A;
  --green-text:#AAEECA;
  /* Light tints for use on dim surfaces. --green-text already existed;
     these three were invented inline on individual pages because the
     palette was asymmetric. #7A7A7A desynced inside an SVG the same way. */
  --amber-text:#FBCB7A;
  --red-text:#FF8888;
  --blue-text:#60A5FA;
  --amber:#F59E0B;
  --amber-dim:#1C1200;
  --red:#FF4444;
  --red-dim:#2A0A0A;
  --blue:#3B82F6;
  --blue-dim:#0A1628;

  --border:rgba(255,255,255,0.07);
  --border-md:rgba(255,255,255,0.12);

  --sans:'DM Sans',sans-serif;
  --serif:'Playfair Display',serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── LINKS ──────────────────────────────────────────────────────────
   Default browser blue measures 2.11:1 on --black (visited 1.80:1).
   Nothing on this site is ever allowed to fall back to it. */
a{color:var(--green)}
a:visited{color:var(--green)}
.lnk{
  color:var(--green);
  text-decoration:none;
  border-bottom:1px solid rgba(0,201,106,0.35);
  transition:border-color .2s;
}
.lnk:hover{border-bottom-color:var(--green)}

/* ── CALLOUT ────────────────────────────────────────────────────────
   The container is flex. Every direct child becomes a column, so the
   body copy MUST be wrapped in a single .c-body element. Writing bare
   <p> siblings here is what produced the 3-word measure on the
   Unilever and Starbucks pages. */
.callout{
  border-radius:6px;
  padding:18px 22px;
  margin:22px 0;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.callout.green{background:var(--green-dim);border:1px solid rgba(0,201,106,0.2)}
.callout.red{background:var(--red-dim);border:1px solid rgba(255,68,68,0.2)}
.callout.amber{background:var(--amber-dim);border:1px solid rgba(245,158,11,0.2)}

.callout .c-icon{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:3px;
  flex:0 0 auto;
  max-width:100%;
  margin-top:2px;
}
.callout.green .c-icon{color:var(--green);border:1px solid rgba(0,201,106,0.3)}
.callout.red   .c-icon{color:#FF6B6B;border:1px solid rgba(255,68,68,0.3)}
.callout.amber .c-icon{color:var(--amber);border:1px solid rgba(245,158,11,0.3)}

/* min-width:0 lets the body shrink inside the flex row instead of
   pushing itself past the card edge. */
.callout .c-body{flex:1 1 auto;min-width:0}

.callout p{font-size:15px;font-weight:300;color:var(--muted-lt);line-height:1.65}
.callout p+p{margin-top:10px}
.callout p strong{color:var(--white);font-weight:400}
.callout p em{color:var(--green);font-style:normal}
.callout.amber p em{color:var(--amber)}

@media(max-width:860px){
  .callout{flex-direction:column;gap:10px}
  .callout .c-icon{align-self:flex-start;margin-top:0}
}

/* ── TABLES ─────────────────────────────────────────────────────────
   Numbers are squeezed badly and scrolled well, so every table scrolls.
   A scrolling table that gives the reader no signal it scrolls looks
   like a broken page — hence both the edge shadows and the hint. */
.tbl-wrap{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:22px 0 0;
  background:
    linear-gradient(to right, var(--black) 40%, rgba(10,10,10,0)) left center/34px 100% no-repeat local,
    linear-gradient(to left,  var(--black) 40%, rgba(10,10,10,0)) right center/34px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(255,255,255,0.20), rgba(255,255,255,0)) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(255,255,255,0.20), rgba(255,255,255,0)) right center/12px 100% no-repeat scroll;
}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}

.tbl-hint{
  display:none;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin:8px 0 24px;
}
@media(max-width:700px){ .tbl-hint{display:block} }

/* ── DIAGRAMS ───────────────────────────────────────────────────────
   An SVG with a 720-wide viewBox squeezed into a 342px column renders
   its 15px labels at ~7px. Scroll it like a table instead. */
.flow{overflow-x:auto;-webkit-overflow-scrolling:touch}
.flow svg{min-width:600px}

/* ── SIGNAL COLOUR SEMANTICS ────────────────────────────────────────
   Three colours mean a finding. Nothing else may use them.

     green  cleared · confirmed negative · nothing found
     amber  watch · partial · provisional · under review
     red    flagged · confirmed positive · adverse finding

   Serial numbers, dates, authors, instrument versions and publication
   status are METADATA and are always muted. Before 2026-08-08 the hub
   spent green on "Investigation #4" and red on "Live · July 2026",
   which left the actual verdicts fighting for whatever was left —
   and .score-chip.green was used twice while defined zero times, so
   both clearances rendered in red.

   A card has a finding AND a status. They are different channels:
   the chip carries the finding, the badge carries the status. */

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.badge{
  display:inline-block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border:1px solid var(--border-md);
  border-radius:999px;
  padding:4px 11px;
  color:var(--muted);
}
/* metadata default is muted; .muted is kept as an explicit alias */
.badge.muted{color:var(--muted);border-color:var(--border)}
.badge.green{color:var(--green);border-color:rgba(0,201,106,0.28)}
.badge.amber{color:var(--amber);border-color:rgba(245,158,11,0.28)}
.badge.red{color:var(--red-text);border-color:rgba(255,68,68,0.28)}

.score-chip{
  display:inline-flex;
  align-items:center;
  border-radius:4px;
  padding:4px 10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  background:var(--red-dim);
  border:1px solid rgba(255,68,68,0.2);
  color:var(--red-text);
}
.score-chip.green{background:var(--green-dim);border-color:rgba(0,201,106,0.25);color:var(--green-text)}
.score-chip.amber{background:var(--amber-dim);border-color:rgba(245,158,11,0.25);color:var(--amber)}
.score-chip.red{background:var(--red-dim);border-color:rgba(255,68,68,0.2);color:var(--red-text)}

/* ── VERDICT CARD ───────────────────────────────────────────────────
   Sits directly under the header on every investigation, so a reader
   arriving from a shared link gets the finding and its boundary before
   scrolling. Added 2026-08-05: Investigation #5 declared its verdict in
   section 10 of 13, and a careful reader came away with the opposite
   conclusion, then correctly identified that the clearance rested on a
   single ratio. A verdict without a stated boundary is heard as a
   broader endorsement than it is.

   The .vc-not list is not optional. It is the Honest-Limit Gate made
   visible: what the instrument did NOT conclude. */
.verdict-card{
  border-radius:8px;
  padding:26px 24px;
  margin:34px 0 10px;
  border:1px solid rgba(0,201,106,0.22);
  background:var(--green-dim);
}
.verdict-card.critical{border-color:rgba(255,68,68,0.22);background:var(--red-dim)}
.verdict-card.watch{border-color:rgba(245,158,11,0.22);background:var(--amber-dim)}

.vc-tag{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.vc-word{
  display:block;
  font-family:var(--mono);
  font-size:15px;
  font-weight:400;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--green);
  -webkit-text-fill-color:var(--green);
  line-height:1.4;
}
.verdict-card.critical .vc-word{color:var(--red);-webkit-text-fill-color:var(--red)}
.verdict-card.watch .vc-word{color:var(--amber);-webkit-text-fill-color:var(--amber)}

.vc-finding{
  font-size:16px;
  font-weight:300;
  line-height:1.6;
  color:var(--white);
  margin-top:12px;
}

.vc-not{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.10)}
.vc-not-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted-lt);
  margin-bottom:12px;
}
.vc-not ul{list-style:none;margin:0;padding:0}
.vc-not li{
  position:relative;
  padding-left:18px;
  font-size:14.5px;
  font-weight:300;
  line-height:1.62;
  color:var(--muted-lt);
}
.vc-not li+li{margin-top:11px}
.vc-not li::before{
  content:"\2014";
  position:absolute;
  left:0;
  color:var(--muted);
}
.vc-not li strong{color:var(--white);font-weight:400}

@media(max-width:700px){
  .verdict-card{padding:22px 18px;margin-top:28px}
  .vc-word{font-size:13.5px}
  .vc-finding{font-size:15px}
}

/* ── REVIEW NOTICE ──────────────────────────────────────────────────
   For a live verdict that is being re-scored. Deliberately NOT a
   .verdict-card: a card promotes a verdict to the first screen, and
   promoting a verdict you are withdrawing is worse than leaving it
   where it is. This states the fact and nothing else. */
.review-notice{
  border-radius:8px;
  padding:22px 24px;
  margin:34px 0 10px;
  border:1px solid rgba(245,158,11,0.28);
  background:var(--amber-dim);
}
.rn-tag{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
  -webkit-text-fill-color:var(--amber);
  margin-bottom:11px;
}
.rn-body{font-size:15px;font-weight:300;line-height:1.62;color:var(--muted-lt)}
.rn-body strong{color:var(--white);font-weight:400}
.rn-date{
  display:block;
  margin-top:14px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
}
@media(max-width:700px){.review-notice{padding:20px 18px;margin-top:28px}}

/* ── NOSCRIPT NAVIGATION ────────────────────────────────────────────
   cm-nav and cm-footer are JS-injected. Without this, a page whose
   script fails is a dead end with no route to the rest of the series. */
.ns-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:18px 24px;
  border-bottom:1px solid var(--border);
  background:var(--black);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.ns-nav a{color:var(--muted);text-decoration:none;padding:6px 0}
.ns-nav a:hover{color:var(--green)}

/* ── MOTION ─────────────────────────────────────────────────────────
   Was honoured on two of seven pages. Now on all of them. */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}