/* ============================================================================
   LIVE BROWSER — shared stylesheet
   Sana (design) · 2026-07-30 · concepts for Adam's Live Browser / split workspace

   Built ON TOP of the Cockpit v2 design system. Every token in LAYER 0 below is
   copied verbatim from mocks/cockpit-v2/cockpit-v2.css so these surfaces drop
   into the existing shell without a reconciliation pass. Do not fork the values.

   LAYER 1 adds tokens that DO NOT exist in Cockpit v2, because Cockpit v2 has
   never had to express the thing this surface is really about: WHO IS DRIVING.
   That is the whole design problem. Everything else here is plumbing.
   ============================================================================ */

/* ── LAYER 0 · Cockpit v2 tokens, verbatim ───────────────────────────────── */
:root{
  --ground:#0c0e13; --surface:#12151d; --surface2:#171b25; --raised:#1c212d;
  --rail:#0a0c11; --border:#232a38; --border2:#2c3546;
  --tx:#e7eaf1; --tx2:#98a2b3; --tx3:#5f6a7d;
  --accent:#7c8cff;
  --run:#39d0d8; --queued:#7c879a; --blocked:#e3a008; --stop:#f0603a;
  --done:#3fb950; --needs:#ff9e64;
  --c-violet:#c07cf8; --c-sky:#38bdf8; --c-slate:#8fa0b6; --c-amber:#e0b341;
  --sans:-apple-system,"SF Pro Text",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,monospace;
  --fs-h1:16px; --fs-h3:14px; --fs-body:13.5px; --fs-sm:12.5px;
  --fs-xs:11.5px; --fs-2xs:10.5px; --fs-micro:9.5px;
  --fw-reg:450; --fw-med:600; --fw-semi:650; --fw-bold:750;
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px;
  --sp-6:14px; --sp-7:16px; --sp-8:20px;
  --r-xs:5px; --r-sm:7px; --r-md:9px; --r-lg:11px; --r-xl:13px; --r-pill:20px;
  --ease:cubic-bezier(.4,0,.2,1);

/* ── LAYER 1 · NEW — control-state tokens ────────────────────────────────────
   Cockpit v2's semantic colours describe what a TASK is doing (running, blocked,
   done). None of them describe who holds the input. Reusing --run for "agent is
   driving" would collide with "task is running" — a task can be running while
   the agent is paused and you hold the keyboard, and those must not look alike.
   So control gets its own three-value scale, and nothing else may use it. */
  --ctl-agent:#39d0d8;   /* agent holds input — same hue as --run by intent:
                            agent-driving IS the running case. Kept as its own
                            token so it can diverge later without touching --run. */
  --ctl-you:#c07cf8;     /* YOU hold input. Violet is unused anywhere else in
                            Cockpit v2 — deliberately, so it can never be
                            confused with a status. */
  --ctl-none:#7c879a;    /* nobody holds input: paused, or handing over. */
  --ctl-dark:#0f1b1c;    /* tinted grounds behind each of the three above */
  --ctl-dark-you:#1a1226;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);color:var(--tx);font:var(--fw-reg) var(--fs-body)/1.45 var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── app shell ───────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:52px minmax(0,1fr);height:100vh;overflow:hidden}
.rail{background:var(--rail);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-5) 0}
.rail .logo{width:28px;height:28px;border-radius:var(--r-md);background:var(--accent);
  display:grid;place-items:center;font-weight:var(--fw-bold);font-size:13px;color:#0c0e13}
.rail i{width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--tx3);font-style:normal;font-size:15px}
.rail i.on{background:var(--surface2);color:var(--tx)}
.rail .sp{flex:1}

