/* =====================================================================
   House Hunt · Apple · sign-in, voice-first onboarding, profile, and the
   multi-user bits of the deck (avatar, starter banner, household scores).

   v2 "private office": warm ivory and ink, one bronze accent, Cormorant
   Garamond for display over Inter for text, a real period house on the
   first screens. Tokens below apply while the deck is not showing (boot,
   sign-in) and whenever a layer is open, so dialogs and toasts match; the
   deck keeps its own Apple tokens. Springs from --spring; everything
   decorative is off under reduced motion.
   ===================================================================== */

/* ---------------------------------------------------------------- palette (layers only) */
html:not(.deck-on), html.layer-open {
  --bg: #f6f3ee;            /* warm ivory */
  --bg-elev: #fffdf9;
  --bg-sunk: #eee9e1;
  --label: #1c1a17;         /* ink */
  --label-2: #4d4740;
  --label-3: #6e675d;
  --sep: rgba(40, 33, 24, .13);
  --sep-2: rgba(40, 33, 24, .26);
  --fill: rgba(60, 48, 32, .065);
  --fill-2: rgba(60, 48, 32, .11);
  --tint: #8a6a3d;          /* bronze: ticks, progress, focus */
  --tint-text: #7a5b33;
  --tint-soft: rgba(138, 106, 61, .12);
  --on-tint: #ffffff;
  --btn: #1c1a17;
  --on-btn: #f8f5ef;
  --focus: rgba(138, 106, 61, .62);
  --glass: rgba(255, 253, 249, .72);
  --glass-hi: rgba(255, 253, 249, .92);
  --glass-edge: rgba(255, 255, 255, .6);
  --seg-on: #fffdf9;
  --good: #3f6b4a; --good-mark: #5b7f5f; --good-soft: rgba(91, 127, 95, .14);
  --warn: #8f4a1f; --warn-mark: #b8692e; --warn-soft: rgba(184, 105, 46, .12);
  --bad: #9e2f25;  --bad-mark: #b8372d; --bad-soft: rgba(184, 55, 45, .1);
  --rec: #b8372d;
  --card-shadow: 0 1px 0 rgba(40, 33, 24, .04), 0 22px 48px -30px rgba(52, 38, 20, .38);
  --hero-ink: #fbf8f2;
  --sheet-r: 28px;
}
/* dark only when this device opted in (html[data-theme="dark"]); the system setting doesn't switch it */
html[data-theme="dark"]:not(.deck-on), html[data-theme="dark"].layer-open {
    --bg: #12110f;
    --bg-elev: #1c1a17;
    --bg-sunk: #0c0b0a;
    --label: #f1ece4;
    --label-2: #c8c0b3;
    --label-3: #9c9488;
    --sep: rgba(241, 236, 228, .12);
    --sep-2: rgba(241, 236, 228, .24);
    --fill: rgba(241, 236, 228, .07);
    --fill-2: rgba(241, 236, 228, .12);
    --tint: #c8a46a;
    --tint-text: #d4b47e;
    --tint-soft: rgba(200, 164, 106, .16);
    --on-tint: #16140f;
    --btn: #efe8dc;
    --on-btn: #16140f;
    --focus: rgba(212, 180, 126, .72);
    --glass: rgba(28, 26, 23, .72);
    --glass-hi: rgba(30, 28, 25, .92);
    --glass-edge: rgba(255, 255, 255, .08);
    --seg-on: #3a3630;
    --good: #9cc2a0; --good-mark: #7fa585; --good-soft: rgba(127, 165, 133, .16);
    --warn: #e0a070; --warn-mark: #d08850; --warn-soft: rgba(208, 136, 80, .15);
    --bad: #f08a7e;  --bad-mark: #e0574b; --bad-soft: rgba(224, 87, 75, .15);
    --rec: #d9493d;
    --card-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 24px 50px -30px rgba(0, 0, 0, .8);
}

/* ---------------------------------------------------------------- routing + layers */
html:not(.deck-on) .app, html:not(.deck-on) .skip-link { display: none !important; }
html.layer-open, html.layer-open body { overflow: hidden; }
html:not(.deck-on) body, html.layer-open body { background: var(--bg); }
html.layer-open .toast { left: 50%; top: calc(var(--sat) + 14px); }
.signin, .ob {
  position: fixed; inset: 0; z-index: 80; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; background: var(--bg); color: var(--label); font-family: var(--font);
}

/* Quiet splash while api/me answers */
.boot { position: fixed; inset: 0; z-index: 95; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; background: var(--bg); color: var(--label); text-align: center; }
.boot-mark { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.boot-mark .i { width: 40px; height: 40px; color: var(--tint); stroke-width: 1.25; }
.boot-word { font: 600 30px/1 var(--font-serif); letter-spacing: .01em; }
.boot-line { position: relative; width: 132px; height: 1px; margin-top: 6px; overflow: hidden; background: var(--sep); }
.boot-line::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--tint); animation: bootLine 1.6s var(--ease) infinite; }
@keyframes bootLine { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.boot.failed .boot-line { display: none; }
.boot.failed .boot-mark .i { color: var(--label-3); }
.boot-msg { max-width: 34ch; color: var(--label-2); font-size: 15px; line-height: 1.5; }

/* ---------------------------------------------------------------- shared type + controls */
.signin .btn, .ob .btn { border-radius: 999px; letter-spacing: 0; font-weight: 600; }
.signin .btn-secondary, .ob .btn-secondary { background: transparent; box-shadow: inset 0 0 0 1px var(--sep-2); }
.signin .btn-secondary:hover, .ob .btn-secondary:hover { background: var(--fill); }
.signin .btn-plain, .ob .btn-plain { color: var(--label); font-weight: 500; }
.signin .btn-plain:hover, .ob .btn-plain:hover { background: var(--fill); }
.ob .btn-primary, .signin .btn-primary { box-shadow: 0 10px 24px -14px rgba(28, 22, 14, .7); }
.ob .btn-primary:hover, .signin .btn-primary:hover { background: color-mix(in srgb, var(--btn) 86%, var(--tint)); }
.ob .linkish, .signin .linkish { color: var(--tint-text); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tint) 45%, transparent); text-underline-offset: 3px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-lg .i { width: 19px; height: 19px; }
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--on-btn) 40%, transparent); border-top-color: var(--on-btn); animation: spin .8s linear infinite; }
.btn-secondary.busy::after { border-color: var(--fill-2); border-top-color: var(--label-2); }
.ob :focus-visible, .signin :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ob-h:focus, .si-h:focus, #obTitle:focus { outline: none; }
@media (hover: none) { .kb-only { display: none !important; } }
.ob kbd { background: var(--fill); color: var(--label); box-shadow: inset 0 -1px 0 var(--sep); }

.ob-eyebrow { margin: 0 0 12px; font: 600 11.5px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--tint-text); }
.ob-h, .si-h {
  font: 500 clamp(38px, 10.8vw, 50px)/1.02 var(--font-serif); letter-spacing: -.01em; color: var(--label);
  max-width: 15ch; text-wrap: balance; font-variant-numeric: lining-nums;
}
.ob-h em, .si-h em { font-style: italic; font-weight: 500; }
.ob-lede { margin-top: 14px; max-width: 36em; font-size: 16px; line-height: 1.55; color: var(--label-2); text-wrap: pretty; }
.ob-foot { margin-top: 18px; font-size: 13px; line-height: 1.45; color: var(--label-3); }
.ob-notice, .si-notice {
  display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 13px 15px; border-radius: 16px;
  text-align: left; font-size: 14px; line-height: 1.5; color: var(--label); background: var(--warn-soft); animation: popIn .35s var(--spring);
}
.ob-notice .i, .si-notice .i { width: 18px; height: 18px; margin-top: 1px; color: var(--warn); }
.ob-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.ob-row-end { width: 100%; justify-content: flex-end; align-items: center; margin-top: 18px; }
.ob-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: auto; font-size: 14px; color: var(--label-3); }
.ob .spinner { border-color: var(--fill-2); border-top-color: var(--tint); }

