/* PodcastHub Design Lab · Add-ons v2 · two per line, video above (W2D, Rick, 2026-10-16)
   Tokens v0.2 only. The --local-* below are colour-mixes OF tokens (no new hex), listed in the W2D report.
   Logical properties throughout, so RTL mirrors the grid order, the steppers and the corner controls by itself. */
:root {
  --local-fill-deep: color-mix(in srgb, var(--primary-fill) 83%, var(--ph-ink));   /* the darker-downward stop (buttons rule 38) */
  --local-sel-glow: color-mix(in srgb, var(--primary) 45%, transparent);           /* rule 32: α .45 */
  --local-scrim: color-mix(in srgb, var(--ph-ink) 72%, transparent);               /* never-flip scrim under on-media text */
  --local-scrim-soft: color-mix(in srgb, var(--ph-ink) 50%, transparent);
  --local-on-media: var(--ph-white);                                               /* never-flip text on footage */
  --local-on-media-line: color-mix(in srgb, var(--ph-white) 22%, transparent);
  --local-glass: color-mix(in srgb, var(--surface) 70%, transparent);
  --local-glass-on: color-mix(in srgb, var(--surface) 88%, transparent);
  --local-blue-text: var(--info);   /* light #006BCB · dark Sky: primary-ink measured 4.33 on dark surfaces in B1 */
}
@media (max-width: 440px) { .options { padding-inline: 0; gap: 32px; } .option .label { padding-inline: 16px; } }
.option .label code { font-size: var(--fs-label); }

/* ── frame + head ── */
.option .frame.w2 { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.w2 p { margin: 0; }
.w2 .head { display: grid; gap: 4px; }
.w2 .eyebrow { font: 600 var(--fs-ui)/1.3 var(--font-body); color: var(--fg-muted); }
.w2 .h { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.w2 .sub { font-size: var(--fs-ui); line-height: 1.4; color: var(--fg-muted); margin-block-start: 2px; }

/* ── THE GRID: two cards per line at 390 (356 inner → 170 px cards, 16 px gutter) ── */
.w2 .grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.w2 .card { position: relative; min-inline-size: 0; padding: 0; display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); border: 0; isolation: isolate;
  transition: box-shadow var(--d-180) var(--ease-brand); }
/* the stroke lives on an overlay so it sits ABOVE the media (an inset shadow would be painted under it) */
.w2 .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; box-shadow: inset 0 0 0 1px var(--line-subtle); transition: box-shadow var(--d-180) var(--ease-brand); }
.w2 .card.is-on { box-shadow: var(--shadow-1), 0 0 12px var(--local-sel-glow); }
.w2 .card.is-on::after { box-shadow: inset 0 0 0 2px var(--primary); }

/* ── media canvas (video or still), always ABOVE the text ── */
.w2 .cv { position: relative; overflow: hidden; display: block; inline-size: 100%; border-radius: 20px 20px 0 0; background: var(--surface-sunken); border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: start; -webkit-tap-highlight-color: transparent; }
.w2 button.cv { cursor: pointer; }
.w2 .cv > video, .w2 .cv > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.w2 .cv:focus-visible { outline-offset: -3px; }
/* the media-state glyph: ▶ on a still, hidden while it plays (option 2 keeps a play/pause toggle visible) */
.w2 .gl { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 2; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--local-on-media); background: var(--local-scrim-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--local-on-media-line); transition: opacity var(--d-180), transform var(--d-180) var(--ease-brand); }
.w2 .gl svg { inline-size: 14px; block-size: 14px; }
.w2 .gl .i-pause { display: none; }
.w2 .cv.is-playing .gl { opacity: 0; transform: scale(.85); }
/* media glyphs (play/pause) never mirror in RTL: they describe time, not reading direction */

/* ── text on cards: everything ≥ 16 px ── */
.w2 .nm { font: 600 var(--fs-ui)/1.3 var(--font-body); color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.w2 .pr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 0; }
.w2 .amt { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--fg); direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.w2 .un { font: 400 var(--fs-ui)/1.3 var(--font-body); color: var(--fg-muted); white-space: nowrap; }
.w2 .ln { font: 600 var(--fs-ui)/1.3 var(--font-body); color: var(--local-blue-text); }   /* the line total once added */
.w2 .ln[hidden] { display: none; }

