/* ============================================================================
   VCOP — stylesheet v2 (visual coherence pass)
   Same class names as v1. Dark-only. Density preserved or increased.
   Sections: 1 tokens · 2 base · 3 shell · 4 sidebar · 5 topbar · 6 view header
   7 layout utilities · 8 cards & KPI · 9 status expression · 10 tables
   11 empty states · 12 chips/pills/badges · 13 forms & buttons · 14 overlays
   15 modules (kanban, steps, bars, timeline, assistant, notices)
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Surfaces. --panel3 is new: the raised surface INSIDE a card (nested card,
     kanban card, hover fill) so nesting no longer relies on ad-hoc #17233c. */
  --bg:#0b0f1a; --panel:#111726; --panel2:#0e1420; --panel3:#17223a;
  --line:#1f2a3d; --line2:#26344c; --line3:#33456380;
  --hover:#141d30;                         /* single row/nav hover fill */

  /* Text */
  --txt:#e8eef7; --muted:#8ea0bd; --dim:#61708c;

  /* Brand + data colors. These are DATA hues: they encode values (lead
     temperature, urgency, deltas), never UI state. */
  --accent:#4f8cff; --accent2:#7c5cff;
  --hot:#ff5c6c; --warm:#ffb020; --cold:#3fa9f5; --good:#37d39b;
  --grad:linear-gradient(135deg,var(--accent),var(--accent2));

  /* Status expression — its own ramp, deliberately NOT the data hues.
     v1 defect: --scaffold === --warm and --planned === --dim by value, so
     "partially wired" was indistinguishable from an urgency warning and
     "not built" was indistinguishable from ordinary de-emphasised text.
     Three states, three channels of difference (hue + fill + glyph). */
  --st-live:#37d39b;      --st-live-bg:rgba(55,211,155,.14);   --st-live-line:rgba(55,211,155,.42);
  --st-partial:#c79a3e;   --st-partial-bg:rgba(199,154,62,.13);--st-partial-line:rgba(199,154,62,.48);
  --st-planned:#7386a6;   --st-planned-bg:transparent;         --st-planned-line:#33455f;
  /* Legacy names kept as EXPLICIT aliases so old markup keeps working. */
  --scaffold:var(--st-partial); --planned:var(--st-planned);

  /* Spacing scale (4px base). Use these; stop inlining pixel values. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:26px; --s7:36px;

  /* Radius scale. Sharpened across the board: v1's 14px cards / 9-10px
     controls read consumer-soft. Pill is reserved for people/data chips. */
  --r1:3px; --r2:5px; --r3:8px; --rpill:999px;

  /* Type scale */
  --f-xs:10px; --f-s:11px; --f-m:12px; --f-b:13px; --f-l:14px; --f-h:18px; --f-xl:26px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Elevation — overlays only. Nothing in the document flow gets a shadow. */
  --sh-drawer:-24px 0 60px rgba(0,0,0,.62);
  --sh-modal:0 28px 70px rgba(0,0,0,.66);
  --scrim:rgba(4,7,13,.72);

  /* Z layers */
  --z-topbar:5; --z-scrim:40; --z-overlay:50;
}