/* ---------------------------------------------------------------- the hero photo */
.hero { position: relative; overflow: hidden; isolation: isolate; color: var(--hero-ink); background: linear-gradient(180deg, #a9b6c2 0%, #c8b7a3 38%, #7a5644 62%, #33402d 100%); }
.hero-southken { background: linear-gradient(180deg, #c9cdd0 0%, #ded6c4 40%, #cfc6b3 70%, #3c3b35 100%); }
.hero picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 50% 44%; opacity: 0; transform: scale(1.025); transition: opacity .9s var(--ease-out), transform 1.6s var(--ease-out); }
.hero.ready .hero-img { opacity: 1; transform: none; }
.hero-southken .hero-img { object-position: 50% 26%; }
/* Scrims: top for the floating header, bottom for the caption (text over the photo stays ≥ 4.5:1) */
.hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero::before { top: 0; height: min(150px, 48%); background: linear-gradient(rgba(14, 11, 8, .62), rgba(14, 11, 8, .26) 55%, rgba(14, 11, 8, 0)); }
.hero::after { bottom: 0; height: min(170px, 60%); background: linear-gradient(rgba(14, 11, 8, 0), rgba(14, 11, 8, .56) 46%, rgba(14, 11, 8, .82)); }
.hero-cap {
  position: absolute; z-index: 2; left: calc(var(--sal) + 22px); right: 22px; bottom: calc(var(--sheet-r) + 12px);
  font: italic 500 15px/1.25 var(--font-serif); letter-spacing: .01em; color: var(--hero-ink); text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .8s .3s;
}
.hero.ready .hero-cap { opacity: .94; }
.hero-cap-d { display: none; }
[data-theme="dark"] .hero-img { filter: brightness(.86) saturate(.92); }

/* Brand: the fanlight mark + a serif wordmark */
.brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand-i { width: 24px; height: 24px; stroke-width: 1.45; color: var(--tint); }
.brand-w { font: 600 21px/1 var(--font-serif); letter-spacing: .01em; }

/* ---------------------------------------------------------------- sign-in */
.signin { display: flex; flex-direction: column; }
/* Like the welcome photo: what's left after the heading and form (the button stays on screen) */
.si-hero { flex: none; height: clamp(190px, calc(100vh - 480px), 46vh); }
@supports (height: 1svh) { .si-hero { height: clamp(190px, calc(100svh - 480px), 46svh); } }
.si-top { position: absolute; z-index: 3; top: calc(var(--sat) + 18px); left: calc(var(--sal) + 22px); color: var(--hero-ink); text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.si-top .brand-i { color: var(--hero-ink); }
.si-sheet {
  position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; margin-top: calc(-1 * var(--sheet-r));
  padding: 30px calc(var(--sar) + 24px) calc(var(--sab) + 24px) calc(var(--sal) + 24px);
  border-radius: var(--sheet-r) var(--sheet-r) 0 0; background: var(--bg); box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .35);
}
.si-body { width: min(440px, 100%); }
.si-h { font-size: clamp(36px, 10.2vw, 48px); max-width: 16ch; }
.si-lede { margin-top: 14px; font-size: 15.5px; line-height: 1.55; color: var(--label-2); max-width: 36em; }
.si-form { display: grid; gap: 10px; margin-top: 26px; }
.si-label { font: 600 11.5px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--label-3); }
.si-input {
  height: 54px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--bg-elev); font-size: 17px; color: var(--label);
  box-shadow: inset 0 0 0 1px var(--sep-2); transition: box-shadow .2s;
}
.si-input::placeholder { color: var(--label-3); opacity: .8; }
.si-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tint), 0 0 0 4px var(--tint-soft); }
.si-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad-mark); }
.si-btn { height: 54px; font-size: 16px; justify-content: space-between; padding: 0 22px 0 26px; }
.si-btn .i { width: 18px; height: 18px; stroke-width: 2; }
.si-err { font-size: 13.5px; color: var(--bad); }
.si-sent { display: flex; gap: 14px; margin-top: 26px; padding: 18px; border-radius: 18px; font-size: 14px; line-height: 1.5; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--sep); animation: popIn .4s var(--spring); }
.si-sent:focus { outline: none; }
.si-sent b { font: 600 20px/1.2 var(--font-serif); }
.si-sent p { margin-top: 6px; color: var(--label-2); }
.si-sent p span { color: var(--label); font-weight: 600; overflow-wrap: anywhere; }
.si-sent .linkish { margin-top: 10px; font-size: 14px; }
.si-sent-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--on-tint); background: var(--tint); }
.si-sent-ic .i { width: 18px; height: 18px; stroke-width: 1.8; }
.si-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; font-size: 13px; color: var(--label-3); }
.si-or::before, .si-or::after { content: ""; flex: 1; height: 1px; background: var(--sep); }
.si-google { width: 100%; height: 50px; }
.si-note { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--sep); font-size: 13.5px; line-height: 1.5; color: var(--label-2); }
.si-note b { color: var(--label); font-weight: 600; }
.si-foot { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 24px; font-size: 12.5px; color: var(--label-3); }
.si-foot .i { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- onboarding shell */
/* Phone photo heights. The welcome photo takes what the content leaves (≈ 610 px of text, checklist and microphone),
   so the microphone stays on screen from a 412×915 down to a phone with its browser bars showing; very short screens
   scroll a little instead of squashing the photo below 150 px. */
.ob {
  --bar-h: 56px;
  --hero-h: 0px;
  --hero-tall: clamp(150px, calc(100vh - 610px), 46vh);
  --hero-done: clamp(180px, calc(100vh - 450px), 48vh);
  --hero-low: clamp(108px, 15vh, 150px);
  --hero-off: max(0px, var(--hero-h) - var(--sheet-r) - var(--bar-h) - var(--sat));
}
@supports (height: 1svh) {
  .ob { --hero-tall: clamp(150px, calc(100svh - 610px), 46svh); --hero-done: clamp(180px, calc(100svh - 450px), 48svh); --hero-low: clamp(108px, 15svh, 150px); }
}
.ob-hero { display: none; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: var(--hero-h); transition: height .6s var(--ease); }
.ob.noanim .ob-hero, .ob.noanim .ob-main { transition: none !important; }

.ob-bar {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 14px;
  height: calc(var(--sat) + var(--bar-h)); padding: var(--sat) calc(var(--sar) + 16px) 0 calc(var(--sal) + 20px);
  color: var(--label); background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 var(--sep);
  transition: background-color .3s, box-shadow .3s, color .3s;
}
.ob-steps { list-style: none; display: flex; align-items: center; gap: 5px; margin: 0 auto; padding: 0; }
.ob-steps li { display: block; width: 16px; height: 3px; border-radius: 2px; background: var(--fill-2); transition: width .45s var(--spring), background-color .3s; }
.ob-steps li.done { background: color-mix(in srgb, var(--tint) 55%, transparent); }
.ob-steps li.now { width: 30px; background: var(--tint); }
.ob-steps .st-l { display: none; }
.ob-steps-ph { flex: 1; }
.ob-close, .ob-av {
  position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--label); background: var(--fill); transition: background-color .2s, color .2s, box-shadow .2s;
}
.ob-close::before, .ob-av::before { content: ""; position: absolute; inset: -4px; } /* 46 px target */
.ob-close:hover, .ob-av:hover, .ob-av[aria-expanded="true"] { background: var(--fill-2); }
.ob-close .i { width: 16px; height: 16px; stroke-width: 2; }
.ob-av { font: 600 13px/1 var(--font); letter-spacing: .04em; box-shadow: inset 0 0 0 1px var(--sep); }
.ob-av .i { width: 22px; height: 22px; stroke-width: 1.6; }
.ob-acct { position: relative; flex: none; }
.ob-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 6; min-width: 232px; max-width: calc(100vw - 32px); padding: 6px;
  border-radius: 18px; color: var(--label); background: var(--bg-elev); text-shadow: none;
  box-shadow: 0 0 0 1px var(--sep), 0 24px 50px -18px rgba(30, 22, 12, .45); animation: popIn .25s var(--spring); transform-origin: top right;
}
.ob-menu-who { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; border-bottom: 1px solid var(--sep); margin-bottom: 6px; }
.ob-menu-who b { font: 600 19px/1.2 var(--font-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-menu-who span { font-size: 13px; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-menu-i { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--label); text-align: left; }
.ob-menu-i:hover, .ob-menu-i:focus-visible { background: var(--fill); }
.ob-menu-i .i { width: 19px; height: 19px; color: var(--label-2); }

.ob-main {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  margin-top: var(--hero-off); min-height: calc(100% - var(--bar-h) - var(--sat) - var(--hero-off));
  padding: 0 calc(var(--sar) + 24px) calc(var(--sab) + 22px) calc(var(--sal) + 24px);
  background: var(--bg); transition: margin-top .6s var(--ease), min-height .6s var(--ease);
}
.ob-step {
  width: min(640px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: opacity .45s var(--ease-out), transform .6s var(--spring);
}
.ob-step.entering { opacity: 0; transform: translateY(14px); transition: none; }

/* ---------------------------------------------------------------- tell: the brief, the checklist, the microphone */
.ob-tell, .ob-type { flex: 1; width: min(560px, 100%); margin: 0 auto; align-items: stretch; text-align: left; }
.tell-head { padding-top: 24px; }
.ob-tell .ob-h, .ob-type .ob-h { transition: font-size .5s var(--ease); }

/* Live transcript (replaces the lede while recording) */
.live-t { display: none; margin: 16px 0 0; padding: 14px 16px 16px; border-radius: 18px; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--sep), var(--card-shadow); }
.ob[data-rec="rec"] .live-t, .ob[data-rec="paused"] .live-t, .ob[data-rec="sending"] .live-t { display: block; animation: popIn .4s var(--spring); }
.ob[data-rec="rec"] .tell-head .ob-lede, .ob[data-rec="paused"] .tell-head .ob-lede, .ob[data-rec="sending"] .tell-head .ob-lede { display: none; }
.live-t figcaption { display: flex; align-items: center; gap: 8px; font: 600 11px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--label-3); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); animation: pulse 1.3s ease-in-out infinite; }
.ob[data-rec="paused"] .live-dot { animation: none; opacity: .4; }
.live-priv { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; letter-spacing: .06em; text-transform: none; font-weight: 500; font-size: 12px; }
.live-priv .i { width: 13px; height: 13px; stroke-width: 1.8; }
.live-text {
  display: flex; flex-direction: column; justify-content: flex-end; margin: 10px 0 0; height: calc(1.34em * 3); overflow: hidden;
  font: italic 500 20px/1.34 var(--font-serif); color: var(--label);
  -webkit-mask-image: linear-gradient(transparent, #000 1.1em); mask-image: linear-gradient(transparent, #000 1.1em);
}
.lt-in { display: block; overflow-wrap: anywhere; }
.live-ph { color: var(--label-3); }
.lt-new { animation: ltIn .7s var(--ease-out); }
@keyframes ltIn { from { opacity: .15; } }

/* The checklist */
.brief { margin-top: 24px; }
.brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--sep); }
.brief-k { font: 600 11.5px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--label-3); }
.brief-n { font-size: 12.5px; color: var(--label-3); font-variant-numeric: tabular-nums; text-align: right; }
.brief-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; margin: 0; padding: 0; }
.brief-list li { border-bottom: 1px solid var(--sep); }
.topic { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 7px 0; text-align: left; color: var(--label); border-radius: 6px; }
.topic-t { display: flex; flex-direction: column; min-width: 0; }
.topic-t b { font: 500 15px/1.25 var(--font); transition: color .3s; }
.topic-t small { margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--label-3); }
@media (hover: hover) { .topic:hover b { color: var(--tint-text); } }
.topic[aria-expanded="true"] b { text-decoration: underline; text-decoration-color: var(--tint); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.topic-tick {
  width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; color: transparent;
  box-shadow: inset 0 0 0 1.25px var(--sep-2); transition: background-color .4s, box-shadow .4s, color .2s;
}
.topic-tick .i { width: 13px; height: 13px; stroke-width: 2.4; stroke-dasharray: 20; stroke-dashoffset: 20; }
.on > .topic-tick { color: var(--on-tint); background: var(--tint); box-shadow: 0 0 0 4px var(--tint-soft); animation: tickPop .55s var(--spring); }
.on > .topic-tick .i { stroke-dashoffset: 0; transition: stroke-dashoffset .45s .12s var(--ease-out); }
@keyframes tickPop { 40% { transform: scale(1.18); } }
.hint-ex {
  margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--sep);
  font: italic 500 18px/1.4 var(--font-serif); color: var(--label);
}
.hint-ex b { display: block; margin-bottom: 4px; font: normal 600 11px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--tint-text); }
.hint-ex.pop { animation: popIn .32s var(--spring); }

