/* wire3-shared — components/speed-carousel.css
   "Speed is the spine" plan picker: a windowed card carousel + range slider. Behaviour:
   js/speed-carousel.js → SpeedCarousel.mount(rootEl, { tiers, defaultIndex, selectedIndex,
   onSelect }). NOTHING is selected on mount; an explicit pick marks the card .is-selected
   (blue border + green wash — overrides the popular tier's gradient ring). .is-active is
   carousel focus only. Each card carries the per-tier streaming-credit ribbon (with a
   MyBundle hover popover) + a Select-plan button; the popular tier gets a gradient border.
   Token-themed (outward tokens). OPT-IN: <link> this per page — it is NOT auto-imported by
   layouts/outward.css, because the sp-* classes are owned by this component and would
   collide with any app carrying its own copy. See blocks/ + templates/ for usage.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Stage + viewport (the windowed frame) ───────────────────────────────────
   The horizontal edge fade below is the LOAD default (left fade, right fully visible);
   speed-carousel.js then drives it per scroll position (a side fades only when a card is
   still hidden that way). The top/bottom fade dissolves the card shadow and is constant. */
.sp-stage { position:relative; margin:12px 0 0; }
.sp-viewport { overflow:hidden; padding:48px 0;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 2.5%, #000 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 4%, #000 95%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 2.5%, #000 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 4%, #000 95%, rgba(0,0,0,0) 100%);
          mask-composite:intersect; }
.sp-track { display:flex; gap:36px; will-change:transform; transition:transform .45s var(--ease); }

/* ── Card ────────────────────────────────────────────────────────────────── */
.sp-card { position:relative; isolation:isolate; flex:0 0 286px; box-sizing:border-box; background:var(--white); border:2px solid var(--grey-lt);
  border-radius:var(--radius); padding:26px 22px 28px; box-shadow:var(--shadow); cursor:pointer; text-align:left;
  opacity:.66; transform:scale(.92);
  transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .2s, box-shadow .3s; }
.sp-card:hover:not(.is-selected) { opacity:.86; border-color:var(--grey-mid); }
/* is-active = carousel FOCUS (the framed/centred card) — prominence only, no selection look. */
.sp-card.is-active { opacity:1; transform:scale(1.045); box-shadow:var(--shadow-lg); }
/* is-selected = the user's explicit pick. ONE selection signal everywhere: a blue border
   + a green wash. Overrides the popular gradient ring so selected always reads the same. */
.sp-card.is-selected { opacity:1; border-color:var(--blue);
  background:linear-gradient(180deg, #E2F2C4 0%, #F2F9E2 46%, var(--white) 100%); }
.sp-card:hover { z-index:10; }   /* lift the hovered card so its ribbon popover sits above neighbours */
@media (max-width:560px){ .sp-card{ flex-basis:250px; } }

/* Full-width gradient "pill" plan-name header — a slice of the global BLUE→GREEN speed
   ramp at this tier's position (bluer = slower); the inline gradient is set by the JS. */
.sp-name { display:block; text-align:center; color:#fff; font-family:var(--font-head); font-weight:800; font-size:.84em;
  letter-spacing:.09em; text-transform:uppercase; padding:8px 12px; border-radius:999px; margin-bottom:15px;
  box-shadow:0 2px 9px rgba(13,34,64,.16); }

/* "Most popular" badge — gradient pill straddling the top border, matching the shared
   "Our promise" feature flag (value-band .vi-flag). Pairs with .is-popular's border. */
.sp-pop-tag { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); white-space:nowrap; z-index:3;
  font-family:var(--font-head); font-weight:800; font-size:.62em; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg,var(--green) 0%,var(--blue) 100%);
  padding:5px 14px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.28); }
/* 2px gradient border stroke on the popular tier — same mask technique as the shared
   .vitem-feature::before. The card's own 2px border goes transparent; inset:-2px pushes the
   ring onto the border box so it sits flush at the true outer edge (no gap). On hover the
   ring fades so the hover border paints cleanly over it (see the windowed section), and on
   selection it yields entirely to the blue selected border — one consistent signal. */
.sp-card.is-popular { border-color:transparent; box-shadow:0 16px 40px rgba(13,34,64,.17); }
.sp-card.is-popular.is-selected { border-color:var(--blue); }
.sp-card.is-popular.is-selected::before { opacity:0; }
.sp-card.is-popular::before { content:""; position:absolute; inset:-2px; border-radius:var(--radius); padding:2px; pointer-events:none;
  background:linear-gradient(135deg,var(--green) 0%,var(--blue) 100%); transition:opacity .15s;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; }

