/* PodcastHub Design Lab · "Book now button" · five live options (B1, Rick, 2026-10-16)
   Uses ONLY tokens.css variables. Anything tokens.css lacks is defined here as --local-* and listed in
   reports/design-studio/2026-10-16/B1-buttons-addons.md. Logical properties throughout so RTL just works. */

:root {
  /* #0076DF under the --primary-on label (#FDFEFE, not #FFFFFF) measures 4.46:1; 3 % toward Ink = 4.68:1, visually identical */
  --local-fill-safe: color-mix(in srgb, var(--primary-fill) 97%, var(--ph-ink));
  /* the deep stop of the tactile gradient: #0076DF mixed 17 % toward Ink ≈ #0264BC (rule 38 asks for ≈ #0062BA) */
  --local-primary-deep: color-mix(in srgb, var(--primary-fill) 83%, var(--ph-ink));
  /* a glass tint strong enough that text passes on its own over the darkest / brightest photo frame (materials rule 5) */
  --local-glass-strong: color-mix(in srgb, var(--surface) 80%, transparent);
  --local-white-a: color-mix(in srgb, var(--ph-white) 35%, transparent);
  --local-flip: 1; /* arrows: 1 in LTR, -1 in RTL */
}
[dir="rtl"] { --local-flip: -1; }

/* the shell is 390 px of options + 16 px gutters; on a 390 px phone drop the gutters so nothing scrolls sideways */
@media (max-width: 440px) { .options { padding-inline: 0; gap: 32px; } .option .label { padding-inline: 16px; } }

.option .frame.ph { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.ph .head { display: grid; gap: 4px; }
.ph p { margin: 0; }
.ph .eyebrow { font: 600 var(--fs-ui)/1.3 var(--font-body); color: var(--fg-muted); }
.ph .h { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); }

/* ── the checkout summary every button is judged in ─────────────────────────────── */
.sum { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line-subtle); border-radius: var(--r-card); padding: 12px; box-shadow: var(--shadow-1); }
.sum img { inline-size: 64px; block-size: 64px; border-radius: var(--r-tile); object-fit: cover; display: block; }
.sum-line { font: 600 var(--fs-ui)/1.35 var(--font-body); color: var(--fg); }
.sum-sub { font: 400 var(--fs-ui)/1.35 var(--font-body); color: var(--fg-muted); }
.total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-inline: 4px; }
.total span { font-size: var(--fs-ui); color: var(--fg-muted); }
.total strong, .num { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 700; font-size: var(--fs-h1); line-height: 1.1; color: var(--fg); direction: ltr; unicode-bidi: isolate; }
.reassure { font-size: var(--fs-ui); line-height: 1.4; color: var(--fg-muted); text-align: center; }
.push { margin-block-start: 8px; display: flex; flex-direction: column; gap: 12px; }