/* The microphone dock: low on phones, under the thumb */
.rec { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: auto; padding-top: 18px; text-align: center; }
.rec-meter { display: none; align-items: center; gap: 14px; width: 100%; height: 40px; margin-bottom: 16px; }
.rec[data-state="rec"] .rec-meter, .rec[data-state="paused"] .rec-meter, .rec[data-state="sending"] .rec-meter { display: flex; animation: popIn .35s var(--spring); }
.rec-meter canvas { display: block; flex: 1; min-width: 0; height: 100%; color: var(--tint); }
.rec-clock { min-width: 3.4em; font: 500 22px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-align: right; color: var(--label); }
.rec[data-state="paused"] .rec-clock { color: var(--label-3); }
.rec-ctrls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; width: min(360px, 100%); }
#obRedo { grid-column: 1; justify-self: end; }
#obMic { grid-column: 2; }
#obPause { grid-column: 3; justify-self: start; }
.rc-side { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--label-2); animation: popIn .35s var(--spring); }
.rc-side .i {
  width: 48px; height: 48px; padding: 14px; border-radius: 50%; color: var(--label); stroke-width: 1.8;
  box-shadow: inset 0 0 0 1px var(--sep-2); transition: transform .2s var(--spring), background-color .2s;
}
.rc-side:hover .i { background: var(--fill); }
.rc-side:active .i { transform: scale(.92); }
.mic {
  --lvl: 0; position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-btn); background: var(--btn); box-shadow: 0 18px 34px -16px rgba(28, 20, 10, .75);
  transition: transform .35s var(--spring), background-color .35s, box-shadow .3s, opacity .2s;
}
.mic:hover { transform: scale(1.04); }
.mic:active { transform: scale(.95); }
.mic:disabled { opacity: .8; }
.mic > .i { grid-area: 1 / 1; position: relative; z-index: 1; transition: opacity .2s, transform .35s var(--spring); }
.mic .mic-i { width: 34px; height: 34px; stroke-width: 1.5; }
.mic .stop-i { width: 30px; height: 30px; opacity: 0; transform: scale(.5); }
/* Idle: a fine bronze ring breathes round it */
.mic-breath { position: absolute; inset: -9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--tint); opacity: 0; pointer-events: none; }
.rec[data-state="idle"] .mic-breath { animation: breathe 3.8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.94); opacity: .2; } 50% { transform: scale(1.1); opacity: .85; } }
/* Recording: a soft halo that follows the voice */
.mic-halo {
  position: absolute; inset: -18px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--rec) 34%, transparent), transparent 68%);
  transform: scale(calc(1 + var(--lvl) * .7)); transition: transform .09s linear, opacity .3s;
}
.mic-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); opacity: 0; pointer-events: none; }
.mic-ring circle { fill: none; stroke: var(--tint); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 296; stroke-dashoffset: 220; }
.rec[data-state="starting"] .mic-ring, .rec[data-state="sending"] .mic-ring { opacity: 1; animation: spin 1.1s linear infinite; }
.rec[data-state="rec"] .mic, .rec[data-state="paused"] .mic, .rec[data-state="sending"] .mic { color: #fff; background: var(--rec); box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--rec) 80%, transparent); }
.rec[data-state="rec"] .mic-halo { opacity: 1; }
.rec[data-state="rec"] .mic .mic-i, .rec[data-state="paused"] .mic .mic-i, .rec[data-state="sending"] .mic .mic-i { opacity: 0; transform: scale(.5); }
.rec[data-state="rec"] .mic .stop-i, .rec[data-state="paused"] .mic .stop-i, .rec[data-state="sending"] .mic .stop-i { opacity: 1; transform: none; }
.rec-cap { min-height: 1.45em; margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--label-2); }
.rec-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; margin-top: 2px; font-size: 13px; color: var(--label-3); }
.rec-alt .btn { height: 44px; padding: 0 14px; font-size: 15px; text-decoration: underline; text-decoration-color: var(--sep-2); text-underline-offset: 5px; }
.rec-alt .btn .i { width: 18px; height: 18px; color: var(--label-2); }
.rec[data-state="rec"] .rec-alt .kb-only, .rec[data-state="paused"] .rec-alt .kb-only { visibility: hidden; }
.rec .ob-foot { margin-top: 4px; }

/* typing */
.type-box { width: 100%; margin-top: 24px; }
#obText {
  display: block; width: 100%; min-height: 210px; resize: vertical; padding: 16px 18px; border: 0; border-radius: 18px;
  font-size: 16px; line-height: 1.55; color: var(--label); background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--sep-2);
  transition: box-shadow .2s;
}
#obText::placeholder { color: var(--label-3); opacity: .85; }
#obText:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tint), 0 0 0 4px var(--tint-soft); }
.type-head { margin-top: 18px; border-bottom: 0; padding-bottom: 0; }
.type-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tpc {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 9px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--label-2); box-shadow: inset 0 0 0 1px var(--sep-2); transition: background-color .2s, color .2s;
}
@media (hover: hover) { .tpc:hover { background: var(--fill); color: var(--label); } }
.tpc .topic-tick { width: 20px; height: 20px; }
.tpc.on { color: var(--label); }

/* ---------------------------------------------------------------- processing: a house draws itself, windows light */
.ob-proc { padding: 24px 0 8px; }
.proc-art { width: 176px; margin: 0 auto 22px; color: var(--tint); }
.house-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease-out) forwards; }
.hs-lines path:nth-child(2) { animation-delay: .12s; } .hs-lines path:nth-child(3) { animation-delay: .3s; } .hs-lines path:nth-child(4) { animation-delay: .42s; }
.hs-lines path:nth-child(5) { animation-delay: .62s; } .hs-lines path:nth-child(6) { animation-delay: .78s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hs-win rect { fill: var(--tint); fill-opacity: 0; opacity: 0; animation: winIn .6s 1.25s forwards, winGlow 7.5s 2s ease-in-out infinite; }
.hs-win .w2 { animation-delay: 1.35s, 3.5s; } .hs-win .w3 { animation-delay: 1.45s, 5s; } .hs-win .w4 { animation-delay: 1.55s, 6.5s; } .hs-win .w5 { animation-delay: 1.65s, 8s; }
@keyframes winIn { to { opacity: 1; } }
@keyframes winGlow { 0%, 100% { fill-opacity: .04; } 18%, 46% { fill-opacity: .42; } }
.ob-proc .ob-h { font-size: clamp(34px, 9vw, 44px); max-width: 16ch; }
.ob-proc .ob-lede { max-width: 30em; }
.proc-steps { list-style: none; display: grid; gap: 0; width: min(340px, 100%); margin: 26px auto 0; padding: 0; text-align: left; }
.proc-steps li { display: flex; align-items: center; gap: 14px; min-height: 44px; font-size: 15px; color: var(--label-3); border-bottom: 1px solid var(--sep); transition: color .3s; }
.proc-steps li:last-child { border-bottom: 0; }
.ps-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; color: transparent; box-shadow: inset 0 0 0 1.25px var(--sep-2); transition: background-color .3s, box-shadow .3s, color .3s; }
.ps-dot > *, .ps-dot::after { grid-area: 1 / 1; }
.ps-dot .i { width: 13px; height: 13px; stroke-width: 2.4; }
.proc-steps li.done { color: var(--label-2); }
.proc-steps li.done .ps-dot { color: var(--on-tint); background: var(--tint); box-shadow: none; animation: tickPop .45s var(--spring); }
.proc-steps li.now { color: var(--label); font-weight: 500; }
.proc-steps li.now .ps-dot { box-shadow: inset 0 0 0 1.25px var(--tint); }
.proc-steps li.now .ps-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tint); animation: pulse 1.2s ease-in-out infinite; }
.heard { width: min(540px, 100%); margin: 28px auto 0; padding: 4px 0 4px 20px; text-align: left; border-left: 2px solid var(--tint); animation: popIn .45s var(--spring); }
.heard figcaption { display: flex; align-items: center; gap: 7px; font: 600 11px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--label-3); }
.heard figcaption .i { width: 14px; height: 14px; color: var(--tint); }
.heard blockquote { margin: 8px 0 0; font: italic 500 19px/1.42 var(--font-serif); color: var(--label); white-space: pre-wrap; overflow-wrap: anywhere; }
/* 10 Oct 2026 (Android scroll bug): "Show everything" used to make the quote its own 40vh scroll box with overscroll contained,
   so a swipe on the words scrolled only that box (its end below the fold) and never the page. The page scrolls instead. */
.heard.full blockquote { max-height: none; overflow: visible; }
.heard .linkish { margin-top: 10px; font-size: 14px; }
.proc-meta { margin-top: 20px; font-size: 13px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.proc-slow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* error / empty */
.ob-err { padding: 24px 0; }
.err-glyph { width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--warn-mark) 55%, transparent); }
.err-glyph .i { width: 30px; height: 30px; stroke-width: 1.7; }
.err-glyph.err-soft { color: var(--tint); background: var(--tint-soft); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--tint) 50%, transparent); }
.ob-err .ob-h { font-size: clamp(34px, 9vw, 44px); }
.ob-err .ob-lede { max-width: 32em; }

/* ---------------------------------------------------------------- follow-ups */
.ob-fu { width: min(600px, 100%); align-items: stretch; text-align: left; }
.fu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 16px; }
.fu-head .ob-eyebrow { margin: 0; }
.fu-dots { display: flex; gap: 5px; }
.fu-dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--fill-2); transition: background-color .3s, width .4s var(--spring); }
.fu-dots i.done { background: color-mix(in srgb, var(--tint) 55%, transparent); }
.fu-dots i.now { width: 34px; background: var(--tint); }
.fu-card { width: 100%; padding: 26px 24px 22px; border-radius: 24px; text-align: left; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--sep), var(--card-shadow); }
.fu-card.from-right { animation: fuRight .55s var(--spring); }
.fu-card.from-left { animation: fuLeft .55s var(--spring); }
@keyframes fuRight { from { opacity: 0; transform: translateX(40px); } }
@keyframes fuLeft { from { opacity: 0; transform: translateX(-40px); } }
.fu-area { display: inline-block; margin-bottom: 10px; font: 600 11px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--tint-text); }
.ob-h.fu-q { max-width: none; font-size: clamp(28px, 7.6vw, 36px); line-height: 1.1; text-align: left; }
.fu-hint { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--label-2); }
.fu-answer { margin-top: 20px; }
.fu-text { display: block; width: 100%; min-height: 96px; resize: none; padding: 13px 15px; border: 0; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--sep-2); font-size: 16px; line-height: 1.5; color: var(--label); }
.fu-text:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tint), 0 0 0 4px var(--tint-soft); }
.fu-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 17px; border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--label); background: transparent; box-shadow: inset 0 0 0 1px var(--sep-2); text-align: left;
  transition: background-color .2s, color .2s, transform .25s var(--spring), box-shadow .2s;
}
.tchip:hover { background: var(--fill); }
.tchip:active { transform: scale(.96); }
.tchip[aria-pressed="true"], .tchip[aria-checked="true"] { color: var(--on-btn); background: var(--btn); box-shadow: none; }
.tchip-tick { display: none; }
.tchip[aria-pressed="true"] .tchip-tick { display: inline-grid; }
.tchip-tick .i { width: 15px; height: 15px; stroke-width: 2.4; }
.fu-other { display: grid; gap: 6px; margin-top: 18px; font-size: 12.5px; font-weight: 500; color: var(--label-3); }
.fu-other .field { height: 46px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--sep-2); font-size: 16px; }
.fu-other .field:focus { box-shadow: inset 0 0 0 1.5px var(--tint), 0 0 0 4px var(--tint-soft); }
.fu-k { margin-bottom: 12px; font-size: 13.5px; color: var(--label-3); }
.fu-voice { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sep); }
.fu-voice .ob-notice { margin: 12px 0 0; }
.vbtn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--label); box-shadow: inset 0 0 0 1px var(--sep-2); transition: background-color .2s, transform .2s var(--spring); }
.vbtn:hover { background: var(--fill); }
.vbtn:active { transform: scale(.96); }
.vbtn .i { width: 20px; height: 20px; color: var(--tint-text); }
.vbtn-k kbd { margin-left: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--sep-2); color: var(--label-2); }
.vrec { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 4px 6px 4px 16px; border-radius: 999px; background: var(--bad-soft); animation: popIn .3s var(--spring); }
.vrec-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--rec); animation: pulse 1.2s ease-in-out infinite; }
.vrec[data-state="starting"] .vrec-dot { animation: none; opacity: .4; }
.vrec[data-state="paused"] .vrec-dot { animation: none; }
.vrec canvas { flex: 1; min-width: 0; height: 30px; color: var(--rec); }
.vrec-t { font: 500 16px/1 var(--font); font-variant-numeric: tabular-nums; }
.vrec .btn-sm { height: 42px; padding: 0 14px; font-size: 14px; }
.vans { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.vplay { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--on-btn); background: var(--btn); }
.vplay .i { width: 18px; height: 18px; stroke-width: 2.2; }
.vans-t { display: flex; flex: 1; flex-direction: column; min-width: 150px; }
.vans-t b { font-size: 15px; font-weight: 600; }
.vans-t small { font-size: 12.5px; color: var(--label-3); }
.vans .linkish { font-size: 14px; padding: 8px 0; }
.vans-x { color: var(--bad) !important; }
.fu-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 18px; }
.fu-nav-r { display: flex; gap: 8px; }
.fu-nav .btn { height: 50px; padding: 0 22px; }
.fu-nav .btn-primary .i { width: 17px; height: 17px; stroke-width: 2.2; }

