/* ═══════════════════════════════════════════════════════════════
   BREAKDOWNS — section 03, rebuilt to the 17 Aug brief

   Goal: prove volume + show one real finding. Not a study tool.
   Five cards, one breakdown per card, single 01/05 pager. Each card
   is a ref bar, four tabs (Hook / Sub-segment / Belief shift /
   Delivery — Hook active by default), a timestamp → claim → reason
   panel, a playable 126px video, and one bottom-left CTA to Notion.

   GRADIENT / ACCENT BUDGET: purple appears in exactly three places —
   the section index badge, the progress fill, and the active tab.
   Nowhere else in the section.
   ═══════════════════════════════════════════════════════════════ */

/* Scoped down from the sitewide 42/660 heading scale — the rebuild
   brief's type table calls for 28/500 here specifically. Scoped to
   #breakdowns so every other section's heading is untouched. */
#breakdowns .section__heading {
  font-size: 28px;
  font-weight: 500;
}

.bkdn__sub { margin-top: var(--sp-3); }

/* ── COUNTER — 98 / 200, right-aligned in the section head ──────
   The number rides in the head row itself; the bar sits directly
   under the whole head, full width, before the intro copy. Flat
   brand solid, not the gradient — see the accent-budget note above. */

.section__head:has(.bkdn-counter__num) { flex-wrap: wrap; }

.bkdn-counter__num {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.bkdn-counter__track {
  width: 100%;
  height: 6px;
  margin-top: var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  box-shadow: var(--e-sunken);
  overflow: hidden;
}

.bkdn-counter__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brand-indigo);
  transition: width var(--dur-slow) var(--ease);
}

/* ── RAIL CONTROLS — single 01/05 pager, above the rail track ───
   Not the section head: that slot belongs to the 98/200 progress
   counter. Sits between the intro copy and the rail itself, so it
   reads as "position within these five" rather than a second global
   counter. */

.bkdn-rail__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.bkdn-rail__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--e1);
  transition: color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}

.bkdn-rail__btn svg { width: 18px; height: 18px; }

.bkdn-rail__btn:hover {
  color: var(--text-primary);
  box-shadow: var(--e2);
}

.bkdn-rail__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  text-align: center;
}

/* ── RAIL — horizontal scroll-snap, one card per snap point ─────
   The 40px peek is the load-bearing detail: a flush final card reads
   as "here are five breakdowns", and this section only works if it
   reads as "here are five of ninety-eight". Hence no right padding
   on the track, ever.

   Vertical padding is not cosmetic — `overflow-x: auto` forces
   `overflow-y` to auto too, which would otherwise crop the cards'
   drop shadows and trip a phantom vertical scrollbar. The negative
   margins take the visual space back. */

.bkdn-rail { position: relative; margin-top: var(--sp-3); }

/* ── OVERLAY ARROW — the control people actually notice ──────────
   Pinned to the rail's own edge, vertically centered on whichever
   card is showing, roughly at the seam between the analysis column
   and the player. It sits on TOP of the track and stays still while
   the track scrolls underneath it, so it always reads as "advance"
   rather than belonging to one specific card. Loops: past the last
   card it goes back to the first (see wireBreakdownRail). Hidden on
   touch below 680px — swipe is the natural control there, same
   reasoning as the header arrows going away at that breakpoint. */