.sp-row { display:flex; align-items:center; justify-content:center; gap:16px; margin:10px 0 14px; }
.sp-div { width:2px; align-self:stretch; background:var(--grey-lt); border-radius:1px; }
.sp-speed { display:flex; align-items:baseline; gap:7px; }
.sp-speed b { font-family:var(--font-head); font-weight:800; font-size:2.9em; line-height:.9; letter-spacing:-0.03em; }
.sp-speed span { font-family:var(--font-head); font-weight:700; font-size:1.05em; color:var(--grey-dk); }
.sp-price { display:flex; flex-direction:column; align-items:flex-start; font-family:var(--font-head); line-height:1; }
.sp-price .was { text-decoration:line-through; color:var(--grey-mid); font-weight:700; font-size:.95em; margin-bottom:3px; }
.sp-price .now { color:var(--navy); font-weight:800; font-size:1.6em; letter-spacing:-0.02em; }
.sp-price .now small { color:var(--grey-mid); font-weight:600; font-size:.55em; letter-spacing:0; }
.sp-blurb { color:var(--grey-dk); font-size:.92em; line-height:1.45; min-height:60px; margin-bottom:4px; }

/* "Select plan" affordance at the foot of every card; pushed to the card bottom so buttons
   share a baseline; flips to a filled "Selected" on the picked (.is-selected) card. */
.sp-select { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font-head); font-weight:800; font-size:.92em; letter-spacing:.01em;
  padding:11px 14px; border-radius:12px; border:1.5px solid var(--grey-lt); background:#fff; color:var(--navy);
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
.sp-select-on { display:none; align-items:center; gap:6px; }
.sp-select-on svg { width:15px; height:15px; }
.sp-card:hover .sp-select { border-color:var(--navy-mid); }
.sp-card.is-selected .sp-select { background:var(--green); border-color:var(--green); color:var(--navy); box-shadow:0 6px 16px rgba(125,196,0,.32); }
.sp-card.is-selected .sp-select-default { display:none; }
.sp-card.is-selected .sp-select-on { display:inline-flex; }

/* ── Streaming-credit ribbon — draped & wrapped across the card, beneath the blurb ──
   Honey-gold with a metallic satin finish: a luminance ripple WITHIN the gold hue
   (no hue shift — that read as loud) + a faint top sheen, so it suggests actual gold
   while staying quiet next to the page's navy/blue/green. Navy ink, a "LIMITED TIME"
   kicker. The band OVERHANGS both card edges (drape) and a darker triangle folds
   behind each end (wrap). Only rendered on tiers with a credit (plans.json promo). */
