/* [chooser] The 3D site's landing: a sheet over the silhouette (the intro's glow picture and the spinning ice), restyled (Oct 7) as the
   app's own modal (the Desk's sheet over its scrim, with the white-overlay halo) holding the app's own choice cards: a question and two
   big choices, both live from the first paint: Full-Flavor (the interactive 3D film)
   and Decaf (the quick version, straight into the inside view). Markup: index.html (#chooser, inside #intro; the loader is the
   intro's own, by reference). Logic: chooser.js (the card, the preloading, the zoom), decaf.js (the light shell Decaf lands in).
   Only when html[data-choose] (index.html's pre-paint script: no remembered choice, no deep link, no tool flag). Otherwise the
   wrappers are display: contents and the loader sits where it always did (#intro .ld). When Full-Flavor is picked the loader
   moves back out of the card (chooser.js), so the intro's own rules for it apply again. No blur behind the card on purpose: the
   page's GPU work can hold the compositor, and the card must stay light. */
#chooser, #chooser .ch-card, #chooser .ch-sheet, #chooser .ch-top { display: contents; }
#chooser .ch-q, #chooser .ch-opts, #chooser .ch-status { display: none; }

/* [decaf] the light shell (decaf.js): the inside page and the HUD, no film: nothing scrolls under them */
html[data-decaf], html[data-decaf] body { overflow: hidden; height: 100%; }
html[data-decaf] #track, html[data-decaf] #ui, html[data-decaf] #callouts { display: none; }
html.ch-lock, html.ch-lock body { overflow: hidden; height: 100%; }
html.ch-lock #track { display: none; }
/* the shell's layer: the inside page, full window, under the HUD (the film's editor layer is z 2) */
.cc-decaf { position: fixed; inset: 0; z-index: 2; background: #101113; opacity: 0; pointer-events: none; }
.cc-decaf.on { pointer-events: auto; }
.cc-decaf .cc-ending-shot { position: absolute; inset: 0; overflow: hidden; }
.cc-decaf .cc-inside-frame { width: 100vw; height: 100vh; height: 100dvh; transform: none; }
/* the warm-up frame (the card is up: the page loads where nobody sees it, and is adopted when Decaf is picked) */
.cc-decaf-warm { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; border: 0; opacity: 0; visibility: hidden; pointer-events: none; }

/* ===== the card = the app's sheet + choice cards, ported (Q, Oct 7: "make this look like our modals in our app, for our cards").
   Source (read only, icedcoffee-tracker): src/espresso/tokens.css (the Espresso tokens, copied below), src/espresso/kit.css (halo 157-196,
   sheet 200-234, panel motion 240-254), src/desk/ui/ui.css (ChoiceCards 225-275), src/desk/ui/ChoiceCards.tsx (the card's anatomy: icon,
   title, lines, centered column), src/desk/onboarding/onboarding.css:135 (title 26/600), src/desk/styles/base.css:74 (the focus ring).
   The ice loader is NOT part of the card (Q: "we don't need the loader UNLESS these two aren't up and it's STILL loading"): until
   chooser.js has the card ready (#chooser.ch-ready) the loader shows alone, centered, where the card will be; the moment the card with
   its two choices is up the loader is gone. (When Full-Flavor is picked, chooser.js hands the loader back to the intro's own spot.) */
html[data-choose] #intro #chooser {
  /* tokens.css:30-90, Espresso (dark) */
  --d-surface: #150900; --d-line: rgba(255, 255, 255, .07); --d-line-amber: rgba(255, 175, 67, .25);
  --d-text: #F0DFC4; --d-text-dim: rgba(240, 223, 196, .66); --d-accent: #FFAF43; --d-accent-glow: #FFAF43;
  --d-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px -28px rgba(0, 0, 0, .7);   /* tokens.css:40 */
  --d-scrim: rgba(10, 4, 0, .5);   /* tokens.css:61 */
  --d-halo-reach: 375px;   /* tokens.css:52-55 */
  --d-halo-ramp: rgb(0 0 0 / .0013) 0, rgb(0 0 0 / .0062) 62.5px, rgb(0 0 0 / .0228) 125px, rgb(0 0 0 / .0668) 187.5px,
    rgb(0 0 0 / .1587) 250px, rgb(0 0 0 / .3085) 312.5px, rgb(0 0 0 / .5) 375px, rgb(0 0 0 / .6915) 437.5px,
    rgb(0 0 0 / .8413) 500px, rgb(0 0 0 / .9332) 562.5px, rgb(0 0 0 / .9772) 625px, rgb(0 0 0 / .9938) 687.5px, #000 750px;
  --d-ease: cubic-bezier(.22, 1, .36, 1); --d-fast: 160ms; --d-med: 320ms;   /* tokens.css:89-90 */
  --d-spring: linear(0, 0.0294, 0.1041, 0.2065, 0.3227, 0.4423, 0.5576, 0.6634, 0.7566, 0.8359, 0.9009, 0.9521, 0.9909, 1.0188, 1.0374, 1.0484, 1.0535, 1.0541, 1.0515, 1.0468, 1.0409, 1.0345, 1.028, 1.0219, 1.0164, 1.0116, 1.0076, 1.0043, 1.0018, 0.9999, 0.9986, 0.9977, 0.9972, 0.9971, 0.9971, 0.9973, 1); --d-spring-ms: 460ms;   /* tokens.css:95 */
  --d-r-sheet: 24px; --d-r-card: 16px;   /* tokens.css:111 (--d-round 1) */
  --d-ring-w: 2px; --d-ring-offset: 3px;   /* tokens.css:117 */
  --d-sp-3: 12px; --d-sp-4: 16px; --d-sp-6: 24px; --d-sp-7: 32px;   /* tokens.css:127 */
  --d-font: Archivo, "Helvetica Neue", Arial, sans-serif;

  /* the overlay (kit.css:202): the centering layer; the scrim is its ::before (below) */
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  padding: var(--d-sp-6); box-sizing: border-box; pointer-events: none;
  font-family: var(--d-font); -webkit-font-smoothing: antialiased; color: var(--d-text);
}
/* the scrim (kit.css:208): the dim, on a layer of its own so the halo can see through to the silhouette. The app adds a 2px blur of what
   is behind; not here: the page's GPU work can hold the compositor, and the card must stay light (the silhouette stays sharp and visible) */
