/* ── The Mythbuster (mythbuster.html) ──
   Page-scoped styles. Colours/tokens come from css/styles.css (:root, v1.6).
   Verdict + tier palettes deliberately mirror the statistics/.chart-tier +
   frameworks families so this page reads as part of the same evidence system.
   Icons are inline SVG (.mb-svg / .mb-chev) — no external icon font. */

/* ── Inline-SVG icon sizing (stroke = currentColor, so colour is inherited) ── */
.mb-svg { flex-shrink: 0; }
.mb-notice .mb-svg { width: 16px; height: 16px; margin-top: 1px; }
.mb-sources-btn-label .mb-svg { width: 14px; height: 14px; }

/* ── Screen-reader-only (no shared utility exists site-wide) ── */
.mb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Proof-of-concept / placeholder notice ── */
.mb-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 1.6rem;
  padding: 0.85rem 1.1rem;
  background: var(--scarlet-pale);
  border: 1px dashed var(--scarlet);
  border-radius: var(--radius-md);
  color: var(--scarlet-dim);
  font-size: 12.5px;
  line-height: 1.55;
}
.mb-notice strong { letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.mb-notice-preview { margin-top: 0.45rem; }

/* ── Search row (first row of the shared .filter-deck card): free-text box,
   verdict select, expand/collapse-all. Text search and the chips below narrow
   the same set, so this row sits above them as the coarser instrument. ── */
.mb-search-row { border-bottom: 0.5px solid var(--border); }
.mb-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 0;
}
.mb-search-ico {
  position: absolute;
  left: 0.85rem;
  font-size: 16px;
  color: var(--text-dim);
  pointer-events: none;
}
.mb-search-input {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  padding: 0.6rem 2.2rem 0.6rem 2.4rem;
  background: var(--card-solid);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.mb-search-input::placeholder { color: var(--text-dim); }
.mb-search-input:focus {
  outline: none;
  border-color: var(--scarlet);
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.14);
}
/* The native search affordance duplicates .mb-search-clear — hide it. */
.mb-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.mb-search-clear {
  position: absolute;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.mb-search-clear:hover { color: var(--scarlet); background: var(--scarlet-pale); }
.mb-search-clear[hidden] { display: none; }

.mb-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.mb-select-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mb-select {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--card-solid);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
}
.mb-select:focus-visible { outline: 2px solid var(--scarlet); outline-offset: 2px; }

.mb-expand-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--scarlet-dim);
  background: transparent;
  border: 0.5px solid rgba(196, 30, 58, 0.3);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mb-expand-all:hover { background: var(--scarlet-pale); border-color: var(--scarlet); }
.mb-expand-all:focus-visible { outline: 2px solid var(--scarlet); outline-offset: 2px; }
.mb-expand-all i { font-size: 15px; }

@media (max-width: 720px) {
  .mb-search { flex-basis: 100%; }
  .mb-expand-all { margin-left: auto; }
}

/* ── Filter chips (inside the shared .filter-deck card) ── */
/* Category groups run 1–16 entries, so the shared flex layout leaves tall gaps —
   pack them into CSS columns instead (groups never split across a column). */
