/* OPSY on-device interviewer styles. The font stack is local and system-based
   so interview and governance surfaces remain usable without third-party calls. */

:root {
  --font-display: 'Segoe UI Variable Display', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Segoe UI Variable Text', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Cascadia Mono', 'SFMono-Regular', Consolas, ui-monospace, monospace;
  --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --transition: 180ms cubic-bezier(.16,1,.3,1);

  --color-bg:#FFFFFF; --color-surface:#F8FAFC; --color-surface-2:#F1F5F9;
  --color-divider:rgba(15,23,42,.08); --color-border:rgba(15,23,42,.12);
  --color-text:#0F172A; --color-text-muted:#334155; --color-text-faint:#5A6675; --color-text-inverse:#FFFFFF;
  --color-primary:#0D6B4E; --color-primary-hover:#0A5A40; --color-primary-active:#084832; --color-primary-light:#E6F3EE;
  --color-secondary:#1F3A68; --color-secondary-light:rgba(31,58,104,.08);
  --color-gold:#B8960C; --color-gold-light:#FBF5E0;
  --color-success:#437A22; --color-warning:#964219; --color-error:#A12C4D;
  --shadow-sm:0 1px 2px rgba(26,26,24,.05); --shadow-md:0 4px 16px rgba(26,26,24,.08); --shadow-lg:0 12px 40px rgba(26,26,24,.12);
}
[data-theme="dark"] {
  --color-bg:#0F1410; --color-surface:#161B18; --color-surface-2:#1C221F;
  --color-divider:rgba(232,232,228,.06); --color-border:rgba(232,232,228,.16);
  --color-text:#E8E8E4; --color-text-muted:#9A9A94; --color-text-faint:#7C7C74; --color-text-inverse:#0F1410;
  --color-primary:#3ECF7A; --color-primary-hover:#4ADE80; --color-primary-active:#2DB866; --color-primary-light:rgba(62,207,122,.1);
  --color-secondary:#5CADE4; --color-secondary-light:rgba(92,173,228,.1);
  --color-gold:#E8B931; --color-gold-light:rgba(232,185,49,.1);
  --color-success:#6DAA45; --color-warning:#F0A778; --color-error:#DD6974;
  --shadow-sm:0 1px 2px rgba(0,0,0,.2); --shadow-md:0 4px 16px rgba(0,0,0,.3); --shadow-lg:0 12px 40px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:#0F1410; --color-surface:#161B18; --color-surface-2:#1C221F;
    --color-divider:rgba(232,232,228,.06); --color-border:rgba(232,232,228,.16);
    --color-text:#E8E8E4; --color-text-muted:#9A9A94; --color-text-faint:#7C7C74; --color-text-inverse:#0F1410;
    --color-primary:#3ECF7A; --color-primary-hover:#4ADE80; --color-primary-active:#2DB866; --color-primary-light:rgba(62,207,122,.1);
    --color-secondary:#5CADE4; --color-gold:#E8B931; --color-gold-light:rgba(232,185,49,.1);
    --color-success:#6DAA45; --color-warning:#F0A778; --color-error:#DD6974;
    --shadow-md:0 4px 16px rgba(0,0,0,.3); --shadow-lg:0 12px 40px rgba(0,0,0,.4);
  }
}

/* Recovery Registry semantic pairs (RARE-01). Derived from the adaptive
   primitives above via color-mix, so they follow light/dark automatically and
   need defining only once: custom properties are late-bound, so a theme block
   that overrides --color-error re-tints --nr-bg at use time. Registry surfaces
   previously hardcoded pastel hex here, which stayed pale in dark mode next to a
   token-driven tier badge. */
:root {
  --rec-fg: var(--color-primary);
  --rec-bg: color-mix(in oklab, var(--color-primary) 12%, transparent);
  --nr-fg: var(--color-error);
  --nr-bg: color-mix(in oklab, var(--color-error) 12%, transparent);
  --ae-fg: var(--color-warning);
  --ae-bg: color-mix(in oklab, var(--color-warning) 12%, transparent);
  --sig-fg: var(--color-success);
  --sig-bg: color-mix(in oklab, var(--color-success) 12%, transparent);
  --unsig-fg: var(--color-text-muted);
  --unsig-bg: var(--color-surface-2);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body { min-height:100dvh; font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--color-text); background:var(--color-bg); }
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important;} }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.15; }
a{ color:var(--color-primary); }
:focus-visible{ outline:2px solid var(--color-primary); outline-offset:3px; border-radius:var(--radius-sm); }
.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link{ position:fixed; z-index:1000; top:var(--space-2); left:var(--space-2); display:flex; min-height:44px; align-items:center; padding:0 var(--space-4); border-radius:var(--radius-sm); background:var(--color-primary); color:var(--color-text-inverse); font-weight:700; text-decoration:none; transform:translateY(calc(-100% - var(--space-4))); transition:transform var(--transition); }
.skip-link:focus{ transform:translateY(0); }

/* ---- layout ---- */
.app{ max-width:760px; margin:0 auto; height:100dvh; display:flex; flex-direction:column; }
.topbar{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-2); padding:calc(var(--space-4) + env(safe-area-inset-top)) var(--space-5) var(--space-4); border-bottom:1px solid var(--color-divider); position:sticky; top:0; background:color-mix(in oklab,var(--color-bg) 88%, transparent); backdrop-filter:blur(8px); z-index:10; }
.brand{ display:flex; min-height:44px; align-items:center; gap:var(--space-2); font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--color-text); text-decoration:none; }
.brand svg{ width:26px; height:26px; }
/* The Rose of Venus mark (brand/logo/opsy-rose-mark-reversed.svg): cream line
   on forest green, cropped round. The source square is the brand green, so the
   circle crop IS the round badge — no extra background needed. */
/* The brand medallion (Codex prototype): green disc, cream rose, slight
   overscale so the outer rings kiss the circular crop — never theme-grey. */
.brand-rose{ width:28px; height:28px; border-radius:50%; display:block; overflow:hidden; flex:none; }
.brand .brand-rose svg, .brand-rose svg, .brand .brand-rose img, .brand-rose img{ width:100%; height:100%; display:block; transform:scale(1.12); }
.ob-icon img{ width:52px; height:52px; }
.topbar .spacer{ flex:1; }
.iconbtn{ width:44px; height:44px; border-radius:var(--radius-full); display:grid; place-items:center; color:var(--color-text-muted); }
.iconbtn:hover{ background:var(--color-surface-2); color:var(--color-text); }
.muted{ color:var(--color-text-faint); }
.small{ font-size:.82rem; }

/* ---- screens ---- */
.screen{ display:none; flex:1; min-height:0; flex-direction:column; overflow-y:auto; }
.screen.active{ display:flex; }
#view-interview, #view-onboarding{ overflow:hidden; }
.pad{ padding:var(--space-6) var(--space-5); }

/* ---- picker ---- */
.lead{ font-family:var(--font-display); font-size:clamp(1.8rem,1.2rem+2vw,2.6rem); margin-bottom:var(--space-2); }
.sub{ color:var(--color-text-muted); max-width:60ch; margin-bottom:var(--space-6); }
.cards{ display:grid; gap:var(--space-4); }
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-5); box-shadow:var(--shadow-sm); }
.card h3{ font-size:1.4rem; margin-bottom:var(--space-2); }
.card .summary{ color:var(--color-text-muted); font-size:.95rem; margin-bottom:var(--space-4); }
.card .row{ display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; }