html[data-choose] #intro #chooser::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--d-scrim); opacity: 0; pointer-events: none; }
html[data-choose] #intro #chooser.ch-ready::before { animation: chFadeIn var(--d-fast) var(--d-ease) both; }
html[data-choose] #intro #chooser.ch-leaving::before { animation: chFadeOut var(--d-fast) ease-in forwards; }
@keyframes chFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes chFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* the loader alone, only until the card can show (the intro's own .ld, in its markup, by reference): centered where the card will be.
   Its own entrance has a 350 ms delay (intro CSS, ldIn), so a card that is ready at once never shows it at all */
html[data-choose] #intro #chooser .ld { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; --ld-size: 60px; transition: none; }
html[data-choose] #intro #chooser .ld.out { opacity: 1; }
html[data-choose] #intro #chooser .ld.gone { display: flex; }
html[data-choose] #intro #chooser .ld-label { font-size: 15px; }
html[data-choose] #intro #chooser.ch-ready .ch-top { display: none; }   /* the card is up: no loader */

html[data-choose] #intro #chooser .ch-status { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
/* the card is not there until it is ready (chooser.js adds .ch-ready, and moves focus to Full-Flavor, at its first chance) */
html[data-choose] #intro #chooser:not(.ch-ready) .ch-q, html[data-choose] #intro #chooser:not(.ch-ready) .ch-opts { display: none; }

/* the frame (kit.css:157-196 .desk-halo + 212 .desk-sheet-frame + panel motion 241-243): carries the width, the halo and the rise; a transform and only
   a transform (a fade here would blind the halo). The halo is white at 100% blended overlay in the app's own way: brightness(2) of the backdrop, masked
   to the 250px blur's Gaussian ramp, with the sheet's own rounded rect cut out */
html[data-choose] #intro #chooser.ch-ready .ch-card {
  display: block; pointer-events: auto; position: relative; width: 100%; max-width: 640px; box-sizing: border-box;
  contain: layout; border-radius: var(--d-r-sheet); --halo-r: var(--d-r-sheet); --halo-in: var(--d-med);
  animation: chRise var(--d-spring-ms) var(--d-spring) both;
}
@keyframes chRise { from { transform: translateY(10px) scale(.97); } to { transform: none; } }   /* kit.css:241 */
html[data-choose] #intro #chooser.ch-ready .ch-card::before {
  --R: var(--d-halo-reach); --r: var(--halo-r); --rr: min(2 * var(--r), 100% - 2 * var(--R));
  content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--R)); pointer-events: none;
  backdrop-filter: brightness(2); -webkit-backdrop-filter: brightness(2);
  mask-image:
    linear-gradient(to right, var(--d-halo-ramp)), linear-gradient(to left, var(--d-halo-ramp)),
    linear-gradient(to bottom, var(--d-halo-ramp)), linear-gradient(to top, var(--d-halo-ramp)),
    linear-gradient(#000 0 0), linear-gradient(#000 0 0),
    radial-gradient(closest-side, #000 calc(100% - 1px), transparent), radial-gradient(closest-side, #000 calc(100% - 1px), transparent),
    radial-gradient(closest-side, #000 calc(100% - 1px), transparent), radial-gradient(closest-side, #000 calc(100% - 1px), transparent);
  mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    calc(100% - 2 * var(--R)) calc(100% - 2 * var(--R) - 2 * var(--r)), calc(100% - 2 * var(--R) - 2 * var(--r)) calc(100% - 2 * var(--R)),
    var(--rr) var(--rr), var(--rr) var(--rr), var(--rr) var(--rr), var(--rr) var(--rr);
  mask-position: 0 0, 0 0, 0 0, 0 0, center, center,
    left var(--R) top var(--R), right var(--R) top var(--R), left var(--R) bottom var(--R), right var(--R) bottom var(--R);
  mask-repeat: no-repeat;
  mask-composite: intersect, intersect, intersect, subtract, add, add, add, add, add, add;
  animation: chFadeIn var(--halo-in) var(--d-ease) both;
}
/* the sheet (kit.css:216): the surface, hairline, radius 24, the app's shadow; padding 32 (kit.css:223) */
html[data-choose] #intro #chooser.ch-ready .ch-sheet {
  display: flex; flex-direction: column; align-items: center; gap: var(--d-sp-6); box-sizing: border-box; width: 100%;
  padding: var(--d-sp-7); background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r-sheet); box-shadow: var(--d-shadow);
  animation: chFadeIn var(--d-med) var(--d-ease) both;
}
/* the question: the app's onboarding title (onboarding.css:135: 26/1.29, 600, .78px), centered */
html[data-choose] #intro #chooser .ch-q { display: block; margin: 0; text-align: center; font: 600 26px/1.29 var(--d-font); letter-spacing: .78px; color: var(--d-text); text-wrap: balance; }

