/* The journey screens (questions, home, deal, review, the pre-meeting sheet) in Midnight Cobalt. Phone first; wide screens get two columns. */
h1, .q-title { font-family:var(--display); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.main { min-height:48px; }
.chip { min-height:44px; }

/* ---- the three questions ---- */
.qual { min-height:100dvh; background:var(--sea); color:var(--on-sea); display:flex; flex-direction:column; }
.q-top { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; max-width:640px; width:100%; margin:0 auto; }
.q-top .wm { color:var(--on-sea); }
.q-ghost { background:none; border:0; color:var(--on-sea-soft); font:600 15px var(--body); min-height:44px; padding:0 8px; cursor:pointer; }
.q-ghost:hover { color:var(--on-sea); }
.q-bar { height:4px; background:rgba(255,255,255,.12); max-width:640px; width:calc(100% - 32px); margin:0 auto; border-radius:2px; overflow:hidden; }
.q-bar i { display:block; height:100%; width:0; background:var(--listen); transition:width .3s ease; }
.q-body { max-width:640px; width:100%; margin:0 auto; padding:28px 16px 40px; flex:1; }
.q-count { color:var(--on-sea-soft); font:600 13px var(--body); margin:0 0 6px; letter-spacing:.02em; }
.q-title { font:600 clamp(26px,6vw,36px)/1.35 var(--display); margin:0 0 22px; }
.q-opts { display:grid; gap:10px; }
.q-opt { text-align:start; font:600 18px/1.4 var(--body); color:var(--on-sea); background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.16); border-radius:16px; padding:16px 18px; min-height:58px; cursor:pointer; transition:background .15s, border-color .15s; }
.q-opt:hover { background:rgba(255,255,255,.1); }
.q-opt.on { background:var(--primary); border-color:#8EA4FF; color:#fff; }
.q-opt:focus-visible { outline:3px solid var(--listen); outline-offset:2px; }
.q-text { width:100%; min-height:110px; border-radius:14px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:var(--on-sea); font:400 17px/1.6 var(--body); padding:12px 14px; }
.q-row { display:flex; gap:10px; margin-top:14px; } .q-row .main { flex:1; }
.q-changes { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px; }
.q-changes li { background:rgba(255,255,255,.07); border-inline-start:3px solid var(--listen); border-radius:12px; padding:12px 14px; font-size:16px; line-height:1.6; }
.q-go { width:100%; background:var(--listen); color:#04261B; border:0; font-weight:700; }
.q-fine { color:var(--on-sea-soft); font-size:13px; margin-top:12px; }
.qual .main.ghost { background:transparent; color:var(--on-sea); border:1.5px solid rgba(255,255,255,.3); }
.qual .err { color:#FFB4A6; }

/* ---- shared journey pieces ---- */
.j { padding-top:4px; }
.j-lede { color:var(--soft); margin:0 0 14px; font-size:16px; }
.j-card { background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); padding:16px; margin:14px 0; box-shadow:var(--shadow); }
.j-h { font:600 16px/1.4 var(--display); color:var(--ink); margin:0 0 10px; letter-spacing:0; }
.j-h-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.j-hint { color:var(--soft); font-size:14px; margin:6px 0 10px; }
.j-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; } .j-row .main { flex:1 1 140px; margin:0; }
.j-in, .j-ta { width:100%; border:1.5px solid var(--rule); border-radius:12px; background:var(--panel); color:var(--ink); font:400 16px/1.5 var(--body); padding:11px 12px; min-height:46px; }
.j-ta { min-height:96px; resize:vertical; }
.j-in:focus, .j-ta:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.j-tag { display:inline-block; font:600 12px var(--body); color:var(--primary); background:var(--primary-soft); border-radius:999px; padding:2px 10px; }
.j-tag.warn { color:var(--amber-ink); background:color-mix(in srgb, var(--brass) 22%, transparent); }
.j-empty { color:var(--soft); padding:14px 0; }
.j-fine { color:var(--soft); font-size:14px; margin-top:26px; } .j-fine a { color:var(--soft); }
.j-banner { background:var(--primary-soft); color:var(--ink); border-radius:12px; padding:12px 14px; margin:12px 0; font-size:15px; border-inline-start:4px solid var(--primary); }
.j-banner.warn { background:color-mix(in srgb, var(--brass) 18%, var(--panel)); border-color:var(--brass); }
.fld { display:block; margin:12px 0; } .fld > span, .fld > label > span { display:block; font:600 14px var(--body); color:var(--soft); margin-bottom:6px; }

/* ---- home ---- */
.j-hero { background:var(--sea); color:var(--on-sea); border-radius:var(--r-lg); padding:24px 18px 20px; margin:6px 0 18px; text-align:center; }
.j-hero h1 { color:var(--on-sea); margin:0 0 6px; }
.j-hero .j-lede { color:var(--on-sea-soft); max-width:30em; margin:0 auto 18px; }
.j-mic { --lv:0; position:relative; width:132px; height:132px; border-radius:50%; border:0; cursor:pointer; margin:4px auto 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--primary); color:#fff; font:600 14px var(--body); box-shadow:0 10px 30px -10px rgba(36,69,214,.8); }
.j-mic span:last-child { max-width:110px; line-height:1.3; }
.j-mic-ring { position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(142,164,255,.45); pointer-events:none; }
.j-mic.rec { background:#0E8F6A; } .j-mic.rec .j-mic-ring { border-color:var(--listen); transform:scale(calc(1 + var(--lv) * .25)); transition:transform .1s linear; }
.j-mic:disabled { opacity:.6; cursor:wait; }
.j-mic:focus-visible { outline:3px solid var(--listen); outline-offset:6px; }
.j-note { color:var(--on-sea-soft); font-size:13px; margin:4px 0 6px; } .j-note.bad { color:#FFB4A6; } .j-note.busy { color:var(--listen); }
.j-type { text-align:start; margin-top:10px; }
.j-type summary { cursor:pointer; color:var(--on-sea); font-weight:600; text-align:center; padding:8px; min-height:44px; display:flex; align-items:center; justify-content:center; }
.j-type textarea { width:100%; min-height:110px; border-radius:12px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); color:var(--on-sea); font:400 16px/1.6 var(--body); padding:12px; margin:8px 0 10px; }
.j-type textarea::placeholder { color:var(--on-sea-soft); }
.j-type .main { width:100%; }
.j-hero .err { color:#FFB4A6; }
.j-prop .j-facts { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.j-facts li { display:flex; gap:10px; align-items:flex-start; background:var(--sunk); border-radius:12px; padding:10px 12px; }
.j-facts input { width:20px; height:20px; margin-top:3px; flex:none; accent-color:var(--primary); }
.j-facts label { display:grid; gap:2px; cursor:pointer; } .j-facts b { font:600 13px var(--body); color:var(--soft); }
.j-priv { font-style:normal; font-size:12px; color:var(--amber-ink); }
.j-heard { margin-top:10px; color:var(--soft); } .j-heard summary { cursor:pointer; min-height:40px; display:flex; align-items:center; }
.j-list-h { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.j-list-h h2 { margin:18px 0 8px; font:600 18px var(--display); color:var(--ink); }
.j-tabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.j-tab { border:1.5px solid var(--rule); background:var(--panel); color:var(--soft); border-radius:999px; padding:6px 14px; font:600 14px var(--body); min-height:40px; white-space:nowrap; cursor:pointer; }
.j-tab[aria-selected=true] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.j-deal { display:grid; gap:6px; width:100%; text-align:start; background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); padding:14px 16px; margin:10px 0; cursor:pointer; box-shadow:var(--shadow); color:var(--ink); font:inherit; }
.j-deal:hover { border-color:var(--primary); }
.j-deal-n { font:600 17px/1.4 var(--display); }
.j-deal-m { display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--soft); font-size:13px; }
.j-deal-x { color:var(--ink); font-size:14px; border-top:1px dashed var(--rule); padding-top:6px; }

/* ---- deal ---- */
.j-back { background:none; border:0; color:var(--primary); font:600 15px var(--body); padding:8px 0; min-height:44px; cursor:pointer; }
.j-back::before { content:"→ "; }
.j-dhead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .j-dhead h1 { margin:4px 0; font-size:clamp(24px,5.6vw,32px); }
.j-status { font:600 12px var(--body); border-radius:999px; padding:3px 10px; background:var(--sunk); color:var(--soft); }
.j-status.won { background:color-mix(in srgb, var(--jade) 16%, transparent); color:var(--jade); } .j-status.lost { color:var(--coral); }
.j-desc { color:var(--soft); margin:2px 0 10px; }
.j-gate { border-radius:14px; padding:12px 14px; margin:10px 0; font-size:15px; line-height:1.6; display:grid; gap:4px; }
.j-gate.questions_only { background:color-mix(in srgb, var(--brass) 18%, var(--panel)); border:1px solid color-mix(in srgb, var(--brass) 50%, transparent); }
.j-gate.limited { background:var(--primary-soft); border:1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.j-gate.full { background:color-mix(in srgb, var(--jade) 12%, var(--panel)); border:1px solid color-mix(in srgb, var(--jade) 35%, transparent); }
.j-gate-x { color:var(--coral); font-weight:500; }
.j-q { border-top:1px solid var(--rule); padding-top:12px; margin-top:12px; } .j-q:first-of-type { border-top:0; margin-top:0; padding-top:0; }
.j-q-t { font:600 16px/1.5 var(--body); margin:0 0 10px; }
.j-q .chips { display:flex; flex-wrap:wrap; gap:8px; }
.j-amt { display:block; color:var(--jade); font-size:13px; margin-top:4px; direction:rtl; }
.j-known { list-style:none; margin:0; padding:0; }
.j-known li { display:grid; grid-template-columns:8.5em 1fr auto auto; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid var(--rule); font-size:15px; }
.j-known li:last-child { border-bottom:0; } .j-known b { color:var(--soft); font:600 13px var(--body); }
.j-src { font-style:normal; font:600 11px var(--body); border-radius:6px; padding:2px 7px; background:var(--sunk); color:var(--soft); white-space:nowrap; }
.j-src.confirmed { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); }
.j-src.user_stated { color:var(--primary); background:var(--primary-soft); }
.j-src.heard { color:var(--sky); } .j-src.inferred { color:var(--amber-ink); background:color-mix(in srgb, var(--brass) 18%, transparent); }
.j-start { width:100%; font-size:18px; min-height:58px; margin:8px 0 6px; }
.j-meet { background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); padding:12px 14px; margin:10px 0; }
.j-meet-h { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:14px; color:var(--soft); } .j-meet-h b { color:var(--ink); }
.j-meet p { margin:8px 0; } .j-meet .main { margin-top:4px; }
.j-rs { font:600 12px var(--body); border-radius:999px; padding:2px 10px; background:var(--sunk); }
.j-rs.draft { color:var(--primary); background:var(--primary-soft); } .j-rs.failed { color:var(--amber-ink); background:color-mix(in srgb, var(--brass) 20%, transparent); } .j-rs.approved { color:var(--jade); }
.j-more summary { cursor:pointer; font-weight:600; min-height:40px; display:flex; align-items:center; }
#dDel { color:var(--coral); }

/* ---- review ---- */
.j-items { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.j-items li { display:flex; gap:8px; align-items:center; } .j-items .j-in { flex:1; min-width:0; }
.j-x { width:40px; height:40px; flex:none; border-radius:10px; border:1px solid var(--rule); background:var(--panel); color:var(--soft); font-size:20px; cursor:pointer; }
.j-confirm { border:1px solid color-mix(in srgb, var(--primary) 30%, transparent); } .j-confirm legend { font-weight:600; padding:0 4px; }
.j-dock { position:sticky; bottom:0; display:flex; gap:10px; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, var(--paper) 30%); }
.j-dock .main { flex:1; margin:0; } .j-dock .ghost { flex:0 0 32%; }
#review .chips, .sheet .chips { display:flex; flex-wrap:wrap; gap:8px; }

/* ---- the sheet before a meeting ---- */
.sheet { border:0; border-radius:var(--r-lg); padding:0; width:min(560px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); background:var(--panel); color:var(--ink); box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
.sheet::backdrop { background:rgba(7,14,34,.6); }
.sheet form { padding:20px 18px; }
.sheet h2 { font:600 20px var(--display); color:var(--ink); margin:0 0 12px; }
.sh-ch { border:0; padding:0; margin:0 0 10px; } .sh-ch legend { font:600 14px var(--body); color:var(--soft); margin-bottom:8px; }
.sh-cap { background:var(--sunk); border-radius:12px; padding:10px 12px; font-size:15px; margin:6px 0 12px; }
.sh-cap.warn { background:color-mix(in srgb, var(--brass) 20%, var(--panel)); color:var(--ink); }
.sheet .consent { display:flex; gap:10px; align-items:flex-start; margin:10px 0; } .sheet .consent input { width:22px; height:22px; flex:none; accent-color:var(--primary); margin-top:2px; }
@media (max-width:600px) { .sheet { margin:auto 0 0; width:100vw; max-width:100vw; border-radius:var(--r-lg) var(--r-lg) 0 0; } }

/* ---- the meeting screen in the new identity ---- */
#live .listen { background:var(--sea); color:var(--on-sea); }
#live .listen #tm, #live .listen small, #live .listen .stage { color:var(--on-sea-soft); }
#live .listen b { color:var(--on-sea); }
#live .listen[data-state=talk] .mic, #live .listen[data-state=wait] .mic { color:var(--listen); }
.cue .basis { display:inline-block; margin-top:8px; font:600 12px var(--body); border-radius:6px; padding:2px 8px; background:var(--sunk); color:var(--soft); }
.cue .basis.inferred { color:var(--amber-ink); background:color-mix(in srgb, var(--brass) 18%, transparent); }
.cue.old .basis { display:none; }

/* ---- wide screens ---- */
@media (min-width:980px) {
  body[data-screen=home] #app, body[data-screen=dws] #app, body[data-screen=review] #app { max-width:1080px; }
  #home { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:28px; align-items:start; }
  #home .j-hero, #home .j-prop { grid-column:1; grid-row:1 / span 3; position:sticky; top:12px; margin-top:6px; }
  #home .j-prop { position:static; }
  #home .j-hero.hidden + .j-prop { grid-row:1 / span 3; }
  #home > .j-banner, #home > .gate-note, #home > .j-list, #home > .j-fine { grid-column:2; }
}
@media (max-width:360px) { .j-known li { grid-template-columns:1fr auto; } .j-known li b { grid-column:1 / -1; } }

#tim { display:none; }                                    /* timing line for developers only */
/* a meeting left open by a reload: shown first on the home screen */
.j-resume { margin:0 0 16px; padding:16px 18px; border-radius:var(--r-lg); background:color-mix(in srgb, var(--brass) 16%, var(--panel)); border:1.5px solid var(--brass); color:var(--ink); }
.j-resume b { font:700 17px var(--display); } .j-resume p { margin:4px 0 10px; font-size:15px; line-height:1.6; }
.j-resume .row2 { gap:10px; } .j-resume .main { margin:0; }
.sh-cap-lead { display:block; font-weight:600; margin-bottom:8px; }
.sh-cap-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sh-cap-col b { display:block; font:700 13px var(--body); margin-bottom:4px; } .sh-cap-col.yes b { color:var(--jade); } .sh-cap-col.no b { color:var(--coral); }
.sh-cap-col ul { margin:0; padding-inline-start:18px; font-size:14px; line-height:1.55; } .sh-cap-col li { margin:2px 0; }
@media (max-width:420px) { .sh-cap-grid { grid-template-columns:1fr; } }
.sh-say { margin:12px 0 6px; padding:10px 14px; border-radius:12px; background:var(--primary-soft); display:grid; gap:2px; }
.sh-say b { font:600 13px var(--body); color:var(--soft); } .sh-say q { font:600 16px/1.6 var(--body); color:var(--ink); quotes:"«" "»"; }
.sh-switch { margin:10px 0 0; font:500 14px/1.6 var(--body); } .sh-switch .link { font:inherit; padding:0; min-height:0; text-decoration:underline; }
.j-gap { margin:10px 0 0; padding:10px 14px; border-radius:12px; background:var(--sunk); font:500 15px/1.6 var(--body); }
.sh-mic { margin:10px 0; padding:12px 14px; border-radius:12px; background:color-mix(in srgb, var(--coral) 10%, var(--panel)); border:1px solid color-mix(in srgb, var(--coral) 30%, transparent); }
.sh-mic ul { margin:8px 0 10px; padding-inline-start:18px; display:grid; gap:6px; font:400 14px/1.6 var(--body); }
.sh-mic.hidden { display:none; }