/* ---- pills / badges ---- */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-full); background:var(--color-surface-2); color:var(--color-text-muted); }
.pill.ok{ background:var(--color-primary-light); color:var(--color-primary); }
.pill.warn{ background:var(--color-gold-light); color:var(--color-gold); }
.pill.err{ background:color-mix(in oklab,var(--color-error) 14%,transparent); color:var(--color-error); }
.verify{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-3) 0; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:var(--radius-full); font-weight:600; font-size:.95rem; text-decoration:none; transition:background var(--transition),transform var(--transition),box-shadow var(--transition); }
.btn-primary{ background:var(--color-primary); color:var(--color-text-inverse); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--color-primary-hover); }
.btn-primary:active{ transform:translateY(1px); }
.btn-ghost{ background:transparent; border:1px solid var(--color-border); color:var(--color-text); }
.btn-ghost:hover{ background:var(--color-surface-2); }
.btn-soft{ background:var(--color-surface-2); color:var(--color-text); }
.btn-soft:hover{ background:var(--color-surface); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-block{ width:100%; }

/* ---- toggle ---- */
.toggle{ display:inline-flex; align-items:center; gap:10px; font-size:.9rem; color:var(--color-text-muted); cursor:pointer; }
.toggle input{ position:absolute; opacity:0; }
.track{ width:40px; height:24px; border-radius:var(--radius-full); background:var(--color-surface-2); border:1px solid var(--color-border); position:relative; transition:background var(--transition); }
.track::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--transition); }
.toggle input:checked + .track{ background:var(--color-primary); }
.toggle input:checked + .track::after{ transform:translateX(16px); }

/* ---- progress ---- */
.progress{ height:4px; background:var(--color-surface-2); }
.progress > div{ height:100%; background:linear-gradient(90deg,var(--color-primary),var(--color-gold)); transition:width var(--transition); }

/* ---- chat ---- */
.chat{ flex:1; min-height:0; overflow-y:auto; padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.msg{ display:flex; gap:var(--space-3); max-width:100%; animation:rise .3s ease both; }
@keyframes rise{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.msg .av{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:.8rem; font-weight:600; color:var(--color-text-inverse); background:var(--color-primary); }
.msg.participant{ flex-direction:row-reverse; }
.msg.participant .av{ background:var(--color-secondary); }
.bubble{ padding:12px 16px; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-divider); white-space:pre-wrap; }

/* Pre-first-token typing indicator (docs/DEVICE-RUNTIME-PROJECTIONS.md, flow):
   three dots breathing in sequence while the model prefills and decodes the
   captured field; replaced by the live streaming bubble at the first word. */
.bubble.typing-dots{ display:inline-flex; gap:5px; align-items:center; padding-top:15px; padding-bottom:15px; }
.bubble.typing-dots span{ width:7px; height:7px; border-radius:50%; background:var(--color-text-muted, #888); opacity:.25; animation:typingDot 1.2s infinite ease-in-out; }
.bubble.typing-dots span:nth-child(2){ animation-delay:.18s; }
.bubble.typing-dots span:nth-child(3){ animation-delay:.36s; }
@keyframes typingDot{ 0%,60%,100%{opacity:.25; transform:translateY(0);} 30%{opacity:.9; transform:translateY(-3px);} }
.msg.participant .bubble{ background:var(--color-primary); color:var(--color-text-inverse); border-color:transparent; }
.bubble.md h1{ font-size:1.3rem; margin:.2em 0 .4em; } .bubble.md h2{ font-size:1.1rem; } .bubble.md ul{ padding-left:1.2em; } .bubble.md li{ margin:.2em 0; } .bubble.md p{ margin:.4em 0; } .bubble.md strong{ color:var(--color-text); } .bubble.md hr{ border:none; border-top:1px solid var(--color-divider); margin:.6em 0; } .bubble.md em{ color:var(--color-text-muted); }

/* ---- dock (input area) ---- */
.dock{ border-top:1px solid var(--color-divider); padding:var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); background:var(--color-bg); position:sticky; bottom:0; display:flex; flex-direction:column; gap:var(--space-3); }
/* Native keyboard open: the shell has already shrunk the viewport, so the
   home-indicator inset no longer applies and would read as dead space above
   the keyboard. (native-bridge.js toggles .kb-open on <html>.) */
.kb-open .dock{ padding-bottom:var(--space-4); }
.dock-row{ display:flex; gap:var(--space-2); align-items:flex-end; }
.input{ flex:1; resize:none; min-height:48px; max-height:160px; padding:12px 14px; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); }
.input:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-light); }
.send{ width:48px; height:48px; border-radius:var(--radius-full); background:var(--color-primary); color:var(--color-text-inverse); display:grid; place-items:center; flex:none; }
.send:hover{ background:var(--color-primary-hover); }
.mic{ width:48px; height:48px; border-radius:var(--radius-full); background:var(--color-surface-2); color:var(--color-text); display:grid; place-items:center; flex:none; border:1px solid var(--color-border); }
.mic.rec{ background:var(--color-error); color:#fff; border-color:transparent; animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--color-error) 50%,transparent);} 70%{box-shadow:0 0 0 12px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* ---- likert ---- */
.likert{ display:flex; flex-direction:column; gap:var(--space-2); }
.likert .scale{ display:flex; gap:8px; flex-wrap:wrap; }
.likert .pt{ flex:1; min-width:44px; min-height:48px; padding:12px 0; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border); font-weight:600; font-variant-numeric:tabular-nums; }
.likert .pt:hover{ border-color:var(--color-primary); background:var(--color-primary-light); }
.likert .pt.sel{ background:var(--color-primary); color:var(--color-text-inverse); border-color:transparent; }
.likert .ends{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--color-text-faint); }
.likert .ctx{ font-size:.78rem; color:var(--color-text-faint); }

/* ---- choices ---- */
.choices{ display:flex; flex-direction:column; gap:var(--space-2); }
.choice{ text-align:left; padding:12px 14px; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border); }
.choice:hover{ border-color:var(--color-primary); background:var(--color-primary-light); }
.choice.sel{ border-color:var(--color-primary); background:var(--color-primary-light); }
.choice.sel::after{ content:"✓"; float:right; color:var(--color-primary); font-weight:700; }

