/* ============================================================
   theron-os.css — Theron OS: one adaptive surface that morphs
   between HOME (your brain) and WORKSPACE (a task in flight).
   Structured grids, no free-floating chaos. Built on vext tokens.
   ============================================================ */

/* the OS lives inside #world (stage=world) */
.world{ position:absolute; inset:0; z-index:15; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
body[data-stage="world"] .world{ opacity:1; pointer-events:auto; }

/* faint adaptive grid backdrop */
.os-grid-bg{ position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:38px 38px; -webkit-mask-image:radial-gradient(95% 85% at 50% 38%, #000, transparent 100%); mask-image:radial-gradient(95% 85% at 50% 38%, #000, transparent 100%); }

/* ─── OS top bar: identity · breadcrumb · status ─── */
.os-bar{ position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; align-items:center; gap:14px; padding:8px 10px 8px 16px;
  background:color-mix(in srgb,var(--surface) 72%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:var(--r-full); box-shadow:var(--shadow-2); max-width:92vw; }
.os-crumb{ display:flex; align-items:center; gap:9px; font-family:var(--ff-ui); font-size:13.5px; }
.os-crumb .seg{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); cursor:pointer; padding:5px 10px; border-radius:var(--r-full); transition:background .15s,color .15s; }
.os-crumb .seg:hover{ background:var(--surface-2); color:var(--ink-1); }
.os-crumb .seg.here{ color:var(--ink-1); font-weight:600; }
.os-crumb .seg svg{ width:15px; height:15px; }
.os-crumb .sep{ color:var(--ink-3); }
.os-bar .os-status{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-2); padding-left:4px; border-left:1px solid var(--line); padding:6px 4px 6px 14px; }
.os-bar .os-status .dot{ width:7px; height:7px; }
.os-bar .os-status.ok{ color:var(--ok); }
.os-switch{ display:inline-flex; gap:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-full); padding:3px; }
.os-switch .bw{ font-family:var(--ff-ui); font-size:12px; font-weight:600; color:var(--ink-2); background:transparent; border:0; border-radius:var(--r-full); padding:5px 12px; cursor:pointer; transition:background .15s,color .15s; }
.os-switch .bw.on{ background:var(--surface); color:var(--ink-1); box-shadow:var(--shadow-1); }
.os-switch .bw:hover{ color:var(--ink-1); }
.os-proactive{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid color-mix(in srgb,var(--amber) 36%,var(--line)); border-radius:var(--r-xl); padding:14px 16px; box-shadow:var(--shadow-glow); margin:6px 2px 8px; }
.os-proactive .pg{ line-height:0; flex-shrink:0; }
.os-proactive .pt{ flex:1; min-width:0; }
.os-proactive .pl{ font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--ink-1); }
.os-proactive .pc{ font-size:13.5px; color:var(--ink-2); margin-top:2px; }
.os-proactive .pa{ display:flex; gap:8px; flex-shrink:0; }
.os-proactive .pa .yes{ font-family:var(--ff-ui); font-size:13px; font-weight:600; color:#1A1100; background:var(--amber); border:1px solid var(--amber); border-radius:var(--r-full); padding:8px 14px; cursor:pointer; box-shadow:var(--shadow-glow); }
.os-proactive .pa .no{ font-family:var(--ff-ui); font-size:13px; color:var(--ink-2); background:transparent; border:1px solid var(--line); border-radius:var(--r-full); padding:8px 14px; cursor:pointer; }
.os-proactive .pa .no:hover{ color:var(--ink-1); border-color:var(--ink-1); }
.os-away{ display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-full); padding:9px 9px 9px 16px; margin:0 2px 10px; }
.os-away .aw-k{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); white-space:nowrap; }
.os-away .aw-t{ font-size:13.5px; color:var(--ink-1); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-away .aw-x{ margin-left:auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; font-size:15px; line-height:1; flex-shrink:0; }
.os-away .aw-x:hover{ color:var(--ink-1); border-color:var(--ink-1); }
.os-ctx{ position:fixed; z-index:200; width:300px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-3); padding:13px; animation:os-ctx-in .16s var(--ease); }
@keyframes os-ctx-in{ from{ opacity:0; transform:translateY(-6px) scale(.97); } to{ opacity:1; transform:none; } }
.os-ctx .ctx-h{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.os-ctx .ctx-h b{ color:var(--accent-ink); font-family:var(--ff-ui); text-transform:none; letter-spacing:-.01em; font-size:13px; font-weight:600; }
.os-ctx input{ width:100%; border:1px solid var(--line); border-radius:var(--r-lg); padding:10px 12px; font-family:var(--ff-ui); font-size:14px; color:var(--ink-1); background:var(--surface-2); outline:none; box-sizing:border-box; }
.os-ctx input:focus{ border-color:color-mix(in srgb,var(--amber) 55%,var(--line)); box-shadow:0 0 0 3px var(--amber-glow); background:var(--surface); }
.os-ctx .ctx-sug{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.os-ctx .ctx-sug button{ font-family:var(--ff-ui); font-size:12px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-full); padding:5px 11px; cursor:pointer; transition:color .15s,border-color .15s; }
.os-ctx .ctx-sug button:hover{ color:var(--ink-1); border-color:var(--ink-1); }
.os-gate{ margin-top:12px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--amber) 40%,var(--line)); border-radius:var(--r-lg); background:var(--amber-glow); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.os-gate .gq{ font-size:13px; color:var(--ink-1); flex:1; min-width:140px; }
.os-gate .gb{ display:flex; gap:8px; }
.os-gate .ga{ font-family:var(--ff-ui); font-size:12.5px; font-weight:600; color:#1A1100; background:var(--amber); border:1px solid var(--amber); border-radius:var(--r-full); padding:6px 13px; cursor:pointer; box-shadow:var(--shadow-glow); }
.os-gate .gc{ font-family:var(--ff-ui); font-size:12.5px; color:var(--ink-2); background:transparent; border:1px solid var(--line); border-radius:var(--r-full); padding:6px 13px; cursor:pointer; }
.os-gate .gc:hover{ color:var(--ink-1); border-color:var(--ink-1); }
.os-gate .gok{ font-size:12.5px; color:var(--ok); display:inline-flex; align-items:center; gap:6px; }
.os-gate .gok svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.rnpx{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0 2px; margin-top:6px; border-top:1px solid var(--line-2); }
.rnpx code{ font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-1); background:var(--code-bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 9px; }
.vresult{ font-family:var(--ff-mono); font-size:11px; }
.vresult.ok{ color:var(--ok); } .vresult.bad{ color:var(--bad); }
.rverify .vhint.verify{ color:var(--ok); }

/* ─── responsive: the OS reflows from desktop grid to phone stack ─── */
@media (max-width:760px){
  /* A clean OPAQUE bar pinned across the top — not a translucent floating oval.
     One row: a truncating crumb + the brain switcher; the verbose status hides. */
  .os-bar{ top:52px; left:10px; right:10px; transform:none; max-width:none; width:auto;
    flex-wrap:nowrap; gap:8px; padding:7px 11px; border-radius:14px;
    background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:var(--shadow-1); overflow:hidden; }
  .os-bar .os-crumb{ min-width:0; flex:1 1 auto; overflow:hidden; }
  .os-bar .os-crumb .seg{ min-width:0; }
  .os-bar .os-crumb .seg.here{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .os-bar .os-switch{ flex:0 0 auto; }
  .os-bar .os-status{ display:none; }
  .os-surface{ inset:104px 12px 118px; }
  .os-home{ padding:0; }
  .os-hello{ flex-direction:column; align-items:flex-start; gap:10px; }
  .os-hello h1{ font-size:24px; }
  .os-spaces{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .os-recents{ grid-template-columns:1fr; }
  .os-mod.col3,.os-mod.col4,.os-mod.col5,.os-mod.col6,.os-mod.col7,.os-mod.col8{ grid-column:span 12; }
  .os-pipe{ gap:12px; }
  .os-proactive{ flex-wrap:wrap; } .os-proactive .pa{ width:100%; }
  .os-away{ flex-wrap:wrap; }
  /* Entity stays by the composer on all breakpoints (no hide-on-phone). */
  .os-ctx{ width:min(300px,92vw); }
  .os-ws-head{ flex-wrap:wrap; gap:8px; }

  /* ── THERON'S WORLD ON MOBILE: a vertical native flow, NOT a spatial canvas.
     The same typed nodes (source → crew → result → receipt) and the same real
     receipt updaters, stacked top-to-bottom and scrolled with a finger. Pan,
     zoom and node-drag are desktop gestures (gated off in JS via CV_TOUCH). ── */
  .cv-wrap{ min-height:0; overflow:visible; touch-action:auto; cursor:default;
    border:0; background:transparent; box-shadow:none; background-image:none; }
  .cv-cam{ position:static; transform:none !important; width:auto; height:auto;
    display:flex; flex-direction:column; gap:13px; }
  .cv-nodes{ position:static; width:auto; height:auto; display:flex; flex-direction:column; gap:13px; }
  .cv-nodes .os-mod,
  .cv-nodes .os-mod[data-slot="result"], .cv-nodes .os-mod[data-slot="receipt"]{
    position:static !important; left:auto !important; top:auto !important;
    width:auto !important; cursor:default; }
  .cv-edges, .cv-cursor{ display:none !important; }
  .cv-hint{ display:none; }
  .cv-oplog{ position:static !important; left:auto !important; bottom:auto !important;
    width:auto !important; max-width:none !important; margin-top:4px; }
}
@media (max-width:480px){
  .os-bar .os-crumb .seg{ padding:4px 7px; font-size:12px; }
  .os-switch .bw{ padding:5px 9px; font-size:11px; }
  .os-sec{ margin:20px 0 0; }
}

/* ─── the morphing surface ─── */
.os-surface{ position:absolute; inset:118px clamp(20px,5vw,80px) 120px; overflow:visible; transition:transform .3s var(--ease); }
.os-view{ position:absolute; inset:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none; padding:6px 6px 30px; transition:opacity .5s var(--ease), transform .55s var(--ease); }
.os-zoom{ position:absolute; right:18px; bottom:96px; z-index:40; display:inline-flex; align-items:center; gap:2px; background:color-mix(in srgb,var(--surface) 80%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--r-full); padding:3px; box-shadow:var(--shadow-2); }
.os-zoom button{ font-family:var(--ff-ui); font-size:14px; color:var(--ink-2); background:transparent; border:0; border-radius:var(--r-full); width:30px; height:30px; cursor:pointer; transition:background .15s,color .15s; }
.os-zoom button[data-z="reset"]{ width:auto; padding:0 11px; font-size:11px; font-family:var(--ff-mono); letter-spacing:.04em; }
.os-zoom button:hover{ background:var(--surface-2); color:var(--ink-1); }
.os-zoom .zlabel{ font-family:var(--ff-mono); font-size:11px; color:var(--ink-2); min-width:38px; text-align:center; }
.os-onboard{ background:var(--surface); border:1px solid color-mix(in srgb,var(--amber) 38%,var(--line)); border-radius:var(--r-xl); padding:20px 22px; box-shadow:var(--shadow-glow); margin:2px 2px 18px; }
.os-onboard .ob-head{ display:flex; gap:16px; align-items:flex-start; }
.os-onboard .ob-gem{ line-height:0; flex-shrink:0; }
.os-onboard .ob-t{ font-family:var(--ff-display); font-weight:700; font-size:21px; letter-spacing:-.02em; color:var(--ink-1); }
.os-onboard .ob-s{ font-size:14.5px; line-height:1.55; color:var(--ink-2); margin-top:4px; max-width:62ch; }
.os-onboard .ob-s b{ color:var(--ink-1); font-weight:600; }
.os-onboard .ob-chips{ display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 0 72px; }
.os-onboard .ob-chips button{ font-family:var(--ff-ui); font-size:13.5px; color:var(--ink-1); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-full); padding:9px 15px; cursor:pointer; transition:border-color .15s, background .15s, transform .12s; }
.os-onboard .ob-chips button:hover{ border-color:var(--amber); background:var(--amber-glow); transform:translateY(-1px); }
.os-onboard .ob-foot{ display:flex; align-items:center; gap:8px; margin:16px 0 0 72px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.03em; color:var(--ink-3); }
.os-onboard .ob-foot svg{ width:14px; height:14px; fill:none; stroke:var(--ok); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:760px){ .os-onboard .ob-chips, .os-onboard .ob-foot{ margin-left:0; } }
/* clean canvas — the world scrolls but shows no scrollbar (no bar, no layout shift at zoom) */
.os-view::-webkit-scrollbar{ width:0; height:0; display:none; }
.os-view[hidden]{ display:none; }
.os-view.out{ opacity:0; transform:translateY(14px) scale(.985); pointer-events:none; }
.os-view.in{ opacity:1; transform:none; }

/* ════════ HOME — your brain ════════ */
/* Front-door calm: a focused, centered column (was 1180px dashboard-wide). */
.os-home{ max-width:780px; margin:0 auto; }
.os-hello{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:6px 2px 22px; flex-wrap:wrap; }
.os-hello h1{ font-family:var(--ff-display); font-size:clamp(26px,3vw,38px); font-weight:600; letter-spacing:-.03em; color:var(--ink-1); margin:0; }
.os-hello h1 .accent{ font-family:var(--ff-serif); font-style:italic; font-weight:400; color:var(--accent-ink); }
.os-hello .sub{ font-size:14px; color:var(--ink-2); margin-top:6px; }
.os-hello .pulse{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-2); padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-full); background:var(--surface); }