/* Follow-ups (v3, free-form): the points House Hunt still wants as a short list in its own voice, then ONE big mic.
   No text box until you ask: the keyboard button beside the mic slides one in (the mic stays). */
.ob-fu .ff-card { width: 100%; margin-top: 18px; padding: 24px 24px 6px; border-radius: 24px; text-align: left; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--sep), var(--card-shadow); animation: popIn .45s var(--spring) both; }
.ff-card .ob-eyebrow { margin: 0 0 8px; }
.ob-h.ff-h { max-width: none; font-size: clamp(27px, 7.2vw, 34px); line-height: 1.12; text-align: left; }
.ff-points { margin: 16px 0 0; padding: 0; list-style: none; }
.ff-pt { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--sep); }
.ff-pt-i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--tint-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 55%, transparent); }
.ff-pt-i .i { width: 18px; height: 18px; stroke-width: 1.6; }
.ff-pt-t { flex: 1; min-width: 0; }
.ff-pt-t .fu-area { margin-bottom: 4px; }
.ff-pt-q { font: 500 19px/1.36 var(--font-serif); color: var(--label); text-wrap: pretty; }
.ff-pt-t .fu-hint { margin-top: 4px; font-size: 14px; }
.ff-rank { margin-top: 6px; }
.ff-rank summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 500; color: var(--label-2); text-decoration: underline; text-decoration-color: var(--sep-2); text-underline-offset: 5px; }
.ff-rank summary::-webkit-details-marker { display: none; }
.ff-rank summary .i { width: 16px; height: 16px; transition: transform .25s var(--spring); }
.ff-rank[open] summary .i { transform: rotate(180deg); }
.ff-rank .fu-k { margin: 4px 0 10px; }
.ff-rank .btn.ff-rank-send { height: 44px; margin-top: 12px; padding: 0 16px; font-size: 14.5px; border-radius: 999px; }
.ff-rank-send .i { width: 16px; height: 16px; }
.rec.ff-rec { margin-top: 22px; padding-top: 0; }
#ffCancel { grid-column: 1; justify-self: end; }
#ffMic { grid-column: 2; }
#ffKb { grid-column: 3; justify-self: start; }
.ff-kb { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--label); box-shadow: inset 0 0 0 1px var(--sep-2); transition: background-color .2s, transform .2s var(--spring), opacity .2s; }
.ff-kb .i { width: 22px; height: 22px; stroke-width: 1.7; }
.ff-kb:active { transform: scale(.92); }
@media (hover: hover) { .ff-kb:hover { background: var(--fill); } }
.ff-kb[aria-expanded="true"] { color: var(--tint-text); background: var(--tint-soft); box-shadow: inset 0 0 0 1.5px var(--tint); }
.ff-rec:not([data-state="idle"]) .ff-kb { visibility: hidden; opacity: 0; }
.rec[data-state="stopping"] .mic { color: #fff; background: var(--rec); }
.rec[data-state="stopping"] .mic .mic-i { opacity: 0; transform: scale(.5); }
.rec[data-state="stopping"] .mic .stop-i { opacity: 1; transform: none; }
.rec[data-state="stopping"] .mic-ring { opacity: 1; animation: spin 1.1s linear infinite; }
.rec.ff-rec[data-state="rec"] .rec-meter { display: flex; }
.ff-note { width: 100%; margin: 12px 0 0; text-align: left; }
.ff-type { width: 100%; margin-top: 14px; text-align: left; }
.ff-type.in { animation: popIn .35s var(--spring); }
.ff-type .fu-text { min-height: 96px; }
.ff-type-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.ff-type-k { font-size: 12.5px; color: var(--label-3); }
.ff-type-row .btn { height: 48px; padding: 0 20px; }
.ff-type-row .btn .i { width: 17px; height: 17px; stroke-width: 2.2; }
.ff-rec .rec-alt { margin-top: 6px; }
.ff-rec:not([data-state="idle"]) :is(.ff-type, .rec-alt) { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .ob-fu .ff-card, .ff-type.in { animation: none !important; } .ff-rank summary .i, .ff-kb { transition: none; } }
/* Phones: the points from the top, the mic low in the thumb zone (as on the brief screen) */
@media (max-width: 899.98px), (max-height: 539.98px) {
  .ob-step.ob-fu { flex: 1 0 auto; margin: 0 auto; }
  .ob-fu .ff-card { margin-bottom: 22px; }
  .ob-fu .rec.ff-rec { margin-top: auto; }
}

/* ---------------------------------------------------------------- drag-to-rank */
.rank { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rk {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 4px 4px 4px 2px; border-radius: 14px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--sep); transition: transform .3s var(--spring), box-shadow .2s;
}
.rk.dragging { z-index: 2; transition: box-shadow .2s; background: var(--bg-elev); box-shadow: 0 20px 40px -14px rgba(30, 22, 12, .45), 0 0 0 1.5px var(--tint); }
.rank.is-dragging { -webkit-user-select: none; user-select: none; }
.rk-grip { width: 36px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--label-3); cursor: grab; touch-action: none; }
.rk-grip:hover { color: var(--label); background: var(--fill); }
.rank.is-dragging .rk-grip { cursor: grabbing; }
.rk-grip .i { width: 18px; height: 18px; }
.rk-n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 18px/1 var(--font-serif); font-variant-numeric: lining-nums; color: var(--tint-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 60%, transparent); }
.rk:nth-child(n+4) .rk-n { color: var(--label-3); box-shadow: inset 0 0 0 1px var(--sep-2); }
.rk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 4px 0; }
.rk-l { font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.rk-t small { font-size: 12.5px; line-height: 1.35; color: var(--label-3); }
.rk-btns { display: flex; gap: 2px; flex: none; }
.rk-b { width: 38px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--label-2); transition: background-color .2s, color .2s; }
.rk-b:hover:not(:disabled) { background: var(--fill); color: var(--label); }
.rk-b:disabled { opacity: .22; }
.rk-b .i { width: 17px; height: 17px; stroke-width: 2; }
.rk-x:hover:not(:disabled) { color: var(--bad); background: var(--bad-soft); }

/* ---------------------------------------------------------------- review: "Here's what I heard" + the editor */
.ob-review { width: min(1180px, 100%); align-items: stretch; text-align: left; }
.rv-grid { display: grid; gap: 22px; }
.rv-side { padding-top: 26px; }
.rv-side .ob-h { max-width: 14ch; text-align: left; }
.heard-lines { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.heard-lines li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.5; color: var(--label); animation: popIn .5s var(--spring) both; }
.heard-lines li:nth-child(2) { animation-delay: .06s; } .heard-lines li:nth-child(3) { animation-delay: .12s; } .heard-lines li:nth-child(4) { animation-delay: .18s; } .heard-lines li:nth-child(n+5) { animation-delay: .24s; }
.heard-lines li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 1px; background: var(--tint); }
.rv-dirty { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 13px; color: var(--tint-text); }
.rv-dirty .i { width: 15px; height: 15px; }
.rv-act { display: flex; flex-direction: column; gap: 6px; }
.rv-act .btn-primary { width: 100%; }
.rv-more { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 -12px; }
.rv-more .btn { height: 44px; padding: 0 12px; font-size: 14.5px; }
.rv-more .btn .i { width: 17px; height: 17px; color: var(--label-2); }
.rv-foot { font-size: 12.5px; line-height: 1.45; color: var(--label-3); }
.rv-main { display: grid; gap: 14px; align-content: start; }
.ed-sec { padding: 18px 18px 20px; border-radius: 22px; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--sep), var(--card-shadow); }
.ed-h { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.ed-h h2 { font: 600 23px/1.1 var(--font-serif); letter-spacing: 0; }
.ed-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--tint-text); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 45%, transparent); }
.ed-ic .i { width: 17px; height: 17px; stroke-width: 1.6; }
.conf { margin-left: auto; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--warn); background: var(--warn-soft); white-space: nowrap; }
.ed-sub { margin: -6px 0 12px; font-size: 13px; color: var(--label-3); }
.ed-empty { font-size: 14px; color: var(--label-3); }
.ed-addrow { margin-top: 10px; }
.ed-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: start; gap: 10px; margin-top: 14px; }
.ed-k { padding-top: 9px; font: 600 11px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--label-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-sec .tchip { min-height: 36px; padding: 0 14px; font-size: 14px; }
.chip-e { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 36px; padding: 0 3px 0 13px; border-radius: 18px; font-size: 14px; color: var(--label); background: var(--fill); animation: popIn .3s var(--spring); }
.chip-l { padding: 7px 0; line-height: 1.3; overflow-wrap: anywhere; }
.chip-x { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--label-3); transition: background-color .2s, color .2s; }
.chip-x:hover { color: var(--label); background: var(--fill-2); }
.chip-x .i { width: 13px; height: 13px; stroke-width: 2.2; }
.chips-warn .chip-e { background: var(--warn-soft); }
.chips-bad .chip-e { background: var(--bad-soft); }
.chip-add { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 13px 0 10px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--tint-text); box-shadow: inset 0 0 0 1px var(--sep-2); transition: background-color .2s, box-shadow .2s; }
.chip-add:hover { background: var(--tint-soft); box-shadow: inset 0 0 0 1px transparent; }
.chip-add .i { width: 15px; height: 15px; stroke-width: 2; }
.chip-in-wrap { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding-right: 3px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--tint), 0 0 0 4px var(--tint-soft); }
.chip-in { width: 210px; max-width: 58vw; height: 36px; padding: 0 4px 0 13px; border: 0; background: transparent; font-size: 15px; color: var(--label); }
.chip-in:focus { outline: none; }
.chip-ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--on-btn); background: var(--btn); }
.chip-ok .i { width: 14px; height: 14px; stroke-width: 2.4; }
.seg-ob { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fill); }
.seg-ob button { height: 34px; min-width: 78px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--label-2); transition: background-color .25s, color .2s, box-shadow .25s; }
.seg-ob button[aria-checked="true"] { color: var(--label); font-weight: 600; background: var(--seg-on); box-shadow: 0 3px 10px rgba(30, 22, 12, .14), 0 0 0 1px var(--sep); }
.ed-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-top: 14px; }
.fld { display: grid; gap: 5px; }
.fld-k { font: 600 11px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--label-3); }
.fld-in { width: 100%; height: 46px; padding: 0 13px; border: 0; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--sep-2); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--label); }
.fld-in:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tint), 0 0 0 4px var(--tint-soft); }
.fld-in[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad-mark); }
.fld-in.fld-num { width: 100px; height: 40px; font-size: 15px; text-align: center; }
.fld-err { margin-top: 8px; font-size: 13px; color: var(--bad); }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 12px; font-size: 15px; cursor: pointer; }
.sw { -webkit-appearance: none; appearance: none; position: relative; width: 51px; height: 31px; flex: none; margin: 0; border-radius: 16px; background: var(--fill-2); cursor: pointer; transition: background-color .25s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .32s var(--spring); }
.sw:checked { background: var(--tint); }
.sw:checked::after { transform: translateX(20px); }
.sw:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ed-size { display: grid; gap: 14px; }
.sz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sz-k { width: 100px; font-size: 14.5px; font-weight: 500; }
.sz-v { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sz-v small { font-size: 13px; color: var(--label-3); }
.stepr { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 2px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--sep-2); }
.stepr button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--label); transition: background-color .2s; }
.stepr button:hover:not(:disabled) { background: var(--fill-2); }
.stepr button:disabled { opacity: .3; }
.stepr button .i { width: 15px; height: 15px; stroke-width: 2.2; }
.stepr output { min-width: 38px; text-align: center; font: 600 15px/1 var(--font); font-variant-numeric: tabular-nums; }
.rooms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.room { display: inline-flex; align-items: center; max-width: 100%; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sep-2); transition: background-color .2s, box-shadow .2s; }
.room-t { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px 0 11px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--label-2); text-align: left; }
.room-t span { overflow-wrap: anywhere; }
.room-t .i { width: 15px; height: 15px; stroke-width: 2.2; }
.room.on { background: var(--tint-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 40%, transparent); }
.room.on .room-t { padding-right: 6px; color: var(--label); }
.room.on .room-t .i { color: var(--tint-text); }
.room-imp { flex: none; height: 28px; margin-right: 5px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--on-btn); background: var(--btn); transition: background-color .25s, transform .25s var(--spring); }
.room-imp:active { transform: scale(.94); }
.room-imp.imp-high { color: var(--on-tint); background: var(--tint); }
.room-imp.imp-medium { color: var(--label); background: var(--fill-2); }
.room-imp.imp-nice { color: var(--label-2); background: transparent; box-shadow: inset 0 0 0 1px var(--sep-2); }
.room-notes { display: grid; gap: 5px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.45; color: var(--label-2); }
.room-notes b { margin-right: 4px; font-weight: 600; color: var(--label); }
.ed-text { display: block; width: 100%; min-height: 70px; resize: vertical; padding: 11px 13px; border: 0; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--sep-2); font-size: 15px; line-height: 1.5; color: var(--label); }
.ed-text:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tint), 0 0 0 4px var(--tint-soft); }