/* ---------- 2. Base ------------------------------------------------------ */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);
  font:var(--f-l)/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{color:#7ba9ff}
::selection{background:rgba(79,140,255,.3)}
:focus-visible{outline:1px solid var(--accent);outline-offset:1px}
.mono{font-family:var(--mono);font-size:var(--f-m);font-variant-ligatures:none}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.t11{font-size:var(--f-s)} .t12{font-size:var(--f-m)} .t13{font-size:var(--f-b)}
.num{font-variant-numeric:tabular-nums;text-align:right}

/* ---------- 3. Shell ---------------------------------------------------- */
#app{height:100vh}
.shell{display:grid;grid-template-columns:248px 1fr;height:100vh}
.main{overflow-y:auto}
.content{padding:var(--s5) var(--s6) 64px;max-width:1560px}

/* ---------- 4. Sidebar -------------------------------------------------- */
.side{background:#0a0e18;border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:var(--s4) var(--s4) var(--s3)}
.brand .mark{width:30px;height:30px;border-radius:var(--r2);background:var(--grad);
  display:grid;place-items:center;font-weight:700;font-size:var(--f-b);color:#fff}
.brand b{font-size:var(--f-l);letter-spacing:-.01em}
.brand span{display:block;font-size:var(--f-xs);color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.navgroup{padding:var(--s1) var(--s3)}
.navgroup .lbl{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--dim);
  padding:var(--s3) var(--s2) var(--s1);font-weight:600}
.nav a{display:flex;align-items:center;gap:var(--s2);padding:6px var(--s2);border-radius:var(--r2);
  color:var(--muted);text-decoration:none;font-weight:450;font-size:var(--f-b);position:relative}
.nav a:hover{background:var(--hover);color:var(--txt)}
.nav a.on{background:var(--panel3);color:#fff;font-weight:500}
.nav a.on::before{content:'';position:absolute;left:calc(-1 * var(--s3));top:5px;bottom:5px;width:2px;background:var(--grad)}
.nav .ico{width:14px;text-align:center;font-size:var(--f-m);opacity:.75}
.side .foot{margin-top:auto;padding:var(--s3) var(--s4);border-top:1px solid var(--line);
  font-size:var(--f-s);color:var(--dim);line-height:1.45}
.side .foot .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--good);margin-right:6px;vertical-align:1px}

/* ---------- 5. Topbar ---------------------------------------------------- */
/* Opaque, not blurred: a translucent bar over scrolling data smears numbers. */
.topbar{position:sticky;top:0;z-index:var(--z-topbar);display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s6);background:var(--bg);border-bottom:1px solid var(--line);min-height:48px}
.crumb{font-size:var(--f-m);color:var(--dim);white-space:nowrap}
.crumb b{color:var(--txt);font-weight:500}
.cmd{flex:1;max-width:460px;margin:0 auto;display:flex;align-items:center;gap:var(--s2);
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);padding:5px var(--s2);
  color:var(--dim);cursor:text;font-size:var(--f-m)}
.cmd:focus-within{border-color:var(--line2);background:var(--panel)}
.cmd input{flex:1;background:none;border:0;color:var(--txt);outline:none;font-size:var(--f-b);min-width:0}
.cmd .k{font-family:var(--mono);font-size:var(--f-xs);color:var(--dim);border:1px solid var(--line2);border-radius:var(--r1);padding:1px 4px}
.topbar-right{display:flex;align-items:center;gap:var(--s2);margin-left:auto;white-space:nowrap}

/* ---------- 6. View header ---------------------------------------------- */
/* One pattern for all 14 views: title, factual meta line, actions.
   The meta line carries FACTS (counts, tenant, db, scope) — not prose. */
.vh{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.h1,.vh h1{font-size:var(--f-h);font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.2}
.vh-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:5px;
  font-family:var(--mono);font-size:var(--f-m);color:var(--dim)}
.vh-meta b{color:var(--muted);font-weight:500}
.vh-meta .sep{color:var(--line2)}
.vh-actions{display:flex;align-items:center;gap:var(--s2);flex:none}
/* v1's .sub kept for any prose that survives, but de-emphasised. */
.sub{color:var(--muted);font-size:var(--f-m);margin-top:4px;max-width:76ch;text-wrap:pretty}
.section-t{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--dim);
  font-weight:600;margin:var(--s6) 0 var(--s3);display:flex;align-items:center;gap:var(--s2)}
.section-t .c{color:var(--muted);font-family:var(--mono);letter-spacing:0;text-transform:none;font-size:var(--f-s)}
.h3{font-size:var(--f-b);font-weight:600;letter-spacing:-.005em;margin:0 0 var(--s3);
  display:flex;align-items:center;gap:var(--s2)}
.h3 .aux{margin-left:auto;font-weight:400;font-size:var(--f-m);color:var(--dim);font-family:var(--mono)}