/* ═════════ shared control pieces ═════════ */
.qb { inline-size: var(--t-min); block-size: var(--t-min); flex: none; border: 0; padding: 0; margin: 0; border-radius: var(--r-pill); display: grid; place-items: center; background: transparent; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--d-180) var(--ease-brand), background-color var(--d-120), color var(--d-120), opacity var(--d-120); }
.qb svg { inline-size: 18px; block-size: 18px; }
.qb.is-pressed { transform: scale(.92); }
.qb[disabled] { opacity: .38; cursor: not-allowed; }
.qn { min-inline-size: 24px; text-align: center; font: 700 17px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.qn.bump, .hexb.bump { animation: w2-bump var(--d-260) var(--ease-brand); }
@keyframes w2-bump { 40% { transform: translateY(-2px) scale(1.16); } }
/* the round accent "+" disc (SigQty grammar: accent gradient, darker downward) */
.pl { inline-size: 36px; block-size: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--primary-on); background: linear-gradient(180deg, var(--primary-fill), var(--local-fill-deep)); box-shadow: 0 1px 0 color-mix(in srgb, var(--ph-white) 30%, transparent) inset, 0 4px 12px color-mix(in srgb, var(--primary-fill) 40%, transparent); }
.pl svg { inline-size: 18px; block-size: 18px; }

/* ── MORPH (wide): at 0 one bar «Add ……… (+)»; at ≥1 «−  n  (+)». The (+) disc keeps its exact spot. ── */
.mq { display: flex; align-items: center; block-size: var(--t-min); inline-size: 100%; border-radius: var(--r-pill); overflow: hidden;
  transition: background-color var(--d-180) var(--ease-brand), box-shadow var(--d-180) var(--ease-brand); }
.mq .ext { display: flex; align-items: center; flex: 0 1 auto; min-inline-size: 0; max-inline-size: 0; opacity: 0; overflow: hidden;
  transition: max-inline-size var(--d-180) var(--ease-brand), flex-grow var(--d-180) var(--ease-brand), opacity var(--d-120); }
.mq .ext .qn { flex: 1; }
.mq .inc { flex: 1 1 auto; inline-size: auto; min-inline-size: var(--t-min); display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-inline: 16px 4px; border-radius: var(--r-pill);
  transition: flex-grow var(--d-180) var(--ease-brand), padding var(--d-180) var(--ease-brand), transform var(--d-180) var(--ease-brand); }
.mq .w { font: 600 var(--fs-ui)/1.3 var(--font-body); white-space: nowrap; overflow: hidden; max-inline-size: 6em; transition: max-inline-size var(--d-180) var(--ease-brand), opacity var(--d-120); }
.mq.has-qty .ext { flex-grow: 1; max-inline-size: 240px; opacity: 1; }
.mq.has-qty .inc { flex: 0 0 var(--t-min); padding-inline: 0 4px; justify-content: flex-end; }
.mq.has-qty .w { max-inline-size: 0; opacity: 0; }
.mq .qw { font: 600 var(--fs-ui)/1 var(--font-body); white-space: nowrap; } /* "added" word (option 2) */
/* skin: tinted at 0, solid accent once added */
.mq { background: var(--primary-muted); color: var(--local-blue-text); }
.mq.has-qty { background: linear-gradient(180deg, var(--primary-fill), var(--local-fill-deep)); color: var(--primary-on); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary-fill) 60%, transparent); }
.mq.has-qty .pl { background: color-mix(in srgb, var(--ph-white) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ph-white) 30%, transparent); }

/* ═════════ O1 · MEDIA CARD + MORPH ═════════ */
.v1 .cv { aspect-ratio: 4 / 5; }
.v1 .ov { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; padding: 40px 12px 12px; display: grid; gap: 2px; color: var(--local-on-media); pointer-events: none; }
/* rule 8: a gradient-masked blur strip + a gradient scrim, not a flat dark band */
.v1 .ov::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--local-scrim) 0%, var(--local-scrim) 38%, transparent 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to top, var(--ph-ink) 55%, transparent); mask-image: linear-gradient(to top, var(--ph-ink) 55%, transparent); }
.v1 .ov .nm, .v1 .ov .amt { color: var(--local-on-media); }
.v1 .ok { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 2; inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--primary-on); background: var(--primary-fill); box-shadow: 0 0 0 2px var(--local-on-media); transform: scale(.5); opacity: 0; transition: transform var(--d-180) var(--ease-brand), opacity var(--d-120); }
.v1 .ok svg { inline-size: 16px; block-size: 16px; }
.v1 .is-on .ok { transform: scale(1); opacity: 1; }
.v1 .bd { padding: 10px 8px 8px; display: grid; gap: 8px; }
.v1 .bd .meta { padding-inline: 8px; min-block-size: 21px; }