/* the two cards: ChoiceCards' grid (ui.css:231, gap 19) */
html[data-choose] #intro #chooser .ch-opts { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 19px; width: 100%; margin: 0; }
/* a choice card (ui.css:235-246): 1px hairline, radius 24, padding 24 / 16 / 32, a centered column, gap 16; hover = the amber hairline; press = .99.
   The app's cards are transparent on the sheet. Native buttons here, reset to the same box */
html[data-choose] #intro #chooser .ch-btn {
  appearance: none; -webkit-appearance: none; font: inherit; color: var(--d-text); margin: 0; box-sizing: border-box; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; text-align: center;
  padding: 24px 16px 32px; border-radius: 24px; border: 1px solid var(--d-line); background: transparent; cursor: pointer;
  transition: border-color var(--d-fast) var(--d-ease), background-color var(--d-med) var(--d-ease), box-shadow var(--d-med) var(--d-ease), transform var(--d-spring-ms) var(--d-spring);
  -webkit-tap-highlight-color: transparent;
}
html[data-choose] #intro #chooser .ch-btn:hover { border-color: var(--d-line-amber); }
html[data-choose] #intro #chooser .ch-btn:active { transform: scale(.99); transition-duration: var(--d-fast), var(--d-med), var(--d-med), var(--d-fast); }
/* the ring (base.css:74 + ui.css:246): 2px accent, 3px clear, keeping the card's own radius */
html[data-choose] #intro #chooser .ch-btn:focus-visible { outline: var(--d-ring-w) solid var(--d-accent); outline-offset: var(--d-ring-offset); border-radius: 24px; }
/* the icon (ui.css:247: 88px, in the text color; the app's exports are lucide strokes 1.2 in a 24 box, scaled 3.667: same here) */
html[data-choose] #intro #chooser .ch-icon { display: block; flex: none; width: 88px; height: 88px; color: var(--d-text); }
/* title over its line (ui.css:261-267) */
html[data-choose] #intro #chooser .ch-text { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; min-width: 0; align-items: center; }
html[data-choose] #intro #chooser .ch-name { display: block; margin-bottom: 8px; font-size: 20px; line-height: 1.5; font-weight: 600; letter-spacing: 1.2px; color: var(--d-accent); text-box: trim-both cap alphabetic; text-wrap: balance; }
html[data-choose] #intro #chooser .ch-desc { display: block; font-size: 13px; line-height: 1.65; letter-spacing: .39px; color: var(--d-text-dim); text-box: trim-both cap alphabetic; text-wrap: balance; }
/* "Treat Yourself!" is the primary (Q, Oct 7: "make it look more enticing"): the app's "this one" treatment (ui.css:242, the surface
   warmed by the accent) pushed further: an amber glass whose ice bobs, a soft layered glow that breathes behind it (the close icon's
   halo, slower), a slow shine across the card, and on hover the glow blooms and the glass lifts. Straight stays the plain card */