/* ---- shared conversational response cards ---- */
.conversation-response{
  margin:0 0 0 46px;
  max-width:min(620px,calc(100% - 46px));
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.conversation-response.submitted{ opacity:.72; }
.conversation-response-prompt{ font-weight:600; }
.conversation-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.conversation-option{
  min-height:52px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  text-align:left;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
  transition:background var(--transition),border-color var(--transition),box-shadow var(--transition);
  touch-action:manipulation;
}
.conversation-option:hover{ border-color:var(--color-primary); background:var(--color-primary-light); }
.conversation-option.selected{
  border-color:var(--color-primary);
  background:var(--color-primary-light);
  box-shadow:0 0 0 1px var(--color-primary);
}
.conversation-option-mark{
  width:20px;
  height:20px;
  flex:none;
  margin-top:2px;
  border:1.5px solid var(--color-border);
  border-radius:6px;
  background:var(--color-bg);
  position:relative;
}
[data-response-type="single_select"] .conversation-option-mark{ border-radius:50%; }
.conversation-option.selected .conversation-option-mark{ border-color:var(--color-primary); background:var(--color-primary); }
.conversation-option.selected .conversation-option-mark::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border:solid var(--color-text-inverse);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
[data-response-type="single_select"] .conversation-option.selected .conversation-option-mark::after{
  left:5px;
  top:5px;
  width:8px;
  height:8px;
  border:0;
  border-radius:50%;
  background:var(--color-text-inverse);
  transform:none;
}
.conversation-option-copy{ display:flex; flex-direction:column; gap:2px; }
.conversation-option-label{ font-weight:650; line-height:1.35; }
.conversation-option-description{ color:var(--color-text-muted); font-size:.82rem; line-height:1.4; }
.conversation-continue{ align-self:flex-start; min-height:44px; min-width:120px; }
.conversation-response-hint{ color:var(--color-text-faint); font-size:.82rem; }
.prefill-confirm{ display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.prefill-eyebrow{ color:var(--color-text-faint); font-size:.78rem; font-weight:650; text-transform:uppercase; letter-spacing:.04em; }
.prefill-value{ font-size:1rem; font-weight:650; line-height:1.45; overflow-wrap:anywhere; }
.prefill-evidence{ margin:0; padding:9px 11px; border-left:3px solid var(--color-primary); border-radius:0 var(--radius-md) var(--radius-md) 0; background:var(--color-primary-light); color:var(--color-text-muted); font-size:.88rem; line-height:1.45; }
.prefill-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.prefill-actions .btn{ min-height:44px; }
.conversation-response-divider{ display:flex; align-items:center; gap:10px; color:var(--color-text-muted); font-size:.78rem; }
.conversation-response-divider::before,.conversation-response-divider::after{ content:""; height:1px; flex:1; background:var(--color-divider); }
.conversation-self-describe label{ display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.86rem; }
.conversation-self-describe input,
.conversation-inline-form input,
.conversation-inline-form textarea{
  width:100%;
  min-height:48px;
  padding:11px 13px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}
.conversation-inline-form{ display:flex; align-items:flex-end; gap:10px; }
.conversation-inline-form textarea{ resize:vertical; }
.conversation-inline-form .btn{ min-height:48px; }
.conversation-likert{ display:flex; flex-direction:column; gap:8px; }
.conversation-likert-points{ display:flex; flex-wrap:wrap; gap:8px; }
.conversation-likert-points button{
  min-width:48px;
  min-height:48px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  font-weight:650;
}
.conversation-likert-points button:hover{ border-color:var(--color-primary); background:var(--color-primary-light); }
.conversation-likert-labels{ display:flex; justify-content:space-between; gap:16px; color:var(--color-text-faint); font-size:.8rem; }
.conversation-consent-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.conversation-consent-actions .btn{ min-height:44px; }
@media(max-width:560px){
  .conversation-response{ margin-left:0; max-width:100%; }
  .conversation-options{ grid-template-columns:1fr; }
  .conversation-inline-form{ flex-direction:column; align-items:stretch; }
}
@media(hover:none){
  .conversation-option:hover{ border-color:var(--color-border); background:var(--color-surface); }
  .conversation-option.selected:hover{ border-color:var(--color-primary); background:var(--color-primary-light); }
}

/* ---- consent / safety cards ---- */
.notice{ border-radius:var(--radius-lg); padding:var(--space-4); border:1px solid var(--color-border); background:var(--color-surface); }
/* The check-in card is CARE, not an error. A calm secondary accent + soft
   left rule, never the red warning-triangle language used for real faults. */
.notice.safety{ border-color:var(--color-secondary); border-left:3px solid var(--color-secondary); background:color-mix(in oklab,var(--color-secondary) 8%,var(--color-bg)); }
.notice.safety h3{ color:var(--color-secondary); display:flex; align-items:center; gap:8px; }
.resources{ display:flex; flex-direction:column; gap:8px; margin:var(--space-3) 0; }
.resource{ padding:10px 12px; border-radius:var(--radius-md); background:var(--color-bg); border:1px solid var(--color-divider); }
.resource b{ display:block; }

/* ---- end / data panel ---- */
.end-card{ text-align:center; }
.rc{ font-family:var(--font-mono); font-size:1.1rem; background:var(--color-surface-2); border:1px dashed var(--color-border); padding:10px 16px; border-radius:var(--radius-md); display:inline-block; margin:var(--space-2) 0; user-select:all; }

/* ---- modal ---- */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; place-items:center; padding:var(--space-4); z-index:50; }
.modal.open{ display:grid; }
.modal .panel{ background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-xl); max-width:680px; width:100%; max-height:86dvh; overflow:auto; box-shadow:var(--shadow-lg); }
.modal .panel header{ display:flex; align-items:center; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-divider); position:sticky; top:0; background:var(--color-bg); }
.modal .panel header h3{ flex:1; }
.modal pre{ font-family:var(--font-mono); font-size:.8rem; white-space:pre-wrap; background:var(--color-surface-2); padding:var(--space-3); border-radius:var(--radius-md); overflow:auto; }
.tabs{ display:flex; gap:6px; padding:var(--space-3) var(--space-5) 0; flex-wrap:wrap; }
.tab{ padding:7px 12px; border-radius:var(--radius-full); font-size:.85rem; background:var(--color-surface-2); color:var(--color-text-muted); }
.tab.active{ background:var(--color-primary); color:var(--color-text-inverse); }
.tabpanel{ padding:var(--space-4) var(--space-5); display:none; } .tabpanel.active{ display:block; }

/* researcher */
#list{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th,td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--color-divider); }
th{ color:var(--color-text-faint); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.kpi{ display:flex; gap:var(--space-4); flex-wrap:wrap; margin:var(--space-3) 0; }
.kpi .box{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); min-width:120px; }
.kpi .box .n{ font-family:var(--font-display); font-size:1.8rem; color:var(--color-primary); }
.kpi .box .l{ font-size:.78rem; color:var(--color-text-faint); }
.factorbar{ height:8px; border-radius:var(--radius-full); background:var(--color-surface-2); overflow:hidden; margin-top:4px; }
.factorbar > div{ height:100%; background:var(--color-primary); }

/* ============================================================= *
 *  App shell v2 — onboarding, bottom nav, home, insights, data  *
 * ============================================================= */

/* ---- bottom tab bar ---- */
.tabbar{ display:flex; border-top:1px solid var(--color-divider); background:color-mix(in oklab,var(--color-bg) 92%, transparent); backdrop-filter:blur(10px); }
.tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px calc(9px + env(safe-area-inset-bottom)); color:var(--color-text-faint); font-size:.7rem; font-weight:600; letter-spacing:.02em; text-decoration:none; transition:color var(--transition); }
.tabbar a svg{ width:22px; height:22px; }
.tabbar a.active{ color:var(--color-primary); }
.tabbar a:hover{ color:var(--color-text); }