/* ---------------------------------------------------------------- done */
.ob-done { padding: 28px 0 10px; }
.done-mark { position: relative; width: 96px; height: 96px; margin: 0 auto 24px; }
.done-mark svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.dm-ring { fill: none; stroke: var(--tint); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 28px 28px; animation: draw 1.1s .1s var(--ease-out) forwards; }
.dm-c { fill: var(--btn); transform-box: fill-box; transform-origin: center; animation: dmPop .65s .2s var(--spring) both; }
.dm-p { fill: none; stroke: var(--on-btn); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .5s .65s var(--ease-out) forwards; }
.dm-glow { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tint) 34%, transparent), transparent 66%); animation: dmGlow 2s .3s ease-out both; }
@keyframes dmPop { from { transform: scale(.4); opacity: 0; } }
@keyframes dmGlow { from { transform: scale(.5); opacity: 0; } 35% { opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.ob-done .ob-h { font-size: clamp(40px, 11vw, 54px); }
.ob-done .ob-lede { max-width: 30em; }
.ob-done .btn-lg { margin-top: 28px; padding: 0 30px; }
.ob-done .btn-lg .i { width: 17px; height: 17px; stroke-width: 2; }
.done-bar { width: 140px; height: 2px; margin: 18px auto 0; overflow: hidden; border-radius: 1px; background: var(--fill-2); }
.done-bar i { display: block; width: 100%; height: 100%; background: var(--tint); transform-origin: left; animation: doneBar 4.2s linear forwards; }
.done-bar.stopped { visibility: hidden; }
@keyframes doneBar { from { transform: scaleX(0); } }

/* ---------------------------------------------------------------- the deck: account, starter banner, household */
.tb-avatar { position: relative; display: inline-grid; place-items: center; width: 36px; height: 32px; margin-left: 2px; border-radius: 10px; transition: background-color .2s; }
.tb-avatar:hover, .tb-avatar[aria-expanded="true"] { background: var(--fill); }
.av {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #f8f5ef;
  font: 600 11px/1 var(--font); letter-spacing: .03em; background: linear-gradient(150deg, #4a4036, #1c1a17);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15), inset 0 0 0 1px rgba(200, 164, 106, .5);
}
[data-theme="dark"] .av { color: #16140f; background: linear-gradient(150deg, #e3cba0, #b8935a); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.av-lg { width: 44px; height: 44px; font-size: 16px; }
.pop-acct { display: flex; align-items: center; gap: 12px; padding: 10px 10px 8px; }
.pop-acct-t { display: flex; flex-direction: column; min-width: 0; }
.pop-acct-t b { font: 600 19px/1.2 var(--font-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-acct-t span { font-size: 12.5px; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.starter {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 4px 10px 12px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.4; color: var(--label); background: linear-gradient(135deg, rgba(138, 106, 61, .14), rgba(138, 106, 61, .05));
  box-shadow: inset 0 0 0 .5px rgba(138, 106, 61, .3); animation: popIn .45s var(--spring);
}
.starter p { flex: 1; padding-top: 3px; }
.starter-ic { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #8a6a3d; }
[data-theme="dark"] .starter { background: linear-gradient(135deg, rgba(200, 164, 106, .18), rgba(200, 164, 106, .06)); box-shadow: inset 0 0 0 .5px rgba(200, 164, 106, .3); }
[data-theme="dark"] .starter-ic { color: #16140f; background: #c8a46a; }
.starter-ic .i { width: 15px; height: 15px; }
.starter-x { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--label-3); }
.starter-x:hover { color: var(--label); background: var(--fill); }
.starter-x .i { width: 14px; height: 14px; stroke-width: 2.4; }
.hh-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; padding-top: 10px; border-top: .5px solid var(--sep); }
.hh-k { font-size: 12px; font-weight: 600; color: var(--label-3); }
.hh-scores { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.hh-s { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--label-2); background: var(--bg-elev); box-shadow: inset 0 0 0 .5px var(--sep); }
.hh-s b { font: 700 13px/1 var(--font-round); font-variant-numeric: tabular-nums; color: var(--label); }
.hh-s .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--score); }
.hh-c { margin-top: 6px; font-size: 13px; line-height: 1.4; font-style: italic; color: var(--label-2); overflow-wrap: anywhere; }
.hh-c b { font-style: normal; font-weight: 600; color: var(--label); }
.rv .hh-scores { display: flex; margin-top: 10px; }
.sl-hh { display: flex; }
.empty-glyph-warn { background: linear-gradient(140deg, #ffb340, #ff7a00); box-shadow: 0 10px 24px rgba(255, 149, 0, .3); }
.empty-glyph-soft { background: linear-gradient(140deg, #64d2ff, #5e5ce6); box-shadow: 0 10px 24px rgba(94, 92, 230, .3); }

/* =====================================================================
   PHONE + TABLET
   ===================================================================== */
@media (max-width: 899.98px), (max-height: 539.98px) {
  .toolbar .tb-avatar {
    width: 44px; height: 44px; margin: 0; border-radius: 22px; background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border: .5px solid var(--glass-edge); box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
  }
  .toolbar .av { width: 32px; height: 32px; font-size: 12.5px; }
  html.scrolled .toolbar .tb-avatar { background: var(--fill); border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .starter-x { width: 44px; height: 44px; margin: -8px -2px -8px 0; }
  .pop-acct { padding: 12px 12px 10px; }

  /* The photo: a band at the top on the brief and "all set" screens; it shrinks while you talk or type. */
  .ob.has-hero[data-view="tell"] { --hero-h: var(--hero-tall); }
  .ob.has-hero[data-view="done"] { --hero-h: var(--hero-done); }
  .ob.has-hero[data-view="type"],
  .ob.has-hero[data-view="tell"][data-rec="rec"], .ob.has-hero[data-view="tell"][data-rec="paused"], .ob.has-hero[data-view="tell"][data-rec="sending"] { --hero-h: var(--hero-low); }
  .ob.has-hero .ob-hero { display: block; } /* 0 px tall on the other steps, so it folds away smoothly */
  .ob.has-hero:is([data-view="tell"], [data-view="type"], [data-view="done"]) .ob-main { border-radius: var(--sheet-r) var(--sheet-r) 0 0; box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .35); }
  .ob.has-hero:is([data-view="type"], [data-view="tell"][data-rec="rec"], [data-view="tell"][data-rec="paused"], [data-view="tell"][data-rec="sending"]) .hero-cap { opacity: 0; }

  /* Header floats over the photo (white on a scrim) until you scroll past it */
  .ob.has-hero:is([data-view="tell"], [data-view="type"], [data-view="done"]):not(.scrolled) .ob-bar {
    color: var(--hero-ink); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
  }
  .ob.has-hero:is([data-view="tell"], [data-view="type"], [data-view="done"]):not(.scrolled) .ob-bar .brand-i { color: var(--hero-ink); }
  .ob.has-hero:is([data-view="tell"], [data-view="type"], [data-view="done"]):not(.scrolled) .ob-steps li { background: rgba(255, 255, 255, .38); }
  .ob.has-hero:is([data-view="tell"], [data-view="type"], [data-view="done"]):not(.scrolled) .ob-steps li.done { background: rgba(255, 255, 255, .72); }
  .ob.has-hero:is([data-view="tell"], [data-view="type"], [data-view="done"]):not(.scrolled) .ob-steps li.now { background: var(--hero-ink); }
  .ob.has-hero:is([data-view="tell"], [data-view="type"], [data-view="done"]):not(.scrolled) :is(.ob-av, .ob-close) {
    color: var(--hero-ink); background: rgba(20, 16, 12, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }

  .ob-close, .ob-av { width: 40px; height: 40px; }
  .ob-main { padding: 0 calc(var(--sar) + 22px) calc(var(--sab) + 16px) calc(var(--sal) + 22px); }
  .ob-step:not(.ob-tell):not(.ob-type):not(.ob-review):not(.ob-fu) { flex: 1; justify-content: center; }
  .ob-row-end { justify-content: stretch; }
  .ob-row-end .btn { flex: 1; }
  .ob-row-end .btn-plain { flex: none; }

  /* Done: the mark sits on the edge of the photo, like a seal */
  .ob.has-hero[data-view="done"] .ob-done { justify-content: flex-start; padding-top: 0; }
  .ob.has-hero[data-view="done"] .done-mark { margin-top: -50px; }
  .ob.has-hero[data-view="done"] .done-mark::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: var(--bg); }

  .fu-card { padding: 22px 18px 18px; border-radius: 22px; }
  .fu-nav { position: sticky; bottom: 0; z-index: 2; margin: 14px -22px 0; width: auto; align-self: stretch; padding: 10px 22px calc(var(--sab) + 10px);
    background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 -1px 0 var(--sep); }
  .rk-b { width: 40px; height: 46px; }
  .rk-grip { height: 48px; }
  .ob-review { margin: 0 auto; }
  .rv-act {
    position: sticky; bottom: 0; z-index: 2; margin: 0 calc(-22px - var(--sar)) calc(-16px - var(--sab)) calc(-22px - var(--sal));
    padding: 12px calc(22px + var(--sar)) calc(12px + var(--sab)) calc(22px + var(--sal));
    background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 -1px 0 var(--sep);
  }
  .rv-more { justify-content: space-between; margin: 0 -8px; }
  .rv-foot { display: none; }
  .ed-sec { padding: 16px 15px 18px; }
  .ed-row { grid-template-columns: 1fr; gap: 8px; }
  .ed-k { padding-top: 0; }
  .sz-k { width: 100%; }
  .chip-x { width: 36px; height: 36px; }
  .chip-e { min-height: 40px; }
  .chip-add, .chip-in-wrap { height: 40px; }
  .ed-sec .tchip { min-height: 40px; }
  .room-t { min-height: 42px; }
  .stepr { height: 44px; } .stepr button { width: 40px; height: 40px; }
  .seg-ob { display: flex; } .seg-ob button { flex: 1; height: 38px; min-width: 0; }
  .tpc { min-height: 44px; }

  .si-sheet .si-foot { justify-content: flex-start; }
}
/* Short phones (360×780 and anything with browser bars showing): a tighter checklist and type */
@media (max-width: 899.98px) and (max-height: 800px) {
  .topic { min-height: 50px; }
  .topic-t small { font-size: 12px; }
  .ob-lede { font-size: 15px; }
}
@media (max-width: 899.98px) and (max-height: 700px) {
  .ob-h { font-size: clamp(32px, 9.4vw, 40px); }
  .topic { min-height: 46px; }
  .topic-t small { display: none; }
}
/* While talking on a phone, the checklist drops its sub-lines to make room for the transcript */
@media (max-width: 899.98px) {
  .ob[data-rec="rec"] .topic-t small, .ob[data-rec="paused"] .topic-t small, .ob[data-rec="sending"] .topic-t small { display: none; }
  .ob[data-rec="rec"] .topic, .ob[data-rec="paused"] .topic, .ob[data-rec="sending"] .topic { min-height: 46px; }
  .ob[data-rec="rec"] .ob-tell .ob-h, .ob[data-rec="paused"] .ob-tell .ob-h, .ob[data-rec="sending"] .ob-tell .ob-h { font-size: clamp(30px, 8.4vw, 38px); }
  .ob[data-rec="rec"] .ob-tell .ob-eyebrow, .ob[data-rec="paused"] .ob-tell .ob-eyebrow, .ob[data-rec="sending"] .ob-tell .ob-eyebrow { display: none; }
  .ob-type .ob-h { font-size: clamp(32px, 9vw, 40px); }
}

/* =====================================================================
   DESKTOP: the photo as an inset pane on the left, the conversation on the right
   ===================================================================== */
@media (min-width: 900px) and (min-height: 540px) {
  .ob { --bar-h: 72px; --pane: 0px; }
  .ob.has-hero:is([data-view="tell"], [data-view="type"], [data-view="proc"], [data-view="err"], [data-view="fu"], [data-view="done"]) { --pane: min(42vw, 760px); }
  .ob.has-hero:is([data-view="tell"], [data-view="type"], [data-view="proc"], [data-view="err"], [data-view="fu"], [data-view="done"]) .ob-hero {
    display: block; position: fixed; top: 16px; left: 16px; bottom: 16px; right: auto; width: calc(var(--pane) - 16px); height: auto;
    border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(30, 22, 12, .5);
  }
  .hero::before { display: none; }
  .hero-img { object-position: 46% 50%; }
  .hero-cap { left: 26px; bottom: 22px; font-size: 16px; }
  .hero-cap-m { display: none; } .hero-cap-d { display: inline; }
  .ob-bar { margin-left: var(--pane); padding: 0 40px 0 48px; background: var(--bg); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ob-steps { gap: 0; }
  .ob-steps li { width: auto; height: auto; padding: 0 14px; border-radius: 0; background: none !important; font: 600 11px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--label-3); }
  .ob-steps li + li { border-left: 1px solid var(--sep); }
  .ob-steps li.done { color: var(--tint-text); }
  .ob-steps li.now { width: auto; color: var(--label); }
  .ob-steps .st-l { display: inline; }
  .ob-main { margin-left: var(--pane); margin-top: 0; min-height: calc(100% - var(--bar-h)); padding: 0 56px 40px; transition: none; }
  .ob-step { margin: auto; }
  .ob-tell, .ob-type { flex: 0 0 auto; margin: auto; }
  .tell-head { padding-top: 0; }
  .ob-h { font-size: clamp(46px, 4.2vw, 64px); }
  .ob-tell .ob-h, .ob-type .ob-h { font-size: clamp(46px, 4.4vw, 66px); }
  .rec { margin-top: 34px; padding-top: 0; }
  .brief-list { column-gap: 28px; }
  .ob[data-rec="rec"] .ob-tell .ob-h, .ob[data-rec="paused"] .ob-tell .ob-h, .ob[data-rec="sending"] .ob-tell .ob-h { font-size: clamp(38px, 3.4vw, 50px); }
  .fu-head { margin-top: 0; }
  .ob-proc, .ob-err, .ob-done { padding: 0; }

  /* Sign-in: the same pane, the form on the right */
  .signin { flex-direction: row; }
  .si-hero { position: fixed; top: 16px; left: 16px; bottom: 16px; width: calc(min(42vw, 760px) - 16px); height: auto; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(30, 22, 12, .5); }
  .si-top { position: fixed; top: 30px; left: calc(min(42vw, 760px) + 56px); color: var(--label); text-shadow: none; }
  .si-top .brand-i { color: var(--tint); }
  .si-sheet { margin: 0 0 0 min(42vw, 760px); padding: 96px 56px 32px; border-radius: 0; box-shadow: none; justify-content: center; align-items: center; min-height: 100%; }
  .si-body { width: min(440px, 100%); margin: auto 0; }
  .si-h { font-size: clamp(46px, 4.2vw, 62px); }
  .si-foot { width: min(440px, 100%); margin-top: 0; }

  /* Profile screen: full width, one screen (the onboarding read-back is a scrolling column instead; see v2b below) */
  html.ob-review-on:not(.ob-ag) .ob { overflow-y: hidden; }
  html.ob-review-on:not(.ob-ag) .ob-main { height: calc(100% - var(--bar-h)); min-height: 0; padding-bottom: 20px; }
  .ob-review { flex: 1; min-height: 0; margin: 0 auto; }
  .rv-grid {
    flex: 1; min-height: 0; column-gap: 48px; row-gap: 16px;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "side main" "act main";
  }
  .rv-side { grid-area: side; min-height: 0; overflow-y: auto; padding: 18px 4px 0 0; scrollbar-width: thin; }
  .rv-side .ob-h { font-size: clamp(44px, 3.8vw, 58px); }
  .rv-main {
    grid-area: main; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 8px 28px 4px; scrollbar-width: thin;
    scrollbar-color: var(--fill-2) transparent; -webkit-mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 28px), transparent);
  }
  .rv-act { grid-area: act; padding-bottom: 6px; }
}
/* Narrower desktops: only the current step keeps its label; the others are dashes, so the header never crowds */
@media (min-width: 900px) and (max-width: 1239.98px) and (min-height: 540px) {
  .ob-steps li:not(.now) .st-l { display: none; }
  .ob-steps li:not(.now) { width: 16px; height: 3px; margin: 0 4px; padding: 0; border: 0 !important; border-radius: 2px; background: var(--fill-2) !important; }
  .ob-steps li.done:not(.now) { background: color-mix(in srgb, var(--tint) 55%, transparent) !important; }
  .ob-steps li.now { border: 0 !important; padding: 0 10px; }
}
/* Wide screens: the editable sections flow into two balanced columns */
@media (min-width: 1200px) and (min-height: 540px) {
  .rv-main { display: block; columns: 2; column-gap: 16px; }
  .rv-main .ed-sec { break-inside: avoid; margin-bottom: 16px; }
}

/* =====================================================================
   v2b · THE AGENTIC READ-BACK ("Here's what I heard")
   The brief is the hero: editorial serif prose in one reading column. Claims are soft bronze underlines that warm
   on hover and focus; guesses get a dotted underline and a ringed footnote numeral that matches the list below.
   One composer: docked in a card under the brief, or lifted into a popover (desktop) / bottom sheet (phone).
   ===================================================================== */
.ob-review.ag { position: relative; width: min(680px, 100%); margin: 0 auto; flex: none; align-items: stretch; text-align: left; }
.ag-head { padding-top: 26px; }
.ag-head .ob-h { max-width: 13ch; font-size: clamp(36px, 10vw, 46px); text-align: left; }
.ag-read { margin-top: 20px; }
.ag-read::before { content: ""; display: block; width: 40px; height: 1px; margin-bottom: 18px; background: var(--tint); }
.ag-brief {
  font: 500 clamp(20.5px, 5.4vw, 23px)/1.45 var(--font-serif); letter-spacing: .002em; color: var(--label);
  font-variant-numeric: lining-nums; text-wrap: pretty; hanging-punctuation: first; overflow-wrap: break-word;
  transition: color .45s var(--ease-out);
}
.ag-brief:focus { outline: none; }
.ag-brief p { position: relative; }
.ag-brief p + p { margin-top: .6em; }
/* a changed paragraph gets a short bronze bar in the margin that fades away */
.ag-brief p::before { content: ""; position: absolute; left: -14px; top: .32em; bottom: .32em; width: 2px; border-radius: 1px; background: var(--tint); opacity: 0; transition: opacity 2.6s var(--ease-out); pointer-events: none; }
.ag-brief p.changed::before { opacity: 1; transition-duration: .3s; }
.ag-brief p.changed.fading::before { opacity: 0; transition-duration: 2.6s; }
.ag-brief.ag-brief-sm { margin-top: 22px; font-size: 19px; } /* the profile screen's side column */

/* Claims: real buttons (role=button, focusable) that read as prose */
.cl {
  cursor: pointer; border-radius: 4px; -webkit-tap-highlight-color: transparent;
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, var(--tint) 55%, transparent);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color .25s, text-decoration-color .25s, color .3s;
}
@media (hover: hover) { .cl:hover { background: var(--tint-soft); text-decoration-color: var(--tint); } }
.cl:focus { outline: none; }
.cl:focus-visible { background: var(--tint-soft); text-decoration-color: var(--tint); outline: 2px solid var(--focus); outline-offset: 2px; }
.cl.is-open { background: var(--tint-soft); text-decoration-color: var(--tint); }
.cl:active { background: color-mix(in srgb, var(--tint) 20%, transparent); }
.cl-guess { text-decoration-style: dotted; text-decoration-thickness: 2px; text-decoration-color: var(--tint); text-underline-offset: .26em; }
.cl-mk {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin: 0 1px 0 3px; border-radius: 50%; vertical-align: .42em;
  font: normal 600 9.5px/1 var(--font); color: var(--tint-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 75%, transparent);
}
/* While House Hunt rewrites: the brief steps back, the claim being changed shimmers */
.ag.is-revising .ag-brief { color: var(--label-3); }
.ag.is-revising .cl { cursor: progress; text-decoration-color: color-mix(in srgb, var(--tint) 30%, transparent); }
.ag.is-revising .cl.is-target {
  color: var(--label); text-decoration-color: var(--tint);
  background: linear-gradient(100deg, var(--tint-soft) 30%, color-mix(in srgb, var(--tint) 32%, transparent) 50%, var(--tint-soft) 70%) 0 0 / 300% 100%;
  animation: clShimmer 1.5s linear infinite;
}
@keyframes clShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ag.is-revising :is(.ag-guess, .ag-say, .ag-det, .ag-act) { opacity: .5; transition: opacity .3s; }
/* …and what changed glows briefly afterwards */
.cl.changed { background: color-mix(in srgb, var(--tint) 26%, transparent); text-decoration-color: var(--tint); transition: background-color .3s; }
.cl.changed.fading { background: transparent; transition: background-color 2.6s var(--ease-out); }
.ag-how { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--label-3); }
.ag-how-g { white-space: nowrap; }
.ag-dotted { color: var(--label-2); text-decoration: underline dotted var(--tint); text-decoration-thickness: 2px; text-underline-offset: .28em; }

/* Status under the brief: Updating… (+ "You said: …"), then the agent's note, or what went wrong */
.ag-status { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--sep); }
.ag-status.pop { animation: popIn .35s var(--spring); }
.ag-status:focus { outline: none; }
.ag-st-ic { width: 24px; height: 24px; flex: none; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; }
.ag-st-ic .i { width: 14px; height: 14px; stroke-width: 2.4; }
.ag-spin { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--fill-2); border-top-color: var(--tint); animation: spin .9s linear infinite; }
.ag-st-b { flex: 1; min-width: 0; }
.ag-st-t { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--label); }
.ag-st-q { margin-top: 6px; font: italic 500 18.5px/1.4 var(--font-serif); color: var(--label); overflow-wrap: anywhere; }
.ag-st-k { margin-right: 4px; font: normal 600 11px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--label-3); }
.ag-st-wait { color: var(--label-3); }
.ag-st-m { margin-top: 6px; font-size: 12.5px; color: var(--label-3); }
.ag-status.is-done { background: var(--tint-soft); box-shadow: none; }
.ag-status.is-done .ag-st-ic { color: var(--on-tint); background: var(--tint); }
.ag-st-note { padding-top: 1px; font: italic 500 19.5px/1.38 var(--font-serif); color: var(--label); }
.ag-status.is-err { background: var(--warn-soft); box-shadow: none; }
.ag-status.is-err .ag-st-ic { color: var(--warn); }
.ag-status.is-err .ag-st-ic .i { width: 20px; height: 20px; stroke-width: 1.8; }
.ag-status.is-err .ag-st-t { font-size: 14.5px; font-weight: 500; }
.ag-st-retry { margin-top: 4px; padding: 8px 0; font-size: 14px; }

/* "A couple of things I assumed" */
.ag-guess { margin-top: 32px; }
.ag-k { padding-bottom: 10px; border-bottom: 1px solid var(--sep); font: 600 11.5px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--tint-text); }
.gs-list { margin: 0; padding: 0; list-style: none; }
.gs { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px 0 12px; border-bottom: 1px solid var(--sep); }
.gs-n { width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px/1 var(--font); color: var(--tint-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 75%, transparent); transition: background-color .3s, color .3s; }
.gs-t { font: italic 500 19.5px/1.38 var(--font-serif); color: var(--label); text-wrap: pretty; transition: color .3s; }
.gs-b { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 0 -2px; }
.gs-yes { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--label); box-shadow: inset 0 0 0 1px var(--sep-2); transition: background-color .2s, transform .2s var(--spring); }
.gs-yes .i { width: 15px; height: 15px; stroke-width: 2.4; color: var(--tint-text); }
.gs-yes:hover { background: var(--fill); }
.gs-yes:active { transform: scale(.96); }
.gs-chg { height: 40px; padding: 0 12px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--tint-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tint) 45%, transparent); text-underline-offset: 3px; }
.gs-chg:hover { background: var(--tint-soft); }
.gs.is-yes .gs-n { color: var(--on-tint); background: var(--tint); box-shadow: none; }
.gs.is-yes .gs-t { color: var(--label-2); }
.gs.is-yes .gs-b { visibility: hidden; }