.os-sec{ margin:44px 2px 0; }   /* more vertical breathing room (was 26px) */
.os-sec-h{ display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.os-sec-h .t{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.os-sec-h .ln{ flex:1; height:1px; background:var(--line-2); }
.os-sec-h .more{ font-size:12.5px; color:var(--ink-3); cursor:pointer; } .os-sec-h .more:hover{ color:var(--ink-1); }

/* spaces */
.os-spaces{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.os-space{ position:relative; border:1px solid var(--line); border-radius:var(--r-xl); padding:18px; background:var(--surface);
  box-shadow:var(--shadow-1); cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); overflow:hidden; }
.os-space:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:color-mix(in srgb,var(--ink-1) 30%,var(--line)); }
/* a11y: visible focus ring on the keyboard-operable cards (role=button via activable). */
.os-space:focus-visible, .os-rec:focus-visible, .os-mod:focus-visible, .os-source:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.os-space .ic{ width:42px; height:42px; border-radius:var(--r); display:grid; place-items:center; color:#1A1100; margin-bottom:34px; box-shadow:var(--shadow-1); }
.os-space .ic svg{ width:21px; height:21px; stroke:currentColor; }
.os-space .nm{ font-family:var(--ff-display); font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink-1); }
.os-space .ct{ font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-3); margin-top:3px; }
.os-space.add{ border-style:dashed; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--ink-3); min-height:120px; }
.os-space.add:hover{ color:var(--ink-1); }
.os-space.add svg{ width:22px; height:22px; }
.os-space.add .nm{ font-size:13.5px; font-weight:500; color:inherit; }