/* ---------- 7. Layout utilities ----------------------------------------- */
/* Replacements for the repeated inline style="" patterns in app.js. */
.grid{display:grid;gap:var(--s3)}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1180px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.g3,.g2{grid-template-columns:1fr}}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.row.nowrap{flex-wrap:nowrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.spread.top{align-items:flex-start}
.push{margin-left:auto}
.stack{display:flex;flex-direction:column;gap:var(--s2)}
.mt1{margin-top:var(--s1)} .mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)}
.list>*{padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.list>*:last-child{border-bottom:0}
/* two-line cell / row: primary + secondary. Was inline in ~20 places. */
.cell-sub{font-size:var(--f-m);color:var(--dim);margin-top:1px;line-height:1.35}
.crow{display:flex;align-items:center;gap:var(--s2);min-width:0}
.av{width:26px;height:26px;border-radius:var(--r2);background:#1b2740;display:grid;place-items:center;
  font-weight:600;font-size:var(--f-s);color:#a9c0e8;flex:none;letter-spacing:.02em}
.clickable{cursor:pointer}

/* ---------- 8. Cards & KPI ---------------------------------------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s4)}
.card.tight{padding:var(--s3)}
.card.flush{padding:0;overflow:hidden}          /* card wrapping a full-bleed table */
.card .card{background:var(--panel3);border-color:var(--line2)}
.kpi{display:flex;flex-direction:column;justify-content:space-between;min-height:96px}
.kpi .n{font-size:var(--f-xl);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi .n.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .l{color:var(--muted);font-size:var(--f-s);text-transform:uppercase;letter-spacing:.1em;margin-top:var(--s3);font-weight:500}
.kpi .d{color:var(--dim);font-size:var(--f-m);margin-top:3px;font-family:var(--mono)}

/* ---------- 9. Status expression ---------------------------------------- */
/* THREE states, honest and distinct:
   live    — working end to end        · filled tint, solid dot, "live"
   partial — wired, transport stubbed  · tinted + hairline border, half dot, "partial"
   planned — not built yet             · no fill, dashed border, hollow dot, "planned"
   Fill weight descends with completeness, so the ranking reads pre-attentively
   even in greyscale. .scaffold is kept as an alias of .partial. */
.tag,.stag{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);
  font-size:var(--f-xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:1px 6px;border-radius:var(--r1);border:1px solid transparent;line-height:1.6;white-space:nowrap}
.nav .tag{margin-left:auto}
.stag{margin-left:auto}
.tag.live,.stag.live{background:var(--st-live-bg);color:var(--st-live);border-color:var(--st-live-line)}
.tag.partial,.stag.partial,.tag.scaffold,.stag.scaffold{
  background:var(--st-partial-bg);color:var(--st-partial);border-color:var(--st-partial-line)}
.tag.planned,.stag.planned,.tag.unbound,.stag.unbound{
  background:none;color:var(--st-planned);border-color:var(--st-planned-line);border-style:dashed}
/* glyph before the label — third channel of difference */
.tag::before,.stag::before{font-size:9px;line-height:1;opacity:.95}
.tag.live::before,.stag.live::before{content:'\25CF'}      /* ● */
.tag.partial::before,.stag.partial::before,
.tag.scaffold::before,.stag.scaffold::before{content:'\25D0'} /* ◐ */
.tag.planned::before,.stag.planned::before,
.tag.unbound::before,.stag.unbound::before{content:'\25CB'} /* ○ */
/* Nav rail: planned items sit back visually as well as by tag. */
.nav a.is-planned{color:var(--dim)}
.nav a.is-planned:hover{color:var(--muted)}

.staterow{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.staterow:last-child{border-bottom:0}
.staterow>div{min-width:0}
.sdot{width:8px;height:8px;border-radius:50%;flex:none;position:relative}
.s-live{background:var(--st-live);box-shadow:0 0 0 3px var(--st-live-bg)}
.s-partial,.s-scaffold{background:linear-gradient(90deg,var(--st-partial) 50%,transparent 50%);
  box-shadow:inset 0 0 0 1px var(--st-partial)}
.s-planned,.s-unbound{background:none;box-shadow:inset 0 0 0 1px var(--st-planned-line)}
/* Legend, for surfaces that show all three (Command Center, System) */
.legend{display:flex;gap:var(--s3);font-family:var(--mono);font-size:var(--f-s);color:var(--dim)}
.legend span{display:flex;align-items:center;gap:5px}

/* ---------- 10. Table system -------------------------------------------- */
/* One treatment everywhere. No zebra — hairlines + hover carry the row.
   Header is sticky inside the scroll container. Density: 7px/10px cells. */
.tbl{border:1px solid var(--line);border-radius:var(--r3);overflow:auto;background:var(--panel)}
.tbl table,table{width:100%;border-collapse:collapse}
.tbl th,th{position:sticky;top:0;z-index:1;text-align:left;background:var(--panel2);
  font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:600;
  padding:7px var(--s3);border-bottom:1px solid var(--line2);white-space:nowrap}
.tbl td,td{padding:7px var(--s3);border-bottom:1px solid var(--line);font-size:var(--f-b);vertical-align:middle}
.tbl tbody tr:last-child td,tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td,tbody tr:hover td{background:var(--hover)}
.tbl tbody tr[data-open]:hover,.tbl tbody tr[data-txn]:hover,.tbl tbody tr[data-agent]:hover{cursor:pointer}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
td.w1{width:1%;white-space:nowrap}                 /* action column */
td .actions{display:flex;gap:6px;justify-content:flex-end}
.tbl tfoot td{background:var(--panel2);font-weight:600;border-top:1px solid var(--line2);border-bottom:0}
/* Secondary table: same skin, quieter header (closed/terminated archives) */
.tbl.quiet th{color:var(--line2)}
.tbl.quiet tbody td{color:var(--muted)}

/* ---------- 11. Empty states -------------------------------------------- */
/* One pattern. Sentence 1 = the fact. Sentence 2 = the action that fills it. */
.empty{padding:var(--s6) var(--s4);text-align:center;color:var(--muted)}
.empty .glyph{display:block;font-family:var(--mono);font-size:var(--f-h);color:var(--line2);margin-bottom:var(--s2)}
.empty b{display:block;color:var(--txt);font-size:var(--f-b);font-weight:500}
.empty p{margin:4px auto 0;max-width:46ch;font-size:var(--f-m);color:var(--dim);text-wrap:pretty}
.empty .btn{margin-top:var(--s3)}
.tbl .empty{border:0}
td.empty-cell{padding:0;background:var(--panel)}
td.empty-cell:hover{background:var(--panel)}
.empty.ok b{color:var(--st-live)}                  /* "nothing wrong" empties */

/* ---------- 11b. Loading skeleton (added D4, 2026-07-30) ---------------- */
/* v1's loading state was the literal text "Loading…" on an otherwise empty
   page, so every navigation flashed blank. The skeleton holds the shape of
   what is arriving. One shimmer keyframe, respects reduced-motion. */
.sk{display:block;background:var(--panel3);border-radius:var(--r1);
  background-image:linear-gradient(90deg,transparent,var(--hover),transparent);
  background-size:220px 100%;background-repeat:no-repeat;animation:sk 1.15s linear infinite}
.sk-t{width:190px;height:19px;margin:0}
.sk-m{width:260px;height:12px}
.sk-r{width:100%;height:12px}
@keyframes sk{0%{background-position:-220px 0}100%{background-position:calc(100% + 220px) 0}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* ---------- 12. Chips, pills, badges ------------------------------------ */
/* badge = data band (hot/warm/cold). chip = enum / taxonomy value.
   pill = a measured fact (count, date, status with a value). */
.badge{display:inline-flex;align-items:center;font-size:var(--f-xs);font-weight:600;padding:1px 7px;
  border-radius:var(--r1);letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono)}
.b-hot{background:rgba(255,92,108,.15);color:var(--hot)}
.b-warm{background:rgba(255,176,32,.15);color:var(--warm)}
.b-cold{background:rgba(63,169,245,.14);color:var(--cold)}
.chip{display:inline-flex;align-items:center;font-size:var(--f-s);padding:1px 7px;border-radius:var(--r1);
  background:var(--panel3);color:var(--muted);border:1px solid var(--line2);white-space:nowrap}
.chip.done{background:var(--st-live-bg);color:var(--st-live);border-color:var(--st-live-line)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--f-m);color:var(--muted);
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--rpill);padding:1px 9px;white-space:nowrap}
.pill.hot{color:var(--hot);border-color:rgba(255,92,108,.45)}
.pill.warn{color:var(--warm);border-color:rgba(255,176,32,.45)}
.pill.info{color:var(--accent);border-color:rgba(79,140,255,.45)}
.pill.good{color:var(--good);border-color:rgba(55,211,155,.45)}
.pill.mono{font-family:var(--mono);font-size:var(--f-s)}

/* ---------- 13. Forms & buttons ----------------------------------------- */
.btn{background:var(--panel3);border:1px solid var(--line2);color:var(--txt);font-weight:500;
  font-size:var(--f-b);padding:5px var(--s3);border-radius:var(--r2);cursor:pointer;line-height:1.5;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:#1d2b46;border-color:#3a4c6e}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04101f;font-weight:600}
.btn.primary:hover{background:#6b9dff;border-color:#6b9dff}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--hover);color:var(--txt)}
.btn.sm{padding:2px var(--s2);font-size:var(--f-m)}
.btn.danger{color:var(--hot);border-color:rgba(255,92,108,.4)}
.btn[disabled]{opacity:.45;cursor:default}
.input{width:100%;background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
  border-radius:var(--r2);padding:5px var(--s2);font-size:var(--f-b);outline:none;font-family:inherit}
.input:hover{border-color:#31425e}
.input:focus{border-color:var(--accent);background:var(--panel)}
.input::placeholder{color:var(--dim)}
select.input{cursor:pointer}
.input.sm{padding:2px 6px;font-size:var(--f-m)}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-size:var(--f-s);color:var(--muted);margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.hint{font-size:var(--f-m);color:var(--dim);margin-top:var(--s2);text-wrap:pretty}

/* ---------- 14. Overlays (hard rule: opaque, above, never reflowing) ---- */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-scrim)}
.modal{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;
  z-index:var(--z-overlay);padding:var(--s5)}
.modal>.box,.box{width:min(560px,94vw);max-height:86vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r3);box-shadow:var(--sh-modal)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,96vw);
  background:var(--panel);            /* fully opaque — never rgba, never blurred */
  border-left:1px solid var(--line2);z-index:var(--z-overlay);overflow-y:auto;
  box-shadow:var(--sh-drawer);overscroll-behavior:contain}
.drawer-hd{position:sticky;top:0;z-index:2;background:var(--panel);border-bottom:1px solid var(--line);
  padding:var(--s3) var(--s4);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.drawer-bd{padding:var(--s4)}
.drawer-ft{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);
  padding:var(--s3) var(--s4);display:flex;gap:var(--s2);justify-content:flex-end}
.close{cursor:pointer;color:var(--dim);font-size:var(--f-l);line-height:1;padding:2px 4px;border-radius:var(--r1);flex:none}
.close:hover{color:var(--txt);background:var(--hover)}
body.has-overlay{overflow:hidden}     /* lock scroll; layout width unchanged */

/* ---------- 15. Modules ------------------------------------------------- */
.kanban{display:grid;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s2);align-items:start}
.kcol{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s2);min-width:158px}
.kcol h4{margin:0 0 var(--s2);font-size:var(--f-s);color:var(--dim);text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;display:flex;justify-content:space-between;gap:var(--s2)}
.kcol h4 span{color:var(--muted);font-family:var(--mono);letter-spacing:0}
.kcard{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r2);padding:var(--s2);
  margin-bottom:6px;cursor:pointer}