/* "Anything to change? Just say it." */
.ag-say { margin-top: 32px; padding: 20px 18px 16px; border-radius: 24px; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--sep), var(--card-shadow); }
.ag-say-h { font: 500 26px/1.12 var(--font-serif); letter-spacing: -.005em; color: var(--label); }
.ag-say-h em { font-style: italic; }
.ag-say-sub { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--label-2); }
.ag-dock { margin-top: 14px; }
.ag-dock-ph { display: flex; align-items: center; gap: 8px; min-height: 52px; font-size: 14px; color: var(--label-3); }
.ag-dock-ph .i { width: 16px; height: 16px; flex: none; color: var(--tint-text); }

/* The composer */
.cmp-field { position: relative; }
#agText {
  display: block; width: 100%; min-height: 76px; max-height: 168px; resize: none; padding: 13px 16px; border: 0; border-radius: 16px;
  font: 400 16px/1.45 var(--font); color: var(--label); background: var(--bg); box-shadow: inset 0 0 0 1px var(--sep-2); transition: box-shadow .2s, opacity .2s;
}
#agText::placeholder { color: var(--label-3); opacity: .9; }
#agText:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tint), 0 0 0 4px var(--tint-soft); }
.cmp-rec { display: none; position: absolute; inset: 0; align-items: center; gap: 12px; padding: 0 16px; border-radius: 16px; background: var(--bad-soft); }
.cmp:is([data-state="rec"], [data-state="starting"], [data-state="stopping"]) .cmp-rec { display: flex; animation: popIn .3s var(--spring); }
.cmp:is([data-state="rec"], [data-state="starting"], [data-state="stopping"]) #agText { opacity: 0; }
.cmp[data-state="starting"] .vrec-dot { animation: none; opacity: .4; }
.cmp-wave { flex: 1; min-width: 0; height: 28px; color: var(--rec); }
.cmp-t { font: 500 16px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--label); }
.cmp-note { margin: 10px 0 0; }
.cmp-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.cmp-mic {
  --lvl: 0; position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-btn); background: var(--btn); box-shadow: 0 12px 24px -14px rgba(28, 20, 10, .75); transition: transform .3s var(--spring), background-color .3s;
}
.cmp-mic:hover { transform: scale(1.04); }
.cmp-mic:active { transform: scale(.95); }
.cmp-mic:disabled { opacity: .85; }
.cmp-mic > .i { grid-area: 1 / 1; position: relative; z-index: 1; transition: opacity .2s, transform .3s var(--spring); }
.cmp-mic .mic-i { width: 24px; height: 24px; stroke-width: 1.6; }
.cmp-mic .stop-i { width: 20px; height: 20px; opacity: 0; transform: scale(.5); }
.cmp-halo { position: absolute; inset: -12px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, color-mix(in srgb, var(--rec) 34%, transparent), transparent 68%); transform: scale(calc(1 + var(--lvl) * .7)); transition: transform .09s linear, opacity .3s; }
.cmp:is([data-state="starting"], [data-state="stopping"]) .mic-ring { opacity: 1; animation: spin 1.1s linear infinite; }
.cmp:is([data-state="rec"], [data-state="stopping"]) .cmp-mic { color: #fff; background: var(--rec); }
.cmp[data-state="rec"] .cmp-halo { opacity: 1; }
.cmp:is([data-state="rec"], [data-state="stopping"]) .cmp-mic .mic-i { opacity: 0; transform: scale(.5); }
.cmp:is([data-state="rec"], [data-state="stopping"]) .cmp-mic .stop-i { opacity: 1; transform: none; }
.cmp-cap { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--label-2); }
.cmp-btns { display: flex; align-items: center; gap: 4px; flex: none; }
.cmp-btns .btn { height: 46px; padding: 0 20px; font-size: 15px; }
.cmp-btns .btn-plain { padding: 0 14px; }
.cmp-send:disabled { opacity: .38; box-shadow: none; }
.cmp-about { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 34px; margin: 0 0 10px; padding: 0 2px 0 12px; border-radius: 999px; font-size: 13.5px; color: var(--label-2); background: var(--tint-soft); }
.cmp-about span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-about-x { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--label-3); }
.cmp-about-x::before { content: ""; position: absolute; inset: -7px; }
.cmp-about-x .i { width: 12px; height: 12px; stroke-width: 2.4; }

