/* RAI Researcher app. Two layouts: cover screen (one panel at a time, bottom buttons) and unfolded (rail + two columns). */
:root{--bg:#0a0d0c;--panel:#121917;--panel2:#172019;--edge:#243029;--edge2:#2f3f36;--txt:#e7ede9;--dim:#9fb3aa;--grn:#37d67a;--amb:#f0b35a;--red:#ff5a6a;--cyn:#4fd1e8;
 --mono:ui-monospace,SFMono-Regular,Menlo,monospace;--sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
 --gut:20px;--bar:76px;--rail:0px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);line-height:1.45;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--cyn)}
button{font:inherit;color:inherit}

/* top strip */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:calc(10px + var(--sat)) var(--gut) 10px;background:rgba(10,13,12,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
.led{width:12px;height:12px;border-radius:50%;background:var(--grn);box-shadow:0 0 10px var(--grn);flex:none}
.led.a{background:var(--amb);box-shadow:0 0 10px var(--amb)}.led.r{background:var(--red);box-shadow:0 0 10px var(--red)}
.who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.who b{font-family:var(--serif);font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.who span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.inst{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;padding:9px 14px;border-radius:999px;border:1px solid var(--grn);background:var(--grn);color:#06130b;font-weight:700;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.inst.ghost{background:transparent;color:var(--dim);border-color:var(--edge2);font-weight:400}
.tog{display:flex;border:1px solid var(--edge2);border-radius:999px;overflow:hidden;font-family:var(--mono);font-size:.76rem;flex:none}
.tog a,.tog span{padding:9px 14px;color:var(--dim);text-decoration:none;min-height:40px;display:flex;align-items:center}
.tog .on{background:var(--grn);color:#06130b;font-weight:700}

/* stage + panels */
.stage{padding:14px var(--gut) calc(var(--bar) + var(--sab) + 20px)}
.panel{display:none}.panel.on{display:block}
.panel h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:6px 0 12px}
.list{display:flex;flex-direction:column;gap:12px}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:16px 18px}
.card.deep{border-color:var(--amb);background:linear-gradient(180deg,rgba(240,179,90,.08),rgba(240,179,90,.01))}
.card.deep .pt{color:var(--amb)}
.pt{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyn);margin-bottom:6px}
.card h3{font-family:var(--serif);font-weight:500;font-size:1.38rem;line-height:1.22;letter-spacing:-.01em;color:#fff}
.sum{color:#cfdcd4;margin-top:8px;font-size:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card.open .sum{display:block;-webkit-line-clamp:unset}
.det{display:none;margin-top:12px}.card.open .det{display:block}
.lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:12px 0 4px}
.det p,.det li{color:#cfdcd4;font-size:.98rem}
.det ol{padding-left:1.3em}.det li{margin:4px 0}
.src{display:flex;flex-direction:column;gap:6px}
.src a{font-family:var(--mono);font-size:.78rem;color:var(--cyn);text-decoration:none;overflow-wrap:anywhere;padding:8px 0;border-top:1px solid var(--edge)}
.hd{cursor:pointer;-webkit-tap-highlight-color:transparent}
.more{font-family:var(--mono);font-size:.7rem;color:var(--dim);margin-top:8px}
.card.open .more{display:none}

/* action buttons: big, button-driven */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.acts a,.big{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:10px 14px;border-radius:14px;border:1px solid var(--edge2);background:var(--panel2);color:var(--txt);text-decoration:none;font-size:1rem;font-weight:600;text-align:center}
.acts a.sent{border-color:var(--grn);color:var(--grn)}
.big{background:var(--grn);border-color:var(--grn);color:#06130b;margin-top:12px}
.big.warn{background:transparent;color:var(--amb);border-color:var(--amb)}
.est{font-family:var(--mono);font-size:.7rem;color:var(--dim);margin-top:8px}
.empty{color:var(--dim);padding:14px 0}

/* listen */
.listen{display:flex;flex-direction:column;gap:12px}
.play{display:flex;align-items:center;gap:14px}
.play button{width:76px;height:76px;border-radius:50%;border:0;background:var(--grn);color:#06130b;display:flex;align-items:center;justify-content:center;flex:none}
.play button svg{width:36px;height:36px;fill:currentColor}
.play .t{min-width:0}.play .t b{display:block;font-family:var(--serif);font-weight:500;font-size:1.2rem;line-height:1.25}
.play .t span{font-family:var(--mono);font-size:.7rem;color:var(--dim);letter-spacing:.06em}
.vc{font-family:var(--mono);font-size:.68rem;color:var(--amb)}
audio{width:100%;height:44px}

/* needs you */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:14px 12px;text-align:center}
.tile b{display:block;font-size:2.1rem;line-height:1;font-family:var(--serif);font-weight:500}
.tile.w b{color:var(--amb)}.tile.g b{color:var(--grn)}
.tile i{display:block;font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.strip{margin-top:12px}
.bar2{height:8px;background:var(--edge);border-radius:4px;overflow:hidden;margin-top:6px}.bar2 i{display:block;height:100%;background:var(--grn)}.bar2 i.over{background:var(--red)}
#kill{position:relative;overflow:hidden;width:100%;min-height:60px;margin-top:12px;border-radius:14px;border:1px solid var(--red);background:#3a0f16;color:#fff;font-family:var(--mono);font-weight:700;letter-spacing:.1em;font-size:1rem;touch-action:none;user-select:none;-webkit-user-select:none}
#kill i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red)}#kill span{position:relative}
#kill.go{background:#123d25;border-color:var(--grn)}
.hint{font-family:var(--mono);font-size:.64rem;color:var(--dim);margin-top:6px;text-align:center}
.jobs{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-family:var(--mono);font-size:.74rem}
.jobs span{display:flex;align-items:center;gap:6px;color:var(--dim)}.jobs .led{width:8px;height:8px}

/* index */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chips button{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;padding:9px 13px;border-radius:999px;border:1px solid var(--edge2);background:var(--panel);color:var(--dim);min-height:40px}
.chips button.on{color:var(--cyn);border-color:var(--cyn);background:rgba(79,209,232,.08)}
.row{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px 16px;background:var(--panel);border:1px solid var(--edge);border-radius:14px;text-decoration:none;color:var(--txt)}
.row time{font-family:var(--mono);font-size:.7rem;color:var(--dim);letter-spacing:.06em;grid-row:span 2;align-self:start;padding-top:3px}
.row b{font-weight:500;font-size:1.02rem;line-height:1.3}
.row .tg{display:flex;gap:6px;flex-wrap:wrap}.tag{font-family:var(--mono);font-size:.62rem;color:var(--cyn);border:1px solid rgba(79,209,232,.4);border-radius:999px;padding:1px 7px}

/* ask */
textarea{width:100%;border:1px solid var(--edge2);background:var(--bg);color:var(--txt);border-radius:12px;padding:12px;font:inherit;font-size:1rem;resize:vertical}
#recent{margin-top:14px;color:#cfdcd4;font-size:.95rem}#recent .q{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-bottom:4px}

/* bottom bar (cover) */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--bar) + var(--sab));padding:0 6px var(--sab);background:rgba(13,18,16,.96);backdrop-filter:blur(12px);border-top:1px solid var(--edge)}
.bar button{position:relative;border:0;background:transparent;color:var(--dim);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:12px;-webkit-tap-highlight-color:transparent}
.bar button svg{width:26px;height:26px;fill:currentColor}
.bar button span{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em}
.bar button.on{color:var(--grn)}
.bar button i{position:absolute;top:8px;right:calc(50% - 26px);min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--amb);color:#1b1206;font-style:normal;font-family:var(--mono);font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bar) + var(--sab) + 12px);background:#1b2a24;border:1px solid var(--edge2);color:var(--txt);padding:10px 16px;border-radius:12px;font-size:.9rem;z-index:7}

/* ===== unfolded: rail + columns ===== */
@media (min-width:760px){
 html{font-size:17px}
 :root{--rail:120px;--bar:0px}
 body{padding-left:var(--rail)}
 .top{padding-left:24px}
 .bar{top:0;bottom:0;left:0;right:auto;width:var(--rail);height:auto;grid-template-columns:1fr;grid-auto-rows:92px;align-content:start;padding:calc(76px + var(--sat)) 8px 0;border-top:0;border-right:1px solid var(--edge)}
 .bar button svg{width:30px;height:30px}.bar button span{font-size:.68rem}
 .bar button i{right:14px;top:12px}
 .stage{padding:18px 24px 28px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px 22px;align-items:start}
 .panel{display:block}
 #p-brief{grid-column:1;grid-row:1 / span 4}
 #p-listen{grid-column:2;grid-row:1}#p-needs{grid-column:2;grid-row:2}#p-ask{grid-column:2;grid-row:3}#p-index{grid-column:2;grid-row:4}
 #p-index .list{max-height:460px;overflow:auto;padding-right:4px}
 .card h3{font-size:1.3rem}
 .toast{bottom:24px}
}
@media (min-width:1100px){.stage{max-width:1280px}}