/* Slide "How we make money" — interactive revenue-mix donut (displayed slide #8).
   Class-scoped (.rev-*), never [data-index]. Built by public/js/revenue-model.js. */
.rev{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center;
  padding-top: var(--pill-reserve); }

/* 3-column stage: year picker (left) | donut (center) | legend (right). */
.rev-stage{ flex:1; width:100%; min-height:0; display:grid;
  grid-template-columns:minmax(220px,300px) auto minmax(220px,300px);
  align-items:center; justify-content:center; gap:clamp(14px,2vw,28px);
  max-width:min(1180px,94vw); margin:0 auto; padding:0 clamp(16px,2.5vw,32px); box-sizing:border-box; }

/* LEFT — year picker */
.rev-picker{ display:flex; flex-direction:column; gap:14px; }
.rev-picker__title{ font-size:clamp(11px,1vw,13px); font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent-soft); opacity:0.75; }
.rev-years{ display:flex; flex-direction:column; gap:12px; }
.rev-years__item{ font:inherit; font-size:clamp(13px,1.15vw,16px); font-weight:700; letter-spacing:0.03em;
  color:rgba(187,187,255,0.55); background:transparent; padding:11px 20px; border-radius:999px;
  border:1px solid rgba(187,187,255,0.22); cursor:pointer; text-align:center;
  transition:color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.rev-years__item:hover{ color:var(--lilac-bright); border-color:rgba(187,187,255,0.5); }
.rev-years__item:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.rev-years__item.is-on{ color:var(--deck-navy); background:linear-gradient(180deg,var(--lilac-bright),var(--indigo));
  border-color:transparent; box-shadow:0 0 18px rgba(123,97,255,0.5); }

/* CENTER — donut (capped diameter so panels can match it) */
.rev-donut{ width:clamp(300px,40vh,440px); height:auto; max-height:64vh; overflow:visible; justify-self:center; }

/* RIGHT — legend stack: swatch + name + sub-line + % */
.rev-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(12px,2vh,18px); }
.rev-legend__item{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:11px; row-gap:2px; }
.rev-legend__sw{ width:16px; height:16px; border-radius:4px; }
.rev-legend__item[data-key="subs"] .rev-legend__sw{ background:var(--accent); }
.rev-legend__item[data-key="ads"]  .rev-legend__sw{ background:var(--cyan); }
.rev-legend__item[data-key="iap"]  .rev-legend__sw{ background:var(--indigo); }
.rev-legend__name{ font-size:clamp(13px,1.2vw,16px); font-weight:600; color:var(--text); }
.rev-legend__pct{ font-size:clamp(16px,1.5vw,20px); font-weight:800; color:var(--accent-soft); letter-spacing:-0.02em; }

/* ---- Mobile reflow (body.deck-mobile): picker row on top, donut, 2x2 legend ---- */
body.deck-mobile .rev-stage{ display:flex; flex-direction:column; gap:14px; padding:0 12px; }
body.deck-mobile .rev-picker{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; width:100%; }
body.deck-mobile .rev-picker__title{ width:100%; text-align:center; }
body.deck-mobile .rev-years{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; }
body.deck-mobile .rev-years__item{ padding:6px 12px; }
body.deck-mobile .rev-donut{ width:min(82vw,340px); max-height:42vh; }
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{ 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); }
@media (max-height:680px){
  /* iphone-se (375x667) is the only matrix device this matches. The bound
     "subscription model" title (2026-06-11) runs an extra line here; trim the
     title + donut a touch so the legend clears the bottom dock (invariant I-4). */
  body.deck-mobile .rev-head .deck-slide-title{ font-size:25px; line-height:1.12; }
  body.deck-mobile .rev-stage{ gap:10px; }
  body.deck-mobile .rev-donut{ max-height:30vh; }
  body.deck-mobile .rev-legend__item{ padding:8px 12px; }
}