/* OPSY on-device interviewer — styles. Brand tokens mirror the main OPSY site
   (emerald primary, gold accent, Cormorant Garamond + DM Sans, light/dark). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 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:#BB653B; --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:#BB653B; --color-error:#DD6974;
    --shadow-md:0 4px 16px rgba(0,0,0,.3); --shadow-lg:0 12px 40px rgba(0,0,0,.4);
  }
}

*,*::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); }

/* ---- 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; 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; }
.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); }
.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; }

/* ---- 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; }