/* ── the shared button skeleton: same DOM in every option, so state never shifts layout (rule 25) ── */
.cta { position: relative; display: grid; place-items: center; inline-size: 100%; min-block-size: var(--t-button-lg); padding: 0; border: 0; border-radius: var(--r-pill); font-family: inherit; font-weight: 600; font-size: 17px; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform var(--d-180) var(--ease-brand); }
.cta > * { grid-area: 1 / 1; }
.cta.is-pressed { transform: scale(var(--press-scale)); transition-duration: var(--d-80); }
.cta .face { display: flex; align-items: center; justify-content: center; gap: 10px; inline-size: 100%; padding-inline: 24px; transition: opacity var(--d-120) var(--ease-brand); }
.cta .busy, .cta .done { display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity var(--d-120) var(--ease-brand); pointer-events: none; }
.cta[data-state="loading"] .face, .cta[data-state="done"] .face { opacity: 0; }
.cta[data-state="loading"] .busy { opacity: 1; }
.cta[data-state="done"] .done { opacity: 1; }
.cta[data-state] { cursor: default; }
.spin { inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-block-start-color: transparent; animation: ph-spin 700ms linear infinite; flex: none; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
.tick { inline-size: 20px; block-size: 20px; flex: none; }
.tick path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.cta[data-state="done"] .tick path { animation: ph-draw 320ms var(--ease-brand) 60ms forwards; }
@keyframes ph-draw { to { stroke-dashoffset: 0; } }
.arrow { inline-size: 20px; block-size: 20px; flex: none; transform: scaleX(var(--local-flip)); }

/* states strip: the secondary + disabled + loading, small, under every primary */
.states { border-block-start: 1px solid var(--line-subtle); padding-block-start: 14px; display: grid; gap: 10px; }
.states .cap { font-size: var(--fs-ui); color: var(--fg-subtle); }
.states .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sec { min-block-size: var(--t-button); border-radius: var(--r-pill); font-family: inherit; font-weight: 600; font-size: var(--fs-ui); line-height: 1.2; cursor: pointer; padding-inline: 20px; transition: transform var(--d-180) var(--ease-brand), background-color var(--d-120); -webkit-tap-highlight-color: transparent; }
.sec.is-pressed { transform: scale(var(--press-scale)); }
.mini { min-block-size: var(--t-button); border-radius: var(--r-pill); border: 0; font-family: inherit; font-weight: 600; font-size: var(--fs-ui); line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 12px; }
.mini[disabled] { background: var(--surface-sunken); color: var(--fg-disabled); box-shadow: inset 0 0 0 1px var(--line-subtle); cursor: not-allowed; }
.mini .spin { inline-size: 16px; block-size: 16px; border-width: 2px; }

/* ═════════ OPTION 1 · TACTILE (V1 four-shadow) ═════════ */
.b1 .cta { color: var(--primary-on); background: linear-gradient(180deg, var(--local-fill-safe) 0%, var(--local-primary-deep) 100%); box-shadow: var(--tactile-shadow); }
.b1 .cta .face { justify-content: space-between; padding-inline: 24px 6px; }
.b1 .cta .face .lbl { flex: 1; text-align: center; padding-inline-start: 44px; }
.b1 .disc { inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--ph-white) 16%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ph-white) 40%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ph-white) 14%, transparent); transition: background-color var(--d-180) var(--ease-brand), box-shadow var(--d-180) var(--ease-brand); }
.b1 .disc .arrow { transition: transform 350ms cubic-bezier(.23,1,.32,1); }
@media (hover: hover) { .b1 .cta:hover .disc .arrow { transform: scaleX(var(--local-flip)) rotate(-45deg); } }
.b1 .cta:focus-visible .disc .arrow { transform: scaleX(var(--local-flip)) rotate(-45deg); }
/* press = scale + the pressed-in shadow swapped in as a STATE (no box-shadow transition, rule 39); the disc lights up */
.b1 .cta.is-pressed { box-shadow: var(--tactile-pressed); background: linear-gradient(180deg, var(--local-primary-deep) 0%, var(--local-fill-safe) 100%); }
.b1 .cta.is-pressed .disc, .b1 .cta[data-state="done"] .disc { background: var(--ph-white); color: var(--primary-fill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ph-white) 22%, transparent), 0 0 18px 2px color-mix(in srgb, var(--ph-white) 60%, transparent); }
.b1 .cta.is-pressed .disc .arrow { transform: scaleX(var(--local-flip)) rotate(-45deg); }
.b1 .sec { background: transparent; color: var(--fg); border: 1.5px solid var(--line-strong); }
.b1 .sec:hover { background: var(--surface-hover); }
.b1 .mini.load { color: var(--primary-on); background: linear-gradient(180deg, var(--local-fill-safe), var(--local-primary-deep)); box-shadow: var(--tactile-shadow); }

/* ═════════ OPTION 2 · FROSTED GLASS BAR over the room ═════════ */
.option .frame.b2 { padding: 0; gap: 0; }
.b2 .stage { position: relative; flex: 1; min-block-size: 470px; background: var(--surface-sunken) url(img/aura.jpg) center 40% / cover no-repeat; }
.b2 .stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ph-ink) 30%, transparent) 0%, transparent 28%); pointer-events: none; }
.b2 .roomtag { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; z-index: 1; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: var(--r-pill); font: 600 var(--fs-ui)/1.2 var(--font-body); color: var(--fg); background: var(--local-glass-strong); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-stroke); }
.b2 .bar { position: absolute; inset-inline: 12px; inset-block-end: 12px; z-index: 2; display: grid; gap: 10px; padding: 14px 14px 12px; border-radius: var(--r-sheet);
  background: var(--local-glass-strong); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-stroke); box-shadow: var(--glass-shadow), inset 0 1px 0 color-mix(in srgb, var(--ph-white) 40%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .b2 .bar, .b2 .roomtag { background: var(--surface); } }
