/* TBA (The Brainwashing App) — app components (ported from app-preview.html, extended) */

#app{position:fixed;top:0;left:0;right:0;background:var(--cream);overflow:hidden;
  height:100vh;height:100dvh}

.screen{
  position:absolute;inset:0;
  padding:calc(var(--safe-top) + 34px) 28px calc(118px + var(--safe-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* this is the real scroller (html/body never scroll), so the bounce/chain
     rule has to live here, not on body */
  overscroll-behavior-y:contain;
  display:none;flex-direction:column;animation:fade .22s ease;
}
.screen.active{display:flex}
.screen::-webkit-scrollbar{display:none}
/* flex children with their own overflow get min-height:0 and squash instead of
   scrolling the screen — keep every direct child at its natural height */
.screen > *{flex-shrink:0}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── SPLASH + GATE (dark screens) ─────────────────────────── */
.dark-screen{
  padding:calc(var(--safe-top) + 34px) 28px calc(40px + var(--safe-bottom));
  align-items:center;z-index:50;
  background:radial-gradient(120% 80% at 50% 18%, #15110d 0%, #0b0907 70%);color:var(--cream);
}
/* margin:auto centers these, but UNLIKE justify-content:center it collapses to 0
   when the content is taller than the screen — so the top stays reachable with
   the keyboard up on a short phone */
.splash-inner,.gate-inner{margin:auto 0}
.splash-inner{text-align:center;display:flex;flex-direction:column;align-items:center;padding:24px;width:100%}
.seal{position:relative;width:118px;height:118px;display:flex;align-items:center;justify-content:center;margin-bottom:42px}
.seal-ring{position:absolute;inset:0;border:1px solid rgba(212,193,170,.55);border-radius:50%}
.seal-ring::after{content:"";position:absolute;inset:7px;border:1px solid rgba(212,193,170,.28);border-radius:50%}
.seal-mono{font-family:var(--serif);font-size:34px;letter-spacing:.22em;padding-left:.22em;color:#e9dcc8}
.splash-word{font-family:var(--serif);font-weight:500;font-size:46px;letter-spacing:.42em;padding-left:.42em;color:#f4ede1}
.splash-sub{font-family:var(--serif);font-style:italic;font-size:14px;color:#b9ab95;margin-top:14px;letter-spacing:.04em}
.splash-tag{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:#8a7f6e;margin-top:30px;padding-left:.4em}
.splash-cta{width:auto;padding:17px 46px;margin-top:46px;background:var(--cream);color:#111}
.splash-foot{position:absolute;bottom:calc(30px + var(--safe-bottom));left:0;right:0;text-align:center;font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:#6b6253}

.gate-inner{width:100%;max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center}
.gate-inner .seal{width:88px;height:88px;margin-bottom:30px}
.gate-inner .seal-mono{font-size:26px}
.gate-inner .splash-word{font-size:34px}
.gate-sub{font-size:12px;color:#a99a83;font-weight:300;line-height:1.7;margin-top:22px}
.gate-field{
  width:100%;margin-top:30px;background:rgba(255,255,255,.06);border:1px solid rgba(212,193,170,.3);
  border-radius:100px;padding:16px 22px;font-size:13px;color:var(--cream);text-align:center;outline:none;
}
.gate-field::placeholder{color:#7d7263}
.gate-field:focus{border-color:rgba(212,193,170,.6)}
.gate-err{font-size:11px;color:#c9a08a;margin-top:14px;min-height:15px;font-weight:300}
.cta.gate-cta{margin-top:12px;background:var(--cream);color:#111}
.gate-or{display:flex;align-items:center;gap:14px;width:100%;margin:24px 0 0;color:#6b6253;font-size:9px;letter-spacing:.3em;text-transform:uppercase}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:rgba(212,193,170,.18)}
.cta.gate-ghost{background:transparent;color:var(--cream);border:1px solid rgba(212,193,170,.35);margin-top:24px}
.gate-note{font-size:10px;color:#6b6253;margin-top:18px;font-weight:300;line-height:1.7}
.gate-spam{width:100%;margin-top:20px;padding:14px 18px;border:1px solid rgba(212,193,170,.45);border-radius:16px;background:rgba(212,193,170,.08);font-size:12px;color:#d9cbb4;font-weight:300;line-height:1.6}
.gate-spam b{display:block;font-size:13.5px;font-weight:500;color:var(--cream);margin-bottom:4px}
.gate-spam + .gate-field{margin-top:18px}

/* ── shared ───────────────────────────────────────────────── */
.cta{
  margin-top:30px;background:var(--ink);color:var(--cream);border:none;border-radius:100px;
  padding:19px 22px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;cursor:pointer;width:100%;
  transition:transform .25s, opacity .25s;
}
.cta:active{transform:scale(.985)}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);margin-top:14px}
.cta:disabled{opacity:.35;pointer-events:none}
.divider{display:flex;align-items:center;gap:14px;margin:34px 0 22px;color:var(--stone);font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

.flow-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.back{font-size:22px;cursor:pointer;color:var(--ink);line-height:1;padding:2px 10px;margin-left:-10px}
.progress{display:flex;gap:6px}
.dot{width:26px;height:3px;border-radius:3px;background:var(--line)}
.dot.on{background:var(--ink)}
.q-kick{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--stone);margin-bottom:14px}
.q-title{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.2;margin-bottom:6px}
.q-sub{font-size:12px;color:#6b6a62;font-weight:300;margin-bottom:26px;line-height:1.6}

/* ── HOME ─────────────────────────────────────────────────── */
.home-hero{margin-top:8px}
.home-hero .eyebrow{margin-bottom:20px}
.home-hero h2{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.08}
.home-hero h2 em{font-style:italic}
.home-hero p{font-size:13px;color:#55534c;margin-top:18px;line-height:1.65;font-weight:300}
.pick-row{display:flex;flex-direction:column;gap:12px}
.tile{border:1px solid var(--line);border-radius:20px;padding:20px;background:rgba(255,255,255,.4);cursor:pointer;transition:.25s}
.tile:active{background:rgba(255,255,255,.75)}
.tile .t-k{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--stone)}
.tile .t-n{font-family:var(--serif);font-size:18px;margin-top:6px}
.tile .t-d{font-size:11.5px;color:#666;margin-top:6px;font-weight:300;font-variant-numeric:tabular-nums}
.tile.cont{display:flex;gap:16px;align-items:center;padding:14px}
.cont-thumb{width:64px;height:64px;border-radius:14px;background-size:cover;background-position:center;flex-shrink:0}

/* ── TRIAGE ───────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);border-radius:100px;padding:13px 18px;font-size:12.5px;cursor:pointer;background:transparent;transition:.2s;color:var(--ink);font-weight:400}
.chip.sel{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.focus-grid{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.focus{border:1px solid var(--line);border-radius:22px;padding:26px 24px;cursor:pointer;transition:.25s;background:rgba(255,255,255,.35)}
.focus:active{background:rgba(255,255,255,.8)}
.focus h3{font-family:var(--serif);font-weight:400;font-size:26px}
.focus span{font-size:11.5px;color:#6b6a62;font-weight:300;display:block;margin-top:6px}

/* ── RESULT ───────────────────────────────────────────────── */
.res-head .q-title{font-size:26px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;padding:7px 14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#55534c;margin-bottom:22px;font-weight:500}
.pill b{font-weight:600;color:var(--ink)}
.reco-note{font-size:12px;color:#6b6a62;font-weight:300;line-height:1.7;border-left:2px solid var(--ink);padding-left:14px;margin:4px 0 26px}

.card{border:1px solid var(--line);border-radius:24px;overflow:hidden;margin-bottom:16px;background:rgba(255,255,255,.45);cursor:pointer;transition:.25s}
.card:active{background:rgba(255,255,255,.85)}
.card.primary{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.card-banner{height:118px;background-size:cover;background-position:center;position:relative}
.card-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(120,86,56,.12) 0%,rgba(20,16,12,0) 45%,rgba(20,16,12,.45))}
.card-body{padding:20px 22px 22px}
.card .type{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--stone)}
.card.primary .type{color:#b9b6ab}
.card .name{font-family:var(--serif);font-size:22px;margin:9px 0;line-height:1.18}
.card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tag{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:5px 10px;color:#6b6a62;font-weight:500}
.card.primary .tag{border-color:rgba(255,255,255,.25);color:#cdcabf}
.card .desc{font-size:11.5px;color:#666;font-weight:300;line-height:1.55;margin-top:12px}
.card.primary .desc{color:#c8c5ba}
.card.soon{opacity:.55}

/* ── PLAYER ───────────────────────────────────────────────── */
/* Full-bleed direction, approved 2026-08-03. The cover art runs from the very
   top of the screen and dissolves into black; the title sits in the fade. The
   screen's own padding is removed so the art can reach the edges — every child
   carries its own padding instead. */
.player{background:#080807;color:var(--cream);
  padding:0 0 calc(90px + var(--safe-bottom))}
.player .back{color:var(--cream)}
.player .flow-top{margin-bottom:0;flex-shrink:0}

/* the artwork. absolutely positioned inside the (scrolling) player screen, so it
   scrolls away when you go down to the flow list. */
.p-art{position:absolute;top:0;left:0;right:0;height:66dvh;z-index:0;
  background-size:cover;background-position:center}
/* film grain — sits over the image, the cheapest thing that stops a flat
   texture reading like a stock photo */
.p-art::before{content:"";position:absolute;inset:0;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the scrim. covers are LIGHT marble, so this is what makes cream type legible —
   many stops so it fades smoothly instead of banding, and it lands on solid
   #080807 exactly at the bottom edge so there is no visible seam. */
.p-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,8,7,.42) 0%, rgba(8,8,7,.16) 20%, rgba(8,8,7,.30) 46%,
    rgba(8,8,7,.66) 68%, rgba(8,8,7,.90) 85%, rgba(8,8,7,.99) 96%, #080807 100%)}

/* one screenful: viewport minus the tab bar. guarantees the play button and the
   whole transport are visible the moment the session opens, on any phone. */
.p-stage{position:relative;z-index:2;display:flex;flex-direction:column;
  min-height:calc(100dvh - 74px - var(--safe-bottom));
  padding:calc(var(--safe-top) + 18px) 26px 24px}
.p-grow{flex:1 1 auto;min-height:0}
.p-kicker{font-size:9px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;
  color:rgba(244,242,236,.55)}
/* SVG heart, not the ♥ character — iOS renders that glyph as a red colour emoji
   and ignores `color` entirely. Outline by default, fills on tap, in champagne. */
.fav-btn{color:rgba(244,242,236,.68);cursor:pointer;padding:2px 8px;margin-right:-8px;line-height:1;transition:.2s}
.fav-btn svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linejoin:round;transition:.2s}
.fav-btn.on{color:var(--gold)}
.fav-btn.on svg{fill:currentColor}

/* the title block, sitting in the fade at the bottom of the artwork */
.p-words{flex-shrink:0}
.p-name{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.14;
  letter-spacing:-.005em;margin:13px 0 12px;color:var(--cream);text-wrap:balance;
  /* belt and braces on top of the scrim: keeps the type readable even over the
     brightest patch of a marble cover */
  text-shadow:0 1px 18px rgba(8,8,7,.55)}
.p-type{font-size:9px;letter-spacing:.36em;text-transform:uppercase;font-weight:500;
  color:rgba(244,242,236,.6);text-align:left;text-shadow:0 1px 14px rgba(8,8,7,.6)}
.p-metaline{font-size:10.5px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,242,236,.5);text-shadow:0 1px 14px rgba(8,8,7,.6)}
/* below the fold, on flat black — no scrim needed, so it can be quieter */
.p-desc{font-size:12px;color:#a8a59b;font-weight:300;line-height:1.7;margin-top:10px;
  padding:0 26px;position:relative;z-index:2;text-wrap:pretty}
.scrub{margin:30px 0 0;flex-shrink:0}
/* pan-y, NOT none: the browser keeps vertical panning (so you can still scroll the
   player by dragging across the scrubber) while horizontal drags go to the slider
   for seeking. `none` killed scrolling on this whole 24px band. */
.scrub-range{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;display:block;cursor:pointer;touch-action:pan-y}
.scrub-range::-webkit-slider-runnable-track{height:2px;border-radius:2px;
  background:linear-gradient(to right, var(--cream) var(--p,0%), rgba(244,242,236,.15) var(--p,0%))}
.scrub-range::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border-radius:50%;background:var(--cream);margin-top:-3.5px;
  box-shadow:0 0 0 5px rgba(244,242,236,.10)}
.scrub-range::-moz-range-track{height:2px;border-radius:2px;background:rgba(244,242,236,.15)}
.scrub-range::-moz-range-progress{height:2px;border-radius:2px;background:var(--cream)}
.scrub-range::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--cream);border:none}
.times{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;
  letter-spacing:.14em;color:rgba(244,242,236,.42);margin-top:7px;font-variant-numeric:tabular-nums}
.controls{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:22px;flex-shrink:0}
/* real 15-second arcs, not a glyph with a number stacked on top of it */
.skip{width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.skip svg{width:32px;height:32px;display:block;fill:none;stroke:var(--cream);stroke-width:1.2;
  stroke-linecap:round;opacity:.62;transition:opacity .2s}
.skip:active svg{opacity:1}
.skip svg .hd{fill:var(--cream);stroke:none}
.skip svg text{font-size:9px;fill:var(--cream);stroke:none;font-family:var(--sans);font-weight:500;
  text-anchor:middle;letter-spacing:.02em}
.play{width:70px;height:70px;border-radius:50%;background:var(--cream);color:#111;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  box-shadow:0 10px 34px -12px rgba(0,0,0,.85)}
.play svg{width:24px;height:24px;fill:#111}
.play.disabled{opacity:.4;pointer-events:none}
.speed{font-size:9.5px;color:rgba(244,242,236,.58);letter-spacing:.14em;cursor:pointer;text-align:center;font-variant-numeric:tabular-nums;padding:4px 10px;margin:-4px -10px}
.p-line{text-align:center;font-family:var(--serif);font-style:italic;font-size:14px;color:#b9ab95;margin-top:20px;min-height:18px;flex-shrink:0}
.p-locked{margin-top:22px;text-align:center;flex-shrink:0}
.p-locked .cta{margin-top:14px;background:var(--cream);color:#111}

/* ── the sealed state ─────────────────────────────────────── */
/* the artwork recedes when the session ends. that frees the room the next card
   needs, so the whole screen still fits without scrolling. the scrim is a
   gradient on the art itself and ends on solid #080807, so shortening it leaves
   no seam — the title just lands on flat black instead of on the fade. */
.p-art{transition:height .55s cubic-bezier(.4,0,.2,1)}
.player.sealed .p-art{height:46dvh}
.p-next{margin-top:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;flex-shrink:0;
  animation:nextIn .5s ease both}
@keyframes nextIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.p-next .nl{font-size:9px;letter-spacing:.36em;text-transform:uppercase;font-weight:500;
  color:rgba(244,242,236,.5);margin-bottom:12px}
/* dark twin of the .tile.cont used on Today */
.player .tile.cont{border-color:rgba(244,242,236,.14);background:transparent;color:var(--cream)}
.player .tile.cont:active{background:rgba(244,242,236,.06)}
.player .tile .t-k{color:rgba(244,242,236,.5)}
.player .tile .t-d{color:rgba(244,242,236,.42)}
/* the session-structure list was removed from the player 2026-08-03 — the rows
   restated the format without telling you anything you didn't already know */

/* ── LIBRARY ──────────────────────────────────────────────── */
.search{width:100%;border:1px solid var(--line);border-radius:100px;padding:14px 20px;font-size:16px;background:rgba(255,255,255,.4);margin-bottom:8px;color:var(--ink);outline:none}
.search::placeholder{color:var(--stone);font-size:12.5px}
.filterbar{display:flex;gap:8px;margin:18px 0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0;
  overscroll-behavior-x:contain;touch-action:pan-x}
.filterbar::-webkit-scrollbar{display:none}
/* flex-shrink:0 matters now that the row is long — without it 15 chips squash
   to fit instead of scrolling */
.fchip{white-space:nowrap;flex-shrink:0;font-size:11px;letter-spacing:.06em;border:1px solid var(--line);border-radius:100px;padding:8px 14px;color:#55534c;cursor:pointer;transition:.18s}
.fchip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
/* hairline between filter groups — the only grouping cue in a single row */
.fdiv{flex-shrink:0;width:1px;align-self:stretch;background:var(--line);margin:5px 3px}
.b-sec{font-family:var(--serif);font-size:16px;margin:22px 0 4px;font-style:italic}
.b-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer}
.b-item .bn{font-size:13.5px;font-weight:400;line-height:1.35}
.b-item .bt{font-size:10px;color:var(--stone);letter-spacing:.16em;text-transform:uppercase;margin-top:4px}
.b-item .bd{font-size:11px;color:var(--stone);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.b-item.soon{opacity:.5}
.b-item .fav-mark{width:11px;height:11px;fill:var(--gold);stroke:none;display:inline-block;vertical-align:baseline;margin-right:5px}
.lib-empty{font-size:12px;color:var(--stone);font-weight:300;padding:30px 0;text-align:center;line-height:1.7}

/* ── YOU ──────────────────────────────────────────────────── */
.you-card{border:1px solid var(--line);border-radius:20px;padding:20px 22px;background:rgba(255,255,255,.4);margin-bottom:14px}
.you-card .yk{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--stone)}
.you-card .yv{font-family:var(--serif);font-size:20px;margin-top:8px;line-height:1.3}
.you-card .yd{font-size:11.5px;color:#666;margin-top:6px;font-weight:300;line-height:1.6}
.you-card .cta{margin-top:18px;padding:15px 22px}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat{border:1px solid var(--line);border-radius:18px;padding:16px 8px;background:rgba(255,255,255,.4);text-align:center}
.stat .sv{font-family:var(--serif);font-size:26px;font-variant-numeric:tabular-nums}
.stat .sk{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin-top:6px}
.name-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.name-input{flex:1;border:1px solid var(--line);border-radius:100px;padding:10px 16px;font-size:14px;font-family:var(--serif);background:rgba(255,255,255,.5);color:var(--ink);outline:none}
.tiny-btn{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);cursor:pointer;padding:8px 4px}
.version-line{text-align:center;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#b6b3a8;margin-top:26px}

/* ── TAB BAR + MINI PLAYER ────────────────────────────────── */
.tabbar{position:absolute;bottom:0;left:0;right:0;height:calc(74px + var(--safe-bottom));
  background:rgba(244,242,236,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-around;
  padding:13px 0 var(--safe-bottom);z-index:60}
.tab{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);cursor:pointer;font-weight:500;padding:0 18px}
.tab.on{color:var(--ink)}
.tab .gl{width:18px;height:18px;border:1.5px solid currentColor;border-radius:5px}
.tab.t-browse .gl{border-radius:50%}
.tab.t-you .gl{border-radius:5px 5px 12px 12px}
.tabbar.hidden,.mini.hidden{display:none}
/* on the player the cream tab bar reads as a bright slab under a black screen —
   go dark and translucent so the screen stays one piece */
#app.on-player .tabbar{background:rgba(10,9,8,.6);border-top-color:rgba(244,242,236,.08)}
#app.on-player .tab{color:rgba(244,242,236,.35)}
#app.on-player .tab.on{color:var(--cream)}

.mini{position:absolute;bottom:calc(74px + var(--safe-bottom));left:10px;right:10px;height:58px;
  background:rgba(17,17,16,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:16px;display:flex;align-items:center;gap:12px;padding:0 8px 0 8px;z-index:59;color:var(--cream);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5);cursor:pointer}
.mini-thumb{width:42px;height:42px;border-radius:10px;background-size:cover;background-position:center;flex-shrink:0}
.mini-meta{flex:1;min-width:0}
.mini-meta .mn{font-family:var(--serif);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-meta .mt{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:#9a978d;margin-top:3px}
.mini-play{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mini-play svg{width:18px;height:18px;fill:var(--cream)}

/* ── misc ─────────────────────────────────────────────────── */
.toast{position:absolute;left:24px;right:24px;bottom:calc(150px + var(--safe-bottom));z-index:70;
  background:rgba(17,17,16,.94);color:var(--cream);border-radius:14px;padding:14px 18px;
  font-size:12px;font-weight:300;text-align:center;line-height:1.5;
  opacity:0;transform:translateY(8px);transition:.35s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.soon-tag{font-size:9px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:4px 9px;color:var(--stone);font-weight:500;white-space:nowrap}
.player .soon-tag{border-color:rgba(255,255,255,.25);color:#9a978d}

/* ── accounts & onboarding ─────────────────────────────────── */
.gate-links{display:flex;gap:26px;margin-top:24px}
.gate-link{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#a99a83;cursor:pointer;padding:6px 2px}
.ob-field{width:100%;border:1px solid var(--line);border-radius:100px;padding:16px 22px;font-size:16px;background:rgba(255,255,255,.4);color:var(--ink);outline:none;margin:26px 0 20px;text-align:center;font-family:var(--serif)}
.ob-field::placeholder{color:#a5a29a;font-family:var(--sans);font-size:12.5px}
.ob-field:focus{border-color:var(--stone)}
.ob-select{width:100%;border:1px solid var(--line);border-radius:100px;padding:16px 22px;font-size:13px;background:rgba(255,255,255,.4);color:var(--ink);outline:none;margin:26px 0 20px;-webkit-appearance:none;appearance:none;text-align:center}
.focus.sel{background:var(--ink);border-color:var(--ink)}
.focus.sel h3{color:var(--cream)}
.focus.sel span{color:#b9b6ab}


/* ── paywall ─────────────────────────────────────────────────── */
.plan{border:1px solid var(--line);border-radius:24px;padding:18px 20px;margin-bottom:12px;
      background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.plan:active{transform:scale(.995)}
.plan.on{border-color:var(--ink);background:rgba(255,255,255,.9);
         box-shadow:inset 0 0 0 1px var(--ink)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-name{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--stone)}
.plan.on .plan-name{color:var(--ink)}
.plan-badge{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
            border:1px solid var(--line);border-radius:999px;padding:4px 9px;white-space:nowrap}
.plan.on .plan-badge{border-color:var(--ink);color:var(--ink)}
.plan-price{font-family:var(--serif);font-size:27px;margin-top:10px;line-height:1.1}
.plan-price span{font-family:var(--sans);font-size:11px;color:var(--stone);letter-spacing:.04em}
.plan-note{font-size:11.5px;color:#666;font-weight:300;margin-top:6px}
.plan-was{font-size:.6em;opacity:.45;margin-right:8px}
.plan-code{margin-top:10px}
.plan-code b{font-weight:500;letter-spacing:.06em;color:var(--ink)}
.pay-rec{font-size:12px;color:#5f5d56;font-weight:300;line-height:1.6;
         margin-top:14px;padding-left:13px;border-left:1px solid var(--line)}
.pay-err{font-size:11px;color:#9b3b2f;min-height:16px;margin-top:12px;font-weight:300;line-height:1.5}
.pay-note{font-size:10.5px;color:var(--stone);font-weight:300;line-height:1.65;
          margin-top:12px;text-align:center}
.pay-note a{color:inherit;text-decoration:underline}
.pay-alt{display:flex;justify-content:center;margin-top:16px}
.pay-alt span{font-size:11px;color:var(--stone);cursor:pointer;
              text-decoration:underline;text-underline-offset:3px}

/* paywall runs long on a 844px screen — tighten only this screen's rhythm
   so the button and its fine print stay above the fold */
#s-pay .q-title{margin-bottom:18px}
#s-pay .plan{padding:16px 20px;margin-bottom:10px}
#s-pay .cta{margin-top:18px}