html[data-choose] #intro #chooser .ch-full {
  position: relative; isolation: isolate; overflow: hidden; border-color: var(--d-accent);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--d-accent) 16%, transparent), transparent 70%), color-mix(in srgb, var(--d-accent) 7%, var(--d-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--d-accent) 18%, transparent), 0 0 24px color-mix(in srgb, var(--d-accent-glow) 14%, transparent), 0 10px 40px -8px color-mix(in srgb, var(--d-accent-glow) 22%, transparent);
}
/* the breathing glow behind the glass: three soft rings of amber, one layer, opacity and scale only */
html[data-choose] #intro #chooser .ch-full::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 18px; width: 200px; height: 200px; margin-left: -100px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--d-accent) 42%, transparent), color-mix(in srgb, var(--d-accent) 16%, transparent) 45%, color-mix(in srgb, var(--d-accent) 5%, transparent) 72%, transparent);
  filter: blur(6px); opacity: .55; transform: scale(.9); animation: chBreathe 6.4s ease-in-out infinite;
}
@keyframes chBreathe { 0%, 100% { opacity: .5; transform: scale(.88); } 50% { opacity: .95; transform: scale(1.06); } }
/* the shine: a soft band that crosses the card every 7 s */
html[data-choose] #intro #chooser .ch-sheen { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; overflow: hidden; }
html[data-choose] #intro #chooser .ch-sheen::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 205, .10) 45%, rgba(255, 236, 205, .16) 50%, rgba(255, 236, 205, .10) 55%, transparent);
  transform: translateX(-120%) skewX(-12deg); animation: chSheen 7s cubic-bezier(.45, 0, .2, 1) 1.2s infinite;
}
@keyframes chSheen { 0% { transform: translateX(-120%) skewX(-12deg); } 26%, 100% { transform: translateX(330%) skewX(-12deg); } }
/* the glass: amber, with a little glow of its own; the ice bobs, each cube on its own beat */
html[data-choose] #intro #chooser .ch-full .ch-icon { color: var(--d-accent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--d-accent-glow) 45%, transparent)); transition: transform var(--d-spring-ms) var(--d-spring), filter var(--d-med) var(--d-ease); }
html[data-choose] #intro #chooser .ch-ice { transform-box: fill-box; transform-origin: center; animation: chBob 3.6s ease-in-out infinite; }
html[data-choose] #intro #chooser .ch-ice-b { animation-delay: -1.2s; animation-duration: 4.1s; }
html[data-choose] #intro #chooser .ch-ice-c { animation-delay: -2.3s; animation-duration: 3.3s; }
@keyframes chBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.1px) rotate(8deg); } }
html[data-choose] #intro #chooser .ch-full .ch-name { font-size: 22px; text-shadow: 0 0 18px color-mix(in srgb, var(--d-accent-glow) 40%, transparent); }
html[data-choose] #intro #chooser .ch-full .ch-desc { color: color-mix(in srgb, var(--d-text) 88%, var(--d-accent)); }
html[data-choose] #intro #chooser .ch-full:hover {
  border-color: var(--d-accent); transform: translateY(-2px);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--d-accent) 24%, transparent), transparent 72%), color-mix(in srgb, var(--d-accent) 10%, var(--d-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--d-accent) 35%, transparent), 0 0 36px color-mix(in srgb, var(--d-accent-glow) 30%, transparent), 0 16px 56px -8px color-mix(in srgb, var(--d-accent-glow) 38%, transparent);
}
html[data-choose] #intro #chooser .ch-full:hover::before { animation-duration: 3.2s; }
html[data-choose] #intro #chooser .ch-full:hover .ch-icon { transform: translateY(-4px) rotate(-4deg) scale(1.04); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--d-accent-glow) 65%, transparent)); }
html[data-choose] #intro #chooser .ch-full:active { transform: scale(.99); }