.bkdn-rail__overlay {
  position: absolute;
  top: 50%;
  /* Centred on the seam between the analysis column and the player:
     40px card peek + 24px card padding + 240px player column. */
  right: 304px;
  transform: translate(50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--brand-indigo);
  color: var(--text-on-brand);
  cursor: pointer;
  box-shadow: var(--e2);
  transition: background var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.bkdn-rail__overlay svg { width: 20px; height: 20px; }

.bkdn-rail__overlay:hover {
  background: var(--brand-deep);
  transform: translate(50%, -50%) scale(1.05);
}

.bkdn-rail__track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: 6px 14px;
  margin-block: -6px -14px;

  /* Native swipe and trackpad scrolling stay untouched — this only
     removes the bar itself. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bkdn-rail__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bkdn-rail__track { scroll-behavior: auto; }
}

/* ── CARD ───────────────────────────────────────────────────────
   Standard 3D block recipe (design-rules §3). Deliberately no hover
   lift and no gradient top edge: these are panels the reader parks
   on, not tiles they pick between, and a panel that moves under the
   cursor while you're reading one finding is just noise. The rail
   already tells you there are more. */

.bkdn {
  flex: 0 0 auto;
  width: calc(100% - 40px);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-color: var(--border-bottom);
  box-shadow: var(--e2), var(--highlight-top);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}

/* ── REF BAR — ref left, Facebook + Notion logo pills right ──────
   First row inside the analysis column, not above the grid, so the
   player column beside it stretches to cover this row too — see
   .bkdn__grid. */

.bkdn__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.bkdn__ref {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.bkdn__ref-num { color: var(--text-secondary); font-weight: 600; }
.bkdn__ref-sep { color: var(--text-faint); margin: 0 4px; }

.bkdn__bar-links {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Distinct component, not a `.pill--*` variant — design-rules §4
   fixes the pill set at five and every one of them means a status or
   a piece of metadata. These are branded outbound links, which is a
   different job, so they get their own class the way `.btn` does. */
.bkdn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px 10px 3px 3px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}

a.bkdn-link:hover {
  border-color: var(--brand-indigo);
  color: var(--brand-indigo);
}

/* Real brand PNGs, shown at natural colour and unaltered — no tint,
   no recolour, no crop beyond the square the source file already is. */
.bkdn-link__mark {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  object-fit: contain;
}

/* No URL yet. Stays visible so the layout is honest about what will
   be there, but reads as inert rather than as a dead link. */
.bkdn-link.is-empty { opacity: 0.45; }

/* ── GRID — analysis carries the column, poster is fixed ─────────
   minmax(0,1fr) rather than 1fr: without the explicit zero minimum,
   a long unbroken string in any field sets the column's floor and
   pushes the 126px poster off the card. */

.bkdn__grid {
  display: grid;
  gap: 20px;
  /* stretch, not start — the player fills the row's full height,
     matched against the bar + tabs + panel + CTA stack beside it
     (the bar lives inside .bkdn__analysis for exactly this reason),
     rather than sitting at its own fixed aspect ratio in the corner. */
  align-items: stretch;
}

@media (min-width: 680px) {
  .bkdn__grid { grid-template-columns: minmax(0, 1fr) 240px; }
}

.bkdn__analysis {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ── TABS — Hook · Sub-segment · Belief shift · Delivery ─────────
   Underline style: a quiet row of labels, the active one picked out
   by a 2px purple rule and full-contrast text. This is the ONE place
   in the card the accent budget spends outside the section head. */

.bkdn-tabs {
  display: flex;
  gap: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.bkdn-tab {
  position: relative;
  padding: 0 0 var(--sp-2);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease);
}

.bkdn-tab:hover { color: var(--text-secondary); }

.bkdn-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand-indigo);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.bkdn-tab[aria-selected="true"] {
  color: var(--text-primary);
}

.bkdn-tab[aria-selected="true"]::after { opacity: 1; }

/* ── SUMMARY — the always-visible "what is this ad" line ─────────
   Sits between the ref bar and the tabs, so the four tabs read as a
   breakdown OF something rather than four disconnected findings.
   Sized down from the panel claim (15 vs 17) on purpose: the tabbed
   finding is still the thing you're meant to read, this only orients
   you before it. */

.bkdn__summary {
  margin: 0;
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 70ch;
}

/* ── PANEL — timestamp → claim → reason, nothing else ────────────
   Mono 10px timestamp, 17/500 claim, 14/400 secondary reason. Hard
   caps per the copy rules: claim ≤ 12 words, reason ≤ 18. */

.bkdn-panel__time {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.bkdn-panel__claim {
  margin: var(--sp-2) 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--text-primary);
  max-width: 60ch;
}

.bkdn-panel__reason {
  margin: var(--sp-2) 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  max-width: 60ch;
}

/* ── POINTS — the labelled beats inside a tab ────────────────────
   The winner log records four or five beats per tab (UMP 1, UMP 2,
   UMS, New belief), not a single claim, so a panel is a list. No
   bullet glyphs: the label already marks where each beat starts, and
   on the unlabelled tabs (Hook, Sub-segment) a hairline rule down the
   left does the same job more quietly than a column of dots.

   min-height on the wrapper, not the panel: tabs swap in place and
   panels differ by four lines or more between Hook and Belief shift,
   so without a floor the whole card — and the video beside it —
   jumps every time you change tab. */

.bkdn-panels { min-height: 250px; }

.bkdn-points {
  margin: 0;
  padding: 0 0 0 var(--sp-4);
  list-style: none;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 66ch;
}

.bkdn-point {
  font-size: 14px;
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

/* Mono and full-contrast so "UMP 2" reads as a tag on the sentence
   rather than the first two words of it. Inline, not stacked — these
   run short and a stacked label would double the panel's height. */
.bkdn-point__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin-right: var(--sp-2);
}

/* Unlabelled tabs (Hook, Sub-segment) are terse fragments, so they
   get the primary text colour — there's no label beside them to
   carry the contrast. */
.bkdn-point:not(:has(.bkdn-point__label)) { color: var(--text-primary); }

/* ── PLAYER COLUMN ────────────────────────────────────────────────
   240px wide, but no fixed aspect ratio — the player STRETCHES to
   fill the full height of the row (see .bkdn__grid's align-items:
   stretch above), matching whatever height the analysis column
   renders at instead of sitting undersized in the corner.
   object-fit: cover crops rather than distorts, so a tall, narrow
   row just shows more of the frame's vertical middle. Native
   controls, muted, never autoplaying: the ad is a citation of
   someone else's work, but the citation has to be checkable in
   place, which means it has to actually play. wireBreakdownVideos()
   keeps only one playing at a time. */

.bkdn__media {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--sp-2);
}

.bkdn__player {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  box-shadow: var(--e1);
}

.bkdn__player > * {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── MOBILE — player above the analysis ──────────────────────────
   Below 680px the grid is one column and the player leads: on a
   phone the ad is what orients you before the tabs. DOM order stays
   analysis-first so the reading order and the tab order still put
   the substance first. */

@media (max-width: 679px) {
  /* Arrows go — swipe is the only sensible control on a touch screen,
     and 36px squares crowd the row above the rail. The counter
     stays: it's the part that says how many there are. */
  .bkdn-rail__btn { display: none; }
  .bkdn-rail__num { min-width: 0; }
  .bkdn-rail__overlay { display: none; }

  .bkdn { width: 88vw; padding: var(--sp-4); }
  /* No stretched grid row to fill on a single column, so the player
     goes back to its own aspect ratio here rather than collapsing
     to zero height. */
  .bkdn__media { order: -1; height: auto; }
  .bkdn__player { width: 100%; max-width: 220px; flex: none; aspect-ratio: 9 / 16; }
}