/* recent work cards */
.os-recents{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px; }
.os-rec{ border:1px solid var(--line); border-radius:var(--r-xl); padding:15px 16px; background:var(--surface); box-shadow:var(--shadow-1);
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease); display:flex; flex-direction:column; gap:9px; }
.os-rec:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.os-rec .top{ display:flex; align-items:center; gap:10px; }
.os-rec .top .ic{ width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center; color:#1A1100; flex-shrink:0; }
.os-rec .top .ic svg{ width:15px; height:15px; stroke:currentColor; }
.os-rec .top .ti{ font-family:var(--ff-display); font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-1); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-rec .desc{ font-size:13px; line-height:1.5; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.os-rec .foot{ display:flex; align-items:center; gap:8px; margin-top:1px; font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-3); }
.os-rec .foot .v{ display:inline-flex; align-items:center; gap:5px; color:var(--ok); }
.os-rec .foot .v svg{ width:12px; height:12px; }
.os-empty{ border:1px dashed var(--line); border-radius:var(--r-xl); padding:30px; text-align:center; color:var(--ink-3); font-size:14px; background:var(--surface-2); }
.os-empty .serif{ font-family:var(--ff-serif); font-style:italic; color:var(--ink-2); }

/* ── Phase 4: connected sources ── */
/* sources are plumbing — quieter + denser so they don't dominate the brain. */
.os-sources{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; opacity:.84; }
.os-sources:hover{ opacity:1; }
.os-source{ display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-xl); padding:13px 14px; background:var(--surface);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.os-source:hover{ border-color:color-mix(in srgb,var(--amber) 36%,var(--line)); box-shadow:var(--shadow-1); transform:translateY(-1px); }
.os-source.on{ border-color:color-mix(in srgb,var(--moss) 46%,var(--line)); background:color-mix(in srgb,var(--moss) 6%,var(--surface)); }
.os-source .sic{ width:34px; height:34px; flex-shrink:0; border-radius:10px; display:grid; place-items:center; }
.os-source .sic svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:1.6; }
.os-source .smeta{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.os-source .snm{ font-family:var(--ff-display); font-size:13.5px; font-weight:600; color:var(--ink-1); }
.os-source .ssub{ font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.os-source.on .ssub{ color:var(--moss); }
.os-source .scta{ flex-shrink:0; color:var(--ink-3); }
.os-source.on .scta{ color:var(--moss); }
.os-source .scta svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
.os-src-foot{ display:flex; align-items:center; gap:7px; margin-top:11px; font-size:11.5px; color:var(--ink-3);
  font-family:var(--ff-serif); font-style:italic; }
.os-src-foot svg{ width:14px; height:14px; stroke:var(--moss); fill:none; stroke-width:1.6; flex-shrink:0; }

/* ── Phase 6: live multitasking rail ── */
.os-running{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.os-running-card{ display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; width:100%;
  border:1px solid color-mix(in srgb,var(--amber) 30%,var(--line)); border-radius:var(--r-xl);
  padding:13px 14px; background:color-mix(in srgb,var(--amber) 5%,var(--surface));
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.os-running-card:hover{ border-color:var(--amber); box-shadow:var(--shadow-glow); transform:translateY(-1px); }
.os-running-card .rc-gem{ width:30px; height:30px; flex-shrink:0; line-height:0; }
.os-running-card .rc-meta{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.os-running-card .rc-t{ font-family:var(--ff-display); font-size:13.5px; font-weight:600; color:var(--ink-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.os-running-card .rc-s{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.os-running-card .rc-bar{ height:3px; border-radius:999px; background:var(--line-2); overflow:hidden; margin-top:2px; }
.os-running-card .rc-bar i{ display:block; height:100%; background:var(--amber); border-radius:999px; transition:width .5s var(--ease); }
.os-running-card .rc-live{ flex-shrink:0; color:var(--amber); }
.os-running-card .rc-live svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; animation:os-spin 1.1s linear infinite; }
@keyframes os-spin{ to{ transform:rotate(360deg); } }

/* activity / audit feed */
.os-feed{ border:1px solid var(--line); border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--shadow-1); overflow:hidden; }
.os-fitem{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-2); }
.os-fitem:last-child{ border-bottom:0; }
.os-fitem .fi{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:var(--ok-soft); color:var(--ok); }
.os-fitem .fi svg{ width:14px; height:14px; }

/* ── Theron's World: the enter-card + the agent cast + the live verifiable feed ── */
.os-wld-enter{ display:flex; align-items:center; gap:14px; margin:6px 2px 18px; padding:16px 18px; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--amber) 34%,var(--line)); border-radius:var(--r-xl); background:var(--surface);
  box-shadow:var(--shadow-glow); transition:transform .15s, box-shadow .15s, border-color .15s; }
.os-wld-enter:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); border-color:color-mix(in srgb,var(--amber) 52%,var(--line)); }
.os-wld-enter:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.os-wld-enter .wld-e-x{ flex:1; min-width:0; }
.os-wld-enter .wld-e-t{ font-family:var(--ff-display); font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--ink-1); }
.os-wld-enter .wld-e-s{ font-size:13px; color:var(--ink-2); margin-top:3px; line-height:1.45; }
.os-wld-enter .wld-e-go{ color:var(--amber-ink,var(--accent-ink)); flex-shrink:0; }
.os-wld-enter .wld-e-go svg{ width:20px; height:20px; stroke:currentColor; }
.os-cast{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.os-wagent{ display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--surface); padding:13px 14px; box-shadow:var(--shadow-1); }
.os-wagent .wa-gem{ line-height:0; flex-shrink:0; }
.os-wagent .wa-nm{ font-family:var(--ff-display); font-weight:600; font-size:14px; color:var(--ink-1); }
.os-wagent .wa-ds{ font-size:12px; color:var(--ink-2); line-height:1.45; margin-top:3px; }
.os-fitem.wld-op .ft{ margin-left:auto; font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-3); white-space:nowrap; }
.wld-verify{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.04em; color:var(--moss,var(--ok)); cursor:pointer;
  border:1px solid color-mix(in srgb,var(--ok) 34%,var(--line)); border-radius:var(--r-full); padding:2px 9px; margin-left:10px; flex-shrink:0; }