/* ---- onboarding ---- */
.onboarding{ background:radial-gradient(130% 80% at 50% -10%, var(--color-primary-light), var(--color-bg) 55%); }
.ob-wrap{ max-width:480px; width:100%; margin:0 auto; padding:var(--space-5); display:flex; flex-direction:column; flex:1; min-height:0; }
.ob-skip{ align-self:flex-end; color:var(--color-text-faint); font-size:.9rem; min-height:44px; padding:0 var(--space-3); display:inline-flex; align-items:center; }
.ob-slides{ flex:1; display:grid; place-items:center; text-align:center; min-height:0; overflow-y:auto; }
.ob-slide{ display:none; }
.ob-slide.active{ display:block; animation:rise .4s ease both; }
.ob-icon{ width:88px; height:88px; margin:0 auto var(--space-5); border-radius:var(--radius-2xl); display:grid; place-items:center; background:var(--color-primary-light); color:var(--color-primary); box-shadow:var(--shadow-glow-emerald); }
.ob-icon svg{ width:44px; height:44px; }
.ob-slide h1{ font-size:clamp(1.8rem,1.3rem+2vw,2.6rem); margin-bottom:var(--space-3); }
.ob-slide p{ color:var(--color-text-muted); margin:0 auto; max-width:42ch; }
.ob-list{ text-align:left; max-width:360px; margin:var(--space-5) auto 0; display:flex; flex-direction:column; gap:var(--space-3); }
.ob-list li{ list-style:none; display:flex; gap:12px; align-items:flex-start; color:var(--color-text-muted); }
.ob-list li svg{ flex:none; width:22px; height:22px; color:var(--color-primary); margin-top:1px; }
.ob-list li b{ color:var(--color-text); font-weight:600; }
.ob-dots{ display:flex; gap:8px; justify-content:center; margin:var(--space-5) 0; }
.ob-dot{ width:8px; height:8px; border-radius:50%; background:var(--color-border); transition:all var(--transition); }
.ob-dot.active{ background:var(--color-primary); width:22px; border-radius:var(--radius-full); }
.ob-nav{ display:flex; gap:var(--space-3); }

/* ---- home ---- */
.greeting{ font-family:var(--font-display); font-size:clamp(2rem,1.4rem+2.5vw,3rem); margin-bottom:var(--space-1); }
.greeting-sub{ color:var(--color-text-muted); margin-bottom:var(--space-6); max-width:48ch; }
.menu{ display:grid; gap:var(--space-4); }
.menu-card{ display:flex; align-items:center; gap:var(--space-4); text-align:left; width:100%; padding:var(--space-5); border-radius:var(--radius-xl); border:1px solid var(--color-border); background:var(--color-surface); box-shadow:var(--shadow-sm); transition:transform var(--transition), box-shadow var(--transition); text-decoration:none; color:inherit; }
.menu-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.menu-primary{ background:linear-gradient(135deg, var(--color-primary), var(--color-primary-active)); color:var(--color-text-inverse); border-color:transparent; box-shadow:var(--shadow-md); }
.menu-primary .menu-icon{ background:color-mix(in oklab,var(--color-text-inverse) 18%,transparent); color:var(--color-text-inverse); }
.menu-primary .menu-sub{ color:color-mix(in oklab,var(--color-text-inverse) 82%,transparent); }
.menu-primary .chev{ color:color-mix(in oklab,var(--color-text-inverse) 78%,transparent); }
.menu-icon{ width:52px; height:52px; flex:none; border-radius:var(--radius-lg); display:grid; place-items:center; background:var(--color-primary-light); color:var(--color-primary); }
.menu-icon svg{ width:26px; height:26px; }
.menu-text{ flex:1; min-width:0; }
.menu-title{ display:block; font-family:var(--font-display); font-size:1.3rem; font-weight:600; line-height:1.2; }
.menu-sub{ display:block; margin-top:3px; color:var(--color-text-muted); font-size:.9rem; }
.menu-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.menu-row .menu-card{ flex-direction:column; align-items:flex-start; }
@media(max-width:520px){ .menu-row{ grid-template-columns:1fr; } }
.chev{ color:var(--color-text-faint); flex:none; }
.recent{ margin-top:var(--space-6); }
.recent-item{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--color-divider); border-radius:var(--radius-md); background:var(--color-surface); margin-top:var(--space-2); width:100%; text-align:left; text-decoration:none; color:inherit; }
.recent-item:hover{ border-color:var(--color-primary); }

/* ---- insights / data ---- */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin:var(--space-5) 0 var(--space-3); flex-wrap:wrap; }
.section-head h2{ font-size:1.6rem; }
.empty{ text-align:center; padding:var(--space-12) var(--space-5); color:var(--color-text-faint); }
.empty svg{ width:56px; height:56px; margin:0 auto var(--space-4); color:var(--color-border); }
.empty h3{ color:var(--color-text-muted); margin-bottom:var(--space-2); }
.exp{ border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); margin-bottom:var(--space-3); overflow:hidden; }
.exp-head{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4); cursor:pointer; width:100%; text-align:left; }
.exp-head:hover{ background:var(--color-surface-2); }
.exp-ic{ width:40px; height:40px; flex:none; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--color-primary-light); color:var(--color-primary); }
.exp-meta{ flex:1; min-width:0; }
.exp-meta .t{ font-weight:600; }
.exp-meta .d{ font-size:.82rem; color:var(--color-text-faint); }
.exp-score{ font-size:.85rem; color:var(--color-text-muted); white-space:nowrap; }
.exp-body{ padding:0 var(--space-4) var(--space-4); border-top:1px solid var(--color-divider); }
.exp-body .chat{ max-height:340px; padding:var(--space-3) 0; }
.privacy-list{ display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-4) 0; }
.privacy-list .row{ display:flex; gap:var(--space-3); align-items:flex-start; }
.privacy-list .row svg{ flex:none; width:22px; height:22px; color:var(--color-primary); margin-top:2px; }
.privacy-list .row b{ display:block; }
.btn.danger{ color:var(--color-error); border-color:color-mix(in oklab,var(--color-error) 40%,transparent); background:transparent; }
.btn.danger:hover{ background:color-mix(in oklab,var(--color-error) 10%,transparent); }
.spark{ display:flex; align-items:flex-end; gap:4px; height:44px; margin-top:8px; }
.spark .bar{ flex:1; min-width:6px; background:var(--color-primary); border-radius:3px 3px 0 0; opacity:.85; }

/* ---- engine choice ---- */
.engine-opts{ display:grid; gap:var(--space-3); text-align:left; }
.engine-opt{ display:flex; flex-direction:column; gap:6px; text-align:left; width:100%; padding:var(--space-4); border-radius:var(--radius-lg); border:1.5px solid var(--color-border); background:var(--color-surface); transition:border-color var(--transition), background var(--transition); }
.engine-opt:hover:not([disabled]){ border-color:var(--color-primary); }
.engine-opt.selected{ border-color:var(--color-primary); background:var(--color-primary-light); }
.engine-opt b{ font-size:1.05rem; }
.engine-opt[disabled]{ opacity:.55; cursor:not-allowed; }
.engine-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.engine-ic{ width:34px; height:34px; flex:none; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--color-surface-2); color:var(--color-primary); }
.engine-opt.selected .engine-ic{ background:var(--color-primary); color:var(--color-text-inverse); }

/* ============================================================= *
 *  OPSY Studio — study builder                                  *
 * ============================================================= */
.app.studio{ max-width:940px; }
#sview-editor, #sview-preview, #sview-hybrid{ overflow:hidden; }

.editor-bar{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--color-divider); position:sticky; top:0; background:color-mix(in oklab,var(--color-bg) 92%,transparent); backdrop-filter:blur(8px); z-index:5; }
.title-input{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; background:transparent; border:none; flex:1; min-width:60px; color:var(--color-text); }
.title-input:focus{ outline:none; }
.editor-body{ flex:1; min-height:0; overflow-y:auto; padding:var(--space-5); }
.ring{ width:46px; height:46px; flex:none; }