/* A tapped claim: popover on desktop… */
.cmp-pop {
  position: absolute; z-index: 8; padding: 18px 18px 16px; border-radius: 22px; text-align: left;
  background: var(--bg-elev); box-shadow: 0 0 0 1px var(--sep), 0 32px 64px -28px rgba(30, 22, 12, .5), 0 8px 18px -12px rgba(30, 22, 12, .25);
  transform-origin: var(--ax, 50%) -8px; animation: cmpPop .3s var(--spring);
}
.cmp-pop:not(.is-sheet)::before { content: ""; position: absolute; top: -7px; left: calc(var(--ax, 50%) - 7px); width: 14px; height: 14px; border-radius: 3px 0 0 0; background: var(--bg-elev); box-shadow: -1px -1px 0 var(--sep); transform: rotate(45deg); }
@keyframes cmpPop { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.cmp-k { font: 600 11px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--tint-text); }
.cmp-q { margin: 6px 0 0; font: italic 500 21px/1.32 var(--font-serif); color: var(--label); overflow-wrap: anywhere; }
.cmp-q:focus { outline: none; }
.cmp-guess { display: grid; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--tint-soft); }
.cmp-guess p { font-size: 14.5px; line-height: 1.45; color: var(--label); }
.cmp-yes { justify-self: start; height: 42px; padding: 0 16px 0 12px; font-size: 14.5px; }
.cmp-yes .i { width: 15px; height: 15px; stroke-width: 2.4; color: var(--tint-text); }
.cmp-l { display: block; margin: 16px 0 8px; font: 600 11px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--label-3); }
/* …a bottom sheet on phones (it rides on top of the keyboard via --kb from visualViewport) */
.cmp-scrim { position: fixed; inset: 0; z-index: 20; background: rgba(14, 11, 8, .42); touch-action: none; animation: fadeIn .25s ease-out; }
.cmp-pop.is-sheet {
  position: fixed; z-index: 21; left: 0; right: 0; top: auto; bottom: var(--kb, 0px); width: auto;
  max-height: calc(var(--vvh, 100vh) - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px calc(var(--sar) + 20px) calc(var(--sab) + 16px) calc(var(--sal) + 20px); border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 40px -16px rgba(0, 0, 0, .35); animation: cmpUp .42s var(--spring);
}
@keyframes cmpUp { from { transform: translateY(100%); } }
.cmp-grab { width: 38px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--fill-2); }
.ob.cmp-open { overflow: hidden; }