.wld-verify:hover{ background:var(--ok-soft); }
.wld-verify:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

/* ── the workspace proposal (nothing runs without it) ── */
.os-prop-ov{ position:fixed; inset:0; z-index:240; display:grid; place-items:center; padding:20px;
  background:color-mix(in srgb,var(--ink-1) 28%,transparent); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.os-prop{ width:min(460px,94vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-3); padding:20px 20px 16px; animation:op-in .2s var(--ease) both; }
@keyframes op-in{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.os-prop .op-h{ display:flex; align-items:center; gap:9px; font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--ink-1); }
.os-prop .op-h svg{ width:18px; height:18px; stroke:var(--accent-ink); }
.os-prop .op-b{ font-size:14px; line-height:1.55; color:var(--ink-2); margin-top:10px; }
.os-prop .op-b b{ color:var(--ink-1); }
.os-prop .op-out{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.os-prop .op-sec{ font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-full); padding:3px 9px; }
.os-prop .op-f{ display:flex; gap:10px; margin-top:16px; }
.os-prop .op-f .app-btn{ flex:1; justify-content:center; }
/* base .app-btn — the proposal buttons render in the static stack, which never
   loads theron-persona.css where .app-btn lives for the React surfaces */
.app-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-ui); font-size:14px; font-weight:600;
  padding:10px 16px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--surface);
  color:var(--ink-1); cursor:pointer; transition:transform .15s var(--ease), box-shadow .2s var(--ease), border-color .15s; }
.app-btn svg{ width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.app-btn.amber{ background:var(--amber); border-color:var(--amber); color:#1A1100; box-shadow:var(--shadow-glow); }
.app-btn.amber:hover{ transform:translateY(-1px); box-shadow:0 10px 28px -10px var(--amber-glow); }
.app-btn.ghost{ background:transparent; color:var(--ink-2); }
.app-btn.ghost:hover{ border-color:var(--ink-1); color:var(--ink-1); }
.app-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.os-ws-head .os-stop{ color:var(--bad); border-color:color-mix(in srgb,var(--bad) 32%,var(--line)); }
.os-ws-head .os-stop:hover{ background:var(--bad-soft,color-mix(in srgb,var(--bad) 8%,transparent)); }
.os-ws-head .os-stop:focus-visible{ outline:2px solid var(--bad); outline-offset:2px; }
.os-fitem .fx{ flex:1; min-width:0; font-size:13.5px; color:var(--ink-1); }
.os-fitem .fx b{ font-weight:600; }
.os-fitem .ft{ font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-3); white-space:nowrap; }

/* ════════ WORKSPACE — a task, tiled ════════ */
.os-ws{ max-width:1180px; margin:0 auto; height:100%; }
.os-ws-head{ display:flex; align-items:center; gap:14px; margin:4px 2px 18px; }
.os-ws-head .tt{ font-family:var(--ff-display); font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink-1); }
.os-ws-head .tmpl{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:4px 10px; border:1px solid var(--line); border-radius:var(--r-full); }
.os-ws-head .file{ margin-left:auto; }

/* the pipeline grid — clean tiling, no overlap */
.os-pipe{ display:grid; gap:16px; grid-template-columns:repeat(12,1fr); grid-auto-rows:min-content; }
.os-mod{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-1);
  overflow:hidden; opacity:0; transform:translateY(12px) scale(.97); transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.os-mod.in{ opacity:1; transform:none; }
.os-mod.active{ border-color:color-mix(in srgb,var(--amber) 42%,var(--line)); box-shadow:var(--shadow-glow); }
.os-mod.invalid{ border-color:var(--bad); }
/* size classes within the 12-col grid */
.os-mod.col3{ grid-column:span 3; } .os-mod.col4{ grid-column:span 4; } .os-mod.col5{ grid-column:span 5; }
.os-mod.col6{ grid-column:span 6; } .os-mod.col7{ grid-column:span 7; } .os-mod.col8{ grid-column:span 8; }

