/* Slide "How we make money" — revenue-mix donut. Displayed slide #8.
   Scoped entirely by class (.rev-*), NOT by [data-index], so it survives
   future slide renumbering. Built/animated by public/js/revenue-model.js. */
.rev{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center;
  padding-top: var(--pill-reserve); }
.rev-stage{ flex:1; width:100%; display:flex; align-items:center; justify-content:center; min-height:0; }
/* Size by the height budget (66vh) via the viewBox aspect 760/445≈1.708, capped by
   width. Deriving width from height (no separate max-height) avoids letterboxing —
   the SVG box matches the viewBox aspect, so the donut fills it with no empty bands. */
.rev-donut{ width:min(96vw, 1150px, calc(66vh * 1.708)); height:auto; overflow:visible; }
.rev-legend{ display:none; list-style:none; margin:0; padding:0; }

/* ---- Mobile reflow (body.deck-mobile) ----
   The four SVG callout boxes can't legibly flank the donut on phones/tablets,
   so on mobile we hide them + the leader lines (keeping ring, dots, centre)
   and crop the SVG viewBox to the donut's bounding box (set in JS by
   applyMode() — CSS can't set viewBox). The static HTML .rev-legend then
   shows as a 2x2 grid of cards below the now-centered donut. */
body.deck-mobile .rev-stage{ flex-direction:column; gap:14px; padding:0 12px; }
body.deck-mobile .rev-donut{ width:min(82vw, 340px); max-height:46vh; }
/* Hide the desktop SVG callout boxes + leader lines (keep ring, dots, centre). */
body.deck-mobile .rev-box,
body.deck-mobile .rev-donut line{ display:none; }
/* Show the HTML legend as a 2x2 grid of cards. */
body.deck-mobile .rev-legend{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; max-width:420px; }
body.deck-mobile .rev-legend__item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:8px; row-gap:2px;
  background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:10px 12px;
  box-shadow:0 4px 11px rgba(0,3,18,0.4); }
body.deck-mobile .rev-legend__sw{ width:11px; height:11px; border-radius:3px; }
.rev-legend__item[data-key="subs"] .rev-legend__sw{ background:#0a64ff; }
.rev-legend__item[data-key="ads"]  .rev-legend__sw{ background:#4d8bff; }
.rev-legend__item[data-key="iap"]  .rev-legend__sw{ background:#86b0ff; }
.rev-legend__item[data-key="b2b"]  .rev-legend__sw{ background:#bbbbff; }
body.deck-mobile .rev-legend__name{ font-size:12.5px; font-weight:600; color:#f4f7fc; }
body.deck-mobile .rev-legend__pct{ font-size:15px; font-weight:800; color:#bbbbff; }