/* form controls */
.studio .input{ width:100%; }
.fld{ display:flex; flex-direction:column; gap:5px; margin-bottom:var(--space-3); }
.fld > span{ font-size:.8rem; color:var(--color-text-faint); font-weight:600; }
.fld input, .fld textarea, .fld select{ width:100%; padding:10px 12px; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text); }
.fld textarea{ resize:vertical; min-height:64px; line-height:1.5; }
.fld input:focus, .fld textarea:focus, .fld select:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-light); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-3); }
@media(max-width:560px){ .grid2,.grid3{ grid-template-columns:1fr; } }
.check{ display:flex; gap:8px; align-items:center; font-size:.92rem; color:var(--color-text-muted); cursor:pointer; }
.tab-intro{ color:var(--color-text-muted); margin-bottom:var(--space-4); max-width:62ch; }
.sealed{ border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-2); padding:var(--space-3); margin-top:var(--space-3); }
.sealed summary{ cursor:pointer; font-weight:600; font-size:.9rem; color:var(--color-text-muted); }
.sealed pre{ font-family:var(--font-mono); font-size:.78rem; white-space:pre-wrap; margin-top:var(--space-2); color:var(--color-text-muted); }

/* block cards (flow) */
.block-card{ border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); margin-bottom:var(--space-3); }
.block-head{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); }
.block-type{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-primary); }
.block-id{ font-size:.78rem; color:var(--color-text-faint); }
.block-actions{ display:flex; gap:2px; margin-left:auto; }
.mini{ width:30px; height:30px; border-radius:var(--radius-md); display:grid; place-items:center; color:var(--color-text-faint); }
.mini:hover{ background:var(--color-surface-2); color:var(--color-text); }
.mini[disabled]{ opacity:.3; }
.block-body{ padding:0 var(--space-4) var(--space-4); }
.add-bar{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--space-4); }
.add-bar button{ font-size:.82rem; padding:7px 12px; border-radius:var(--radius-full); border:1px dashed var(--color-border); color:var(--color-text-muted); }
.add-bar button:hover{ border-color:var(--color-primary); color:var(--color-primary); }

/* findings */
.findings-toggle{ width:100%; text-align:left; padding:9px var(--space-5); border-top:1px solid var(--color-divider); font-size:.85rem; color:var(--color-text-muted); display:flex; gap:10px; align-items:center; background:var(--color-surface); }
.findings{ max-height:0; overflow-y:auto; background:var(--color-surface); transition:max-height var(--transition); }
.findings.open{ max-height:240px; padding:var(--space-2) var(--space-5) var(--space-4); }
.finding{ display:flex; gap:8px; padding:7px 0; border-bottom:1px solid var(--color-divider); cursor:pointer; font-size:.88rem; align-items:flex-start; }
.finding .dot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; }
.finding.error .dot{ background:var(--color-error); } .finding.warning .dot{ background:var(--color-gold); } .finding.info .dot{ background:var(--color-text-faint); }
.finding b{ font-weight:600; }
.count-chip{ display:inline-flex; gap:4px; align-items:center; padding:2px 8px; border-radius:var(--radius-full); font-weight:600; font-size:.78rem; }
.count-chip.error{ background:color-mix(in oklab,var(--color-error) 14%,transparent); color:var(--color-error); }
.count-chip.warning{ background:var(--color-gold-light); color:var(--color-gold); }
.count-chip.ok{ background:var(--color-primary-light); color:var(--color-primary); }
.optlist{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.optchip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-full); background:var(--color-surface-2); font-size:.85rem; }
.optchip button{ color:var(--color-text-faint); }
.item-row{ display:grid; grid-template-columns:62px 1fr 84px auto; gap:8px; align-items:center; margin-bottom:6px; }
.item-row input{ padding:7px 10px; border-radius:var(--radius-sm); background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text); width:100%; }

/* ---- Share / provenance tab (data-integrity subsystem) ---- */
.mono{ font-family:var(--font-mono); font-size:.86rem; word-break:break-all; }
.notice.ok{ border-color:var(--color-success); background:color-mix(in oklab,var(--color-success) 8%,var(--color-bg)); }
.notice.ok b{ color:var(--color-success); }
.btn.small{ padding:6px 12px; font-size:.82rem; }
.iv-id{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.iv-entry{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); margin-bottom:8px; }
.iv-study,.iv-notif{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:8px; }
.iv-kv{ width:100%; }
.iv-kv th{ text-align:left; padding:4px 12px 4px 0; white-space:nowrap; }
.iv-kv td{ padding:4px 0; }
.iv-field{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); padding:8px 0; border-bottom:1px solid var(--color-divider); }
.iv-field > span{ font-size:.82rem; color:var(--color-text-faint); font-weight:600; padding-top:6px; min-width:120px; }
.iv-field select{ padding:8px 10px; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text); }
.iv-field > div{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.chk{ display:inline-flex; align-items:center; gap:6px; font-size:.88rem; color:var(--color-text-muted); }

/* ---- first-run feedback fixes ---- */
.dock-q{ font-size:.92rem; font-weight:600; color:var(--color-text); padding:0 2px var(--space-2); }
.choices.scroll{ max-height:44vh; overflow-y:auto; padding-right:4px; }
.end-actions{ display:flex; flex-direction:column; gap:var(--space-3); align-items:center; margin-top:var(--space-4); }
.end-actions .btn{ width:100%; max-width:280px; }
.data-actions{ display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-4) 0; }
.exp-section{ margin-top:var(--space-3); border-top:1px solid var(--color-divider); padding-top:var(--space-2); }
.exp-section > summary{ cursor:pointer; font-weight:600; font-size:.95rem; color:var(--color-text-muted); list-style:none; padding:4px 0; }
.exp-section > summary::-webkit-details-marker{ display:none; }
.exp-section > summary::before{ content:"\25B8"; display:inline-block; margin-right:8px; transition:transform var(--transition); color:var(--color-text-faint); }
.exp-section[open] > summary::before{ transform:rotate(90deg); }
.exp-actions{ display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-3); }
.btn.btn-sm{ padding:7px 14px; font-size:.85rem; }
.meta-table{ width:100%; }
.meta-table th{ text-align:left; padding:4px 12px 4px 0; white-space:nowrap; vertical-align:top; font-size:.72rem; }
.meta-table td{ padding:4px 0; font-size:.86rem; word-break:break-word; }
.model-picker select{ width:100%; max-width:360px; padding:9px 12px; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text); margin-top:4px; font-family:inherit; }

/* ---- vision: image widget, reading card, toast ---- */
.pill.info{ background:var(--color-secondary-light); color:var(--color-secondary); }
.img-thumb{ display:block; max-width:200px; max-height:200px; border-radius:var(--radius-md); border:1px solid var(--color-border); }
.msg .bubble .img-thumb{ border-color:transparent; }
.reading-card{ border-left:3px solid var(--color-secondary); }
.reading-card .rc-title{ display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-faint); }
.reading-card pre{ font-family:var(--font-mono); font-size:.8rem; white-space:pre-wrap; background:var(--color-surface-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); margin-top:6px; }
.toast{ position:fixed; left:50%; bottom:calc(78px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--color-text); color:var(--color-bg); padding:10px 18px; border-radius:var(--radius-full); font-size:.88rem; box-shadow:var(--shadow-md); z-index:60; max-width:min(92vw,480px); text-align:center; animation:rise .3s ease both; }

/* Phones: backdrop blur re-composites everything under the bar on every chat
   repaint (each streamed token) and every keyboard animation frame — a real
   jank source on mobile GPUs. Solid backgrounds there; blur stays on desktop. */