/* ════════ ADAPTIVE WORLD — Theron composes the space per task ════════
   No fixed presets. Each module keeps a stable grid-area NAME; the actual
   grid-template-columns/areas are computed in JS (composeGrid) from which modules
   the task needs — a hero artifact flanked by an input/structure rail (Source/
   Outline) and a proof rail (Crew/Receipt), with a full-width footer. */
.os-mod.slotted{ grid-column:auto; min-width:0; }
.os-mod[data-slot=source]{ grid-area:source; }
.os-mod[data-slot=crew]{ grid-area:crew; }
.os-mod[data-slot=result]{ grid-area:result; }
.os-mod[data-slot=outline]{ grid-area:outline; }
.os-mod[data-slot=receipt]{ grid-area:receipt; }
.os-mod[data-slot=next]{ grid-area:next; }
.os-pipe[data-tmpl=adaptive]{ grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); align-items:start; }
/* the artifact reads bigger as a hero document */
.os-pipe[data-tmpl=adaptive] .os-mod[data-slot=result] .resultbox{ font-size:15px; line-height:1.62; }
/* (a comparison task is signalled honestly by the Outline + the "Comparison" chip;
   we do NOT force the linear prose into 2 columns — the planner writes sequential
   sections, not a paired A/B layout, so faking side-by-side would over-imply structure
   that isn't there + shear text mid-sentence. Real side-by-side is a data-layer follow-up.) */

/* Outline module — the live section plan (a real adaptive add for structured work) */
.os-outline{ display:flex; flex-direction:column; gap:2px; }
.os-outline .ol-row{ display:flex; align-items:flex-start; gap:10px; padding:7px 4px; border-bottom:1px solid var(--line-2); }
.os-outline .ol-row:last-child{ border-bottom:0; }
.os-outline .ol-n{ flex-shrink:0; width:18px; height:18px; color:var(--ink-3); margin-top:1px; }
.os-outline .ol-n svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; }
.os-outline .ol-row.done .ol-n{ color:var(--moss,var(--ok)); }
.os-outline .ol-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.os-outline .ol-t{ font-size:13px; font-weight:550; color:var(--ink-1); line-height:1.3; }
.os-outline .ol-row.done .ol-t{ color:var(--ink-2); }
.os-outline .ol-s{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }

/* the chip names what Theron composed (Document / Research / Comparison / Plan) */
.os-ws-head .tmpl{ color:var(--amber-ink,var(--ink-2)); border-color:color-mix(in srgb,var(--amber) 30%,var(--line)); }