.b2 .bar .sum-line { font-weight: 500; color: var(--fg); }
.b2 .bar .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.b2 .bar .price small { display: block; font-size: var(--fs-ui); color: var(--fg-muted); line-height: 1.3; }
.b2 .cta { inline-size: auto; min-inline-size: 168px; color: var(--primary-on); background: var(--local-fill-safe); box-shadow: 0 2px 4px color-mix(in srgb, var(--primary-fill) 30%, transparent), 0 10px 24px -6px color-mix(in srgb, var(--primary-fill) 60%, transparent); }
.b2 .cta.is-pressed, .b2 .cta[data-state="done"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 28%, transparent), 0 0 28px 2px color-mix(in srgb, var(--primary) 65%, transparent), inset 0 0 14px color-mix(in srgb, var(--ph-white) 30%, transparent); }
.b2 .lower { padding: 16px; display: grid; gap: 10px; }
.b2 .reassure { text-align: start; }
.b2 .sec { background: transparent; color: var(--primary-ink); border: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.b2 .sec:hover { background: var(--primary-subtle); }
.b2 .mini.load { color: var(--primary-on); background: var(--local-fill-safe); }

/* ═════════ OPTION 3 · LIQUID GLASS (faked: no SVG filter, so iPhone sees what Chrome sees) ═════════ */
.b3 .pool { position: absolute; inset-inline: 0; inset-block-end: 150px; block-size: 240px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 55% at 22% 55%, color-mix(in srgb, var(--secondary) 70%, transparent) 0%, transparent 70%),
    radial-gradient(38% 50% at 78% 45%, color-mix(in srgb, var(--primary) 55%, transparent) 0%, transparent 70%),
    radial-gradient(30% 40% at 52% 80%, color-mix(in srgb, var(--secondary) 45%, transparent) 0%, transparent 70%);
  filter: blur(18px); opacity: .9; }
[data-theme="dark"] .b3 .pool { opacity: .55; }
.b3 > * { position: relative; z-index: 1; }
.b3 > .pool { position: absolute; z-index: 0; }
.b3 .cta { color: var(--primary-on); isolation: isolate; overflow: hidden;
  /* the body: deep translucent blue, dark enough that the label passes on its own (measured in the report) */
  background: linear-gradient(180deg, color-mix(in srgb, var(--local-primary-deep) 92%, transparent) 0%, color-mix(in srgb, var(--primary-active) 90%, transparent) 100%);
  backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ph-white) 75%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ph-white) 35%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ph-white) 18%, transparent),
              0 2px 6px color-mix(in srgb, var(--ph-ink) 14%, transparent), 0 12px 30px -10px color-mix(in srgb, var(--primary) 75%, transparent);
  transition: transform var(--d-180) var(--ease-brand); }
/* specular crescent on the top edge */
.b3 .cta::before { content: ""; position: absolute; inset-inline: 6%; inset-block-start: 2px; block-size: 48%; border-radius: 28px 28px 50% 50% / 28px 28px 14px 14px; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ph-white) 36%, transparent) 0%, color-mix(in srgb, var(--ph-white) 8%, transparent) 55%, transparent 100%); }
/* the refracted light: a caustic band hugging the lower rim, as if light passed through a lens */
.b3 .cta::after { content: ""; position: absolute; inset-inline: 8%; inset-block-end: -10px; block-size: 26px; border-radius: 50%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--secondary) 90%, transparent), transparent 75%); opacity: .75; transition: opacity var(--d-180) var(--ease-brand); }
/* rim light running round the left and right ends, the way a glass rod catches light */
.b3 .cta .glint { position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(18% 70% at 0% 50%, color-mix(in srgb, var(--secondary) 55%, transparent), transparent 70%), radial-gradient(18% 70% at 100% 50%, color-mix(in srgb, var(--secondary) 55%, transparent), transparent 70%); opacity: .8; }
.b3 .cta.is-pressed, .b3 .cta[data-state="done"] { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ph-white) 85%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ph-white) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ph-white) 30%, transparent),
  0 0 0 5px color-mix(in srgb, var(--secondary) 35%, transparent), 0 0 36px 6px color-mix(in srgb, var(--primary) 70%, transparent); }
.b3 .cta.is-pressed::after, .b3 .cta[data-state="done"]::after { opacity: 1; }
.b3 .sum { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.b3 .sec { color: var(--fg); background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--glass-stroke); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ph-white) 60%, transparent), var(--shadow-1); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
[data-theme="dark"] .b3 .sec { border-color: var(--line-strong); }
.b3 .mini.load { color: var(--primary-on); background: linear-gradient(180deg, var(--local-primary-deep), var(--primary-active)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ph-white) 60%, transparent); }