@media (pointer: coarse) {
  .topbar, .tabbar, .editor-bar { backdrop-filter: none; background: var(--color-bg); }
}

/* ============================================================= *
 *  UX refinement pass — touch feedback + new surfaces           *
 * ============================================================= */

/* Instant press response, and stop :hover latching after a tap on touch. */
button,.choice,.likert .pt,.menu-card,.engine-opt,.recent-item,.tabbar a,.iconbtn{ -webkit-tap-highlight-color:transparent; }
.likert .pt:active,.choice:active,.engine-opt:active:not([disabled]),.menu-card:active,.btn:active{ transform:scale(.985); }
@media (hover: none){
  .likert .pt:hover:not(.sel){ background:var(--color-surface); border-color:var(--color-border); }
  .choice:hover:not(.sel){ background:var(--color-surface); border-color:var(--color-border); }
  .engine-opt:hover:not([disabled]):not(.selected){ border-color:var(--color-border); }
  .menu-card:hover{ transform:none; box-shadow:var(--shadow-sm); }
  .recent-item:hover{ border-color:var(--color-divider); }
  .iconbtn:hover{ background:none; color:var(--color-text-muted); }
  .tabbar a:hover:not(.active){ color:var(--color-text-faint); }
  .btn-ghost:hover{ background:transparent; }
}

/* Inline banner above the chat (demo-mode notice). */
.banner{ margin:var(--space-4) var(--space-5) 0; padding:12px 14px; border-radius:var(--radius-md); font-size:.86rem; display:flex; gap:10px; align-items:flex-start; }
.banner svg{ flex:none; width:20px; height:20px; margin-top:1px; }
.banner.demo{ background:var(--color-gold-light); color:var(--color-warning); border:1px solid color-mix(in oklab,var(--color-warning) 30%,transparent); }
.banner.demo a{ color:var(--color-warning); font-weight:600; text-decoration:underline; }

/* Home: continue-an-interview / follow-up-is-due cards. */
.home-alert{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4); border-radius:var(--radius-lg); margin-bottom:var(--space-5); text-decoration:none; color:inherit; border:1px solid transparent; }
.home-alert .ha-ic{ width:44px; height:44px; flex:none; border-radius:var(--radius-md); display:grid; place-items:center; }
.home-alert .ha-ic svg{ width:22px; height:22px; }
.home-alert .ha-text{ flex:1; min-width:0; }
.home-alert .ha-title{ font-weight:600; display:block; }
.home-alert .ha-sub{ font-size:.85rem; color:var(--color-text-muted); display:block; margin-top:2px; }
.home-alert .chev{ color:var(--color-text-faint); }
.home-alert.resume{ background:var(--color-primary-light); border-color:color-mix(in oklab,var(--color-primary) 30%,transparent); }
.home-alert.resume .ha-ic{ background:var(--color-primary); color:var(--color-text-inverse); }
.home-alert.due{ background:var(--color-secondary-light); border-color:color-mix(in oklab,var(--color-secondary) 30%,transparent); }
.home-alert.due .ha-ic{ background:var(--color-secondary); color:var(--color-text-inverse); }

/* End screen: the payoff card (what emerged), reminder presets. */
.payoff{ text-align:left; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); margin:0 auto var(--space-4); max-width:440px; box-shadow:var(--shadow-sm); }
.payoff .p-lead{ font-family:var(--font-display); font-size:1.15rem; line-height:1.35; margin-bottom:var(--space-3); }
.payoff .factor{ display:flex; align-items:center; gap:10px; margin:8px 0; font-size:.85rem; }
.payoff .factor .fl{ flex:none; width:104px; color:var(--color-text-muted); text-transform:capitalize; }
.payoff .factor .fb{ flex:1; height:8px; border-radius:var(--radius-full); background:var(--color-surface-2); overflow:hidden; }
.payoff .factor .fb>i{ display:block; height:100%; background:var(--color-primary); }
.payoff .factor .fv{ flex:none; width:48px; text-align:right; font-variant-numeric:tabular-nums; color:var(--color-text); }
.payoff .p-badge{ display:inline-block; margin-bottom:var(--space-2); }
.remind{ background:var(--color-secondary-light); border:1px solid color-mix(in oklab,var(--color-secondary) 24%,transparent); border-radius:var(--radius-lg); padding:var(--space-4); margin:0 auto var(--space-4); max-width:440px; text-align:left; }
.remind h3{ font-size:1.05rem; margin-bottom:6px; }
.remind .presets{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.remind .presets button{ padding:8px 14px; border-radius:var(--radius-full); border:1px solid var(--color-border); background:var(--color-surface); font-size:.85rem; font-weight:600; }
.remind .presets button.sel{ background:var(--color-secondary); color:var(--color-text-inverse); border-color:transparent; }
.remind .rmsg{ font-size:.85rem; color:var(--color-success); margin-top:10px; }

/* Study cards: scannable duration / what-you-get / recommended. */
.card .studymeta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:var(--space-3); }
.card .whatyouget{ font-size:.9rem; color:var(--color-text-muted); margin-bottom:var(--space-4); }
.pill.dur{ background:var(--color-secondary-light); color:var(--color-secondary); }
.pill.first{ background:var(--color-primary-light); color:var(--color-primary); }

/* Instrument matrix: a page of tappable Likert rows on one screen. */
.ibatch{ display:flex; flex-direction:column; gap:16px; max-height:54vh; overflow-y:auto; padding-right:2px; }
.ibatch-legend{ display:flex; justify-content:space-between; }
.ibatch-item{ display:flex; flex-direction:column; gap:8px; }
.ibatch-item .ibatch-q{ font-size:.92rem; color:var(--color-text); }
.ibatch .scale{ display:flex; gap:6px; flex-wrap:wrap; }

/* ============================================================ LAB-01 (personal science)
   The participant's research lab: Observatory, Ask your data, Inquiries.
   Reuses the design tokens; only adds surfaces the Lab needs. */
.lab-tabs{ display:flex; gap:6px; margin:var(--space-3) 0 var(--space-4); border-bottom:1px solid var(--color-divider); overflow-x:auto; }
.lab-tab{ padding:10px 14px; font-weight:600; font-size:.92rem; color:var(--color-text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; background:none; white-space:nowrap; cursor:pointer; }
.lab-tab.active{ color:var(--color-primary); border-bottom-color:var(--color-primary); }
.lab-card{ margin-bottom:var(--space-4); }
.lab-spark{ color:var(--color-primary); margin-top:10px; }
.spark-svg{ display:block; }
.lab-big{ font-family:var(--font-display); font-size:1.6rem; font-weight:600; line-height:1; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); border-radius:var(--radius-full); padding:8px 14px; font-size:.86rem; text-align:left; cursor:pointer; transition:background var(--transition),border-color var(--transition); }
.chip:hover{ background:var(--color-surface-2); }
.chip.sel{ background:var(--color-primary-light); border-color:var(--color-primary); color:var(--color-primary); }

.ask-log{ display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-4) 0; }
.ask-msg{ display:flex; }
.ask-msg.you{ justify-content:flex-end; }
.ask-msg .bubble{ max-width:88%; padding:12px 14px; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); font-size:.95rem; }
.ask-msg.you .bubble{ background:var(--color-primary); color:var(--color-text-inverse); border-color:transparent; }
.ask-msg .bubble p{ margin:0 0 6px; } .ask-msg .bubble p:last-child{ margin-bottom:0; }
.ask-form{ display:flex; gap:8px; margin-top:var(--space-2); }
.ask-form input{ flex:1; min-width:0; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface); color:var(--color-text); font-size:.95rem; }