html[data-choose] #intro #chooser.ch-gone { display: none; }
html[data-choose] #intro #chooser.ch-leaving .ch-card, html[data-choose] #intro #chooser.ch-leaving .ch-btn { pointer-events: none; }
/* going out (kit.css:244-246): the frame sinks (chooser.js, a transform), the sheet and the halo fade */
html[data-choose] #intro #chooser.ch-leaving .ch-card::before { animation: chFadeOut var(--d-fast) ease-in forwards; }
html[data-choose] #intro #chooser.ch-leaving .ch-sheet { animation: chFadeOut var(--d-fast) ease-in forwards; }

/* narrower than 700: the two stack (ui.css:289-298's idea), the card closer */
@media (max-width: 700px) {
  html[data-choose] #intro #chooser { padding: var(--d-sp-4); }
  html[data-choose] #intro #chooser.ch-ready .ch-sheet { padding: var(--d-sp-6) var(--d-sp-4); gap: var(--d-sp-4); }
  html[data-choose] #intro #chooser .ch-q { font-size: 22px; }
  html[data-choose] #intro #chooser .ch-opts { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html[data-choose] #intro #chooser .ch-btn { flex-direction: row; text-align: left; padding: 16px 20px 16px 16px; gap: 16px; }
  html[data-choose] #intro #chooser .ch-icon { width: 56px; height: 56px; }
  html[data-choose] #intro #chooser .ch-text { padding-top: 0; align-items: flex-start; }
  html[data-choose] #intro #chooser .ch-name { margin-bottom: 0; }
  html[data-choose] #intro #chooser .ch-full::before { left: 44px; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; }
}
/* a short window (a laptop's, down to 560 tall): the icons step down, as onboarding.css:490-500 does */
@media (max-height: 640px) and (min-width: 701px) {
  html[data-choose] #intro #chooser.ch-ready .ch-sheet { padding: var(--d-sp-6); gap: var(--d-sp-4); }
  html[data-choose] #intro #chooser .ch-btn { padding: 14px 14px 18px; gap: 8px; }
  html[data-choose] #intro #chooser .ch-icon { width: 56px; height: 56px; }
  html[data-choose] #intro #chooser .ch-full::before { top: 4px; width: 140px; height: 140px; margin-left: -70px; }
}

/* Reduce Motion (kit.css:247-253): the frame does not travel; the sheet and halo are short plain fades */
@media (prefers-reduced-motion: reduce) {
  html[data-choose] #intro #chooser.ch-ready .ch-card { animation: none; }
  html[data-choose] #intro #chooser.ch-ready .ch-card::before, html[data-choose] #intro #chooser.ch-ready .ch-sheet { animation: chFadeIn 120ms linear both; }
  html[data-choose] #intro #chooser .ch-btn { transition: border-color 120ms linear, background-color 120ms linear; }
  html[data-choose] #intro #chooser .ch-btn:hover, html[data-choose] #intro #chooser .ch-btn:active { transform: none; }
  html[data-choose] #intro #chooser .ch-full::before, html[data-choose] #intro #chooser .ch-sheen::before, html[data-choose] #intro #chooser .ch-ice { animation: none; }
  html[data-choose] #intro #chooser .ch-sheen { display: none; }
  html[data-choose] #intro #chooser .ch-full:hover .ch-icon { transform: none; }
}
html[data-intro="reduced"][data-choose] #intro #chooser.ch-ready .ch-card { animation: none; }
html[data-intro="reduced"][data-choose] #intro #chooser.ch-ready .ch-card::before, html[data-intro="reduced"][data-choose] #intro #chooser.ch-ready .ch-sheet { animation: chFadeIn 120ms linear both; }
html[data-intro="reduced"][data-choose] #intro #chooser .ch-btn { transition: border-color 120ms linear, background-color 120ms linear; }
html[data-intro="reduced"][data-choose] #intro #chooser .ch-btn:hover { transform: none; }
html[data-intro="reduced"][data-choose] #intro #chooser .ch-full::before, html[data-intro="reduced"][data-choose] #intro #chooser .ch-sheen::before, html[data-intro="reduced"][data-choose] #intro #chooser .ch-ice { animation: none; }
html[data-intro="reduced"][data-choose] #intro #chooser .ch-sheen { display: none; }
html[data-intro="reduced"][data-choose] #intro #chooser .ch-full:hover .ch-icon { transform: none; }