/* ==========================================================
   Walkthrough Drawer — comic-book-style "verify it yourself"
   panels for the two key findings on verifiable-misconduct.html.

   Reuses the .proof-drawer shell (slide-in, backdrop, header,
   close button) from experts-drawer.css — so this file only
   defines what's NEW: the wider panel, the finding-trigger
   cards on the page, and the step panels inside the drawer.

   Triggered on any element with [data-walkthrough-open]
   (value: "alteration" or "ghana").
   Dismissed via [data-walkthrough-close], backdrop, or Esc.
   ========================================================== */

/* ==========================================================
   FINDING TRIGGER CARDS — sit on the page (Section 2),
   open the drawer when clicked.
   ========================================================== */
.finding-card {
  position: relative;
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border-warm, #E6DCC6);
  border-radius: 3px;
  padding: 26px 28px 24px;
  margin: 0 0 24px;
  box-shadow: 0 1px 2px rgba(11, 26, 46, 0.04);
}
.finding-card:last-child { margin-bottom: 0; }

.finding-card-eyebrow {
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #C4A24C);
  margin-bottom: 8px;
}
.finding-card-eyebrow .dot {
  display: inline-block;
  margin: 0 8px;
  color: var(--border-strong, #D6CBB2);
}
.finding-card-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--navy, #0B1A2E);
  margin: 0 0 14px;
}
.finding-card-claim {
  font-family: var(--serif, Georgia, serif);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text, #2A3344);
  margin: 0 0 18px;
}
.finding-card-claim strong { font-weight: 600; color: var(--navy, #0B1A2E); }
.finding-card-claim em { font-style: italic; }

/* Callback line — links this finding back to the experts' conclusion */
.finding-link-back {
  margin: 0 0 18px;
  padding: 8px 12px;
  background: rgba(196, 162, 76, 0.08);
  border-left: 2px solid var(--gold, #C4A24C);
  font-family: var(--serif, Georgia, serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-soft, #4A5568);
  font-style: italic;
}
.finding-link-back strong { font-weight: 600; color: var(--navy, #0B1A2E); font-style: normal; }

.finding-why {
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--beige-bg, #F4EDDD);
  border-left: 2px solid var(--gold, #C4A24C);
  border-radius: 0 2px 2px 0;
}
.finding-why-label {
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute, #6B7280);
  margin-bottom: 4px;
}
.finding-why-body {
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text, #2A3344);
  font-style: italic;
  margin: 0;
}
.finding-why-body strong { font-weight: 600; font-style: normal; color: var(--navy, #0B1A2E); }

/* Match the .proof-trigger styling so the two button systems are identical */
.walkthrough-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 18px;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: #1E3A8A;
  border: 1px solid #1E3A8A;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.walkthrough-trigger:hover {
  background: #1E40AF;
  border-color: #1E40AF;
  box-shadow: 0 3px 8px rgba(30, 58, 138, 0.25);
}
.walkthrough-trigger .arrow { color: inherit; font-size: 14px; transition: transform 0.18s ease; }
.walkthrough-trigger:hover .arrow { transform: translateX(3px); }

/* Compact card — used in Section 3 "More Findings" where the body is the drawer */
.finding-card-compact {
  padding: 20px 26px 20px;
}
.finding-card-compact .finding-card-title {
  margin-bottom: 14px;
}
.finding-card-compact .proof-trigger { margin-top: 0; }

/* ==========================================================
   FINDING LIST — Section 3 alternative: a tight clickable
   list. Each row is a single-line headline; click opens the
   proof modal. Much lighter visual weight than the cards.
   ========================================================== */
.finding-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-warm, #E6DCC6);
}
.finding-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border-warm, #E6DCC6);
}
.finding-list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 4px;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--serif, Georgia, serif);
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--navy, #0B1A2E);
  cursor: pointer;
  transition: color .15s ease, padding-left .15s ease;
}
.finding-list-link:hover {
  color: #1E3A8A;
  padding-left: 8px;
}
.finding-list-link .finding-list-text {
  flex: 1;
  min-width: 0;
}
.finding-list-link .finding-list-text strong { font-weight: 600; }
.finding-list-link .finding-list-text em { font-style: italic; }
.finding-list-link .finding-list-chevron {
  flex-shrink: 0;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 18px;
  color: var(--text-mute, #6B7280);
  transition: color .15s ease, transform .15s ease;
}
.finding-list-link:hover .finding-list-chevron {
  color: #1E3A8A;
  transform: translateX(4px);
}

@media (max-width: 720px) {
  .finding-list-link { font-size: 16px; padding: 16px 4px; }
}

@media (max-width: 720px) {
  .finding-card { padding: 22px 20px 20px; }
  .finding-card-compact { padding: 18px 20px 18px; }
  .finding-card-title { font-size: 19px; }
  .finding-card-claim { font-size: 15.5px; }
  .finding-why-body { font-size: 14px; }
}

/* ==========================================================
   DRAWER — widened panel for screenshots.
   The .proof-drawer / .proof-drawer-backdrop / animation rules
   are inherited from experts-drawer.css. We override only the
   panel width here.
   ========================================================== */
#walkthrough-drawer .proof-drawer-panel {
  width: min(720px, 100vw);
}
/* Narrow variant — applied when the walkthrough drawer opens a
   "Background"-style panel (e.g. key=task-force) so the drawer's
   fit matches the Core Finding / Trump Overlap drawers (580px)
   instead of the wider walkthrough default. Toggled by JS via the
   .walkthrough-drawer--narrow class on the drawer root. */
#walkthrough-drawer.walkthrough-drawer--narrow .proof-drawer-panel {
  width: min(580px, 100vw);
}

/* Drawer intro (above the panels) — slightly tighter than the
   experts drawer intro */
#walkthrough-drawer .proof-drawer-intro {
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-warm, #E6DCC6);
}

/* ==========================================================
   STEP PANELS — the comic-book strip inside the drawer.
   Each panel = number + doc name + screenshot + caption + link.
   ========================================================== */
.proof-panels {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: panel;
}
.proof-panel {
  position: relative;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--border-warm, #E6DCC6);
  counter-increment: panel;
}
.proof-panel:last-child { border-bottom: 0; padding-bottom: 12px; }

/* Continuous gold spine — every numbered panel in the main panels
   list shares a 3px gold left bar that visually threads from the
   Point heading card (which also has a 3px gold left bar) down
   through all of its supporting beats. So the reader sees the
   Point card and its numbered panels as ONE connected section.
   Scoped to #walkthrough-drawer-panels so the secondary example
   panels (Cybershot) don't pick up the spine. */
#walkthrough-drawer-panels > .proof-panel {
  border-left: 3px solid var(--gold, #C4A24C);
  padding-left: 20px;
}
/* First panel after a Point intro card — tighten the gap so the
   numbered panel sits close to its parent Point. */
.proof-point-block + .proof-panel {
  padding-top: 16px;
}

/* Heading leads each beat — "N) The claim in plain language." */
.panel-heading {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--serif, Georgia, serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy, #0B1A2E);
  margin: 0 0 14px;
}
.panel-num {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--gold, #C4A24C);
  min-width: 26px;
}
.panel-heading-text { flex: 1; }
.panel-heading strong { font-weight: 700; color: var(--navy, #0B1A2E); }
.panel-heading em { font-style: italic; font-weight: 500; }

.panel-image-frame {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  background: #FAFAF6;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 2px;
  overflow: hidden;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.panel-image-frame:hover {
  border-color: var(--gold, #C4A24C);
  box-shadow: 0 4px 14px rgba(11, 26, 46, 0.08);
}
.panel-image-frame img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Thumbnail variant — used when an image is corroborative rather
   than the primary subject of the panel (e.g. the Vicente trial
   testimony in the task-force walkthrough). Renders as a smaller
   centered thumbnail with a click-to-enlarge cue strip beneath. */
.panel-image-frame.panel-image-frame--thumb {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0 auto 14px;
  position: relative;
}
.panel-image-frame.panel-image-frame--thumb img {
  width: auto;
  max-width: 100%;
  max-height: 200px;
  display: block;
  margin: 0 auto;
}
.panel-image-frame.panel-image-frame--thumb::after {
  content: "Click to enlarge \2197";
  display: block;
  padding: 5px 12px 6px;
  background: rgba(11, 26, 46, 0.04);
  border-top: 1px solid var(--border-warm, #E6DCC6);
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-soft, #4A5568);
  text-align: center;
  transition: background .15s, color .15s, border-top-color .15s;
}
.panel-image-frame.panel-image-frame--thumb:hover::after {
  background: var(--gold, #C4A24C);
  color: #fff;
  border-top-color: var(--gold, #C4A24C);
}
/* Center the thumb in the panel column so it doesn't read as a
   full-bleed image. */
.proof-panel:has(.panel-image-frame--thumb) > .panel-image-frame--thumb {
  display: block;
  text-align: center;
}

/* Video frame for panels that lead on a clip (e.g. task-force panel 1
   opening on Penza's STARZ interview). Sits below the heading and
   caption; controls inline. */
.panel-video {
  margin: 0 0 14px;
  background: #000;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 2px;
  overflow: hidden;
}
.panel-video video {
  display: block;
  width: 100%;
  max-height: 380px;
  background: #000;
}
.panel-video-caption {
  display: block;
  padding: 10px 14px 11px;
  background: #fff;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft, #4A5568);
  text-align: left;
}
.panel-video-caption strong { font-weight: 600; color: var(--navy, #0B1A2E); }
.panel-video-caption em { font-style: italic; }
@media (max-width: 720px) {
  .panel-video video { max-height: 280px; }
  .panel-video-caption { font-size: 12px; }
}

/* Multi-image stack for a beat that needs two screenshots side-by-side
   (e.g. the forensic report + Booth testimony together). */
.panel-images {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 14px;
}
.panel-image-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panel-images .panel-image-frame { margin: 0; }

/* ==========================================================
   SEQUENCE ROW — horizontal A → B → C diagram of images with
   red arrows between them. Used to set up the static jump
   before a video plays the in-between steps (e.g. the Item 2
   → Item 36 → Item 37 bookshelf sequence).
   ========================================================== */
.panel-sequence-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: start;
  margin: 4px 0 18px;
}
.panel-sequence-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.panel-sequence-frame {
  display: block;
  background: #FAFAF6;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 2px;
  overflow: hidden;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.panel-sequence-frame:hover {
  border-color: var(--gold, #C4A24C);
  box-shadow: 0 4px 14px rgba(11, 26, 46, 0.08);
}
.panel-sequence-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.panel-sequence-figure figcaption {
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy, #0B1A2E);
  text-align: center;
  margin-top: 8px;
}
.panel-sequence-arrow {
  font-size: 26px;
  color: #6B1F2D;
  align-self: center;
  margin-top: -10px;
  font-weight: 300;
  line-height: 1;
}
@media (max-width: 620px) {
  .panel-sequence-row {
    grid-template-columns: 1fr;
  }
  .panel-sequence-arrow {
    transform: rotate(90deg);
    margin: 4px auto;
    justify-self: center;
    font-size: 22px;
  }
}

/* Per-image subheading — a descriptive line that sits ABOVE the image
   inside the same .panel-image-block. Used to narrate a sequence
   ("First, X:" / "Then, Y:") with one image per beat in a single panel. */
.panel-image-subheading {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text, #2A3344);
}
.panel-image-subheading strong { font-weight: 700; color: var(--navy, #0B1A2E); }
.panel-image-subheading em { font-style: italic; }

/* Narrow images variant — extra ~30% width reduction on top of the
   compact-mode default. Used on the three-photo bookshelf comparison
   row so the eye can scan all three in a vertical glance. */
.panel-images--narrow .panel-image-frame {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.walkthrough-drawer--compact-images .panel-images--narrow .panel-image-frame {
  max-width: 55%;
}
.panel-images--narrow .panel-image-subheading,
.panel-images--narrow .panel-image-label {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.walkthrough-drawer--compact-images .panel-images--narrow .panel-image-subheading,
.walkthrough-drawer--compact-images .panel-images--narrow .panel-image-label {
  max-width: 55%;
}
@media (max-width: 720px) {
  .panel-images--narrow .panel-image-frame,
  .panel-images--narrow .panel-image-subheading,
  .panel-images--narrow .panel-image-label,
  .walkthrough-drawer--compact-images .panel-images--narrow .panel-image-frame,
  .walkthrough-drawer--compact-images .panel-images--narrow .panel-image-subheading,
  .walkthrough-drawer--compact-images .panel-images--narrow .panel-image-label {
    max-width: 100%;
  }
}

/* Thumbnail variant — used when supporting screenshots shouldn't
   compete with the panel's primary evidence. Renders the images
   side-by-side in a compact row, each capped in height; click opens
   the full-size image in a new tab. (e.g. Booth-hash transcript
   pages on the Loveall walkthrough.) */
.panel-images--thumbs {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
.panel-images--thumbs .panel-image-block {
  flex: 1 1 0;
  min-width: 0;
}
.panel-images--thumbs .panel-image-frame img {
  height: 180px;
  object-fit: cover;
  object-position: top;
  width: 100%;
}
.panel-images--thumbs .panel-image-label { font-size: 12px; }
@media (max-width: 720px) {
  .panel-images--thumbs { flex-direction: column; gap: 10px; }
  .panel-images--thumbs .panel-image-frame img { height: auto; max-height: 220px; }
}

/* Small inline label that sits under a screenshot in an images[] stack,
   making the click target explicit (e.g. "See Booth's testimony ↗"). */
.panel-image-label {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy, #0B1A2E);
  border-bottom: 1px solid var(--gold, #C4A24C);
  padding-bottom: 1px;
  text-decoration: none;
  transition: color .15s;
}
.panel-image-label:hover { color: var(--gold, #C4A24C); }

/* Optional supporting caption — sits between heading and image. */
.panel-caption {
  font-family: var(--serif, Georgia, serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text, #2A3344);
  margin: 0 0 12px;
}
.panel-caption strong { font-weight: 600; color: var(--navy, #0B1A2E); }
.panel-caption em { font-style: italic; }
.panel-caption a {
  color: var(--navy, #0B1A2E);
  border-bottom: 1px solid var(--gold, #C4A24C);
  text-decoration: none;
  transition: color .15s;
}
.panel-caption a:hover { color: var(--gold, #C4A24C); }

/* "But wait —" callout that sits above a bullet list of problems.
   Maroon left rule + maroon-emphasized lede so the reader's eye
   gets pulled in before the three problems land. */
.panel-bullets-callout {
  margin: 4px 0 8px;
  padding: 8px 0 8px 14px;
  border-left: 3px solid #6B1F2D;
  font-family: var(--serif, Georgia, serif);
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--text, #2A3344);
}
.panel-bullets-callout strong { color: #6B1F2D; font-weight: 700; }
@media (max-width: 720px) {
  .panel-bullets-callout { font-size: 15.5px; padding-left: 12px; }
}

/* Bullet list — used when a beat is best expressed as a series of
   parallel points rather than a screenshot (e.g. the unsigned chain
   of custody). */
.panel-bullets {
  list-style: disc;
  margin: 0 0 14px;
  padding-left: 22px;
  font-family: var(--serif, Georgia, serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text, #2A3344);
}
.panel-bullets li { margin-bottom: 14px; }
.panel-bullets li:last-child { margin-bottom: 0; }
.panel-bullets strong { font-weight: 700; color: var(--navy, #0B1A2E); }
.panel-bullets em { font-style: italic; }

/* Ordered variant — used when sequence matters or the list reads as
   enumerated facts (e.g. "five objects were added"). */
ol.panel-bullets,
.panel-bullets--ordered {
  list-style: decimal;
}
.panel-bullets--ordered li::marker {
  font-weight: 700;
  color: var(--gold, #C4A24C);
}

/* Pull-quote — an expert/witness quotation that corroborates the
   beat. Maroon left-bar, italic serif, attribution underneath. */
.panel-quote {
  margin: 6px 0 14px;
  padding: 14px 18px 12px;
  background: #FAFAF6;
  border-left: 3px solid #6B1F2D;
  border-radius: 0 2px 2px 0;
}
.panel-quote-text {
  margin: 0 0 8px;
  font-family: var(--serif, Georgia, serif);
  font-size: 16px;
  line-height: 1.6;
  font-style: italic;
  color: var(--text, #2A3344);
}
.panel-quote-text strong {
  font-weight: 700;
  font-style: normal;
  color: #6B1F2D;
}
.panel-quote-attribution {
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-mute, #6B7280);
}
.panel-quote-attribution strong { color: var(--navy, #0B1A2E); font-weight: 700; }

/* Punch — editorial closing block that lands with weight but reads as
   commentary, not a slam. Warm beige with maroon left rule and navy
   serif type. */
.panel-punch {
  margin: 10px 0 16px;
  padding: 16px 22px 17px;
  background: var(--beige-bg, #F4EDDD);
  border-left: 4px solid #6B1F2D;
  border-radius: 0 3px 3px 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--navy, #0B1A2E);
}
.panel-punch strong { font-weight: 700; color: var(--navy, #0B1A2E); }
.panel-punch em { font-style: italic; color: var(--text, #2A3344); }
@media (max-width: 720px) {
  .panel-punch { font-size: 15px; padding: 14px 16px 15px; }
  .panel-quote-text { font-size: 15px; }
}

/* ==========================================================
   POINT HEADING — major sub-section divider within the panels
   list. Renders as a styled <li> that does NOT carry a panel
   number (the renderer skips numbering for these). Used to
   group panels into "Point 1," "Point 2," etc.
   ========================================================== */
/* Outer <li> wrapping a Point block — no number, no bullet, no
   bottom border. Just a transparent container so the navy card and
   the prose intro below it sit grouped together. */
.proof-point-block {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  counter-increment: none;
}
.proof-point-block::marker { content: ''; }

/* Lighter Point heading — beige body with gold left bar so it sits
   in the same palette as the rest of the drawer. The eyebrow chip
   carries the chapter-divider feel without a heavy color block.
   Visually merged into the .proof-point-intro that follows so the
   reader sees one connected "section card." */
.proof-point-heading {
  position: relative;
  margin: 30px 0 0;
  padding: 16px 22px 14px;
  background: var(--beige-bg, #F4EDDD);
  border-left: 3px solid var(--gold, #C4A24C);
  border-radius: 0 4px 0 0;
}
.proof-point-block:first-child .proof-point-heading {
  margin-top: 12px;
}
/* When there's no intro below, round the bottom corners too and
   add extra bottom padding so the card closes cleanly. */
.proof-point-heading:not(:has(+ .proof-point-intro)) {
  border-radius: 0 4px 4px 0;
  padding-bottom: 18px;
  margin-bottom: 26px;
}

/* Primer / intro prose that sits BELOW the Point heading. Shares
   the same beige body + gold left bar so heading and intro read as
   one tall "section card" without a seam. */
.proof-point-intro {
  margin: 0 0 0;
  padding: 4px 22px 18px;
  background: var(--beige-bg, #F4EDDD);
  border-left: 3px solid var(--gold, #C4A24C);
  border-radius: 0 0 4px 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text, #2A3344);
}
.proof-point-intro p { margin: 0 0 10px; }
.proof-point-intro p:last-child { margin-bottom: 0; }
.proof-point-intro strong { font-weight: 700; color: var(--navy, #0B1A2E); }
.proof-point-intro em { font-style: italic; }
.proof-point-intro ol,
.proof-point-intro ul {
  margin: 6px 0 12px;
  padding-left: 22px;
}
.proof-point-intro li { margin-bottom: 6px; }
.proof-point-intro li:last-child { margin-bottom: 0; }
.proof-point-intro hr {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid rgba(11, 26, 46, 0.10);
}
@media (max-width: 720px) {
  .proof-point-intro { font-size: 14.5px; padding: 14px 16px; margin: 16px 0 22px; }
}

/* Maroon-italic emphasis word inside a Point heading title — used
   sparingly for a key punctum the eye should land on (e.g.
   "never taken"). Works on the cream card background. */
.point-heading-text .emphasis-key {
  color: #6B1F2D;
  font-style: italic;
  font-weight: 700;
  border-bottom: 1.5px solid rgba(107, 31, 45, 0.45);
  padding-bottom: 1px;
}
/* Chapter chip — gold pill above the title that tells the reader
   "new section starts here." Still unmistakable, just lives on the
   lighter card now. */
.point-heading-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 11px 5px;
  background: var(--gold, #C4A24C);
  color: var(--navy, #0B1A2E);
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
}
.point-heading-text {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--navy, #0B1A2E);
}
.point-heading-text em { font-style: italic; font-weight: 600; }
.point-heading-text strong { font-weight: 700; }
@media (max-width: 720px) {
  .proof-point-heading { padding: 14px 18px 12px; margin: 26px 0 0; }
  .proof-point-heading:not(:has(+ .proof-point-intro)) {
    padding-bottom: 16px;
    margin-bottom: 22px;
  }
  .proof-point-intro { padding: 4px 18px 16px; margin: 0 0 22px; }
  .point-heading-text { font-size: 17.5px; }
  .point-heading-eyebrow { font-size: 10px; padding: 4px 10px 5px; }
}

/* ==========================================================
   CODA — non-numbered closing note that sits between the
   panels and the closer question. Quiet but visible — soft
   gold tint, gold left bar, matching the verify block at
   the top so the drawer bookends visually.
   ========================================================== */
.walkthrough-coda {
  margin: 26px 0 0;
  padding: 14px 18px;
  background: rgba(196, 162, 76, 0.10);
  border-left: 2px solid var(--gold, #C4A24C);
  border-radius: 0 2px 2px 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--navy, #0B1A2E);
}
.walkthrough-coda[hidden] { display: none; }
.walkthrough-coda strong { font-weight: 700; }
.walkthrough-coda em { font-style: italic; }
@media (max-width: 720px) {
  .walkthrough-coda { font-size: 14.5px; padding: 12px 14px; }
}

/* Image label badges — colored chips inside .panel-image-label that
   make the ACTUAL vs MANUFACTURED distinction unmissable on the
   bookshelf comparison row. */
.label-badge {
  display: inline-block;
  padding: 2px 8px 3px;
  margin-right: 8px;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  vertical-align: 1px;
  color: #fff;
  border: 0;
  text-decoration: none;
  /* Prevent the parent <a>'s gold underline from running under the badge */
  border-bottom: 0;
}
.label-badge--actual { background: #1F5B3E; }
.label-badge--manufactured { background: #6B1F2D; }

/* Inline thumbnail beneath a bullet's text — used when a bullet has its
   own piece of visual evidence. Renders as a centered, compact frame
   with the same hover + click-to-enlarge cue as panel-image-frame--thumb. */
.panel-bullet-thumb {
  margin: 10px 0 4px;
  text-align: left;
}
.panel-bullet-thumb .panel-image-frame {
  margin: 0;
}
.panel-bullet-thumb .panel-image-frame img {
  max-height: 200px;
  width: auto;
}

/* Side-by-side variant — a bullet can declare an images[] array to render
   two (or more) thumbnails as a horizontal pair beneath the bullet text.
   Used (e.g.) for the "photographed under the desk / on the desk" beat
   where the two shots only make sense compared. */
.panel-bullet-thumb--row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.panel-bullet-thumb-cell {
  flex: 1 1 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.panel-bullet-thumb-cell .panel-image-frame {
  margin: 0;
  width: 100%;
}
.panel-bullet-thumb-cell .panel-image-frame img {
  max-height: 200px;
  width: 100%;
  object-fit: cover;
}
.panel-bullet-thumb-label {
  margin-top: 6px;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft, #4A5568);
  letter-spacing: 0.02em;
}
@media (max-width: 540px) {
  .panel-bullet-thumb--row { gap: 8px; }
  .panel-bullet-thumb-cell { min-width: 120px; }
}

/* Obvious-link variant used inside bullets when the link is a key CTA
   (e.g. cross-tab links to the no-interstate-commerce proofs). Renders
   as a tinted pill-style link rather than a plain anchor so the eye
   catches it. */
.panel-bullet-link {
  display: inline-block;
  margin: 6px 0 0;
  padding: 6px 12px 7px;
  background: rgba(196, 162, 76, 0.10);
  border: 1px solid rgba(196, 162, 76, 0.55);
  border-radius: 3px;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy, #0B1A2E);
  text-decoration: none;
  letter-spacing: 0.01em;
  line-height: 1.35;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.panel-bullet-link:hover {
  background: var(--gold, #C4A24C);
  border-color: var(--gold, #C4A24C);
  color: #fff;
}
.panel-bullet-link + .panel-bullet-link {
  margin-top: 6px;
}

/* ==========================================================
   PANEL LOGIC CHAIN — inline collapsible used inside Core Clue
   panels to hide a JFK-Costner-style step-by-step walk-through
   behind a single click. Surface stays clean for casual readers;
   engaged readers expand to see the reasoning chain.
   ========================================================== */
.panel-logic-chain {
  margin: 6px 0 14px;
  border: 1px solid var(--border-warm, #E6DCC6);
  border-left: 3px solid var(--gold, #C4A24C);
  border-radius: 4px;
  background: #FBF8F0;
}
.panel-logic-chain > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy, #0B1A2E);
  transition: background .15s ease;
}
.panel-logic-chain > summary::-webkit-details-marker { display: none; }
.panel-logic-chain > summary::marker { content: ''; }
.panel-logic-chain > summary:hover { background: rgba(196, 162, 76, 0.08); }
.panel-logic-chain-summary { flex: 1; }
.panel-logic-chain-chevron {
  font-size: 14px;
  color: var(--gold, #C4A24C);
  transition: transform .2s ease;
}
.panel-logic-chain[open] > summary > .panel-logic-chain-chevron {
  transform: rotate(180deg);
}
.panel-logic-chain-body {
  padding: 4px 18px 14px;
  border-top: 1px solid var(--border-warm, #E6DCC6);
  font-family: var(--serif, Georgia, serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text, #2A3344);
}
.panel-logic-chain-body p { margin: 12px 0; }
.panel-logic-chain-body strong { color: var(--navy, #0B1A2E); font-weight: 600; }
.panel-logic-chain-body em { font-style: italic; }
.panel-logic-chain-body ol,
.panel-logic-chain-body ul {
  margin: 10px 0 12px;
  padding-left: 22px;
}
.panel-logic-chain-body li { margin: 6px 0; }
.panel-logic-chain-body .logic-chain-conclusion {
  margin: 14px 0 4px;
  padding: 10px 14px;
  background: #FFFFFF;
  border-left: 3px solid #6B1F2D;
  border-radius: 0 3px 3px 0;
  font-weight: 600;
  color: var(--navy, #0B1A2E);
}
@media (max-width: 720px) {
  .panel-logic-chain > summary { padding: 9px 12px; font-size: 12.5px; }
  .panel-logic-chain-body { padding: 4px 14px 12px; font-size: 14px; }
}

/* ==========================================================
   PANEL LOGIC SECTION — the "always-open" sibling of the
   logic-chain disclosure. Used when the inference should
   always be on screen. Deliberately minimal chrome: small
   label heading + body, no border box, no toggle.
   ========================================================== */
.panel-logic-section {
  margin: 14px 0 16px;
  padding: 0;
}
.panel-logic-section-heading {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #C4A24C);
}
.panel-logic-section-body {
  padding: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text, #2A3344);
}
.panel-logic-section-body p { margin: 0 0 10px; }
.panel-logic-section-body p:last-child { margin-bottom: 0; }
.panel-logic-section-body strong { color: var(--navy, #0B1A2E); font-weight: 600; }
.panel-logic-section-body em { font-style: italic; }
.panel-logic-section-body ol,
.panel-logic-section-body ul {
  margin: 8px 0 10px;
  padding-left: 22px;
}
.panel-logic-section-body li { margin: 4px 0; }
.panel-logic-section-body .logic-chain-conclusion {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #FBF8F0;
  border-left: 3px solid #6B1F2D;
  border-radius: 0 3px 3px 0;
  font-weight: 600;
  color: var(--navy, #0B1A2E);
}
@media (max-width: 720px) {
  .panel-logic-section-heading { font-size: 11.5px; }
  .panel-logic-section-body { font-size: 14px; }
}

/* ==========================================================
   PANEL EXPANDABLE — neutral "show more" disclosure for
   secondary context. Lighter visual weight than the
   logic-chain so it reads as "additional context" rather
   than "the inference."
   ========================================================== */
.panel-expandable {
  margin: 4px 0 14px;
  border: 1px solid var(--border-warm, #E6DCC6);
  border-radius: 4px;
  background: #FAFAF6;
}
.panel-expandable > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy, #0B1A2E);
  transition: background .15s ease;
}
.panel-expandable > summary::-webkit-details-marker { display: none; }
.panel-expandable > summary::marker { content: ''; }
.panel-expandable > summary:hover { background: rgba(11, 26, 46, 0.04); }
.panel-expandable-summary { flex: 1; }
.panel-expandable-chevron {
  font-size: 13px;
  color: var(--text-mute, #6B7280);
  transition: transform .2s ease;
}
.panel-expandable[open] > summary > .panel-expandable-chevron {
  transform: rotate(180deg);
}
.panel-expandable-body {
  padding: 6px 16px 12px;
  border-top: 1px solid var(--border-warm, #E6DCC6);
}

/* ==========================================================
   PANEL IMAGES-AFTER LEAD — small italic intro paragraph
   that sits just above an `imagesAfter` image row. Used to
   attribute DeNardo / Bowling expert-conclusion screenshots.
   ========================================================== */
.panel-images-after-lead {
  margin: 14px 0 6px;
  font-family: var(--serif, Georgia, serif);
  font-size: 13.5px;
  font-style: italic;
  font-weight: 600;
  color: var(--text-soft, #4A5568);
  letter-spacing: 0.01em;
}

.panel-followup {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--beige-bg, #F4EDDD);
  border-left: 2px solid var(--border-strong, #D6CBB2);
  font-family: var(--serif, Georgia, serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft, #4A5568);
}
.panel-followup strong { color: var(--navy, #0B1A2E); font-weight: 600; }
.panel-followup a {
  color: var(--navy, #0B1A2E);
  border-bottom: 1px solid var(--gold, #C4A24C);
  text-decoration: none;
  transition: color .15s;
}
.panel-followup a:hover { color: var(--gold, #C4A24C); }

/* Source link — friendly, in-prose styling instead of uppercase chip. */
.panel-source-link {
  display: inline-block;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy, #0B1A2E);
  border-bottom: 1px solid var(--gold, #C4A24C);
  padding-bottom: 1px;
  text-decoration: none;
  transition: color .15s;
}
.panel-source-link:hover { color: var(--gold, #C4A24C); }

/* Source note — a small italic clarification rendered directly
   beneath the source link. Used to add a quick footnote like
   "Note: this assertion comes from the X affidavit". */
.panel-source-note {
  margin: 10px 0 0;
  padding: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft, #4A5568);
  font-style: italic;
}
.panel-source-note strong {
  font-weight: 600;
  color: var(--navy, #0B1A2E);
  font-style: normal;
}
.panel-source-note em { font-style: italic; }

/* Closer question — override the small-sans footer style for a
   punch-line that closes the walkthrough. */
#walkthrough-drawer .proof-drawer-footer#walkthrough-drawer-closer {
  margin: 28px 0 0;
  padding: 18px 18px 0;
  border-top: 1px solid var(--border-warm, #E6DCC6);
  font-family: var(--serif, Georgia, serif);
  font-size: 17.5px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.55;
  color: var(--navy, #0B1A2E);
}
#walkthrough-drawer .proof-drawer-footer#walkthrough-drawer-closer::before {
  content: "Question to consider";
  display: block;
  margin-bottom: 6px;
  padding-bottom: 0;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute, #6B7280);
  font-style: normal;
}
#walkthrough-drawer .proof-drawer-footer#walkthrough-drawer-closer em {
  font-style: italic;
}

/* ==========================================================
   SECTION HEADING — sub-title between the verification block
   and the first numbered panel. Used when the drawer's title
   names the finding and the sub-section names the specific
   question being walked through (e.g. "Where did the books
   come from?" under "FBI Agents Created Evidence Scenes").
   ========================================================== */
.walkthrough-section-heading {
  margin: 4px 0 18px;
  padding: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--navy, #0B1A2E);
}
.walkthrough-section-heading[hidden] { display: none; }
@media (max-width: 720px) {
  .walkthrough-section-heading { font-size: 19px; }
}

/* ==========================================================
   VERIFICATION BLOCK — sits at the top of the drawer body
   between the intro and the first panel. Same visual language
   as the downloads block at the bottom of the drawer, so the
   reader recognizes "these are sources you can open."
   ========================================================== */
.walkthrough-verify {
  margin: 0 0 22px;
  padding: 16px 18px 16px;
  background: var(--beige-bg, #F4EDDD);
  border-left: 2px solid var(--gold, #C4A24C);
  border-radius: 0 2px 2px 0;
}
.walkthrough-verify[hidden] { display: none; }

/* Legacy eyebrow + link-list rendering (kept for backward compat). */
.walkthrough-verify-section { margin-top: 14px; }
.walkthrough-verify-section:first-child { margin-top: 0; }
.walkthrough-verify-heading {
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute, #6B7280);
  margin-bottom: 10px;
}
.walkthrough-verify-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.walkthrough-verify-list a {
  display: inline-block;
  align-self: flex-start;
  padding-bottom: 2px;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--navy, #0B1A2E);
  border-bottom: 2px solid var(--gold, #C4A24C);
  text-decoration: none;
  transition: color .15s;
  line-height: 1.45;
}
.walkthrough-verify-list a:hover { color: var(--gold, #C4A24C); }
.walkthrough-verify-list a strong { font-weight: 700; }

/* New prose verification rendering — the verification line reads as a
   real sentence with inline links to the experts. The "follow along"
   line below is smaller, italic, and subordinate so the hierarchy is
   unmissable: this was verified > you can also check it yourself. */
.walkthrough-verify-prose {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy, #0B1A2E);
}
.walkthrough-verify-prose strong { font-weight: 700; }
.walkthrough-verify-prose a {
  color: var(--navy, #0B1A2E);
  font-weight: 600;
  border-bottom: 2px solid var(--gold, #C4A24C);
  text-decoration: none;
  padding-bottom: 1px;
  transition: color .15s;
}
.walkthrough-verify-prose a:hover { color: var(--gold, #C4A24C); }
.walkthrough-verify-secondary {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(11, 26, 46, 0.10);
  font-family: var(--serif, Georgia, serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft, #4A5568);
  font-style: italic;
}
.walkthrough-verify-secondary a {
  color: var(--navy, #0B1A2E);
  font-weight: 500;
  font-style: normal;
  border-bottom: 1px solid var(--gold, #C4A24C);
  text-decoration: none;
  padding-bottom: 1px;
  transition: color .15s;
}
.walkthrough-verify-secondary a:hover { color: var(--gold, #C4A24C); }
@media (max-width: 720px) {
  .walkthrough-verify { padding: 14px 14px; }
  .walkthrough-verify-list a { font-size: 13.5px; }
  .walkthrough-verify-prose { font-size: 15px; }
  .walkthrough-verify-secondary { font-size: 13px; }
}

/* ==========================================================
   COMPACT IMAGES MODE — opt-in via data.compactImages.
   Shrinks main visuals (~22%) so the panels feel tighter and
   the eye stays in the reading column. Toggled by JS via the
   .walkthrough-drawer--compact-images class on the drawer
   root. Used by the 'scenes' walkthrough.
   ========================================================== */
.walkthrough-drawer--compact-images .panel-image-frame {
  max-width: 78%;
  margin-left: auto;
  margin-right: auto;
}
/* Stacked image rows (e.g. before/after pairs) — re-apply the
   centered margin since the base rule zeroes it. */
.walkthrough-drawer--compact-images .panel-images .panel-image-frame {
  margin-left: auto;
  margin-right: auto;
}
/* Don't shrink the thumb variant — already small. */
.walkthrough-drawer--compact-images .panel-image-frame--thumb {
  max-width: 100%;
}
/* Video panels shrink to match the still-image scale. */
.walkthrough-drawer--compact-images .panel-video {
  max-width: 78%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 720px) {
  /* On narrow screens, let images use the full column for legibility. */
  .walkthrough-drawer--compact-images .panel-image-frame,
  .walkthrough-drawer--compact-images .panel-images .panel-image-frame,
  .walkthrough-drawer--compact-images .panel-video {
    max-width: 100%;
  }
}

/* ==========================================================
   LEAN MODE — opt-in via data.lean.
   Strips boxed treatments off punch, followup, and logic-chain
   conclusion; hides the gold uppercase logic-chain heading.
   Used by the 'prescripted' walkthrough to reduce visual
   complexity from stacked container shapes.
   ========================================================== */
.walkthrough-drawer--lean .panel-logic-section-heading {
  display: none;
}
.walkthrough-drawer--lean .panel-logic-section {
  margin: 14px 0 16px;
}
.walkthrough-drawer--lean .panel-logic-section-body .logic-chain-conclusion {
  margin: 14px 0 0;
  padding: 0;
  background: transparent;
  border-left: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy, #0B1A2E);
}
.walkthrough-drawer--lean .panel-punch {
  margin: 14px 0 4px;
  padding: 0;
  background: transparent;
  border-left: 0;
  border-radius: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--navy, #0B1A2E);
}
.walkthrough-drawer--lean .panel-punch strong {
  font-weight: 700;
}
.walkthrough-drawer--lean .panel-followup {
  margin: 12px 0 4px;
  padding: 0;
  background: transparent;
  border-left: 0;
  font-style: italic;
  color: var(--text-soft, #4A5568);
}
/* Side-by-side comparison block used inside captions. */
.walkthrough-drawer--lean .lean-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0 4px;
  padding: 14px 16px;
  background: #FAFAF6;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 3px;
}
.walkthrough-drawer--lean .lean-compare-col-label {
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #C4A24C);
  margin-bottom: 8px;
}
.walkthrough-drawer--lean .lean-compare-rows {
  font-family: var(--serif, Georgia, serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text, #2A3344);
}
.walkthrough-drawer--lean .lean-compare-rows > div {
  margin-bottom: 4px;
}
.walkthrough-drawer--lean .lean-compare-rows > div:last-child {
  margin-bottom: 0;
}
.walkthrough-drawer--lean .lean-strike {
  color: #6B1F2D;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  margin-left: 4px;
}
@media (max-width: 720px) {
  .walkthrough-drawer--lean .lean-compare {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ==========================================================
   SECONDARY EXAMPLE — collapsed <details> block beneath the
   main panels. Used by the scenes walkthrough to demote the
   Sony Cybershot example into a supporting second instance
   without it competing with the books storyline.
   ========================================================== */
.walkthrough-secondary {
  margin: 32px 0 12px;
  border: 1px solid var(--border-warm, #E6DCC6);
  border-radius: 5px;
  background: #FAFAF6;
  box-shadow: 0 1px 3px rgba(11, 26, 46, 0.06);
}
.walkthrough-secondary > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px 19px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 16px;
  transition: background .15s ease;
}
.walkthrough-secondary > summary::-webkit-details-marker { display: none; }
.walkthrough-secondary > summary::marker { content: ''; }
.walkthrough-secondary > summary:hover { background: rgba(196, 162, 76, 0.08); }
.walkthrough-secondary-label {
  grid-column: 1 / -1;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold, #C4A24C);
}
.walkthrough-secondary-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy, #0B1A2E);
}
.walkthrough-secondary-chevron {
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 16px;
  color: var(--text-mute, #6B7280);
  transition: transform .2s ease;
  align-self: center;
}
.walkthrough-secondary[open] > summary > .walkthrough-secondary-chevron {
  transform: rotate(180deg);
}
.walkthrough-secondary-body {
  padding: 0 18px 6px;
  border-top: 1px solid var(--border-warm, #E6DCC6);
}
.walkthrough-secondary-intro {
  font-family: var(--serif, Georgia, serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text, #2A3344);
  margin: 16px 0 0;
}
.walkthrough-secondary-intro strong { font-weight: 600; color: var(--navy, #0B1A2E); }
.walkthrough-secondary-intro em { font-style: italic; }
.walkthrough-secondary-panels {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: panel;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.walkthrough-secondary-panels .proof-panel:last-child {
  border-bottom: 0;
  padding-bottom: 8px;
}
@media (max-width: 720px) {
  .walkthrough-secondary > summary { padding: 12px 14px; }
  .walkthrough-secondary-title { font-size: 16px; }
  .walkthrough-secondary-body { padding: 0 14px 4px; }
}

/* Downloads block — appears under the closer for walkthroughs that ship
   supporting record copies (e.g. notarized PDFs for Ghana). */
.walkthrough-downloads {
  margin: 22px 0 0;
  padding: 18px 18px 4px;
  border-top: 1px solid var(--border-warm, #E6DCC6);
}
.walkthrough-downloads[hidden] { display: none; }
.walkthrough-downloads-heading {
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute, #6B7280);
  margin-bottom: 12px;
}
.walkthrough-downloads-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.walkthrough-downloads-list a {
  display: inline-block;
  padding-bottom: 2px;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy, #0B1A2E);
  border-bottom: 2px solid var(--gold, #C4A24C);
  text-decoration: none;
  transition: color .15s;
}
.walkthrough-downloads-list a:hover { color: var(--gold, #C4A24C); }

@media (max-width: 720px) {
  #walkthrough-drawer .proof-drawer-panel { width: 100vw; }
  .proof-panel { padding: 22px 0 26px; }
  .panel-heading { font-size: 17px; gap: 8px; }
  .panel-num { min-width: 22px; }
  .panel-caption { font-size: 14.5px; }
  .panel-bullets { font-size: 15px; padding-left: 20px; }
  .walkthrough-downloads { padding: 16px 0 4px; }
  .walkthrough-downloads-list a { font-size: 14px; }
}

/* ==========================================================
   PREFACE CARD — optional setup-context wrapper around the
   intro paragraph. Activated when a finding's data sets
   prefaceLabel (e.g. "Why this matters"). Reuses the card
   vocabulary: white frame, 3px gold left rule, beige hairline,
   soft shadow, beige uppercase chip badge.
   ========================================================== */
.proof-drawer-intro.proof-drawer-intro--card {
  display: block;
  background: #fff;
  border: 1px solid var(--border-warm, #E6DCC6);
  border-left: 3px solid var(--gold, #C4A24C);
  border-radius: 3px;
  padding: 18px 22px 18px;
  margin: 4px 0 18px;
  box-shadow: 0 1px 2px rgba(11, 26, 46, 0.04);
}
.proof-drawer-intro-chip {
  display: inline-block;
  margin: 0 0 12px;
  padding: 3px 9px 4px;
  background: var(--beige-bg, #F4EDDD);
  border: 1px solid var(--border-strong, #D6CBB2);
  border-radius: 2px;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy, #0B1A2E);
}
.proof-drawer-intro-body {
  display: block;
  font-family: var(--serif, Georgia, serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text, #2A3344);
}
.proof-drawer-intro-body strong { font-weight: 600; color: var(--navy, #0B1A2E); }
.proof-drawer-intro-body em { font-style: italic; }
@media (max-width: 720px) {
  .proof-drawer-intro.proof-drawer-intro--card {
    padding: 14px 16px 15px;
  }
  .proof-drawer-intro-body { font-size: 14.5px; }
}

/* ==========================================================
   CARD-STYLE OVERRIDE
   ----------------------------------------------------------
   Applies the .proof-card vocabulary from evidence-drawer.css
   (also used by sealed-leak-drawer.css) to the walkthrough
   panels so every finding's drawer renders in the same
   card-with-chip family as the Core Finding and the Finding 1
   (sealed leak) drawers.

   - Each .proof-panel becomes a white card with a gold
     left-rule and soft shadow.
   - .panel-heading becomes a vertical stack: a beige chip
     containing the panel number ("1)" / "2)" / etc.) sitting
     above a serif card title.
   - .panel-bullets pick up gold ::marker dots.

   Reuses existing tokens for callouts, quotes, punches,
   followups, source links, sequence rows, etc. — no rewrite
   of those.

   To revert: delete this section (everything below this
   comment).
   ========================================================== */

/* Panel list = stacked cards with even spacing. */
.proof-panels {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  margin: 4px 0 4px;
  padding: 0;
  counter-reset: panel;
}

/* Each panel = card frame: white bg, gold left bar, beige hairline,
   soft shadow. Drops the bottom-rule row separator from the original
   row-based layout. */
.proof-panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-warm, #E6DCC6);
  border-left: 3px solid var(--gold, #C4A24C);
  border-radius: 3px;
  padding: 20px 22px 18px;
  box-shadow: 0 1px 2px rgba(11, 26, 46, 0.04);
  counter-increment: panel;
}
/* Override the original :last-child rule that zeroed the bottom
   border and cut bottom padding (designed for the row-rule layout). */
.proof-panel:last-child {
  border-bottom: 1px solid var(--border-warm, #E6DCC6);
  padding-bottom: 18px;
}

/* Heading area = horizontal row with the panel numeral inline
   before the serif title. No chip — the Core Finding's chip slot
   is reserved for categorical labels ("THE ALLEGATION" etc.), not
   panel numbers. The number reads as a quiet gold serif prefix. */
.panel-heading {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
}

/* Panel number ("1." / "2.") — inline gold serif numeral that
   matches the Core Finding's gold accent without competing with
   the title. */
.panel-num {
  flex-shrink: 0;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold, #C4A24C);
}

/* Title text — serif card title style, takes remaining row width
   so long titles wrap inside the card instead of overflowing. */
.panel-heading-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--navy, #0B1A2E);
}

/* Bullets — gold disc markers to match .proof-card-bullets. */
.panel-bullets > li::marker { color: var(--gold, #C4A24C); }

/* Secondary-example panels (e.g. Finding 3's "Pattern evidence",
   Finding 4's "Supporting example") render through the same .proof-panel
   class but are wrapped in .walkthrough-secondary-panels — keep them
   as cards too. The earlier rule that zeroed their last-child bottom
   border was for the row-rule layout, so neutralize it. */
.walkthrough-secondary-panels .proof-panel:last-child {
  border-bottom: 1px solid var(--border-warm, #E6DCC6);
  padding-bottom: 18px;
}

/* Mobile: keep the card frame on small screens; tighten padding
   and the numeral-to-title gap. Heading stays inline-row so the
   numeral sits at the start of the title line. */
@media (max-width: 720px) {
  .proof-panel {
    padding: 16px 16px 15px;
  }
  .panel-heading {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }
  .panel-num {
    font-size: 17px;
  }
  .panel-heading-text {
    font-size: 17px;
  }
}