.main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.top{display:flex;align-items:center;gap:var(--sp-5);padding:0 var(--sp-6);height:46px;
  border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.top h1{font-size:var(--fs-h1);font-weight:var(--fw-semi);letter-spacing:-.01em}
.top .crumb{color:var(--tx3);font-size:var(--fs-sm)}
.top .sp{flex:1}

/* ── the split workspace ─────────────────────────────────────────────────────
   The left side is WHATEVER PAGE YOU WERE ALREADY ON. Opening the context pane
   must not navigate away or reset it — that is the core promise of this system,
   and the reason it is a pane and not a route. */
.split{display:grid;grid-template-columns:minmax(0,1fr) 6px minmax(0,1fr);
  flex:1;min-height:0;overflow:hidden}
.split.wide-r{grid-template-columns:minmax(0,7fr) 6px minmax(0,13fr)}
.split.full-r{grid-template-columns:0 6px minmax(0,1fr)}
.grip{background:var(--border);cursor:col-resize;position:relative}
.grip:hover{background:var(--border2)}
.grip::after{content:"";position:absolute;inset:50% 50% auto;transform:translate(-50%,-50%);
  width:2px;height:26px;border-radius:2px;background:var(--tx3)}
.pane{min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pane-l{background:var(--ground)}

/* the pane header — a context pane can hold any of several things, and the
   picker is how one split system serves the whole app instead of six. */
.ph{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border);background:var(--surface);flex:none;flex-wrap:wrap}
.ph .sp{flex:1}
.picker{display:flex;align-items:center;gap:var(--sp-1);background:var(--ground);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:2px}
.picker b{font-size:var(--fs-xs);font-weight:var(--fw-med);padding:4px var(--sp-4);
  border-radius:var(--r-pill);color:var(--tx3)}
.picker b.on{background:var(--surface2);color:var(--tx)}
.iq{width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--tx2);font-size:13px}
.iq:hover{background:var(--surface2);color:var(--tx)}

/* ── LIVE BROWSER pane ───────────────────────────────────────────────────── */
.lb{display:flex;flex-direction:column;min-height:0;flex:1;background:var(--ground)}

/* browser chrome: URL + tabs. EmuBrain-owned, not the remote desktop. */
.bchrome{display:flex;flex-direction:column;gap:0;flex:none;background:var(--surface);
  border-bottom:1px solid var(--border)}
.btabs{display:flex;align-items:center;gap:2px;padding:var(--sp-2) var(--sp-3) 0;overflow-x:auto}
.btab{display:flex;align-items:center;gap:var(--sp-2);padding:5px var(--sp-4);border-radius:var(--r-sm) var(--r-sm) 0 0;
  font-size:var(--fs-xs);color:var(--tx3);white-space:nowrap;max-width:190px}
.btab.on{background:var(--ground);color:var(--tx)}
.btab .fv{width:11px;height:11px;border-radius:3px;background:var(--tx3);flex:none}
.btab.on .fv{background:var(--c-sky)}
.btab s{text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.burl{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3) var(--sp-3)}
.nav{display:flex;gap:2px}
.nav b{width:24px;height:24px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--tx3);font-size:12px;font-weight:var(--fw-reg)}
.nav b:hover{background:var(--surface2);color:var(--tx)}
.urlbox{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-2);background:var(--ground);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:5px var(--sp-4);
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--tx2)}
.urlbox .lock{color:var(--done);font-size:10px}
.urlbox s{text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpsel{display:flex;gap:2px;background:var(--ground);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:2px}
.vpsel b{font-size:var(--fs-2xs);padding:3px var(--sp-3);border-radius:var(--r-xs);color:var(--tx3)}
.vpsel b.on{background:var(--surface2);color:var(--tx)}

/* ── THE CONTROL BAR — the most important object on this screen ──────────────
   Rule: control state is never expressed by a button label alone. It is a bar
   whose colour, text, and left edge all move together, AND it changes the frame
   below it. A human glancing for 200ms must get the answer right. */
.ctl{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border);flex:none;flex-wrap:wrap;
  border-left:3px solid var(--ctl-agent);background:var(--ctl-dark)}