.kcard:hover{border-color:#3a4c6e}
.kcard b{font-size:var(--f-b);font-weight:500}
.kcard .p{color:var(--txt);font-size:var(--f-m);font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}

.steps{display:flex;gap:2px;flex-wrap:wrap}
.step{flex:1;min-width:88px;text-align:center;font-size:var(--f-s);padding:5px 4px;border-radius:var(--r1);
  border:1px solid var(--line);color:var(--dim);background:transparent;white-space:nowrap}
.step.done{border-color:var(--line2);color:var(--st-live);background:var(--st-live-bg)}
.step.on{border-color:var(--accent);color:#fff;background:rgba(79,140,255,.18);font-weight:600}

.bar{height:4px;border-radius:var(--rpill);background:var(--panel3);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent)}
.bar.tall{height:6px}

.tl .e{padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.tl .e:last-child{border-bottom:0}
.tl .ty{font-family:var(--mono);font-size:var(--f-s);color:var(--dim)}

.assist{display:flex;flex-direction:column;gap:var(--s2)}
.bubble{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s2) var(--s3);
  font-size:var(--f-b);max-width:85%;align-self:flex-start}
.bubble.me{background:var(--panel3);border-color:var(--line2);align-self:flex-end}

/* Disclosure notices. Default = neutral fact. .warn / .bad for real problems. */
.notice{font-size:var(--f-m);color:var(--muted);background:var(--panel2);
  border:1px solid var(--line2);border-left:2px solid var(--line2);border-radius:var(--r2);
  padding:var(--s2) var(--s3);text-wrap:pretty}
.notice b{color:var(--txt)}
.notice.partial{color:var(--st-partial);border-color:var(--st-partial-line);border-left-color:var(--st-partial)}
.notice.warn{color:var(--warm);border-color:rgba(255,176,32,.35);border-left-color:var(--warm)}
.notice.bad{color:var(--hot);border-color:rgba(255,92,108,.35);border-left-color:var(--hot)}
.notice.ok{color:var(--good);border-color:rgba(55,211,155,.3);border-left-color:var(--good)}

@media print{.side,.topbar{display:none}}