/* ═════════ OPTION 4 · LIGHT-UP (flat pill, lit from inside, hex ripple, one shimmer) ═════════ */
.b4 .cta { color: var(--primary-on); background: var(--local-fill-safe); overflow: hidden; box-shadow: 0 1px 2px color-mix(in srgb, var(--primary-fill) 35%, transparent); }
.b4 .cta .shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--ph-white) 45%, transparent) 50%, transparent 70%) no-repeat; background-size: 60% 100%; background-position: -120% 0; }
.b4 .cta.shimmer .shine { animation: ph-shimmer 1200ms var(--ease-brand) 1; }
[dir="rtl"] .b4 .cta.shimmer .shine { animation-name: ph-shimmer-rtl; }
@keyframes ph-shimmer { from { background-position: -120% 0; } to { background-position: 220% 0; } }
@keyframes ph-shimmer-rtl { from { background-position: 220% 0; } to { background-position: -120% 0; } }
.b4 .cta .ph-ripple { background: color-mix(in srgb, var(--ph-white) 38%, transparent); }
/* lit from inside: an inner rim of light + a halo ring; the centre (under the label) keeps the 4.51:1 fill */
.b4 .cta.is-pressed, .b4 .cta[data-state="done"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ph-white) 55%, transparent), inset 0 0 18px 2px color-mix(in srgb, var(--ph-white) 40%, transparent), 0 0 0 4px var(--canvas), 0 0 0 6px color-mix(in srgb, var(--primary) 70%, transparent), 0 0 32px 6px color-mix(in srgb, var(--primary) 55%, transparent); }
.b4 .sec { background: transparent; color: var(--primary-ink); border: 1.5px solid var(--primary-ink); }
.b4 .sec:hover { background: var(--primary-subtle); }
.b4 .mini.load { color: var(--primary-on); background: var(--local-fill-safe); }

/* ═════════ OPTION 5 · GRAINY FIELD (A8: one-hue field + 5 % grain, hierarchy by fill) ═════════ */
.b5 .card5 { margin-block-start: auto; background: var(--surface); border: 1px solid var(--line-subtle); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-2); }
.b5 .card5 .top { padding: 14px; display: grid; gap: 12px; }
.b5 .field { position: relative; isolation: isolate; padding: 18px 14px 16px; display: grid; gap: 12px;
  --local-field: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--primary) 32%, transparent), transparent 70%), linear-gradient(160deg, var(--secondary-muted) 0%, color-mix(in srgb, var(--secondary) 55%, var(--surface)) 100%);
  background: var(--local-field); }
[data-theme="dark"] .b5 .field { --local-field: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 70%), linear-gradient(160deg, var(--secondary-muted) 0%, color-mix(in srgb, var(--primary) 30%, var(--canvas)) 100%); }
.b5 .field::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); background-size: 160px; mix-blend-mode: multiply; opacity: .9; pointer-events: none; }
[data-theme="dark"] .b5 .field::after { filter: invert(1); mix-blend-mode: screen; opacity: .6; }
.b5 .field .total span { color: var(--fg); }
.b5 .cta { color: var(--fg-inverse); background: var(--fg); box-shadow: 0 1px 0 color-mix(in srgb, var(--ph-white) 18%, transparent) inset, 0 2px 4px color-mix(in srgb, var(--ph-ink) 25%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--ph-ink) 45%, transparent); }
.b5 .cta .lock { inline-size: 20px; block-size: 20px; flex: none; }
.b5 .cta.is-pressed, .b5 .cta[data-state="done"] { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ph-white) 30%, transparent), 0 0 0 4px color-mix(in srgb, var(--surface) 70%, transparent), 0 0 0 6px color-mix(in srgb, var(--primary) 60%, transparent), 0 0 30px 6px color-mix(in srgb, var(--primary) 50%, transparent); }
.b5 .field .reassure { color: var(--fg); }
.b5 .sec { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--fg); border: 1px solid var(--line); }
.b5 .mini.load { color: var(--fg-inverse); background: var(--fg); }

/* ── reduced motion: press scale already 1 via tokens; swap to a 120 ms shade step, kill shimmer/ripple/draw ── */
@media (prefers-reduced-motion: reduce) {
  .cta, .sec { transition: none; }
  .cta.is-pressed::before { opacity: 1; }
  .b4 .cta.shimmer .shine { animation: none; }
  .b1 .disc .arrow { transition: none; }
  .cta[data-state="done"] .tick path { animation: none; stroke-dashoffset: 0; }
  .spin { animation-duration: 1400ms; }
  .sec.is-pressed { background: var(--surface-active); }
}

/* labels ≥ 14 px (the shell sets code at 13) */
.option .label code { font-size: var(--fs-label); }

/* RTL with Latin fixture copy: each text run is its own bidi paragraph so "2 people · 2 mics" keeps its order,
   while the layout (rows, steppers, arrows, morph anchor) mirrors through logical properties. */
[dir="rtl"] .frame :is(p, h2, b, strong, small, span, output, button, li), [dir="rtl"] .option .label :is(b, code) { unicode-bidi: plaintext; }
[dir="rtl"] .frame :is(.eyebrow, .h, .sub, .hint, .sum-line, .sum-sub, .name, .unit, .cap, .meta b, .meta span, [data-count]), [dir="rtl"] .option .label { text-align: right; }