/* /guide/whats-new/: the New Style voice cards demo. The same voice fill
   played on the old card and on the New Style card, inside the crew guide's
   phone (.iph, guide.css). Card look rebuilt from apps/mobile on Develop:
   the old card (screen/ledger-card.tsx, asking-card.tsx, filled-rows.tsx)
   and the New Style panel (screen/panel-card.tsx; buck-working.ts: the box
   shows only while Buck waits on the person). Classes come from
   assets/whats-new-demo.js; without it the finished state shows.
   Motion: smooth eases only, nothing overshoots; reduced motion drops it. */

/* ---------- the pair: side by side from 640px, a toggle below ---------- */
.wd{margin:20px 0 0; display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0}
.wd-pair{display:flex; flex-wrap:wrap; gap:24px}
.wd-ph{min-width:0}
.wd-ph .wn-cap{margin:0 0 10px}
.wd-iph{--ps:.6}
.wd-toggle{display:flex; gap:8px}
.wd-toggle[hidden]{display:none}
@media (max-width:639.98px){
  /* small enough that the whole entry fits a 360x740 screen; the toggle names the phone */
  .wd-iph{--ps:.5}
  .wd:has(.wd-toggle:not([hidden])) .wd-ph .wn-cap{display:none}
  .wd[data-show="new"] .wd-ph[data-look="old"],
  .wd[data-show="old"] .wd-ph[data-look="new"]{display:none}
}
@media (min-width:640px){
  .wd-toggle{display:none}
  .wd-pair{flex-wrap:nowrap}
}
@media (min-width:960px){
  .wd{margin-top:0}
  .wd-iph{--ps:.64}
}