.lab-wizard{ margin-bottom:var(--space-4); border-color:var(--color-primary); }
.wz-label{ display:block; font-weight:600; font-size:.85rem; margin:var(--space-3) 0 6px; }
.wz-input,.model-select{ width:100%; padding:11px 14px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); font-size:.95rem; }
.wz-plan{ margin-top:var(--space-3); padding:8px 12px; background:var(--color-surface-2); border-radius:var(--radius-md); }

.pack-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--color-divider); cursor:pointer; }
.pack-row input{ margin-top:3px; flex:none; }
.finding{ padding:12px 14px; background:var(--color-primary-light); border-radius:var(--radius-md); }
.ai-toggle{ display:flex; gap:8px; align-items:flex-start; margin-bottom:var(--space-3); cursor:pointer; }
.ai-toggle input{ margin-top:2px; flex:none; }

/* ---- N1-01 "My study" panel (n1-panel.js) -------------------------------- */
.n1-card{ margin-bottom:var(--space-4); }
.n1-card .section-head h2{ font-size:1.25rem; }
.n1-card-body > p{ margin:var(--space-2) 0; }
.n1-due{ margin:var(--space-2) 0; text-align:left; }
.n1-assessment{ padding:var(--space-3); background:var(--color-primary-light); border-radius:var(--radius-md); }
.n1-proposal{ padding:var(--space-3) 0; border-top:1px solid var(--color-divider); }
.n1-proposal-actions{ display:flex; gap:var(--space-3); margin-top:var(--space-2); }
.n1-proposal-actions .btn{ min-height:44px; }
.n1-ask-row{ display:flex; gap:var(--space-2); margin:var(--space-3) 0; }
.n1-ask-row .input{ flex:1; min-height:44px; padding:0 var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:inherit; }
.n1-insight{ display:grid; gap:var(--space-3); margin-top:var(--space-3); }
@media (min-width: 40rem){ .n1-insight{ grid-template-columns: 1fr 1.6fr; } }
.n1-insight-you, .n1-insight-lit{ padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); }
.n1-insight-you h3, .n1-insight-lit h3{ margin-bottom:var(--space-1); text-transform:uppercase; letter-spacing:.04em; }
.n1-sources{ margin-top:var(--space-2); padding-left:1.1rem; }
.n1-provenance{ padding-left:1.1rem; }
.n1-provenance li{ margin:var(--space-2) 0; }

/* One answer, two routes: the typed alternative under a choice set mutes when
   an option is selected (typing re-activates it and clears the selection). */
.conversation-typed-alt{ transition:opacity .18s ease; }
.conversation-typed-alt.muted{ opacity:.45; }
.conversation-typed-alt.muted .btn{ filter:saturate(.4); }

/* ---- Opsy companion (chat-first home, N1-01) ------------------------------ */
.companion{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-5); padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.companion-log{ display:flex; flex-direction:column; gap:var(--space-2); max-height:16rem; overflow-y:auto; }
.companion-msg{ max-width:88%; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:.95rem; }
.companion-msg p{ margin:0; }
.companion-msg p + p{ margin-top:var(--space-2); }
.companion-msg.opsy{ align-self:flex-start; background:var(--color-surface-2); }
.companion-msg.me{ align-self:flex-end; background:var(--color-primary-light); }
.companion-msg.thinking{ opacity:.6; }
.companion-form{ display:flex; gap:var(--space-2); }
.companion-form .input{ flex:1; min-height:44px; padding:0 var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg); color:inherit; }
.companion-form .btn{ min-height:44px; }

/* ---- Talk tab: the chat IS the surface ------------------------------------ */
.talk-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; padding:var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.companion-full{ flex:1; min-height:0; margin-bottom:0; }
.companion-full .companion-log{ flex:1; max-height:none; }
.companion-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.companion-chip{ min-height:44px; padding:0 var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface-2); font-size:.9rem; transition:background var(--transition); }
.companion-chip:hover{ background:var(--color-primary-light); border-color:var(--color-primary); }

/* ---- Interview context strip (layout cues from the Codex chat.html) ------- */
.interview-meta{ display:flex; min-height:42px; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-1) var(--space-5); border-bottom:1px solid var(--color-divider); }
.interview-meta .study-context{ min-width:0; display:grid; gap:.05rem; }
.interview-meta .eyebrow{ color:var(--color-text-faint); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; line-height:1.2; }
.interview-meta #interviewTitle{ overflow:hidden; margin:0; font-size:.95rem; font-weight:700; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.privacy-details{ position:relative; }
.privacy-details summary{ display:inline-flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; gap:.35rem; color:var(--color-text-muted); cursor:pointer; font-weight:700; font-size:.85rem; list-style:none; }
.privacy-details summary::-webkit-details-marker{ display:none; }
.privacy-popover{ position:absolute; z-index:30; top:calc(100% + .5rem); right:0; width:min(21rem, calc(100vw - 2rem)); padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-md); color:var(--color-text-muted); font-size:.85rem; }
.privacy-popover strong{ display:block; margin-bottom:var(--space-1); color:var(--color-text); }
.progress{ height:5px; background:var(--color-surface-2); }
.progress > div{ height:100%; background:var(--color-primary); transition:width .4s ease; }

/* ---- Lab: join-a-study strip ---------------------------------------------- */
.lab-studies-strip{ margin-bottom:var(--space-4); }
.lab-studies-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
.lab-study-chip{ min-height:44px; padding:0 var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface-2); font-size:.9rem; }
.lab-study-chip:hover{ background:var(--color-primary-light); border-color:var(--color-primary); }

/* ============================================================================
   TALK — the one agentic surface (layout per the Codex prototype,
   prototypes/opsy-interview-chat: living-case-study chat, emerald interviewer
   voice, action pills, hold-to-speak). Scoped to #view-talk.
   ========================================================================== */
#view-talk{ display:none; flex-direction:column; min-height:0; }
#view-talk.active{ display:flex; }
#view-talk .chat{ padding-bottom:var(--space-6); }

/* One conversational voice: Opsy (companion or interviewer) speaks emerald,
   the person answers on cream/surface — mirroring the prototype. */
#view-talk .msg.interviewer .bubble{
  background:linear-gradient(165deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 86%, black) 100%);
  color:var(--color-text-inverse);
  border-color:transparent;
  border-radius:var(--radius-lg);
  box-shadow:0 10px 24px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
#view-talk .msg.interviewer .bubble::before{
  content:"OPSY";
  display:block;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  opacity:.72;
  margin-bottom:6px;
  text-transform:uppercase;
}
body.interview-active #view-talk .msg.interviewer .bubble::before{ content:"OPSY · N=1 RESEARCHER"; }
#view-talk .msg.interviewer .bubble.md strong{ color:inherit; }
#view-talk .msg.participant .bubble{
  background:var(--color-surface);
  color:var(--color-text);
  border:1px solid var(--color-divider);
}
#view-talk .msg .av{ background:var(--color-primary); color:var(--color-text-inverse); overflow:hidden; }
/* Fill the avatar circle with the rose medallion (prototype-style overscale crop). */
#view-talk .msg .av svg, #view-talk .msg .av img, .msg .av img{ display:block; width:100%; height:100%; transform:scale(1.12); }
#view-talk .msg.participant .av{ background:var(--color-secondary); }
#view-talk .msg.thinking .bubble{ opacity:.65; }