/* the composed grid collapses to one honest column on narrow screens */
@media (max-width:820px){
  .os-pipe[data-tmpl=adaptive]{ grid-template-columns:1fr !important;
    grid-template-areas:"source" "outline" "crew" "result" "receipt" "next" !important; }
}
.os-mh{ display:flex; align-items:center; gap:9px; padding:12px 15px; border-bottom:1px solid var(--line-2); }
.os-mh .pdot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.os-mh .pt{ font-family:var(--ff-display); font-size:13.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-1); }
.os-mh .ptag{ margin-left:auto; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.os-mb{ padding:15px; }

@media (max-width:920px){
  .os-mod.col3,.os-mod.col4,.os-mod.col5,.os-mod.col6{ grid-column:span 6; }
  .os-mod.col7,.os-mod.col8{ grid-column:span 12; }
}

/* module bodies reuse the world vocab */
.filebox{ display:flex; align-items:center; gap:12px; }
.filebox .fic{ width:44px; height:44px; border-radius:var(--r); display:grid; place-items:center; color:#1A1100; flex-shrink:0; box-shadow:var(--shadow-1); }
.filebox .fic svg{ width:21px; height:21px; stroke:currentColor; }
.filebox .fmeta{ flex:1; min-width:0; }
.filebox .fmeta .fn{ font-family:var(--ff-mono); font-size:13px; color:var(--ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filebox .fmeta .fs{ font-family:var(--ff-mono); font-size:11px; color:var(--ink-3); margin-top:3px; }
.filebar{ margin-top:13px; height:6px; border-radius:var(--r-xs); background:var(--surface-2); overflow:hidden; }
.filebar i{ display:block; height:100%; width:0; background:var(--ok); border-radius:var(--r-xs); transition:width 1s var(--ease); }
.filenote{ font-family:var(--ff-mono); font-size:11px; color:var(--ink-2); margin-top:9px; }
.filenote .ok{ color:var(--ok); }

.hive{ display:flex; flex-direction:column; gap:8px; }
.worker{ display:flex; align-items:center; gap:11px; padding:8px 11px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); transition:opacity .35s var(--ease-soft), border-color .35s var(--ease); }
.worker.pending{ opacity:.4; } .worker.done{ border-color:color-mix(in srgb,var(--ok) 40%,var(--line)); }
.worker .wav{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-family:var(--ff-display); font-weight:700; font-size:12px; color:var(--ok); background:radial-gradient(72% 72% at 36% 28%, color-mix(in srgb,var(--ok) 24%,#fff), var(--surface)); border:1px solid color-mix(in srgb,var(--ok) 42%,transparent); }
html[data-theme="dark"] .worker .wav{ background:radial-gradient(72% 72% at 36% 28%, color-mix(in srgb,var(--ok) 30%,var(--surface)), var(--surface)); }
.worker .wmeta{ flex:1; min-width:0; }
.worker .wnm{ font-family:var(--ff-display); font-size:13px; font-weight:600; color:var(--ink-1); line-height:1.2; }
.worker .wrl{ font-size:11.5px; color:var(--ink-2); }
.worker .wsp{ flex-shrink:0; color:var(--ink-3); } .worker .wsp svg{ width:16px; height:16px; }
@media (prefers-reduced-motion:no-preference){ .worker.busy .wsp svg{ animation:os-spin 1.1s linear infinite; transform-box:fill-box; transform-origin:center; } }
@keyframes os-spin{ to{ transform:rotate(360deg); } }
.worker.done .wsp{ color:var(--ok); }

.resultbox{ font-size:14px; line-height:1.6; color:var(--ink-2); }
.resultbox b{ color:var(--ink-1); font-weight:600; }
.resultbox .tag{ display:inline-block; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--amber-glow); border-radius:var(--r-sm); padding:2px 8px; margin-bottom:10px; }
.resultbox .acts{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.resultbox .acts button{ font-family:var(--ff-ui); font-size:12.5px; font-weight:500; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-full); padding:6px 13px; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.resultbox .acts button:hover{ color:var(--ink-1); border-color:var(--ink-1); }

/* receipt module */
.rr{ display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line-2); }
.rr:last-of-type{ border-bottom:0; }
.rr .rk{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.rr .rv{ font-family:var(--ff-mono); font-size:12px; color:var(--ink-1); word-break:break-all; } .rr .rv .ag{ color:var(--accent-ink); }
.rsig{ padding:10px 0 2px; }
.rsig .rk{ display:block; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.rsig .sig{ font-family:var(--ff-mono); font-size:12px; line-height:1.65; color:var(--ink-1); word-break:break-all; user-select:none; }
.rsig .sig .hx{ padding:0 .5px; border-radius:2px; cursor:text; transition:background .15s,color .15s; }
.rsig .sig .hx:hover{ background:var(--amber-glow); }
.rsig .sig .hx.tampered{ color:var(--bad); background:var(--bad-soft); font-weight:600; }
.rverify{ display:flex; align-items:center; gap:9px; padding:11px 0 2px; border-top:1px solid var(--line); margin-top:6px; }
/* HONESTY: the badge is NEUTRAL by default — "signed · unverified" — and only turns
   green "verified" after a real successful fetch to verify_url (JS adds .verified).
   A real 404 (not yet anchored) → amber "pending"; an unreachable verifier → red. */
.vbadge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono); font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-full); border:1px solid var(--line); color:var(--ink-3); background:transparent; transition:color .3s,border-color .3s,background .3s; }
.vbadge svg{ width:13px; height:13px; } .vbadge .ok{ display:none; } .vbadge .x{ display:none; }
.vbadge .lab-neutral{ display:inline; } .vbadge .lab-ok{ display:none; } .vbadge .lab-bad{ display:none; } .vbadge .lab-pend{ display:none; }
/* verified — only set by JS after the real proof validates */
.os-mod.verified .vbadge{ color:var(--ok); border-color:var(--ok); background:var(--ok-soft); }
.os-mod.verified .vbadge .ok{ display:inline-flex; }
.os-mod.verified .vbadge .lab-neutral{ display:none; } .os-mod.verified .vbadge .lab-ok{ display:inline; }
/* pending — a real 404 (issued, today's anchor hasn't rolled up); never reads "verified" */
.os-mod.pending .vbadge{ color:var(--amber-ink,var(--ink-2)); border-color:color-mix(in srgb,var(--amber) 50%,var(--line)); background:color-mix(in srgb,var(--amber) 8%,transparent); }
.os-mod.pending .vbadge .lab-neutral{ display:none; } .os-mod.pending .vbadge .lab-pend{ display:inline; }
/* invalid — the verifier was unreachable */
.os-mod.invalid .vbadge{ color:var(--bad); border-color:var(--bad); background:var(--bad-soft); }
.os-mod.invalid .vbadge .x{ display:block; }
.os-mod.invalid .vbadge .lab-neutral{ display:none; } .os-mod.invalid .vbadge .lab-bad{ display:inline; }
.rverify .vhint{ font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-3); margin-left:auto; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.rverify .vhint:hover{ color:var(--ink-1); } .rverify .vhint svg{ width:12px; height:12px; }
.rverify .vhint.reset{ display:none; } .os-mod.invalid .vhint.reset{ display:inline-flex; } .os-mod.invalid .vhint.tamper{ display:none; }

.notebox{ font-family:var(--ff-serif); font-size:16px; line-height:1.55; color:var(--ink-1); outline:none; min-height:60px; }
.notebox:empty:before{ content:attr(data-ph); color:var(--ink-3); font-style:italic; }

/* ─── Theron, the OS presence (moves between zones) ─── */
.world-theron{ position:absolute; z-index:34; line-height:0; cursor:grab; touch-action:none; }
.world-theron:active{ cursor:grabbing; }
.world-theron .wt-say{ position:absolute; left:50%; bottom:calc(100% - 4px); transform:translateX(-50%); white-space:nowrap;
  font-family:var(--ff-serif); font-style:italic; font-size:14.5px; color:var(--ink-2); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-full); padding:6px 13px; box-shadow:var(--shadow-2); opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease); pointer-events:none; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.world-theron .wt-say.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }
.world-theron .wt-say.typing-say::after{ content:''; display:inline-block; width:2px; height:.9em; background:var(--accent); margin-left:2px; vertical-align:-0.1em; border-radius:1px; }
@media (prefers-reduced-motion:no-preference){ .world-theron .wt-say.typing-say::after{ animation:os-caret 1s steps(1) infinite; } }
@keyframes os-caret{ 0%,52%{opacity:1} 52.01%,100%{opacity:0} }

/* toast */
.toast{ position:fixed; left:50%; bottom:150px; transform:translateX(-50%) translateY(10px); z-index:120; background:var(--ink-1); color:var(--bg);
  font-family:var(--ff-ui); font-size:13.5px; font-weight:500; padding:10px 18px; border-radius:var(--r-full); box-shadow:var(--shadow-3); opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Chunk 6 polish ── */
.os-switch .bw .bw-pv{ font-family:var(--ff-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-full); padding:1px 5px; margin-left:6px; vertical-align:1px; }
.os-switch .bw.on .bw-pv{ color:var(--amber-ink,var(--ink-2)); border-color:color-mix(in srgb,var(--amber) 35%,var(--line)); }
/* the zoom HUD is a pointer affordance — hide it on touch, and respect the safe area */
.os-zoom{ bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
@media (pointer:coarse){ .os-zoom{ display:none; } }

/* one Theron in the world (the dock entity) — cards use a neutral accent, not her face */
.mini-ic{ display:inline-flex; width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:color-mix(in srgb,var(--amber) 16%,transparent); color:var(--amber-ink,var(--ink-2));
  align-items:center; justify-content:center; }
.mini-ic svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; }
.os-running-card .rc-gem .mini-ic{ width:30px; height:30px; }
.os-running-card .rc-gem .mini-ic svg{ width:15px; height:15px; }

/* zoom HUD removed — CSS-scale zoom broke world scrolling; real pan/zoom is the React Flow canvas */
.os-zoom{ display:none !important; }

/* ============================================================
   THE WORLD CANVAS (React-Flow-style) — ported from the design.
   One infinite pan/zoom surface; typed nodes wire themselves while
   Theron narrates; you drag the same nodes. Every node is driven by
   the REAL /api/deliverable pipeline; the receipt node is the live
   wireRealReceipt block (fetch-gated, never a fabricated sig).
   --sky-deep / --terracotta fall back to live theme vars.
   ============================================================ */
.cv-wrap{ position:relative; flex:1; min-height:440px; border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--surface-2); overflow:hidden; cursor:grab; touch-action:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ink-1) 12%,transparent) 1px, transparent 1px);
  background-size:24px 24px; box-shadow:var(--shadow-1) inset; }