/* ---------- the voice screen (390 x 844, scaled with the phone) ---------- */
.wd-scr{position:absolute; inset:0; background:#fff; transition:opacity .3s cubic-bezier(.45,0,.55,1)}
.wd-scr.dim{opacity:0}
.wd-scr::after{content:""; position:absolute; z-index:30; left:50%; bottom:8px; width:136px; height:5px; margin-left:-68px; border-radius:9999px; background:#0f172a}
.wd-job{position:absolute; left:16px; right:16px; top:71px; display:flex}
.wd-pill{height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 18px; border-radius:9999px; background:#056187; color:#fff;
  font:600 16px/24px var(--inter); white-space:nowrap}
.wd-pill b{font-weight:600}

/* what was heard, and Buck's line: one at a time, crossfading */
.wd-says{position:absolute; left:24px; right:24px; top:128px; height:56px; display:grid}
.wd-say{grid-area:1/1; margin:0; align-self:center; text-align:center; opacity:0;
  transition:opacity .3s cubic-bezier(.45,0,.55,1)}
.wd-say.on{opacity:1}
.wd-say.you{font:600 17px/24px var(--inter); color:#475569}
.wd-say.buck{font:600 16px/24px var(--inter); color:#0f172a}

/* the card */
.wd-card{position:absolute; left:16px; right:16px; top:196px; padding:12px; border-radius:12px; background:#fff;
  box-shadow:0 6px 16px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.04)}
.wd-head{display:flex; align-items:center; gap:12px}
.wd-ic{flex:none; width:36px; height:36px; border-radius:8px; background:#056187; color:#fff; display:flex; align-items:center; justify-content:center}
.wd-box-ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.wd-ht{flex:1; min-width:0; display:flex; flex-direction:column}
.wd-ht b{font:600 16px/24px var(--inter); color:#0f172a}
.wd-ht span{font:400 14px/20px var(--inter); color:#475569}
.wd-rule{display:block; height:2px; margin-top:12px; background:#0879a3}

/* the asked question with its box and Next (asking-card.tsx) */
.wd-fold{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.65,0,.35,1)}
.wd-fold > div{min-height:0; overflow:hidden}
.wd-ask{display:flex; flex-direction:column; gap:10px; padding-top:12px; opacity:0; transition:opacity .2s cubic-bezier(.45,0,.55,1)}
.wd-ph.ask-open .wd-fold{grid-template-rows:1fr}
.wd-ph.ask-open .wd-ask{opacity:1; transition-delay:.1s}
.wd-q{font:600 17px/24px var(--inter); color:#0f172a}
.wd-box{display:flex; align-items:center; height:52px; padding:0 14px; border:1px solid #0879a3; border-radius:4px; background:#fff}
.wd-val{font:400 18px/24px var(--inter); color:#0f172a; white-space:nowrap; overflow:hidden}
.wd-next{align-self:flex-end; display:inline-flex; align-items:center; height:44px; padding:0 22px; border-radius:4px; background:#056187; color:#fff; font:600 16px/24px var(--inter)}

/* the check on a filled answer (form-row-motion.tsx): drawn in, no bounce */
.wd-ck{flex:none; width:18px; height:18px; fill:none; stroke:#0c9199; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.wd-ck path{stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .4s cubic-bezier(.33,1,.68,1) .15s}
.fill > .wd-top .wd-ck path, .wd-row.fill .wd-ck path{stroke-dashoffset:0}

/* old: one filled row per answer, the reading alone (filled-rows.tsx) */
.wd-rows{list-style:none; margin:0; padding:4px 0 0}
.wd-row{display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .3s cubic-bezier(.65,0,.35,1), opacity .25s cubic-bezier(.45,0,.55,1)}
.wd-row > div{min-height:0; overflow:hidden}
.wd-row.fill{grid-template-rows:1fr; opacity:1}
.wd-rw{display:flex; align-items:center; gap:10px; padding:8px 6px 6px; font:400 16px/24px var(--inter); color:#334155}
.wd-rw .wd-ck{color:#475569; stroke:#475569}

/* New Style: every field a tile (panel-card.tsx) */
.wd-tiles{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:12px}
.wd-tile{position:relative; min-height:96px; padding:12px; border-radius:12px; border:1px dashed #cbd5e1; background:#f8fafc;
  display:flex; flex-direction:column; justify-content:space-between; gap:6px; overflow:hidden;
  transition:border-color .25s ease, background-color .25s ease}
.wd-tile.whole{grid-column:1 / -1}
.wd-tile.fill{border:1px solid #e2e8f0; background:#fff}
.wd-tile.asked{border:2px solid #056187; padding:11px; background:#fff}
.wd-wash{position:absolute; inset:0; background:#e6f3f7; opacity:0; transition:opacity .45s cubic-bezier(.45,0,.55,1)}
.wd-tile.asked .wd-wash{animation:wd-pulse 1.1s cubic-bezier(.37,0,.63,1) infinite alternate}
.wd-tile.landed .wd-wash{opacity:1; transition:none}
@keyframes wd-pulse{from{opacity:.15} to{opacity:1}}
.wd-top{position:relative; display:flex; align-items:center; gap:6px}
.wd-tn{flex:1; min-width:0; font:600 11px/16px var(--inter); letter-spacing:.66px; text-transform:uppercase; color:#64748b; transition:color .25s ease}
.fill .wd-tn, .asked .wd-tn{color:#056187}
.wd-rd{position:relative; display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:4px; opacity:0; transform:translateY(6px);
  transition:opacity .35s cubic-bezier(.33,1,.68,1), transform .35s cubic-bezier(.33,1,.68,1)}
.wd-tile.fill .wd-rd{opacity:1; transform:none}
.wd-plain{font:600 18px/26px var(--inter); color:#0f172a}
.wd-num{font:400 44px/44px var(--bebas); color:#0f172a; font-variant-numeric:tabular-nums}
.wd-unit{font:600 17px/26px var(--inter); color:#475569}

/* the mic disc: cyan while the person talks (voice-fab.tsx) */
.wd-fab{position:absolute; left:50%; top:712px; width:64px; height:64px; margin-left:-32px}
.wd-disc{position:absolute; inset:0; border-radius:50%; background:#056187; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 6px rgba(15,23,42,.18); transition:background-color .2s cubic-bezier(.45,0,.55,1)}
.wd-disc svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.wd-ph.rec .wd-disc{background:#00a3e0}

/* a reset between loops jumps, with nothing moving; off screen, it holds */
.wd.jump *, .wd.jump *::before, .wd.jump *::after{transition:none !important; animation:none !important}
.wd.held *{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  .wd *, .wd *::before, .wd *::after{transition:none !important; animation:none !important}
}