/* ═════════ O2 · TALL POSTER ═════════ */
.v2 .cv { aspect-ratio: 3 / 4; }
.v2 .pp { position: absolute; inset-block-end: 8px; inset-inline-start: 8px; z-index: 2; padding: 6px 12px; border-radius: var(--r-pill); color: var(--local-on-media); background: var(--local-scrim); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--local-on-media-line); }
.v2 .pp .amt { color: var(--local-on-media); font-size: 16px; }
.v2 .gl { inset-inline-start: auto; inset-inline-end: 8px; inline-size: 36px; block-size: 36px; }
.v2 .cv.is-playing .gl { opacity: 1; transform: none; }
.v2 .cv.is-playing .gl .i-play { display: none; }
.v2 .cv.is-playing .gl .i-pause { display: block; }
.v2 .bd { padding: 12px 8px 8px; display: grid; gap: 4px; }
.v2 .bd .nm, .v2 .bd .meta { padding-inline: 8px; }
.v2 .bd .mq { margin-block-start: 8px; }
/* option 2 skin: outline pill at 0 (four filled buttons would be four primaries), tinted once added */
.v2 .mq { background: transparent; box-shadow: inset 0 0 0 1.5px var(--local-blue-text); }
.v2 .mq .inc { justify-content: center; gap: 8px; padding-inline: 12px; }
.v2 .mq .inc .pl { inline-size: 24px; block-size: 24px; background: none; box-shadow: none; color: inherit; order: -1; }
.v2 .mq.has-qty { background: var(--primary-muted); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--primary); }
.v2 .mq.has-qty .inc { padding-inline: 0 4px; justify-content: flex-end; }
.v2 .mq.has-qty .inc .pl { inline-size: 36px; block-size: 36px; order: 0; color: var(--primary-on); background: linear-gradient(180deg, var(--primary-fill), var(--local-fill-deep)); }
.v2 .mq .ext .qn { flex: 0 0 auto; min-inline-size: 0; }
.v2 .mq .ext .cnt { flex: 1; display: flex; justify-content: center; align-items: baseline; gap: 4px; }

/* ═════════ O3 · COMPACT TILES ═════════ */
.v3 .grid { grid-auto-flow: row dense; }
.v3 .mw { position: relative; }
.v3 .cv { aspect-ratio: 1 / 1; }
.v3 .bd { padding: 10px 12px 4px; display: grid; gap: 2px; }
.v3 .det { justify-self: start; min-block-size: var(--t-min); margin-inline-start: -8px; padding-inline: 8px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--local-blue-text); font: 600 var(--fs-ui)/1 var(--font-body); cursor: pointer; }
.v3 .det svg { inline-size: 16px; block-size: 16px; transition: transform var(--d-180) var(--ease-brand); }
.v3 .card.is-open .det svg { transform: rotate(180deg); }
.v3 .desc { font-size: var(--fs-ui); line-height: 1.45; color: var(--fg-muted); padding-block: 4px 6px; }
.v3 .desc[hidden] { display: none; }
.v3 .card.is-open { grid-column: 1 / -1; }
.v3 .card.is-open .cv { aspect-ratio: 16 / 9; }
.v3 .card.is-open .nm { -webkit-line-clamp: unset; display: block; }
/* the corner control: a 44 px glass "+" that grows into − n + toward the start, over the media */
.v3 .cq { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; z-index: 3; display: flex; align-items: center; block-size: var(--t-min); border-radius: var(--r-pill); color: var(--local-on-media);
  background: var(--local-scrim); backdrop-filter: blur(12px) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat)); box-shadow: inset 0 0 0 1px var(--local-on-media-line), 0 6px 16px -6px color-mix(in srgb, var(--ph-ink) 50%, transparent); }
.v3 .cq .ext { display: flex; align-items: center; max-inline-size: 0; opacity: 0; overflow: hidden; transition: max-inline-size var(--d-180) var(--ease-brand), opacity var(--d-120); }
.v3 .cq.has-qty .ext { max-inline-size: 90px; opacity: 1; }
.v3 .cq .inc .pl { inline-size: 36px; block-size: 36px; }
.v3 .cq:not(.has-qty) .inc .pl { background: transparent; box-shadow: none; color: var(--local-on-media); }

/* ═════════ O4 · GLASS LABEL ═════════ */
.v4 .card { background: var(--surface-sunken); }
.v4 .cv { aspect-ratio: 3 / 5; border-radius: 20px; }
.v4 .glass { position: absolute; inset-inline: 6px; inset-block-end: 6px; z-index: 3; padding: 10px 6px 6px; border-radius: 16px; display: grid; gap: 6px;
  background: var(--local-glass); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 0 0 1px var(--glass-stroke), inset 0 1px 0 color-mix(in srgb, var(--ph-white) 40%, transparent), var(--glass-shadow); transition: background-color var(--d-180) var(--ease-brand); }