.cv-wrap.panning{ cursor:grabbing; }
.cv-cam{ position:absolute; left:0; top:0; width:100%; height:100%; transform-origin:0 0; }
/* the workspace modules ARE the typed nodes — absolutely placed, draggable. Their
   inner markup (.os-mb / #os-art / #os-rid …) is unchanged so every real updater works. */
.cv-nodes{ position:absolute; left:0; top:0; width:100%; height:100%; }
.cv-nodes .os-mod{ position:absolute; width:306px; margin:0 !important; cursor:grab; box-shadow:var(--shadow-1); }
.cv-nodes .os-mod:active{ cursor:grabbing; }
.cv-nodes .os-mod[data-slot="result"], .cv-nodes .os-mod[data-slot="receipt"]{ width:340px; }
.cv-nodes .os-mod.lift{ box-shadow:var(--shadow-3); border-color:var(--ink-2); z-index:30; }
.cv-edges{ position:absolute; left:0; top:0; width:4000px; height:3000px; overflow:visible; pointer-events:none; }
.cv-edges path{ fill:none; stroke:color-mix(in srgb,var(--ink-1) 30%,transparent); stroke-width:1.6; }
.cv-edges path.amber{ stroke:color-mix(in srgb,var(--amber) 65%,transparent); stroke-width:1.9; }
.cv-edges path.ok{ stroke:color-mix(in srgb,var(--ok) 60%,transparent); stroke-width:1.8; }
.cv-edges path.dashed{ stroke-dasharray:5 5; }
.cv-edges path.draw{ stroke-dasharray:600; stroke-dashoffset:600; animation:cv-draw .7s var(--ease) forwards; }
@keyframes cv-draw{ to{ stroke-dashoffset:0; } }

.cv-node{ position:absolute; width:240px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-1); padding:11px 13px 10px; user-select:none;
  cursor:grab; transition:box-shadow .2s var(--ease), border-color .2s var(--ease); }