/* "The details": the structured profile, compact and read-only (the editor is one tap further) */
.ag-det { margin-top: 28px; border-top: 1px solid var(--sep); }
.ag-det-b { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 2px; text-align: left; color: var(--label); border-radius: 8px; }
.ag-det-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-det-t b { font: 500 23px/1.15 var(--font-serif); transition: color .2s; }
.ag-det-t small { font-size: 13px; color: var(--label-3); }
.ag-det-c { width: 20px; height: 20px; flex: none; color: var(--label-2); transition: transform .35s var(--spring); }
.ag-det-b[aria-expanded="true"] .ag-det-c { transform: rotate(180deg); }
@media (hover: hover) { .ag-det-b:hover b { color: var(--tint-text); } }
.ag-det .rv-dirty { margin: 0 0 12px; }
.ag-det-body { padding-bottom: 6px; animation: popIn .35s var(--spring); }
.fx { margin: 0; }
.fx-r { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; border-top: 1px solid var(--sep); }
.fx-r dt { font: 600 11px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--label-3); }
.fx-r dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--label); overflow-wrap: anywhere; }
.fx-r dd b { margin-right: 4px; font-weight: 600; color: var(--label-2); }
.fx-none { font-style: italic; color: var(--label-3); }
.fx-lines { display: grid; gap: 3px; }
.fx-locs, .fx-rooms { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.fx-locs li { display: flex; align-items: flex-start; gap: 10px; }
.fx-n { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--font-serif); font-variant-numeric: lining-nums; color: var(--tint-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 60%, transparent); }
.fx-locs li:nth-child(n+4) .fx-n { color: var(--label-3); box-shadow: inset 0 0 0 1px var(--sep-2); }
.fx-l small { display: block; font-size: 13px; color: var(--label-3); }
.fx-nb small { display: block; font-size: 13px; line-height: 1.45; color: var(--label-3); }
.ag-det-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.ag-det-foot .btn { height: 44px; padding: 0 18px; font-size: 14.5px; }
.ag-det-foot .btn .i { width: 16px; height: 16px; }
.ag-det-or { font-size: 13px; color: var(--label-3); }
.ag-ed { display: grid; gap: 14px; margin-top: 4px; }

/* Actions: Start again · Looks right */
.ob-review.ag .rv-act { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 28px; }
.ob-review.ag .rv-act .btn-primary { width: auto; min-width: 210px; }
.ob-review.ag .rv-act .btn-plain { height: 48px; padding: 0 16px; font-size: 15px; color: var(--label-2); }
.ob-review.ag .rv-act .btn-plain .i { width: 17px; height: 17px; }

/* Follow-ups: House Hunt's warm opener above the first question */
.fu-lead { display: flex; align-items: flex-start; gap: 12px; margin: 26px 0 0; font: italic 500 21px/1.36 var(--font-serif); color: var(--label); text-align: left; text-wrap: pretty; animation: popIn .5s var(--spring) both; }
.fu-lead-i { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--tint); stroke-width: 1.45; }
.fu-lead + .fu-head { margin-top: 18px; }

@media (max-width: 899.98px), (max-height: 539.98px) {
  .ob-review.ag .rv-act { justify-content: stretch; }
  .ob-review.ag .rv-act .btn-primary { flex: 1; min-width: 0; }
  .ob-review.ag .rv-act .btn-plain { flex: none; padding: 0 12px; }
  .gs-yes, .gs-chg { height: 44px; }
  .cmp-btns .btn { height: 48px; }
  .cmp-row { gap: 10px; }
}
@media (min-width: 900px) and (min-height: 540px) {
  .ob-review.ag { margin: 0 auto; padding-top: 8px; }
  .ag-head { padding-top: 12px; }
  .ag-head .ob-h { max-width: 15ch; font-size: clamp(44px, 3.7vw, 58px); }
  .ag-read { margin-top: 26px; }
  .ag-brief { font-size: clamp(23px, calc(.9vw + 13px), 27.5px); }
  .ag-brief p::before { left: -20px; }
  .ag-say { padding: 24px 24px 20px; }
  .gs { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; }
  .gs-b { grid-column: 3; flex-wrap: nowrap; margin: 0; }
  .fx-r { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
  .fx-r dt { padding-top: 4px; }
  .ob-review.ag .rv-act {
    position: sticky; bottom: 0; z-index: 3; margin: 24px 0 -40px; padding: 28px 0 26px;
    background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 42%);
  }
  .fu-lead { margin-top: 0; font-size: 23px; }
}
/* Wide desktops: the photo pane comes back for the read-back too (one reading column beside it) */
@media (min-width: 1200px) and (min-height: 540px) {
  .ob.has-hero[data-view="review"] { --pane: min(42vw, 760px); }
  .ob.has-hero[data-view="review"] .ob-hero {
    display: block; position: fixed; top: 16px; left: 16px; bottom: 16px; right: auto; width: calc(var(--pane) - 16px); height: auto;
    border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(30, 22, 12, .5);
  }
}

/* ---------------------------------------------------------------- reduced motion: no drawing, no breathing, no glow */
@media (prefers-reduced-motion: reduce) {
  .hs-lines path, .dm-ring, .dm-p { stroke-dashoffset: 0 !important; animation: none !important; }
  .hs-win rect { opacity: 1 !important; fill-opacity: .2 !important; animation: none !important; }
  .mic-breath { animation: none !important; opacity: .5 !important; transform: none !important; }
  .dm-glow, .boot-line::after { animation: none !important; display: none; }
  .hero-img { transform: none !important; }
  .topic-tick .i { transition: none !important; }
  .ag.is-revising .cl.is-target { animation: none !important; background: color-mix(in srgb, var(--tint) 22%, transparent) !important; }
  .ag-spin { animation: none !important; border-color: var(--tint); }
  .cmp-halo { transition: none !important; transform: none !important; }
}
@media (forced-colors: active) {
  .topic-tick, .ps-dot { forced-color-adjust: none; border: 1px solid CanvasText; }
  .on > .topic-tick { background: Highlight; color: HighlightText; }
}

/* nearby: keep a little air under the example when it is scrolled into view */
.hint-ex { scroll-margin-bottom: 20px; }

/* 9 Oct 2026 deep test: on phones the correction status ("Listening back…", "Done — …") scrolled in under the sticky
   Start again / Looks right bar. Keep it clear of the bar (its height + the safe area). */
.ag-status, #agStatus { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* =====================================================================================================================
   v3 responsive (9 Oct 2026) — onboarding on tablets and landscape phones (see the matching block in styles.css)
   Device classes use the pointer as well as the size: a 1180x820 iPad is touch, a 1280x800 laptop is not.
   ===================================================================================================================== */
/* The microphone never scrolls away: the recorder floats at the bottom of the screen whenever the content is taller than
   it (the follow-up points used to push it below the fold on most phones). With the typed answer open (and not
   recording) it stays in the flow, so the keyboard and the text box have the room. */
.ob-tell .rec, .ob-fu .rec.ff-rec { position: sticky; bottom: 0; z-index: 3; padding-bottom: calc(var(--sab) + 10px);
  background: linear-gradient(to top, var(--bg) calc(100% - 22px), color-mix(in srgb, var(--bg) 0%, transparent)); }
.ob-tell .rec { padding-top: 22px; }
.ob-fu .rec.ff-rec { margin-top: 10px; padding-top: 20px; }
.ob-fu .rec.ff-rec[data-state="idle"]:has(.ff-kb[aria-expanded="true"]) { position: static; background: none; }

/* sentences are never under 14px */
.rv-foot, .ed-sub, .ob-foot, .ff-type-k, .rk-t small, .hh-c, .topic-t small, .si-note { font-size: 14px; }

@media (pointer: coarse) {
  .ob-close, .ob-av { width: 44px; height: 44px; }
  .chip-x { width: 44px; height: 44px; }
  .chip-e, .chip-add, .chip-in-wrap, .ed-sec .tchip, .room-t { min-height: 44px; }
  .chip-add, .chip-in-wrap { height: 44px; }
  .stepr button { width: 44px; height: 44px; }
  .seg-ob button { height: 44px; }
  .tpc { min-height: 44px; }
  .rk-b { width: 44px; height: 46px; }
  .starter-x { width: 44px; height: 44px; }
}

/* ---- iPad portrait: a shorter photo band, the conversation in a centred column, the mic large and centred ---- */
@media (pointer: coarse) and (min-width: 700px) and (max-width: 899.98px) and (orientation: portrait) {
  .ob { --hero-tall: clamp(240px, 30vh, 360px); --hero-done: clamp(260px, 34vh, 400px); --hero-low: clamp(150px, 15vh, 200px); --bar-h: 64px; }
  .ob-main { padding-left: calc(var(--sal) + 40px); padding-right: calc(var(--sar) + 40px); }
  .ob-tell, .ob-type, .ob-fu { width: min(640px, 100%); }
  .ob-tell, .ob-type { flex: 0 0 auto; margin: auto; padding-top: 28px; }
  .ob-step.ob-fu { flex: 0 0 auto; margin: auto; padding-top: 18px; }
  .ob-tell .ob-h, .ob-type .ob-h { font-size: 54px; }
  .ob-lede { font-size: 17.5px; }
  .topic { min-height: 60px; }
  .topic-t b { font-size: 16px; }
  .topic-t small { display: block; font-size: 14px; }
  .mic { width: 104px; height: 104px; }
  .mic .mic-i { width: 42px; height: 42px; }
  .mic .stop-i { width: 36px; height: 36px; }
  .rec-cap { font-size: 16px; }
  .rec-ctrls { width: min(420px, 100%); }
  .ff-kb { width: 56px; height: 56px; }
  .ff-pt-q { font-size: 22px; }
  .ff-pt-t .fu-hint { font-size: 15px; }
  .ob-fu .ff-card { padding: 28px 30px 8px; }
  .ob-type textarea, .ob-type .fu-text { min-height: 240px; font-size: 17px; }
  .ob-review.ag { width: min(700px, 100%); }
}

/* ---- landscape phones: a thin photo band and a compact recorder (mic on the left, the words beside it) ---- */
@media (max-height: 539.98px) and (orientation: landscape) and (max-width: 999.98px) {
  .ob { --hero-tall: 92px; --hero-done: 120px; --hero-low: 72px; --bar-h: 52px; }
  .ob-tell .ob-h, .ob-type .ob-h { font-size: 34px; }
  .ob-tell .ob-eyebrow { margin-bottom: 6px; }
  .rec { display: grid; grid-template-columns: auto minmax(0, 340px); justify-content: center; align-items: center; column-gap: 22px; row-gap: 0;
    padding-top: 12px; padding-left: calc(var(--sal) + 8px); padding-right: calc(var(--sar) + 8px); text-align: left; }
  .rec > .rec-ctrls { grid-column: 1; grid-row: 1 / span 6; width: auto; gap: 12px; }
  .rec > :not(.rec-ctrls) { grid-column: 2; justify-self: start; justify-content: flex-start; margin: 0; }
  .rec > .rec-meter { width: 100%; height: 30px; margin: 0 0 4px; }
  .rec > .ff-type { justify-self: stretch; }
  .rec-cap { margin-top: 0; }
  .rec-alt .btn { padding-left: 0; }
  .mic { width: 64px; height: 64px; }
  .mic .mic-i { width: 28px; height: 28px; }
  .rc-side .i { width: 44px; height: 44px; padding: 12px; }
  .rc-side span { display: none; }
  .ff-kb { width: 44px; height: 44px; }
}