/* System dividers: quiet stitches between conversation phases. */
.talk-divider{ display:flex; align-items:center; gap:var(--space-3); color:var(--color-text-faint); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin:var(--space-2) 0; }
.talk-divider::before, .talk-divider::after{ content:""; flex:1; border-top:1px solid var(--color-divider); }

/* Inline study picker — tapping starts the interview in this same thread. */
.talk-choices{ display:flex; flex-direction:column; gap:var(--space-2); margin-left:calc(34px + var(--space-3)); }
.talk-choice{ text-align:left; padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); display:grid; gap:2px; transition:border-color var(--transition), background var(--transition); }
.talk-choice:hover{ border-color:var(--color-primary); background:var(--color-primary-light); }
.talk-choice b{ font-size:.95rem; }
.talk-choice span{ font-size:.82rem; color:var(--color-text-muted); }

/* Action pills (Rephrase · Take a moment · Prefer not to answer · Ask Opsy). */
.talk-pills{ display:flex; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-2) var(--space-5); justify-content:center; }
.talk-pill{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface); color:var(--color-text); font-size:.88rem; box-shadow:var(--shadow-sm); transition:border-color var(--transition), background var(--transition); }
.talk-pill:hover{ border-color:var(--color-primary); background:var(--color-primary-light); }
.talk-pill.accent{ border-color:var(--color-primary); color:var(--color-primary); font-weight:600; }

/* The composer: hold-to-speak first, keyboard one tap away. */
.talk-composer-host{ position:sticky; bottom:0; background:var(--color-bg); border-top:1px solid var(--color-divider); }
.talk-composer{ padding:var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:var(--space-2); }
.talk-live{ width:100%; max-width:34rem; text-align:center; font-size:.95rem; color:var(--color-text-muted); font-style:italic; padding:var(--space-2) var(--space-3); border:1px dashed var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.talk-voice{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.talk-mic{ width:72px; height:72px; border-radius:50%; border:2px solid var(--color-primary); background:var(--color-surface); color:var(--color-primary); display:grid; place-items:center; box-shadow:0 10px 26px color-mix(in srgb, var(--color-primary) 20%, transparent); transition:transform .12s ease, background var(--transition); touch-action:none; }
.talk-mic:active{ transform:scale(.96); }
.talk-mic.recording{ background:var(--color-primary); color:var(--color-text-inverse); animation:micPulse 1.4s infinite; }
@keyframes micPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--color-primary) 38%, transparent); } 50%{ box-shadow:0 0 0 14px transparent; } }
.talk-mic-label{ font-weight:700; font-size:.95rem; }
.talk-mic-sub{ font-size:.78rem; color:var(--color-text-faint); }
.talk-kb-toggle{ display:inline-flex; align-items:center; gap:6px; margin-top:2px; min-height:36px; padding:0 var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface-2); color:var(--color-text-muted); font-size:.82rem; }
.talk-kb-toggle:hover{ border-color:var(--color-primary); color:var(--color-text); }
.talk-form{ display:none; width:100%; max-width:34rem; gap:var(--space-2); align-items:center; }
.talk-form input{ flex:1; min-height:48px; padding:0 var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface); color:inherit; font-size:1rem; }
.talk-form input:focus{ outline:2px solid var(--color-primary); outline-offset:1px; }
.talk-send{ width:48px; height:48px; border-radius:50%; border:none; background:var(--color-primary); color:var(--color-text-inverse); display:grid; place-items:center; }
.talk-composer[data-mode="keyboard"] .talk-voice{ display:none; }
.talk-composer[data-mode="keyboard"] .talk-form{ display:flex; }
.talk-composer[data-mode="voice"] .talk-form{ display:none; }
.talk-kb-toggle.in-form{ margin-top:0; }

/* Interview dock lives inside the talk column now. */
#view-talk .dock{ position:static; border-top:1px solid var(--color-divider); }

/* Context bar additions: scene counter + pause control (prototype layout). */
.interview-meta .scene-label{ font-size:.78rem; color:var(--color-primary); font-weight:600; }
.interview-meta .meta-side{ display:flex; align-items:center; gap:var(--space-2); }
.pause-leave{ min-height:40px; padding:0 var(--space-3); border:none; background:none; color:var(--color-primary); font-weight:600; font-size:.88rem; }
.pause-leave:hover{ text-decoration:underline; }

/* Inline end-of-interview card: the close joins the thread. */
.talk-end-card{ margin:var(--space-2) var(--space-2) var(--space-4) calc(34px + var(--space-3)); text-align:left; }
.talk-end-card .end-row{ gap:var(--space-2); margin-top:var(--space-3); flex-wrap:wrap; }

/* First-tester controls live inside the real completion card. Feedback and
   transcript sharing stay visibly separate so consent cannot be bundled. */
.tester-panel{ margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--color-divider); }
.tester-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
.tester-panel-head .eyebrow{ display:block; margin-bottom:3px; color:var(--color-primary); font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.tester-panel-head h3{ margin:0; font-family:var(--font-display); font-size:1.2rem; }
.tester-panel .muted{ color:var(--color-text-muted); }
.tester-privacy{ margin:var(--space-2) 0 var(--space-4); }
.tester-feedback-form{ display:grid; gap:var(--space-3); }
.tester-feedback-form[hidden]{ display:none; }
.tester-rating{ min-width:0; margin:0; padding:0; border:0; }
.tester-rating legend,.tester-note-label{ margin-bottom:6px; color:var(--color-text); font-size:.88rem; font-weight:700; }
.tester-stars{ display:flex; width:max-content; gap:3px; }
.tester-stars label{ position:relative; display:grid; width:44px; height:44px; place-items:center; border-radius:var(--radius-full); color:var(--color-border); cursor:pointer; }
.tester-stars label:hover,.tester-stars label.selected{ color:#D59A2D; background:color-mix(in srgb,#D59A2D 10%,transparent); }
.tester-stars input{ position:absolute; width:1px; height:1px; opacity:0; }
.tester-stars input:focus-visible + span{ outline:2px solid var(--color-primary); outline-offset:4px; border-radius:2px; }
.tester-stars label > span[aria-hidden="true"]{ font-size:1.65rem; line-height:1; }
.tester-note{ width:100%; min-height:88px; resize:vertical; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); font:inherit; line-height:1.45; }
.tester-note:focus{ outline:2px solid var(--color-primary); outline-offset:1px; }
.tester-actions{ flex-wrap:wrap; gap:var(--space-2); }
.tester-status{ min-height:1.25em; margin:var(--space-2) 0 0; }
.tester-status[data-kind="success"]{ color:var(--color-success); }
.tester-status[data-kind="error"]{ color:var(--color-error); }
.tester-status[data-kind="muted"]{ color:var(--color-text-muted); }
.tester-share{ display:grid; gap:var(--space-2); margin-top:var(--space-4); padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-2); }
.tester-share p{ margin:4px 0 0; }
.tester-share .btn{ width:fit-content; }
@media (max-width:34rem){
  .talk-end-card{ margin-left:var(--space-2); }
  .tester-stars{ width:100%; justify-content:space-between; }
  .tester-stars label{ width:42px; }
  .tester-actions .btn,.tester-share .btn{ width:100%; }
}