.sp-promo { position:relative; display:flex; flex-direction:column; align-items:center; gap:0;
  margin:6px -32px 10px; padding:4px 30px 5px; color:var(--navy);   /* -32 overhangs ~10px past the card border */
  background:
    linear-gradient(180deg, rgba(255,255,255,.23) 0%, rgba(255,255,255,0) 42%, rgba(122,86,18,.05) 100%),
    linear-gradient(105deg, #E8C04B 0%, #F8E48B 24%, #FAE99B 30%, #EBC555 52%, #E4B942 64%, #F4D975 80%, #E5BB47 100%);
  box-shadow:0 4px 11px rgba(13,34,64,.09),
    inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(122,86,18,.16); }
.sp-promo-kick { font-family:var(--font-head); font-weight:800; font-size:.58em; letter-spacing:.18em; text-transform:uppercase; opacity:.82; }
.sp-promo-amt { font-family:var(--font-head); font-weight:800; font-size:.86em; letter-spacing:.03em; text-transform:uppercase; line-height:1.04; }
.sp-promo-amt b { font-size:1.2em; }
/* Fold-back tails (CSS-Tricks pattern): the darker underside peeks from behind each end. */
.sp-promo::before, .sp-promo::after { content:''; position:absolute; bottom:-7px; z-index:-1; border:5px solid #B99836; }
.sp-promo::before { left:0;  border-left-color:transparent;  border-bottom-color:transparent; }
.sp-promo::after  { right:0; border-right-color:transparent; border-bottom-color:transparent; }

/* Licensed streaming wordmarks, shown ON the card directly beneath the ribbon. The white tiles
   need a hairline border + soft shadow to read on the light card (border scoped here so the
   promo-page offer cards, which set their own .sp-svc border, are untouched). */
.sp-promo-svcs { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 16px; }
.sp-promo-svcs .sp-svc { border:1px solid var(--grey-lt); box-shadow:0 1px 2px rgba(13,34,64,.06); }
.sp-svc { background:#fff; border-radius:6px; padding:5px 7px; font-family:var(--font-head); font-weight:800; font-size:.72em; line-height:1; letter-spacing:-.01em; white-space:nowrap; }
.sp-svc.netflix { color:#E50914; letter-spacing:.02em; }
.sp-svc.disney  { color:#0063E5; }
.sp-svc.hbomax  { color:#0042C7; }
.sp-svc.hulu    { color:#13B866; }
.sp-svc.youtubetv { color:#FF0000; }

/* ── Arrows ──────────────────────────────────────────────────────────────── */
.sp-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--grey-lt); background:var(--white); color:var(--navy); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--shadow); transition:background .15s, color .15s, border-color .15s; }
.sp-arrow:hover:not(:disabled) { background:var(--navy); color:#fff; border-color:var(--navy); }
.sp-arrow:disabled { opacity:.3; cursor:default; }
.sp-arrow svg { width:22px; height:22px; }
.sp-arrow.prev { left:4px; } .sp-arrow.next { right:4px; }
.sp-arrow[hidden] { display:none; }
@media (max-width:560px){ .sp-arrow{ width:40px; height:40px; } .sp-arrow svg{ width:19px; height:19px; } }

/* ── Speed slider — permanent BLUE→GREEN ramp; thumb ring follows the ramp (--thumb) ──
   Seated in a subtle grey "well" (a touch darker than the page bg), snug beneath the cards.
   Ticks are absolutely positioned by the JS at each value's native thumb centre. */
.sp-slider { max-width:600px; margin:22px auto 0; padding:15px 22px 7px; background:var(--grey-lt); border-radius:16px; box-shadow:inset 0 1px 2px rgba(13,34,64,.05); }
.sp-range { -webkit-appearance:none; appearance:none; width:100%; height:9px; border-radius:6px;
  background:linear-gradient(90deg, #2E90E0 0%, #4FA83A 58%, #7DC400 100%); outline:none; cursor:pointer; }
.sp-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--white); border:3px solid var(--thumb, var(--blue)); box-shadow:var(--shadow); cursor:grab; transition:transform .12s, border-color .2s; }
.sp-range::-webkit-slider-thumb:active { transform:scale(1.12); cursor:grabbing; }
.sp-range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--white); border:3px solid var(--thumb, var(--blue));
  box-shadow:var(--shadow); cursor:grab; }
.sp-range:focus-visible { box-shadow:0 0 0 4px rgba(46,144,224,.22); }
.sp-ticks { position:relative; height:20px; margin-top:6px; }
.sp-tick { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; background:none; border:0;
  font-family:var(--font-head); font-weight:700; font-size:.84em; color:var(--grey-mid); cursor:pointer; padding:2px 2px; transition:color .15s; }
.sp-tick:hover { color:var(--navy-mid); }
.sp-tick.on { color:var(--navy); }

/* ── Windowed framing (the default mount mode) ───────────────────────────────
   ~3 co-equal cards in view (no spine scale/fade), the off-frame tier peeks, a single arrow
   per side that still hides a tier. Selection is shown on the card (blue border + green wash
   + Select→Selected button) + the slider, so the resting frame stays neutral. */
.sp-windowed .sp-viewport { padding:40px 0 30px; }     /* extra top room clears the "Most popular" badge */
.sp-windowed .sp-card { display:flex; flex-direction:column; opacity:1; transform:none;
  transition:opacity .25s, transform .18s, border-color .15s, box-shadow .15s; }
.sp-windowed .sp-card:hover:not(.is-selected) { opacity:1; border-color:var(--navy-mid); transform:translateY(-3px); box-shadow:0 10px 26px rgba(13,34,64,.12); }
.sp-card.is-popular:hover:not(.is-selected)::before { opacity:0; }   /* fade the gradient so the hover border shows over it */
.sp-windowed .sp-card.is-active { transform:none; box-shadow:var(--shadow); }   /* focus stays neutral; selection carries the look */
.sp-windowed .sp-card.is-peek:not(.is-active) { opacity:.88; }     /* the off-frame (clipped) tier stays clearly visible */

@media (max-width:560px){
  .sp-viewport { padding:24px 0; }
  .sp-slider { margin-top:16px; padding:13px 16px 7px; }
}