#mb-toc[open] .toc-groups { display: block; column-width: 270px; column-gap: 2.5rem; }
#mb-toc .toc-group { break-inside: avoid; margin-bottom: 1.35rem; }
.mb-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.mb-chip {
  border: 0.5px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mb-chip:hover { color: var(--text); border-color: var(--text-dim); }
.mb-chip.active { background: var(--scarlet); color: #fffaf3; border-color: var(--scarlet); }
.mb-chip:focus-visible { outline: 2px solid var(--scarlet); outline-offset: 2px; }
.mb-chip-n {
  margin-left: 0.45em;
  font-size: 0.92em; font-weight: 700; font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
.mb-chip.active .mb-chip-n { opacity: 0.8; }

/* ── Card stack (single column, full-width cards) ── */
.mb-list { display: flex; flex-direction: column; gap: 1.1rem; }
.mb-empty { color: var(--text-muted); font-size: 13px; padding: 2rem; text-align: center; }

.mb-card {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  scroll-margin-top: 96px; /* deep-link anchors (#M-TBD-n) land clear of the sticky nav — same offset as .dos-section in styles.css */
}
.mb-card.is-hidden { display: none; }
.mb-card.is-draft { border-style: dashed; border-color: rgba(196, 30, 58, 0.42); }

/* ── Docket cards (preview mode only): gate-FAILED entries shown for grading.
   Washed + dashed + slightly dimmed so they read as "not yet real" at a glance,
   in the same dashed-border family as .is-draft / .mb-notice — but neutral, not
   scarlet, since they carry no verdict yet. ── */
.mb-card.is-docket {
  background: rgba(243, 230, 216, 0.28);
  border-style: dashed;
  border-color: var(--border);
  box-shadow: none;
  opacity: 0.9;
}
.mb-card.is-docket .mb-strip { background: rgba(243, 230, 216, 0.32); }
/* "Ungraded" strip pill — deliberately NOT a verdict chip (neutral, dashed). */
.mb-ungraded {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
/* Muted "Awaiting ruling" placeholder — stands in for the badge/text/tier/source. */
.mb-awaiting {
  font-size: 14px;
  font-style: italic;
  color: var(--text-dim);
  margin: 0;
}

/* ── Top strip: id + category (left), verdict badge or claim-count pill (right) ── */
.mb-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.15rem;
  border-bottom: 1px solid var(--border);
  background: rgba(243, 230, 216, 0.5);
}
.mb-strip-left { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.mb-id {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.mb-cat {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-dim);
}
.mb-draft {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--scarlet-dim);
  border: 1px dashed var(--scarlet);
  border-radius: 4px;
  padding: 1px 6px;
}
.mb-strip-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* Collapsed-only echo of the ruling badge. The real badge lives in the ruling
   column inside the fold; printing both at once would just be the same word
   twice, so this one appears only while that column is hidden. */
.mb-strip-badge { display: none; }
.mb-fold:not([open]) .mb-strip-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--scarlet-dim);
  background: var(--scarlet-pale);
  border: 1px solid rgba(196, 30, 58, 0.35);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* Claim-count pill (N>1) */
.mb-count {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}

/* Verdict pill — used both in the strip (N=1) and on each claim line.
   confirmed=green, oversimplified=amber, false=scarlet, backwards=deep scarlet.
   All AA on their own fill. false vs backwards are two distinct scarlet shades. */
.mb-verdict {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.mb-verdict.confirmed { background: #1e7b34; color: #ffffff; }                 /* ~5.3:1 */
.mb-verdict.oversimplified { background: #9a6b12; color: #ffffff; }            /* ~5:1 */
.mb-verdict.false { background: var(--scarlet); color: #fffaf3; }              /* ~4.8:1 */
.mb-verdict.backwards { background: var(--scarlet-deep); color: #fffaf3; }     /* ~10:1, distinct darker */

/* ── The fold: strip + question line stay in the <summary>; claims, ruling, and
   sources live in the folded body. 65 entries stacked open is a wall — closed,
   the deck reads as a docket you scan and open one row of. ── */
.mb-fold > .mb-head {
  display: block;
  cursor: pointer;
  list-style: none;
}
.mb-fold > .mb-head::-webkit-details-marker { display: none; }
.mb-fold > .mb-head:focus-visible { outline: 2px solid var(--scarlet); outline-offset: -3px; }
.mb-fold > .mb-head:hover .mb-headline { background: rgba(243, 230, 216, 0.32); }

/* Headline row: the question (or its collapsed stand-in) plus the fold chevron. */
.mb-headline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
/* A closed card ends at the headline — a divider under it would separate nothing. */
.mb-fold:not([open]) .mb-headline { border-bottom: none; }
.mb-headline .mb-chev { margin-left: auto; }
.mb-fold[open] .mb-headline .mb-chev { transform: rotate(180deg); }

/* ── Question line = semantic <h2> (full width, under the strip) ── */
.mb-question {
  flex: 1;
  min-width: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}
/* Stand-in headline for the two entries that predate the `question` field: their
   claim text is the title, and it only renders inside the folded claims column. */
.mb-question-alt { display: none; }
.mb-fold:not([open]) .mb-question-alt { display: block; }

/* ── Body: two columns split by a hairline ── */
.mb-body { display: grid; grid-template-columns: 1fr 1fr; }
.mb-col { min-width: 0; }

/* Left: claims stacked, separated by horizontal hairlines */
.mb-claims { display: flex; flex-direction: column; }
.mb-claim { padding: 1.25rem 1.5rem; }
.mb-claim + .mb-claim { border-top: 1px solid var(--border); }
.mb-claim-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.mb-camp {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mb-quote {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* Right: the ruling */
.mb-ruling { padding: 1.45rem 1.6rem; border-left: 1px solid var(--border); }
.mb-col-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.55rem;
}
.mb-ruling-label { color: var(--scarlet); }
/* Ruling label (left) + verdict badge / docket Ungraded pill (right) on one row. */
.mb-ruling-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.mb-ruling-head .mb-col-label { margin-bottom: 0; }
.mb-ruling-head .mb-ruling-badge { margin: 0; }
.mb-ruling-head .mb-ungraded { margin: 0; }
.mb-ruling-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--scarlet-dim);
  background: var(--scarlet-pale);
  border: 1px solid rgba(196, 30, 58, 0.35);
  border-radius: 999px;
  padding: 3px 12px;
  margin: 0 0 0.75rem;
}
.mb-ruling-text {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text);
  margin: 0 0 1rem;
}

/* ── Stake ledger ("Our stake"): one 0-anchored row per position — every claim
   (scarlet) plus the ruling itself (gold) — on a shared 0–100 axis, percentage
   printed on each row. Shares are absolute, so bar lengths compare directly:
   the gold row vs the best claim shows how much the ruling adds, and the
   ruling's empty tail is the standing refutation margin. Gold TEXT uses the
   darkened #8a5f10 (same AA fix as .mb-tier.evidence); the bar fill can be the
   brighter --gold since it is not text. ── */
.mb-stake { margin: -0.1rem 0 0.9rem; }
.mb-stake-head {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}
.mb-stake-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 38px;
  gap: 0.55rem;
  align-items: center;
}
.mb-stake-row + .mb-stake-row { margin-top: 0.3rem; }
.mb-stake-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-stake-track {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(243, 230, 216, 0.55);
  border: 0.5px solid var(--border);
  overflow: hidden;
}
.mb-stake-fill { display: block; height: 100%; border-radius: 4px; background: var(--scarlet); }
.mb-stake-pct { font-size: 11px; font-weight: 800; color: var(--text); text-align: right; letter-spacing: 0.02em; }
/* Party colors: sharp distinction per Jason. Claims 1+2 use the ORIGINAL split
   bar's pair — full scarlet vs the pale washed scarlet — a dark/light contrast
   that reads instantly; blue takes the odd third claim. p3/p4 held in reserve
   for hypothetical wider dockets. The renderer emits p<index> for any claim
   count, so adding a party is a one-line rule here. */
.mb-stake-row.p1 .mb-stake-fill { background: rgba(196, 30, 58, 0.32); }
.mb-stake-row.p2 .mb-stake-fill { background: #1f5fa8; }
.mb-stake-row.p3 .mb-stake-fill { background: #3c3489; }   /* reserve: purple */
.mb-stake-row.p4 .mb-stake-fill { background: #0f6e56; }   /* reserve: teal */
/* The ruling row is ONE gold story: a true yellow-gold fill (deliberately NOT
   the orange-leaning --gold #b7772f, and yellower than the amber verdict
   chips) with its dark AA sibling for the text. */
.mb-stake-row.is-ruling .mb-stake-label { color: #8a5f10; }
.mb-stake-row.is-ruling .mb-stake-fill { background: #c99417; }
.mb-stake-row.is-ruling .mb-stake-pct { color: #8a5f10; }

/* Staked-% suffix inside a claim's verdict chip ("OVERSIMPLIFIED · 45%"). */
.mb-verdict .mb-truth { font-weight: 800; opacity: 0.9; }
.mb-evidence { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* Tier pill — statistics/.chart-tier family */
.mb-tier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
/* Leading tier glyph — sized to the site's ~1.3x icon:text ratio on the 9px pill
   (the ~14px suggestion would dwarf the small pill; currentColor = the tier hue). */
.mb-tier-ico { width: 12px; height: 12px; }
.mb-tier.hard-data { background: #e6f4ea; color: #1e7b34; }        /* 4.7:1 */
.mb-tier.evidence { background: #fbf3e0; color: #8a5f10; }         /* darkened from statistics' #9a6b12 (4.24:1 fail) to clear AA ~5:1 */
.mb-tier.definitional { background: #eeedfe; color: #3c3489; }     /* 8.9:1 */
.mb-attr { font-size: 11.5px; color: var(--text-muted); }

/* ── Footer: expandable Sources (closed by default) ── */
.mb-sources { border-top: 1px solid var(--border); }
/* Footer row: Sources toggle (left) + always-visible Related links (right). */
.mb-sources-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mb-sources-bar .mb-sources-toggle { width: auto; }
.mb-related-footer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.2rem 1.15rem;
  font-size: 12.5px;
  color: var(--text-muted);
}
.mb-related-head {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mb-sources-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mb-sources-toggle:hover { background: var(--surface); color: var(--text); }
.mb-sources-toggle:focus-visible { outline: 2px solid var(--scarlet); outline-offset: -2px; }
.mb-sources-btn-label { display: inline-flex; align-items: center; gap: 0.45rem; }
.mb-chev { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-dim); transition: transform 0.22s ease; }
.mb-sources.open .mb-chev { transform: rotate(180deg); }

/* Smooth height reveal via grid-template-rows 0fr->1fr (no magic max-height). */
.mb-sources-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.mb-sources.open .mb-sources-panel { grid-template-rows: 1fr; }
.mb-sources-inner {
  overflow: hidden;
  visibility: hidden;                 /* pulls links out of tab/AX order while collapsed */
  transition: visibility 0s 0.28s;
}
.mb-sources.open .mb-sources-inner { visibility: visible; transition: visibility 0s 0s; }
.mb-sources-content { padding: 0.35rem 1.15rem 1.15rem; }

.mb-source-list {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mb-source-list li { font-size: 12.5px; line-height: 1.45; }
.mb-source-list a,
.mb-related-links a {
  color: var(--scarlet-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 30, 58, 0.28);
}
.mb-source-list a:hover,
.mb-related-links a:hover { color: var(--scarlet); }
.mb-related { font-size: 12.5px; color: var(--text-muted); }
.mb-related-links { line-height: 1.7; }
.mb-related-sep { color: var(--text-dim); margin: 0 0.4rem; }

/* ── Mobile (<=720px, the house breakpoint): columns stack, claims first,
   ruling closes the card, hairline becomes horizontal. ── */
@media (max-width: 720px) {
  .mb-body { grid-template-columns: 1fr; }
  .mb-claim { padding: 1.15rem 1.2rem; }
  .mb-ruling { padding: 1.25rem 1.2rem; border-left: none; border-top: 1px solid var(--border); }
  .mb-headline { padding: 0.85rem 1rem; gap: 0.6rem; }
  .mb-question { font-size: 16px; }
  .mb-strip { padding: 0.65rem 1rem; }
}

/* ── Respect reduced-motion: no animated reveal / chevron rotation ── */
@media (prefers-reduced-motion: reduce) {
  .mb-sources-panel,
  .mb-sources-inner,
  .mb-chev { transition: none; }
}