.cv-node:active{ cursor:grabbing; }
.cv-node.spawn{ animation:cv-pop .5s var(--ease) both; }
@keyframes cv-pop{ from{ opacity:0; transform:scale(.6); } 70%{ transform:scale(1.04); } to{ opacity:1; transform:scale(1); } }
.cv-node.lift{ box-shadow:var(--shadow-3); border-color:var(--ink-2); z-index:30; }
.cv-node .nh{ display:flex; align-items:center; gap:7px; }
.cv-node .nh .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; position:static; }
.cv-node .nh .ty{ font-family:var(--ff-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.cv-node .nh .st{ margin-left:auto; font-family:var(--ff-mono); font-size:9px; color:var(--ink-3); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.cv-node .nh .st.live{ color:var(--accent-ink); } .cv-node .nh .st.ok{ color:var(--ok); }
.cv-node .nn{ font-family:var(--ff-display); font-weight:600; font-size:14.5px; letter-spacing:-.01em; color:var(--ink-1); margin-top:5px; line-height:1.25; }
.cv-node .nb{ font-size:12px; color:var(--ink-2); line-height:1.45; margin-top:5px; }
.cv-node .nb b{ color:var(--ink-1); }
.cv-node .cv-mb{ margin-top:6px; max-height:220px; overflow:auto; }
.cv-node.t-result, .cv-node.t-artifact{ width:312px; border-color:color-mix(in srgb,var(--amber) 46%,var(--line)); box-shadow:var(--shadow-glow); }
.cv-node.t-receipt{ width:304px; border-color:color-mix(in srgb,var(--ok) 40%,var(--line)); }
.cv-node .port{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--surface); border:1.5px solid var(--ink-3); }
.cv-node .port.in{ left:-5px; top:30px; } .cv-node .port.out{ right:-5px; top:30px; }

/* Theron's cursor on the canvas */
.cv-cursor{ position:absolute; z-index:40; display:flex; align-items:center; gap:6px; pointer-events:none;
  transition:left .9s var(--ease), top .9s var(--ease), opacity .4s; opacity:0; }
.cv-cursor.show{ opacity:1; }
.cv-cursor .cg{ line-height:0; filter:drop-shadow(0 3px 8px rgba(40,28,8,.3)); }
.cv-cursor .ct{ font-family:var(--ff-mono); font-size:9.5px; color:#fff; background:var(--amber-deep); border-radius:999px; padding:3px 8px; white-space:nowrap; }

/* signed op log — one stream, hers and yours */
.cv-oplog{ position:absolute; left:12px; bottom:12px; z-index:45; width:244px; pointer-events:none; }
.cv-oplog .ol-k{ font-family:var(--ff-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.cv-oplog .ol-i{ display:flex; align-items:center; gap:6px; font-family:var(--ff-mono); font-size:9.5px; color:var(--ink-2);
  background:color-mix(in srgb,var(--surface) 88%,transparent); border:1px solid var(--line); border-radius:7px;
  padding:4px 8px; margin-top:4px; animation:cv-op .4s var(--ease) both; }
@keyframes cv-op{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.cv-oplog .ol-i b{ color:var(--ink-1); font-weight:600; }
.cv-oplog .ol-i .who-her{ color:var(--accent-ink); } .cv-oplog .ol-i .who-you{ color:var(--sky-deep, var(--sky)); }
.cv-oplog .ol-i .sg{ margin-left:auto; color:var(--ink-3); }

.cv-hint{ position:absolute; right:12px; bottom:12px; z-index:45; font-family:var(--ff-mono); font-size:9.5px; color:var(--ink-3);
  background:color-mix(in srgb,var(--surface) 85%,transparent); border:1px solid var(--line); border-radius:999px; padding:5px 11px; pointer-events:none; }

body[data-theron-busy="1"] .composer .cbtn.send svg{ display:none; }
body[data-theron-busy="1"] .composer .cbtn.send::before{ content:''; display:block; width:13px; height:13px; border-radius:3px; background:currentColor; margin:auto; }
body[data-theron-busy="1"] .composer .cbtn.send{ background:var(--terracotta, var(--bad)); color:#fff; }

@media (max-width:720px){ .cv-node{ width:208px; } .cv-node.t-result, .cv-node.t-artifact{ width:252px; } .cv-node.t-receipt{ width:248px; } .cv-oplog{ width:182px; } }

/* ════════ Simple chat in the world — in-place conversation panel (P0) ════════
   When you just talk to Theron in the world, she answers HERE (a real stream),
   no workspace. Floats above the composer; dismissible. */
.os-convo{ position:fixed; left:50%; bottom:118px; transform:translateX(-50%) translateY(14px); width:min(720px, calc(100vw - 28px)); max-height:54vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-3, 0 24px 60px rgba(26,22,20,.18)); opacity:0; pointer-events:none; transition:opacity .26s var(--ease), transform .26s var(--ease); z-index:60; overflow:hidden; }
.os-convo.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.os-convo .oc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.os-convo .oc-k{ display:inline-flex; align-items:center; gap:8px; font:600 13px/1 var(--ff-display, var(--ff-ui)); color:var(--ink-1); }
.os-convo .oc-k svg{ width:16px; height:16px; fill:none; stroke:var(--amber); stroke-width:1.5; }
.os-convo .oc-x{ width:30px; height:30px; flex:0 0 30px; border-radius:var(--r-full); border:1px solid var(--line); background:transparent; display:grid; place-items:center; cursor:pointer; color:var(--ink-3); }
.os-convo .oc-x:hover{ background:var(--surface-2); color:var(--ink-1); }
.os-convo .oc-x svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; }
.os-convo .oc-thread{ padding:14px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.os-convo .oc-msg{ display:flex; gap:10px; align-items:flex-start; }
.os-convo .oc-msg.you{ justify-content:flex-end; }
.os-convo .oc-msg.you .oc-b{ background:var(--amber-soft, rgba(255,174,0,.13)); border:1px solid var(--line); border-radius:14px 14px 4px 14px; padding:9px 13px; max-width:80%; color:var(--ink-1); }
.os-convo .oc-msg.her .oc-who{ width:30px; height:30px; flex:0 0 30px; margin-top:1px; }
.os-convo .oc-msg.her .oc-b{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:9px 13px; max-width:84%; line-height:1.55; color:var(--ink-1); white-space:pre-wrap; word-break:break-word; }
@media (max-width:720px){ .os-convo{ bottom:104px; width:calc(100vw - 18px); max-height:58vh; } }
@media (prefers-reduced-motion: reduce){ .os-convo{ transition:opacity .2s; transform:translateX(-50%); } .os-convo.show{ transform:translateX(-50%); } }

/* ════════ B6 — Theron present + breathing (idle; reduce-motion gated) ════════
   Her body IS the system status — at rest she breathes, and a live task pulses.
   Tiny amplitude; setFace still maps 1:1 to real state (never decorative verify). */
@media (prefers-reduced-motion: no-preference){
  .world-theron .wt-gem{ animation: os-breathe 4.6s ease-in-out infinite; transform-origin:50% 58%; }
  @keyframes os-breathe{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-3px) scale(1.014); } }
  .os-running-card{ animation: os-livepulse 2.6s ease-in-out infinite; }
  @keyframes os-livepulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,174,0,0); } 50%{ box-shadow:0 0 0 3px var(--amber-glow, rgba(255,174,0,.16)); } }
}

/* B5 — always-on quick starts in the brain (prefill the composer, chat-first). */
.os-quick{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.os-quick button{ font:500 12.5px/1 var(--ff-ui, inherit); color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-full); padding:7px 13px; cursor:pointer; transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease); }
.os-quick button:hover{ background:var(--surface); border-color:var(--line-2, var(--line)); color:var(--ink-1); }
.os-quick .oq-hint{ align-self:center; font:italic 12.5px/1 var(--ff-serif, serif); color:var(--ink-3); }

/* ════════ CALM READY STATE — her computer before the first real work ════════
   .fresh hides the empty heavy sections (spaces/sources/recents/activity) until
   anything real exists; "Running now" stays (it's display-gated on live jobs). */
.os-home.fresh .os-sec:has(#os-spaces),
.os-home.fresh .os-sec:has(#os-sources),
.os-home.fresh .os-sec:has(#os-recents-wrap),
.os-home.fresh .os-sec:has(#os-feed){ display:none; }
.os-fresh-note{ margin:34px 2px 0; font:italic 13.5px/1.6 var(--ff-serif, serif); color:var(--ink-3); text-align:center; }

/* ════════ RUN SWITCHER (multiple jobs at once) — top-left of her computer ════════ */
.os-rundock{ position:absolute; top:18px; left:18px; z-index:36; display:none; gap:6px; max-width:62%; flex-wrap:wrap; }
.os-rundock.show{ display:flex; }
.os-rundock .rd-chip{ display:inline-flex; align-items:center; gap:7px; font:600 11.5px/1 var(--ff-ui,inherit); color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-full); padding:6px 11px; cursor:pointer; box-shadow:var(--shadow-1); }
.os-rundock .rd-chip:hover{ color:var(--ink-1); }
.os-rundock .rd-chip.active{ border-color:color-mix(in srgb,var(--amber) 50%,var(--line)); color:var(--ink-1); box-shadow:var(--shadow-glow); }
.os-rundock .rd-brain{ padding:6px; }
.os-rundock .rd-brain svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; }
.os-rundock .rd-dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); flex:0 0 6px; }
.os-rundock .rd-t{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-rundock .rd-p{ font:10.5px var(--ff-mono, monospace); color:var(--ink-3); }
@media (max-width:880px){ .os-rundock{ top:14px; left:14px; max-width:84%; } }