.v4 .glass .tx { padding-inline: 6px; display: grid; gap: 0; }
.v4 .is-on .glass { background: var(--local-glass-on); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .v4 .glass { background: var(--surface); } }
.v4 .mq:not(.has-qty) { background: color-mix(in srgb, var(--primary-muted) 80%, transparent); }

/* ═════════ O5 · HEX BADGE COUNT ═════════ */
.v5 .cv { aspect-ratio: 4 / 3; }
.v5 .bd { padding: 10px 12px 12px; display: grid; gap: 2px; }
.v5 .pop { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-ui)/1.3 var(--font-body); color: var(--fg-muted); margin-block-start: 2px; }
.v5 .pop i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); flex: none; }
/* the hex marker: an outer hex (on-media ring) wrapping an inner accent hex; the bump scales the WRAPPER, never the clip */
.v5 .hexw { position: absolute; inset-block-start: 6px; inset-inline-end: 8px; z-index: 2; transform: scale(.6); opacity: 0; transition: transform var(--d-180) var(--ease-brand), opacity var(--d-120); filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--ph-ink) 45%, transparent)); }
.v5 .is-on .hexw { transform: scale(1); opacity: 1; }
.v5 .hexb { display: block; inline-size: 40px; aspect-ratio: var(--hex-ratio); clip-path: var(--hex-clip); background: var(--local-on-media); position: relative; }
.v5 .hexb::before { content: ""; position: absolute; inset: 2.5px; clip-path: var(--hex-clip); background: linear-gradient(180deg, var(--primary-fill), var(--local-fill-deep)); }
.v5 .hexb span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 17px/1 var(--font-body); color: var(--primary-on); font-variant-numeric: tabular-nums; }
.v5 .seg { margin-block-start: 8px; display: flex; align-items: center; justify-content: space-between; padding: 3px; border-radius: var(--r-pill); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-subtle); }
.v5 .seg .qb.dec { background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-subtle); color: var(--fg); }
.v5 .seg .qb.dec[disabled] { background: transparent; box-shadow: none; }
.v5 .seg .qb.inc { color: var(--primary-on); background: linear-gradient(180deg, var(--primary-fill), var(--local-fill-deep)); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-fill) 35%, transparent); }
.v5 .seg .qn { color: var(--fg); flex: 1; }
.v5 .is-on .seg { box-shadow: inset 0 0 0 1.5px var(--primary); }

/* ═════════ the running total, under every grid ═════════ */
.w2 .total { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "c m" "b b"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-subtle); }
.w2 .total .l { display: contents; }
.w2 .total .money { grid-area: m; }
.w2 .total .c { grid-area: c; font: 600 var(--fs-ui)/1.3 var(--font-body); color: var(--fg); }
.w2 .total .b { grid-area: b; font: 400 var(--fs-ui)/1.3 var(--font-body); color: var(--fg-muted); }
.money { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 700; font-size: var(--fs-h2); line-height: 1.15; color: var(--fg); direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: baseline; white-space: nowrap; }
.money .cur { margin-inline-end: .28em; }
[data-roll] { display: inline-flex; }
[data-roll] .d { display: inline-block; block-size: 1.15em; overflow: hidden; inline-size: .74em; text-align: center; }
[data-roll] .d > span { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1.15em)); transition: transform var(--d-400) var(--ease-brand); }
[data-roll] .d > span > i { font-style: normal; block-size: 1.15em; line-height: 1.15em; }

/* the layout morph (option 3) */
::view-transition-group(*) { animation-duration: var(--d-260); animation-timing-function: var(--ease-brand); }

/* ── reduced motion: no autoplay (JS), no morph animation, no bumps; a shade step instead of a press scale ── */
@media (prefers-reduced-motion: reduce) {
  .w2 *, .w2 *::before, .w2 *::after { transition-duration: 0s !important; }
  .qn.bump, .hexb.bump { animation: none; }
  .qb.is-pressed { transform: none; background: var(--surface-active); }
  ::view-transition-group(*) { animation: none; }
}

/* ── RTL with Latin fixture copy: each run is its own bidi paragraph; layout mirrors via logical properties ── */
[dir="rtl"] .w2 :is(p, h2, span, output, button, li), [dir="rtl"] .option .label :is(b, code) { unicode-bidi: plaintext; }
[dir="rtl"] .w2 :is(.eyebrow, .h, .sub, .nm, .desc, .amt, .un, .ln, .c, .b, .pop), [dir="rtl"] .option .label { text-align: right; }
[dir="rtl"] .w2 :is(.amt, .money) { unicode-bidi: isolate; }