.ctl .who{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-med)}
.ctl .dot{width:8px;height:8px;border-radius:50%;background:var(--ctl-agent);flex:none;
  box-shadow:0 0 0 3px #39d0d829}
.ctl .doing{color:var(--tx2);font-size:var(--fs-sm);min-width:0;overflow:hidden;text-overflow:ellipsis}
.ctl .sp{flex:1}
.ctl button{font-size:var(--fs-xs);font-weight:var(--fw-med);padding:5px var(--sp-4);
  border-radius:var(--r-md);border:1px solid var(--border2);color:var(--tx2);white-space:nowrap}
.ctl button:hover{background:var(--surface2);color:var(--tx)}
.ctl button.pri{background:var(--ctl-you);border-color:var(--ctl-you);color:#150c1f;font-weight:var(--fw-semi)}
.ctl button.pri:hover{filter:brightness(1.1);background:var(--ctl-you);color:#150c1f}
.ctl button.danger{border-color:#f0603a55;color:#f0917a}
.ctl button.danger:hover{background:#f0603a1a;color:#f0917a}

/* YOU are driving. Different hue, different ground, and the viewport gets a
   bezel. Three simultaneous signals for one fact, on purpose. */
.lb.you .ctl{border-left-color:var(--ctl-you);background:var(--ctl-dark-you)}
.lb.you .ctl .dot{background:var(--ctl-you);box-shadow:0 0 0 3px #c07cf829}
.lb.you .vpwrap{box-shadow:inset 0 0 0 2px var(--ctl-you)}
/* Nobody is driving. */
.lb.paused .ctl{border-left-color:var(--ctl-none);background:#141821}
.lb.paused .ctl .dot{background:var(--ctl-none);box-shadow:none}
.lb.paused .vpwrap::after{content:"";position:absolute;inset:0;background:#0c0e1399}

/* ── viewport ────────────────────────────────────────────────────────────── */
.vpwrap{position:relative;flex:1;min-height:0;overflow:hidden;background:#0a0c11;
  display:grid;place-items:center;padding:var(--sp-5)}
.screen{width:100%;max-width:760px;aspect-ratio:16/10;background:#fff;border-radius:var(--r-sm);
  overflow:hidden;position:relative;box-shadow:0 10px 40px #000a;color:#1a1d24}
.screen.phone{max-width:290px;aspect-ratio:9/17}

/* the agent's cursor + the element it is working on */
.cursor{position:absolute;width:15px;height:15px;pointer-events:none;z-index:5;
  filter:drop-shadow(0 1px 3px #0007)}
.cursor::before{content:"";position:absolute;inset:0;
  background:var(--ctl-agent);clip-path:polygon(0 0,0 78%,26% 58%,46% 96%,64% 87%,44% 50%,76% 46%)}
.lb.you .cursor::before{background:var(--ctl-you)}
.target{position:absolute;border:2px solid var(--ctl-agent);border-radius:4px;z-index:4;
  box-shadow:0 0 0 3px #39d0d826;pointer-events:none}
.lb.you .target{border-color:var(--ctl-you);box-shadow:0 0 0 3px #c07cf826}
/* the label sits at the RIGHT edge so it never covers the field's own caption,
   which is the text a reader needs to know WHICH field is being edited */
.tlabel{position:absolute;top:-20px;right:-1px;background:var(--ctl-agent);color:#06181a;
  font-size:10px;font-weight:var(--fw-semi);padding:2px 6px;border-radius:4px;white-space:nowrap}
.lb.you .tlabel{background:var(--ctl-you);color:#150c1f}

/* ── STALENESS — the silent failure this design exists to prevent ────────────
   A frozen stream and a live stream of a page where nothing is happening look
   identical. So liveness is bound to FRAME ARRIVAL, not to socket state, and a
   stale frame is visibly degraded rather than quietly wrong. */
.live{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-2xs);
  font-family:var(--mono);color:var(--run);letter-spacing:.04em}
.live .pulse{width:6px;height:6px;border-radius:50%;background:var(--run)}
@media (prefers-reduced-motion:no-preference){
  .live .pulse{animation:beat 1.6s var(--ease) infinite}
}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}
.lb.stale .vpwrap .screen{filter:grayscale(.85) contrast(.9)}
.lb.stale .live{color:var(--blocked)}
.lb.stale .live .pulse{background:var(--blocked);animation:none}
.staleflag{display:none;position:absolute;z-index:9;top:var(--sp-5);left:50%;transform:translateX(-50%);
  background:var(--blocked);color:#1a1400;font-size:var(--fs-xs);font-weight:var(--fw-semi);
  padding:5px var(--sp-5);border-radius:var(--r-pill);box-shadow:0 8px 22px #0009}
.lb.stale .staleflag{display:block}


/* ── approval gate — appears OVER the target, where the eye already is ─────── */
/* NOTE the explicit `color`. The gate is cockpit chrome living INSIDE .screen,
   which sets the simulated page's dark-on-white ink (#1a1d24). Without this the
   heading inherits the page's colour and renders near-invisible on the dark card.
   Any chrome nested inside .screen must re-assert its own ink. */
.gate{position:absolute;z-index:7;background:var(--raised);border:1px solid var(--blocked);
  border-radius:var(--r-lg);padding:var(--sp-5);width:290px;box-shadow:0 18px 44px #000c;
  color:var(--tx);font:var(--fw-reg) var(--fs-body)/1.45 var(--sans)}
.gate .k{font-size:var(--fs-micro);letter-spacing:.12em;color:var(--blocked);font-weight:var(--fw-semi)}
.gate h4{font-size:var(--fs-body);font-weight:var(--fw-semi);margin:var(--sp-3) 0 var(--sp-2)}
.gate p{font-size:var(--fs-xs);color:var(--tx2);line-height:1.5;margin-bottom:var(--sp-5)}
.gate .row{display:flex;gap:var(--sp-3)}
.gate button{flex:1;font-size:var(--fs-xs);font-weight:var(--fw-med);padding:6px;
  border-radius:var(--r-md);border:1px solid var(--border2);color:var(--tx2)}
.gate button.ok{background:var(--blocked);border-color:var(--blocked);color:#1a1400;font-weight:var(--fw-semi)}

/* ── foot: the evidence strip ────────────────────────────────────────────── */
.foot{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-3) var(--sp-5);
  border-top:1px solid var(--border);background:var(--surface);flex:none;flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--tx3)}
.foot .sp{flex:1}
.foot .ev{display:flex;align-items:center;gap:var(--sp-2);color:var(--tx2)}
.foot .ev b{font-weight:var(--fw-med)}

/* ── left pane: agent shell ──────────────────────────────────────────────── */
.shell{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-6);display:flex;
  flex-direction:column;gap:var(--sp-5)}
.msg{display:flex;gap:var(--sp-4)}
.av{width:26px;height:26px;border-radius:var(--r-full);flex:none;display:grid;place-items:center;
  font-size:var(--fs-2xs);font-weight:var(--fw-semi);background:var(--raised);color:var(--tx2)}
.av.a{background:#2a2140;color:var(--c-violet)}
.msg .bd{min-width:0;flex:1}
.msg .nm{font-size:var(--fs-xs);font-weight:var(--fw-med);color:var(--tx2);margin-bottom:3px}
.msg p{font-size:var(--fs-sm);color:var(--tx);line-height:1.55}
.msg .tool{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--tx3);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xs);
  padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-3);overflow-x:auto;white-space:pre}

/* ── action timeline ─────────────────────────────────────────────────────── */
.tl{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.ev-row{display:grid;grid-template-columns:52px 20px minmax(0,1fr) auto;gap:var(--sp-4);
  align-items:start;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.ev-row:hover{background:var(--surface)}
.ev-row.on{background:var(--surface2)}
.ev-row .t{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--tx3);padding-top:2px}
.ev-row .g{width:20px;display:grid;place-items:center;padding-top:1px}
.ev-row .g s{width:7px;height:7px;border-radius:50%;background:var(--ctl-agent);text-decoration:none}
.ev-row.byyou .g s{background:var(--ctl-you)}
.ev-row.gateev .g s{background:var(--blocked)}
.ev-row .d{min-width:0}
.ev-row .d b{font-size:var(--fs-sm);font-weight:var(--fw-med);display:block}
.ev-row .d span{font-size:var(--fs-xs);color:var(--tx3);font-family:var(--mono);
  display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-row .who2{font-size:var(--fs-2xs);font-weight:var(--fw-med);padding:2px var(--sp-3);
  border-radius:var(--r-pill);white-space:nowrap;
  background:#39d0d81c;color:var(--ctl-agent)}
.ev-row.byyou .who2{background:#c07cf81c;color:var(--ctl-you)}
.ev-row.gateev .who2{background:#e3a0081c;color:var(--blocked)}

/* ── watchfloor grid ─────────────────────────────────────────────────────── */
.floor{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-6);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--sp-6);align-content:start}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column}
.tile:hover{border-color:var(--border2)}
.tile.needs{border-color:var(--blocked)}
.tile .th{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border)}
.tile .th b{font-size:var(--fs-sm);font-weight:var(--fw-med);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .mini{aspect-ratio:16/10;background:#fff;position:relative;overflow:hidden}
.tile .tf{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);
  font-size:var(--fs-xs);color:var(--tx3);flex-wrap:wrap}
.tile .tf .sp{flex:1}
.tile.stale .mini{filter:grayscale(.85)}

/* status chip, shared */
.chip{font-size:var(--fs-2xs);font-weight:var(--fw-med);padding:2px var(--sp-3);
  border-radius:var(--r-pill);white-space:nowrap;border:1px solid transparent}
.chip.agent{background:#39d0d81c;color:var(--ctl-agent)}
.chip.you{background:#c07cf81c;color:var(--ctl-you)}
.chip.wait{background:#e3a0081c;color:var(--blocked)}
.chip.off{background:var(--surface2);color:var(--tx3)}
.chip.done{background:#3fb9501c;color:var(--done)}

/* ── notes / rationale blocks used across the concept pages ──────────────── */
.note{background:var(--surface);border:1px solid var(--border);border-left:2px solid var(--accent);
  border-radius:var(--r-sm);padding:var(--sp-5);font-size:var(--fs-sm);color:var(--tx2);line-height:1.6}
.note b{color:var(--tx);font-weight:var(--fw-med)}
.note.warn{border-left-color:var(--blocked)}
.k{font-size:var(--fs-micro);letter-spacing:.12em;color:var(--tx3);font-weight:var(--fw-semi)}

/* fake page furniture inside .screen — plain, so it reads as "a website" and
   never competes with the cockpit chrome around it */
.pg{position:absolute;inset:0;font:450 11px/1.4 var(--sans);color:#1a1d24;background:#fff}
.pg .pgnav{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid #e6e8ee}
.pg .pgnav .lg{width:16px;height:16px;border-radius:4px;background:#7c8cff}
.pg .pgnav b{font-size:11.5px;font-weight:650}
.pg .pgnav .sp{flex:1}
.pg .pgnav i{font-style:normal;color:#8a90a0;font-size:10px}
.pg .pgbody{padding:15px 17px}
.pg h5{font-size:15px;font-weight:700;margin-bottom:5px;letter-spacing:-.01em}
.pg .sub{color:#71778a;margin-bottom:13px}
.pg label{display:block;font-size:9.5px;font-weight:650;color:#71778a;
  letter-spacing:.07em;margin-bottom:4px}
.pg .fld{border:1px solid #d9dce4;border-radius:6px;padding:7px 9px;margin-bottom:11px;
  background:#fbfbfd;min-height:29px}
.pg .fld.filling{border-color:#7c8cff;background:#fff;box-shadow:0 0 0 3px #7c8cff1f}
.pg .btn{display:inline-block;background:#7c8cff;color:#fff;font-weight:650;font-size:10.5px;
  padding:7px 15px;border-radius:6px}
.pg .btn.gray{background:#eceef4;color:#5c6275}
.pg .cols{display:grid;grid-template-columns:1fr 1fr;gap:11px}