/* View-specific layout for redesigned views. Design-system primitives live in
   components.css; this file only holds per-view grids. Ported from
   pool-prototype.html. */

.pool-grid {
  display: grid;
  grid-template-columns: 300px minmax(470px, 1fr) 390px;
  gap: 14px;
  align-items: start;
}
.pool-col { display:flex; flex-direction:column; gap:12px; min-width:0; }

.pool-hero {
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
  padding:15px; margin-bottom:12px;
}
.pool-hero__title { font-size:16px; font-weight:720; }
.pool-hero__line { color:var(--mx-dim); font-size:11px; margin-top:3px; }
.pool-health { display:flex; gap:14px; align-items:center; }
.pool-health span { display:block; text-align:right; }
.pool-health b { font:700 18px/1 var(--mx-mono); }
.pool-health small { display:block; color:var(--mx-faint); font-size:9px; margin-top:4px; }

.pool-zone { padding:12px; }
.pool-local-brain { margin-bottom: 14px; }
.pool-local-brain__drop { min-height: 64px; padding: 10px; border: 1px dashed var(--mx-line-strong); border-radius: 10px; }
.source-mark { display:inline-flex; align-items:center; gap:4px; margin-right:6px; font-size:10px; color:var(--mx-ink-secondary); }
.source-mark__icon { width:8px; height:8px; border-radius:2px; background:currentColor; }
.source-mark--local { color:#2f5bc5; }
.source-mark--company { color:#6b4f1d; }
.source-mark--external { color:#287d5c; }
.source-mark--local .source-mark__icon { clip-path: polygon(15% 20%, 85% 20%, 85% 80%, 15% 80%); }
.source-mark--company .source-mark__icon { clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); }
.source-mark--external .source-mark__icon { border-radius:50%; }
.pool-zone + .pool-zone { border-top:1px solid var(--mx-line); }
.pool-zone__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.pool-zone__head h3 { font-size:12px; margin:0; }
.pool-zone__head p { font-size:10px; color:var(--mx-faint); margin:2px 0 0; }

.pool-state-key { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 9px; }
.pool-state-key span { display:inline-flex; align-items:center; gap:5px; color:var(--mx-faint); font-size:9px; }
.pool-state-key i { width:6px; height:6px; border-radius:50%; background:var(--mx-iris); }
.pool-lamp-key { display:inline-flex; align-items:center; gap:5px; }
.pool-lamp { width:10px; height:10px; border-radius:50%; flex:0 0 auto; border:1px solid var(--mx-line-strong); }
.pool-lamp--white { background:#f4f1ea; }
.pool-lamp--green { background:#3dbe7a; border-color:#2f9a62; }
.pool-lamp--gray { background:#8a847c; }
.pool-lamp--red { background:#d4514a; border-color:#b13d37; }
.pool-lamp-key--white i { background:#f4f1ea; }
.pool-lamp-key--green i { background:#3dbe7a; }
.pool-lamp-key--gray i { background:#8a847c; }
.pool-lamp-key--red i { background:#d4514a; }
.pool-bill-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--mx-line); }
.pool-bill-row small { display:block; color:var(--mx-faint); }

.resource-card {
  background:var(--mx-panel-2); border:1px solid var(--mx-line); border-radius:11px;
  padding:11px; margin-bottom:9px; transition:border-color .13s;
}
.resource-card:hover { border-color:var(--mx-line-strong); }
.resource-card[data-unavailable="true"] { opacity:.72; }
.resource-card__top { display:flex; align-items:center; gap:9px; }
.resource-card__top .ai-badge { flex:1; min-width:0; }
.resource-card__title { font-weight:680; flex:1; min-width:0; }
.resource-card__meta { display:flex; justify-content:space-between; gap:8px; color:var(--mx-faint); font-size:10px; margin-top:6px; }
.resource-card__meta strong { color:var(--mx-gold); font-family:var(--mx-mono); font-weight:620; }
.resource-card__capacity { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:7px; color:var(--mx-dim); font-size:9.5px; }
.resource-card__actions { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:9px; }

.seat-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.seat {
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--mx-line-strong);
  border-radius:999px; background:var(--mx-panel); padding:4px 8px; font-size:10.5px; user-select:none;
}
.seat i { width:6px; height:6px; border-radius:50%; background:var(--mx-ok); }
.seat--market i { background:var(--mx-gold); }

.company-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.company-summary div { border:1px solid var(--mx-line); border-radius:9px; padding:9px; background:var(--mx-bg-soft); }
.company-summary span { display:block; color:var(--mx-faint); font-size:9px; }
.company-summary b { display:block; font-size:15px; margin-top:2px; }

.market-tools { display:flex; gap:7px; margin:10px 0; }
.market-tools .mx-input { padding:7px 9px; }
.market-scroll { max-height:680px; overflow:auto; padding-right:3px; }

/* ── Tools page ─────────────────────────────────────────────────────── */
.tools-bar { margin:10px 0; }
.tools-summary { display:flex; gap:8px; margin-bottom:12px; }
/* gap:0 with two `auto` columns let TYPE/STATUS/SLOTS/HEARTBEAT butt together and
   render as one run-on string ("TYPESTATUSSLOTS"). Fixed widths + a real gap keep
   header and row aligned to the same track list. */
.tools-table-head {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 64px 96px 72px 84px;
  gap: 12px;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(48,54,61,.8);
  font-size:10px;
  color: var(--mx-faint);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.tools-row {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 64px 96px 72px 84px;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(48,54,61,.4);
  transition: background .12s;
}
.tools-row:hover { background: var(--mx-panel-2); }
.tools-row:last-child { border-bottom: none; }
.tools-row__icon { font-size:14px; color: var(--mx-faint); }
.tools-row__name { font-size:13px; font-weight:600; color: var(--mx-ink); }
.tools-row__models { font-size:10.5px; color: var(--mx-faint); margin-top:2px; }
/* One badge per grid cell, no wrapping — the cell IS the column. */
.tools-row__type,
.tools-row__status { display:flex; align-items:center; min-width:0; }
.tools-row__type > *,
.tools-row__status > * { white-space:nowrap; }
.tools-cap { font-size:13px; font-weight:700; color: var(--mx-iris-soft); font-variant-numeric:tabular-nums; }
.tools-row__heartbeat { display:flex; align-items:center; gap:4px; font-size:10.5px; color: var(--mx-faint); }

/* ── Billing page ───────────────────────────────────────────────────── */
.billing-stats { margin: 0 0 10px; }
.billing-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.billing-stat {
  background: var(--mx-panel);
  border: 1px solid var(--mx-line);
  border-radius: 6px;
  padding: 10px 12px;
}
.billing-stat__label { font-size:10px; color: var(--mx-faint); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.billing-stat__value { font-size:15px; font-weight:700; color: var(--mx-ink); font-variant-numeric:tabular-nums; }
.billing-stat__value--ok { color: var(--mx-ok); }
.billing-stat__value--warn { color: var(--mx-warn); }
.billing-bar { margin-bottom:10px; }
.billing-summary-bar { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.billing-kind-chip {
  background: var(--mx-panel);
  border: 1px solid var(--mx-line);
  border-radius: 5px;
  padding: 5px 10px;
  font-size:11px;
  color: var(--mx-faint);
  display:flex;
  gap:6px;
  align-items:center;
}
.billing-kind-chip strong { color: var(--mx-ink); font-weight:600; }
.billing-table-head {
  display: grid;
  grid-template-columns: 90px 110px 1fr 80px 80px 60px;
  gap: 0;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(48,54,61,.8);
  font-size:10px;
  color: var(--mx-faint);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.billing-row {
  display: grid;
  grid-template-columns: 90px 110px 1fr 80px 80px 60px;
  gap: 0;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(48,54,61,.3);
  font-size:12.5px;
  transition: background .12s;
}
/* The unresolved table has no SKU or amount to show — 4 cells, not 6. Without
   this override those rows inherit the 6-column track list and the minutes value
   lands mid-row instead of under its header. */
.billing-table-head--unresolved,
.billing-row--muted {
  grid-template-columns: 90px 110px minmax(0,1fr) 110px;
  gap: 12px;
}
.billing-row:hover { background: var(--mx-panel-2); }
.billing-row:last-child { border-bottom: none; }
.billing-row__time { font-size:11px; color: var(--mx-faint); font-variant-numeric:tabular-nums; }
.billing-row__tenant { font-size:11px; color: var(--mx-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.billing-row__amount { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.billing-row__amount--pos { color: var(--mx-warn); }
.billing-row__amount--neg { color: var(--mx-ok); }
.billing-pagination { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; }
.billing-pg { display:flex; align-items:center; gap:8px; font-size:12px; color: var(--mx-dim); }
.billing-alloc-label { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color: var(--mx-faint); margin:12px 0 6px; }
.billing-detail-grid { display:flex; flex-direction:column; gap:8px; }
.billing-detail-row { display:grid; grid-template-columns:90px 1fr; gap:8px; font-size:12.5px; }
.billing-detail-row span:first-child { color: var(--mx-faint); }

/* ── Overlay helpers ─────────────────────────────────────────────────── */
.mx-overlay-mask {
  position:fixed; inset:0; background:rgba(1,4,9,.75); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.mx-modal { background:var(--mx-panel); border:1px solid var(--mx-line); border-radius:10px; width:100%; max-width:560px; max-height:80vh; display:flex; flex-direction:column; }
.mx-modal__header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--mx-line); font-weight:600; font-size:14px; }
.mx-modal__close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--mx-faint); padding:0 4px; }
.mx-modal__close:hover { color:var(--mx-ink); }
.mx-modal__body { padding:16px; overflow-y:auto; }
.mx-empty--error { color: var(--mx-danger); }

.pool-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  background: var(--mx-panel-2);
  border: 1px solid var(--mx-line);
  border-left: 3px solid var(--mx-iris);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}
.pool-item:last-child { margin-bottom: 0; }
.pool-item--available { border-left-color: var(--mx-iris); }
.pool-item--running { border-left-color: var(--mx-ok); }
.pool-item--held { border-left-color: var(--mx-warn); }
.pool-item--leased { border-left-color: var(--mx-gold); }
.pool-item--unknown { border-left-color: var(--mx-danger); background: rgba(241,113,107,.035); }
.pool-item__body { min-width: 0; }
.pool-item__body strong { display:block; font-size:11.5px; }
.pool-item__body small {
  display:block; color:var(--mx-faint); font-size:9.5px; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pool-item__actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.pool-qty { min-width:34px; text-align:center; font:750 12px/1 var(--mx-mono); color:var(--mx-iris-soft); }
.resource-mark {
  width:31px; height:31px; border-radius:9px; display:grid; place-items:center;
  background:rgba(84,203,216,.1); border:1px solid rgba(84,203,216,.35);
  color:var(--mx-cyan); font:750 10px/1 var(--mx-mono); flex:none;
}

@media (max-width:1240px) {
  .pool-grid { grid-template-columns: 280px 1fr; }
  .pool-market { grid-column: 1/-1; }
  .market-scroll { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; max-height:none; }
  .market-scroll .resource-card { margin:0; }
}
@media (max-width:840px) {
  .pool-grid { grid-template-columns: 1fr; }
  .pool-market { grid-column: auto; }
  .pool-health { display:none; }
  .pool-item { grid-template-columns: auto 1fr; }
  .pool-item__actions { grid-column:1/-1; justify-content:flex-end; }
}

/* ============================================================
   Task — Device → Workspace → Task Line → Task
   ============================================================ */
.task-page { max-width:1500px; padding-top:18px; }
.task-device-bar { min-height:58px; display:flex; align-items:center; gap:12px; padding:8px 10px; margin-bottom:12px; border:1px solid var(--mx-line); border-radius:var(--mx-radius); background:var(--mx-panel); box-shadow:var(--mx-shadow); }
.task-device-bar__label { flex:none; padding:0 6px; color:var(--mx-faint); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.task-row__ops, .task-line__ops { display:flex; flex-wrap:wrap; gap:4px; align-items:center; justify-content:flex-end; }
.task-device-tabs { min-width:0; flex:1; display:flex; gap:5px; overflow-x:auto; scrollbar-width:thin; }
.task-device-tabs [role="tab"] { flex:none; min-width:150px; display:grid; grid-template-columns:auto 1fr auto; gap:1px 7px; align-items:center; padding:8px 11px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--mx-dim); font:inherit; text-align:left; cursor:pointer; }
.task-device-tabs [role="tab"]:hover { background:var(--mx-panel-2); color:var(--mx-ink); }
.task-device-tabs [role="tab"][aria-selected="true"] { border-color:var(--mx-iris); background:rgba(125,141,255,.12); color:var(--mx-ink); }
.task-device-tabs [role="tab"][aria-disabled="true"] { opacity:.52; cursor:not-allowed; }
.task-device-tabs [role="tab"][aria-disabled="true"]:hover { background:transparent; color:var(--mx-dim); }
.task-device-tab__dot { grid-row:1/3; width:8px; height:8px; border-radius:50%; background:var(--mx-faint); }
.task-device-tab__dot--ok { background:var(--mx-ok); box-shadow:0 0 0 4px rgba(100,221,164,.35), 0 0 10px rgba(100,221,164,.7); }
.task-device-tab__dot--warn { background:var(--mx-warn); }
.task-device-tab__dot--danger { background:var(--mx-danger); }
.task-device-tab__name { font-size:12px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-device-tab__state { font-size:9.5px; color:var(--mx-faint); }
.task-device-tab__flag { grid-column:2; }
.task-device-tab__upd { grid-row:1/3; grid-column:3; width:17px; height:17px; display:grid; place-items:center; border-radius:6px; border:1px solid rgba(243,182,92,.55); background:rgba(243,182,92,.12); color:var(--mx-warn); }
.task-device-tab__upd svg { width:10px; height:10px; display:block; }
.task-device-tab__upd:hover { background:rgba(243,182,92,.26); }
.task-device-tab__upd[aria-disabled="true"] { opacity:.45; pointer-events:none; }
.task-device-empty { margin:0; color:var(--mx-faint); font-size:11px; }
.task-partial { margin:0 0 12px; padding:8px 11px; border:1px solid rgba(243,182,92,.35); border-radius:9px; background:rgba(243,182,92,.06); color:var(--mx-warn); font-size:10.5px; }

.task-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:12px; align-items:start; }
.task-workspace-panel { min-height:520px; border:1px solid var(--mx-line); border-radius:var(--mx-radius); background:var(--mx-panel); box-shadow:var(--mx-shadow); overflow:hidden; }
.task-workspace-panel > header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:13px 12px; border-bottom:1px solid var(--mx-line); }
.task-workspace-panel h2 { margin:0; font-size:13px; }
.task-workspace-panel header p { margin:4px 0 0; color:var(--mx-faint); font-size:9px; line-height:1.45; }
.task-workspace-list { display:grid; gap:2px; padding:6px; }
.task-workspace { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; padding:9px 8px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--mx-ink); font:inherit; text-align:left; cursor:pointer; }
.task-workspace:hover { background:var(--mx-panel-2); }
.task-workspace.is-selected { border-color:rgba(125,141,255,.55); background:rgba(125,141,255,.12); }
.task-workspace__icon { width:25px; height:25px; display:grid; place-items:center; border-radius:7px; background:var(--mx-bg-soft); color:var(--mx-iris-soft); }
.task-workspace__icon svg { width:14px; height:14px; display:block; }
.task-workspace__body { min-width:0; display:grid; gap:2px; }
.task-workspace__body strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; }
.task-workspace__body small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mx-faint); font:9px var(--mx-mono); }
.task-workspace.is-other { opacity:.72; }
.task-workspace-other { margin-top:8px; padding-top:8px; border-top:1px dashed var(--mx-line); }
.task-workspace-other > summary { cursor:pointer; color:var(--mx-faint); font-size:10px; line-height:1.4; padding:4px 6px; }
.task-workspace-other__list { display:grid; gap:2px; margin-top:4px; }
.task-board__warn { margin:8px 0 0; color:var(--mx-warn); font-size:10.5px; line-height:1.45; }

/* BrainLease (远程 Hand) governance block inside the device-scoped panel. */
.task-lease-panel { margin:0; padding:10px 12px 12px; border-top:1px solid var(--mx-line); }
.task-lease-panel > header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.task-lease-panel h3 { margin:0; font-size:11px; letter-spacing:.02em; }
.task-lease__unknown { color:var(--mx-faint); font-size:10px; cursor:help; }
.task-lease-panel .mx-empty { margin:0; font-size:10px; line-height:1.5; }
.task-lease-list { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.task-lease { display:grid; gap:4px; padding:7px 8px; border:1px solid var(--mx-line); border-radius:var(--mx-radius); background:var(--mx-bg); }
.task-lease__head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.task-lease__id { font-size:9.5px; color:var(--mx-faint); }
.task-lease__caps { font-size:9px; color:var(--mx-faint); margin-inline-start:auto; }
.task-lease__path { font-size:10px; word-break:break-all; line-height:1.4; }
.task-lease__meta { display:flex; gap:10px; flex-wrap:wrap; font-size:9px; color:var(--mx-faint); }
.task-lease__hint { margin:6px 0 4px; font-size:9.5px; color:var(--mx-faint); line-height:1.5; }
.task-lease__cmd { margin:0 0 6px; padding:7px 8px; border:1px solid var(--mx-line); border-radius:var(--mx-radius); background:var(--mx-bg); font-size:9.5px; line-height:1.55; white-space:pre-wrap; word-break:break-all; }
.task-lease-pairing{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0;padding:6px 8px;border-radius:6px;border-left:3px solid var(--mx-iris,#6c5ce7);background:rgba(108,92,231,.08);font-size:12px}
.task-lease-pairing--ok{border-left-color:var(--mx-ok,#2ecc71);background:rgba(46,204,113,.08)}
.task-lease-pairing--danger{border-left-color:var(--mx-danger,#e74c3c);background:rgba(231,76,60,.08)}
.task-lease-pairing__path{opacity:.7;font-family:var(--mx-mono,monospace);overflow:hidden;text-overflow:ellipsis}
.task-lease-advanced{margin-top:8px;font-size:12px;opacity:.85}
.task-lease-advanced>summary{cursor:pointer}
.task-lease-history { margin-top:8px; padding-top:8px; border-top:1px dashed var(--mx-line); }
.task-lease-history > summary { cursor:pointer; color:var(--mx-faint); font-size:10px; padding:4px 2px; }
.task-lease-history .task-lease-list { margin-top:6px; }

.task-board { min-height:520px; border:1px solid var(--mx-line); border-radius:var(--mx-radius); background:var(--mx-panel); box-shadow:var(--mx-shadow); overflow:hidden; }
.task-board__head { min-height:72px; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 16px; border-bottom:1px solid var(--mx-line); }
.task-board__head h2 { margin:3px 0 0; font-size:18px; }
.task-board__head p { margin:5px 0 0; color:var(--mx-dim); font-size:10px; }
.task-board__eyebrow { display:block; max-width:650px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mx-faint); font:9px var(--mx-mono); }
.task-lines { display:grid; gap:10px; padding:12px; }
.task-line { border:1px solid var(--mx-line); border-radius:10px; background:var(--mx-bg-soft); overflow:hidden; }
.task-line__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:11px 12px; border-bottom:1px solid var(--mx-line); }
.task-line__head h3 { margin:0; font-size:12.5px; }
.task-line__head p { margin:3px 0 0; color:var(--mx-faint); font-size:9.5px; line-height:1.4; }
.task-line__count { flex:none; color:var(--mx-faint); font-size:9.5px; }
.task-line__tasks { display:grid; }
.task-row-wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; border-bottom:1px solid rgba(42,49,88,.6); }
.task-row { width:100%; display:grid; grid-template-columns:82px minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:10px 12px; border:0; background:transparent; color:var(--mx-ink); font:inherit; text-align:left; cursor:pointer; }
.task-row__convene { align-self:center; margin-right:10px; }
.task-convene { display:grid; gap:8px; margin:0 0 12px; border:0; padding:0; }
.ass-chip.is-offline, .task-chip.is-offline { opacity:.45; filter:grayscale(1); }
.task-row:hover { background:var(--mx-panel-2); }
.task-row__mode { display:inline-flex; justify-content:center; padding:3px 6px; border:1px solid var(--mx-line); border-radius:999px; color:var(--mx-dim); font-size:8.5px; letter-spacing:.03em; text-transform:uppercase; }
.task-row__mode--dag { border-color:rgba(125,141,255,.5); background:rgba(125,141,255,.08); color:var(--mx-iris-soft); }
.task-row__body { min-width:0; display:grid; gap:3px; }
.task-row__body strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; }
.task-row__body small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mx-faint); font-size:9.5px; }
.task-row__meta { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.task-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:2px 7px; border:1px solid var(--mx-line); border-radius:999px; color:var(--mx-dim); font-size:9px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-chip i { font-style:normal; font-size:8px; }
.task-chip--leader { border-color:rgba(232,196,92,.45); color:#ead48a; }
.task-chip--live { border-color:rgba(74,196,122,.55); color:#8ee3ad; }
.task-chip--idle { color:var(--mx-faint); }
.task-chip--worker.is-working { border-color:rgba(125,141,255,.55); color:var(--mx-iris-soft); }
.task-status-strip { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; padding:8px 10px; border:1px solid var(--mx-line); border-radius:10px; background:var(--mx-bg-soft); }
.task-status-strip .task-chip { font-size:10px; }
.task-row__state { font-size:9.5px; white-space:nowrap; }
.task-row__state--ok { color:var(--mx-ok); }.task-row__state--danger { color:var(--mx-danger); }.task-row__state--warn { color:var(--mx-warn); }.task-row__state--iris { color:var(--mx-iris-soft); }.task-row__state--muted { color:var(--mx-faint); }
.task-row__open { color:var(--mx-faint); font-size:18px; }
.task-line__empty { margin:0; padding:18px 12px; color:var(--mx-faint); font-size:10.5px; text-align:center; }
.task-line__add { width:100%; padding:8px 12px; border:0; background:transparent; color:var(--mx-iris-soft); font:600 10px var(--mx-sans); text-align:left; cursor:pointer; }
.task-line__add:hover { background:rgba(125,141,255,.08); }
.task-board__empty { display:grid; justify-items:center; gap:12px; padding:70px 20px; color:var(--mx-faint); font-size:11px; }

.task-mode-choices { display:grid; gap:7px; margin:12px 0 0; padding:0; border:0; }
.task-mode-choices legend { margin-bottom:5px; color:var(--mx-faint); font-size:10px; }
.task-mode-choices label { display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:start; padding:10px; border:1px solid var(--mx-line); border-radius:9px; cursor:pointer; }
.task-mode-choices label:has(input:checked) { border-color:var(--mx-iris); background:rgba(125,141,255,.08); }
.task-mode-choices span { display:grid; gap:3px; }.task-mode-choices strong { font-size:11px; }.task-mode-choices small { color:var(--mx-dim); font-size:9.5px; }
.task-operation-status { margin:12px 0 0; padding:8px 9px; border:1px solid var(--mx-line); border-radius:8px; color:var(--mx-dim); font-size:10px; }
.task-operation-status--ok { border-color:rgba(100,221,164,.4); color:var(--mx-ok); }.task-operation-status--warn { border-color:rgba(243,182,92,.4); color:var(--mx-warn); }.task-operation-status--danger { border-color:rgba(241,113,107,.4); color:var(--mx-danger); }

.task-drawer { position:fixed; z-index:110; right:0; top:0; bottom:0; width:min(560px,100vw); display:flex; flex-direction:column; background:var(--mx-panel); border-left:1px solid var(--mx-line-strong); box-shadow:-25px 0 80px -40px #000; animation:mx-slide .18s ease; }
.task-drawer__head { display:flex; justify-content:space-between; gap:14px; padding:16px; border-bottom:1px solid var(--mx-line); }
.task-drawer__head h2 { margin:3px 0 0; font-size:16px; }.task-drawer__head p { margin:4px 0 0; color:var(--mx-dim); font-size:10px; }
.task-drawer__eyebrow { color:var(--mx-faint); font:9px var(--mx-mono); }
.task-drawer__tabs { display:flex; gap:3px; padding:7px 12px; border-bottom:1px solid var(--mx-line); }
.task-drawer__tabs button { padding:6px 9px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--mx-dim); cursor:pointer; }
.task-drawer__tabs button[aria-selected="true"] { border-color:var(--mx-line-strong); background:var(--mx-panel-2); color:var(--mx-ink); }
.task-drawer__warning { margin:8px 12px 0; padding:7px 9px; border:1px solid rgba(243,182,92,.4); border-radius:8px; color:var(--mx-warn); font-size:9.5px; }
.task-drawer__panel { min-height:0; flex:1; overflow:auto; padding:13px; }
.task-drawer__panel--conversation { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.task-drawer__panel--conversation > .mx-actions { flex:none; min-height:0; justify-content:center; padding:7px 12px 0; }
.task-lanes { display:flex; flex-wrap:wrap; gap:5px; padding:8px 12px; border-bottom:1px solid var(--mx-line); }
.task-lane { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid var(--mx-line); border-radius:999px; background:transparent; color:var(--mx-dim); font-size:9.5px; cursor:pointer; }
.task-lane[aria-selected="true"] { border-color:var(--mx-line-strong); background:var(--mx-panel-2); color:var(--mx-ink); }
.task-lane[data-empty="true"] { opacity:.55; }
.task-lane span { color:var(--mx-faint); font:8.5px var(--mx-mono); }
.task-message__lane { color:var(--mx-faint); font-size:8px; letter-spacing:.04em; }
.task-packet { max-width:100%; border-color:rgba(125,141,255,.35); }
.task-packet__route { margin:4px 0 0; color:var(--mx-faint); font-size:9.5px; }
.task-packet__result { margin-top:6px; color:var(--mx-dim); }
.task-packet__exchanges { margin-top:8px; }
.task-packet__exchanges summary { cursor:pointer; color:var(--mx-faint); font-size:9.5px; }
.task-packet__exchanges p { margin:6px 0 0; color:var(--mx-dim); font-size:10.5px; }
.task-packet__exchanges span { color:var(--mx-faint); font:8.5px var(--mx-mono); margin-right:6px; }
.task-chat-context {
  flex: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--mx-line);
  background: var(--mx-panel-2);
}
.task-chat-context[hidden] { display: none; }
.task-chat-context__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.task-chat-context__facts div { min-width: 0; }
.task-chat-context__facts span {
  display: block;
  color: var(--mx-faint);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.task-chat-context__facts strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--mx-ink);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-chat-context__files summary {
  cursor: pointer;
  color: var(--mx-dim);
  font-size: 10.5px;
}
.task-chat-context__files ul {
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--mx-dim);
  font: 10px/1.5 var(--mx-mono);
}
.task-open-assistant { margin: auto; max-width: 320px; padding: 28px 18px; text-align: center; }
.task-open-assistant p { margin: 0 0 12px; color: var(--mx-dim); font-size: 12px; line-height: 1.5; }
.task-thread-picker {
  position: fixed; z-index: 12030; min-width: 240px; max-width: min(360px, 90vw); max-height: 320px;
  overflow: auto; padding: 6px; border: 1px solid var(--mx-line-strong); border-radius: 10px;
  background: var(--mx-panel); box-shadow: 0 18px 48px -24px #000;
}
.task-thread-picker button {
  display: grid; gap: 2px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.task-thread-picker button:hover { background: var(--mx-panel-2); }
.task-thread-picker strong { font-size: 12px; }
.task-thread-picker span { color: var(--mx-faint); font-size: 10px; }
.task-thread-picker__empty { margin: 0; padding: 12px; color: var(--mx-faint); font-size: 11px; }
.task-files-panel {
  position: absolute; right: 12px; top: 72px; z-index: 12010; width: min(320px, 42vw);
  max-height: min(58vh, 520px); overflow: auto; padding: 8px; border: 1px solid var(--mx-line-strong);
  box-sizing:border-box; border-radius: 10px; background: var(--mx-panel); box-shadow: 0 18px 48px -24px #000;
}
.task-files-panel header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:4px 6px 8px; }
.task-files-panel header > div { min-width:0; display:grid; gap:2px; }
.task-files-panel header strong { font-size: 12px; }
.task-files-panel header small { color: var(--mx-faint); font-size: 10px; word-break: break-all; }
.task-files-panel__close { flex:none; width:32px; height:32px; border:1px solid var(--mx-line); border-radius:8px; background:var(--mx-panel-2); color:inherit; cursor:pointer; }
.task-files-list { display: grid; gap: 2px; }
.task-files-list button {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; min-width:0; margin: 0; padding: 6px 8px;
  border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; font-size: 11px;
}
.task-files-list button > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-files-list button > small { flex:none; }
.task-files-list button:hover { background: var(--mx-panel-2); }
.task-file-view {
  margin: 8px 0 0; max-height: 240px; overflow: auto; padding: 8px; border-radius: 8px;
  background: var(--mx-bg-soft); color: var(--mx-ink); font: 10px/1.45 var(--mx-mono); white-space: pre-wrap;
}
.task-drawer__panel[hidden] { display:none; }
.task-messages { min-height:0; flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:14px; }
.task-message { align-self:flex-start; max-width:88%; padding:9px 10px; border:1px solid var(--mx-line); border-radius:10px; background:var(--mx-panel-2); }
.task-message--human { align-self:flex-end; background:rgba(125,141,255,.13); }
.task-message header { display:flex; justify-content:space-between; gap:14px; color:var(--mx-faint); font-size:8.5px; }.task-message header strong { color:var(--mx-dim); }
.task-message p { margin:5px 0 0; white-space:pre-wrap; color:var(--mx-ink); font-size:11px; line-height:1.55; }
.task-composer { display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px; border-top:1px solid var(--mx-line); }
.task-composer textarea { resize:vertical; min-height:56px; border:1px solid var(--mx-line-strong); border-radius:9px; padding:9px; background:var(--mx-bg-soft); color:var(--mx-ink); }
.task-drawer__empty { margin:auto; padding:24px; color:var(--mx-faint); font-size:10.5px; text-align:center; }
.task-context { margin:0; display:grid; gap:0; border:1px solid var(--mx-line); border-radius:9px; overflow:hidden; }
.task-context div { display:grid; grid-template-columns:130px 1fr; gap:12px; padding:9px 10px; border-bottom:1px solid var(--mx-line); }.task-context div:last-child { border-bottom:0; }
.task-context dt { color:var(--mx-faint); font-size:9.5px; }.task-context dd { margin:0; color:var(--mx-ink); font-size:10.5px; word-break:break-word; }
.task-file { margin-bottom:7px; border:1px solid var(--mx-line); border-radius:9px; background:var(--mx-bg-soft); overflow:hidden; }
.task-file summary { display:flex; justify-content:space-between; gap:10px; padding:9px 10px; cursor:pointer; font:10px var(--mx-mono); }.task-file summary span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-file__meta,.task-file > p { margin:0; padding:8px 10px; border-top:1px solid var(--mx-line); color:var(--mx-faint); font-size:9px; }.task-file pre { max-height:300px; overflow:auto; margin:0; padding:10px; border-top:1px solid var(--mx-line); color:var(--mx-dim); font:9.5px/1.55 var(--mx-mono); white-space:pre-wrap; }

.task-runtime { position:fixed; z-index:110; right:0; top:0; bottom:0; width:min(1040px,calc(100vw - 48px)); display:flex; flex-direction:column; overflow:hidden; border-left:1px solid #2b374a; background:#0a0d12; color:#c4cedd; box-shadow:-25px 0 80px -40px #000; animation:mx-slide .18s ease; }
.runtime-head { min-height:58px; flex:none; display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid #273142; background:#101620; }
.runtime-head__title { min-width:0; flex:1; }.runtime-head__title strong,.runtime-head__title small { display:block; }.runtime-head__title strong { font-size:11px; }.runtime-head__title small { margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#77849a; font:8.5px var(--mx-mono); }
.runtime-controls { display:flex; align-items:center; gap:5px; }.runtime-btn { height:30px; display:inline-flex; align-items:center; padding:0 9px; border:1px solid #2b374a; border-radius:6px; background:#151d29; color:#aeb8c8; font:600 8.5px var(--mx-mono); text-decoration:none; cursor:pointer; }.runtime-btn:hover { border-color:#58a6ff; color:#fff; }.runtime-btn:disabled { opacity:.45; cursor:not-allowed; }.runtime-btn--primary { border-color:#3979bd; background:#1d4d7e; color:#fff; }.runtime-btn--danger { color:#ff8b86; }
.runtime-status { display:flex; align-items:center; gap:7px; padding:6px 8px; border:1px solid #29364a; border-radius:7px; color:#aab6c8; font:700 8.5px var(--mx-mono); }.runtime-status i { width:7px; height:7px; border-radius:50%; background:#f0a84b; }.runtime-status.paused i { background:#a78bfa; }.runtime-status.done i,.runtime-status.completed i { background:#3fb950; }
.runtime-body { position:relative; min-height:0; flex:1; display:flex; }.runtime-main { min-width:0; flex:1; display:flex; flex-direction:column; }.runtime-authority { display:flex; gap:14px; padding:7px 12px; border-bottom:1px solid #202938; color:#748197; font:8px var(--mx-mono); }.runtime-command-message,.runtime-command-error { padding:7px 12px; border-bottom:1px solid #27415b; color:#75d6d9; font-size:9px; }.runtime-command-error { border-color:#593037; color:#ff8b86; }.runtime-viewport { position:relative; min-width:0; min-height:0; flex:1; display:flex; overflow:hidden; background:#090d13; }.runtime-shared-renderer { min-width:0; min-height:0; width:100%; height:100%; flex:1; overflow:hidden; --vlrt-bg:#090d13; --vlrt-panel:#111721; --vlrt-panel-active:#172131; --vlrt-border:#2b374a; --vlrt-text:#d9e2ef; --vlrt-muted:#738198; --vlrt-accent:#77a7ff; }.runtime-shared-renderer > iframe { width:100%; height:100%; min-height:0; border:0; display:block; background:#090d13; }.runtime-no-actions { margin:0; padding:7px 12px; border-top:1px solid #202938; color:#667287; font-size:8.5px; }
.runtime-unavailable,.runtime-generate { position:absolute; inset:0; display:grid; place-items:center; padding:24px; background:#090d13; }.runtime-unavailable__card { width:min(520px,90vw); padding:24px; border:1px solid #2c394c; border-radius:11px; background:#121923; text-align:center; }.runtime-unavailable__card h2 { margin:0; font-size:15px; }.runtime-unavailable__card p { margin:9px auto 0; max-width:450px; color:#8996a8; font-size:10px; line-height:1.65; }.runtime-unavailable__actions { display:flex; justify-content:center; gap:7px; margin-top:17px; }.runtime-generate__card { text-align:center; }.runtime-spinner { width:28px; height:28px; margin:0 auto 10px; border:2px solid #263346; border-top-color:#58a6ff; border-radius:50%; animation:runtime-spin .8s linear infinite; }
.runtime-inspector { width:0; overflow:hidden; border-left:0 solid #29364a; background:#111721; transition:width .16s; }.runtime-inspector.open { width:330px; border-left-width:1px; }.runtime-inspector__inner { width:330px; height:100%; display:flex; flex-direction:column; }.runtime-inspector__head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:13px; border-bottom:1px solid #29364a; }.runtime-inspector__head small { color:#718096; font:8px var(--mx-mono); }.runtime-inspector__head h3 { margin:3px 0 0; font-size:11px; }.runtime-inspector__body { min-height:0; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:9px; }.runtime-inspector__card { padding:9px; border:1px solid #29364a; border-radius:7px; background:#151d29; }.runtime-inspector__card span,.runtime-inspector__card strong,.runtime-inspector__card code { display:block; }.runtime-inspector__card span { color:#718096; font:7.5px var(--mx-mono); text-transform:uppercase; }.runtime-inspector__card strong,.runtime-inspector__card code { margin-top:5px; color:#c7d1df; font-size:9px; }.runtime-inspector__card code { white-space:pre-wrap; color:#75d6d9; }
.runtime-confirm { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:rgba(4,7,11,.76); }.runtime-confirm__card { width:min(400px,90vw); padding:16px; border:1px solid #34425a; border-radius:10px; background:#151d29; }.runtime-confirm__card h3 { margin:0; font-size:12px; }.runtime-confirm__card p { color:#97a4b7; font-size:9px; line-height:1.5; }.runtime-confirm__actions { display:flex; justify-content:flex-end; gap:7px; margin-top:13px; }
@keyframes runtime-spin { to { transform:rotate(360deg); } }

@media (max-width:820px) {
  .task-page { padding-inline:12px; }.task-layout { grid-template-columns:1fr; }.task-workspace-panel { min-height:auto; }.task-board__head { align-items:flex-start; flex-direction:column; }.task-row { grid-template-columns:76px minmax(0,1fr) auto; }.task-row__state { display:none; }
  .task-runtime { inset:0; width:100vw; }.runtime-head { flex-wrap:wrap; align-items:flex-start; }.runtime-head__title { width:calc(100% - 40px); }.runtime-controls { order:3; width:100%; overflow:auto; }.runtime-inspector,.runtime-inspector.open { position:absolute; inset:0 0 0 auto; z-index:4; width:min(340px,100%); }.runtime-inspector__inner { width:100%; }
}
@media (max-width:560px) {
  .task-mobile-autopilot {
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
    padding:12px; border:1px solid rgba(125,141,255,.55); border-radius:12px;
    background:linear-gradient(135deg,rgba(125,141,255,.17),rgba(88,166,255,.08)); box-shadow:var(--mx-shadow);
  }
  .task-mobile-autopilot > div { min-width:0; display:grid; gap:4px; }
  .task-mobile-autopilot strong { font-size:13px; }
  .task-mobile-autopilot small { color:var(--mx-dim); font-size:10px; line-height:1.4; }
  .task-mobile-autopilot .mx-btn { flex:none; min-height:44px; padding-inline:14px; }

  #agent-chat-mount .chat-panel.maximized:not(.collapsed) {
    inset:0 !important; width:100vw !important; max-width:none !important;
    height:100vh !important; height:100dvh !important; max-height:none !important;
    border:0 !important; border-radius:0 !important;
  }
  #agent-chat-mount .chat-panel:not(.collapsed) .ai-header-top {
    min-height:52px; padding-top:calc(7px + env(safe-area-inset-top));
  }
  #agent-chat-mount .chat-panel:not(.collapsed) .chat-input-area {
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  #agent-chat-mount .ai-header-controls .ca-btn,
  #agent-chat-mount .ai-header-controls .chat-collapse-btn,
  #agent-chat-mount .chat-input-row .input-btn,
  #agent-chat-mount .chat-input-row button.send-btn,
  #agent-chat-mount .chat-input-row button.stop-btn,
  #agent-chat-mount .ic-card-action,
  #agent-chat-mount .ic-form-input,
  #agent-chat-mount .ic-form-select {
    min-height:44px;
  }
  #agent-chat-mount .chat-input-row .input-btn { width:44px; height:44px; }
  #agent-chat-mount .ic-form-textarea { min-height:96px; font-size:16px; }
  #agent-chat-mount .ic-form-input,
  #agent-chat-mount .ic-form-select { font-size:16px; }
  #agent-chat-mount .ic-card-actions { gap:8px; flex-wrap:wrap; }
  #agent-chat-mount .ic-card-action { flex:1 1 140px; }
  #agent-chat-mount [data-header-action="mobile-autopilot"] { min-width:72px; }

  .task-files-panel {
    position:fixed; left:0; right:0; top:calc(96px + env(safe-area-inset-top));
    width:100vw; max-width:none; max-height:42dvh; overflow-x:hidden; border-radius:0 0 12px 12px;
    background:var(--bg,var(--mx-panel)); color:var(--text,var(--mx-ink));
  }
  .task-files-panel__close { width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce) { .runtime-inspector { transition:none; }.runtime-spinner { animation:none; } }

/* Legacy World styles retained only for the old compatibility renderer/assets.
   The current Task view does not emit any of these classes. */
.world-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.world-toolbar__spacer { flex:1 1 auto; }
.world-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.world-kpi { border:1px solid var(--mx-line); border-radius:12px; padding:14px 16px; background:var(--mx-panel-2); }
.world-kpi__k { color:var(--mx-dim); font-size:11px; letter-spacing:.02em; }
.world-kpi__v { font-size:26px; font-weight:700; letter-spacing:-.03em; margin:6px 0 4px; }
.world-kpi__sub { color:var(--mx-faint); font-size:11px; }
@media (max-width:900px) { .world-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.world-modes { display:inline-flex; padding:2px; gap:2px; background:var(--mx-bg-soft); border:1px solid var(--mx-line); border-radius:var(--mx-radius); }
.world-modes button { border:0; background:transparent; color:var(--mx-dim); font:inherit; font-size:12px; padding:5px 12px; border-radius:var(--mx-radius-sm); cursor:pointer; }
.world-modes button[aria-pressed="true"] { background:var(--mx-panel-2); color:var(--mx-ink); font-weight:600; }

.world-layout { display:grid; grid-template-columns:264px 1fr 320px; gap:12px; align-items:start; }
.world-col { display:grid; gap:12px; min-width:0; }

.world-tree { display:grid; gap:1px; }
.tree-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; width:100%; padding:7px 9px; border:0; border-radius:var(--mx-radius-sm); background:transparent; color:var(--mx-ink); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.tree-item:hover { background:var(--mx-panel-2); }
.tree-item[aria-selected="true"] { background:color-mix(in srgb, var(--mx-iris) 18%, transparent); color:var(--mx-iris-soft); font-weight:600; }
.tree-item--child { padding-left:24px; font-size:12.5px; }
.tree-mark { width:8px; height:8px; border-radius:50%; background:var(--mx-faint); flex:none; }
.tree-mark--online { background:var(--mx-ok); }
.tree-mark--busy { background:var(--mx-warn); }
.tree-mark--offline { background:var(--mx-faint); }
.tree-mark--unknown { background:transparent; border:1px dashed var(--mx-faint); }
.tree-item__label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-item__meta { font-size:11px; color:var(--mx-faint); font-variant-numeric:tabular-nums; }

.mission-board { display:grid; gap:8px; }
/* Prototype mission card: title + percent badge, then bar, then step pills. */
.mission-card { display:grid; gap:8px; padding:13px 14px; background:var(--mx-panel); border:1px solid var(--mx-line); border-radius:var(--mx-radius); cursor:pointer; text-align:left; font:inherit; color:var(--mx-ink); width:100%; }
.mission-card:hover { border-color:var(--mx-line-strong); background:var(--mx-panel-2); }
.mission-card[aria-selected="true"] { border-color:color-mix(in srgb, var(--mx-iris) 55%, transparent); }
.mission-card__head { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.mission-card__title { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mission-card__pct { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; color:var(--mx-iris-soft); background:color-mix(in srgb, var(--mx-iris) 16%, transparent); border:1px solid color-mix(in srgb, var(--mx-iris) 40%, transparent); }
.mission-card__sub { font-size:11.5px; color:var(--mx-dim); }
.mission-card__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mission-card__bar { display:block; height:5px; border-radius:999px; background:var(--mx-bg-soft); overflow:hidden; }
.mission-card__fill { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--mx-ok), var(--mx-iris)); }

.dag-step { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:11px; font-variant-numeric:tabular-nums; border-radius:7px; border:1px solid var(--mx-line); background:var(--mx-bg-soft); color:var(--mx-dim); }
.dag-step.dag-node--done { border-color:color-mix(in srgb, var(--mx-ok) 45%, transparent); background:color-mix(in srgb, var(--mx-ok) 14%, transparent); color:var(--mx-ok); }
.dag-step.dag-node--running { border-color:color-mix(in srgb, var(--mx-iris) 55%, transparent); background:color-mix(in srgb, var(--mx-iris) 20%, transparent); color:var(--mx-iris-soft); font-weight:600; }
.dag-step.dag-node--failed { border-color:color-mix(in srgb, var(--mx-danger) 45%, transparent); background:color-mix(in srgb, var(--mx-danger) 14%, transparent); color:var(--mx-danger); }

.dag-strip { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dag-node { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; font-size:11px; border-radius:999px; border:1px solid var(--mx-line); background:var(--mx-bg-soft); color:var(--mx-dim); }
.dag-node--done { border-color:color-mix(in srgb, var(--mx-ok) 40%, transparent); background:color-mix(in srgb, var(--mx-ok) 12%, transparent); color:var(--mx-ok); }
.dag-node--running { border-color:color-mix(in srgb, var(--mx-iris) 45%, transparent); background:color-mix(in srgb, var(--mx-iris) 18%, transparent); color:var(--mx-iris-soft); font-weight:600; }
.dag-node--failed { border-color:color-mix(in srgb, var(--mx-danger) 40%, transparent); background:color-mix(in srgb, var(--mx-danger) 12%, transparent); color:var(--mx-danger); }
.dag-arrow { color:var(--mx-faint); font-size:11px; }

.brain-card { display:grid; gap:8px; }
.brain-metric { display:grid; grid-template-columns:1fr auto; gap:6px; align-items:baseline; font-size:12px; }
.brain-metric__k { color:var(--mx-dim); }
.brain-metric__v { font-weight:600; color:var(--mx-ink); font-variant-numeric:tabular-nums; }
.freshness { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--mx-faint); }
.freshness__dot { width:6px; height:6px; border-radius:50%; background:var(--mx-ok); }
.freshness--stale .freshness__dot { background:var(--mx-warn); }
.freshness--unknown .freshness__dot { background:var(--mx-faint); }

.evidence-row { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:8px 10px; border-radius:var(--mx-radius-sm); background:var(--mx-bg-soft); font-size:12px; }
.evidence-row + .evidence-row { margin-top:6px; }
.evidence-row__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mx-mono); font-size:11.5px; color:var(--mx-ink); }
.evidence-row__meta { font-size:11px; color:var(--mx-faint); font-variant-numeric:tabular-nums; }

@media (max-width:1240px) {
  .world-layout { grid-template-columns:240px 1fr; }
  .world-col--right { grid-column:1/-1; }
}
@media (max-width:840px) {
  .world-layout { grid-template-columns:1fr; }
  .world-col--left { display:none; }
  .world-col--left.is-open { display:grid; }
}

/* mid column carries the mission stack, so it never collapses below the
   width where the DAG chips wrap into unreadable single-column stacks */
.world-col--mid { min-width:0; }

/* ============================================================
   Settings
   ============================================================ */
.settings-grid { display:grid; gap:14px; margin-top:16px; }
@media (min-width:1100px) {
  .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
}

.set-kv { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--mx-line); }
.set-kv:last-child { border-bottom:0; }
.set-kv__k { color:var(--mx-dim); font-size:11.5px; }
.set-kv__v { color:var(--mx-ink); font-size:12px; text-align:right; word-break:break-word; }
.set-kv__v--mono { font-family:var(--mx-mono); font-size:11px; color:var(--mx-dim); }

.set-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--mx-line); }
.set-row:last-child { border-bottom:0; }
.set-row__main { display:grid; gap:3px; min-width:0; }
.set-row__title { font-size:12.5px; }
.set-row__meta { color:var(--mx-faint); font-size:10.5px; }
.set-vl-doc { margin:6px 0 10px; padding:10px 12px; max-height:340px; overflow:auto; border:1px solid var(--mx-line); border-radius:8px; background:var(--mx-bg-soft); font:11px/1.55 var(--mx-mono); white-space:pre-wrap; word-break:break-word; color:var(--mx-ink); }

.set-device { min-width:0; }
.set-grant { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 0; }
.set-grant .mx-input { flex:1; min-width:0; }

.set-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* ============================================================
   Task DAG — full-screen read-only runtime graph (views/task-graph.mjs)
   Opened from a World Task card. Per TASK-DAG-PLANNER-RUNTIME-UX §6 there are
   no tabs and no modal: one header action, a layered canvas, and a
   selection-driven inspector.
   ============================================================ */
.mx-tg { display:flex; flex-direction:column; gap:12px; }

.mx-tg-head { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.mx-tg-head__title { flex:0 1 auto; min-width:0; margin:0; font-size:19px; font-weight:640; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Pushes freshness + actions to the right edge without a fixed-width gutter. */
.mx-tg-head__spacer { flex:1 1 auto; }

/* Derived counts, not editable fields — one dim strip under the header. */
.mx-tg-facts { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; color:var(--mx-dim); font-size:11px; }
.mx-tg-facts > span { white-space:nowrap; }

.mx-tg-body { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:12px; align-items:start; }
@media (max-width:1040px) { .mx-tg-body { grid-template-columns:minmax(0,1fr); } }

.mx-tg-canvas { min-width:0; padding:13px 14px 4px; background:var(--mx-panel); border:1px solid var(--mx-line); border-radius:var(--mx-radius); }
.mx-tg-warn { margin:8px 0 0; padding:7px 10px; border:1px solid rgba(243,182,92,.52); border-radius:var(--mx-radius-sm); background:rgba(243,182,92,.06); color:var(--mx-warn); font-size:11px; }

.mx-tg-layer { margin-top:14px; }
.mx-tg-layer__label { margin:0 0 7px; color:var(--mx-faint); font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
/* Same-layer nodes are independent, so they wrap as a row rather than a column. */
.mx-tg-layer__row { display:flex; flex-wrap:wrap; gap:9px; }

.mx-tg-node { display:grid; gap:7px; width:190px; padding:9px 10px; border:1px solid var(--mx-line); border-left:3px solid var(--mx-line-strong); border-radius:var(--mx-radius-sm); background:var(--mx-panel-2); color:var(--mx-ink); font:inherit; text-align:left; cursor:pointer; transition:border-color .12s, transform .12s; }
.mx-tg-node:hover { border-color:var(--mx-iris); transform:translateY(-1px); }
.mx-tg-node[aria-pressed="true"] { border-color:var(--mx-iris); background:var(--mx-panel-3); box-shadow:0 0 0 1px var(--mx-iris) inset; }
.mx-tg-node__head { display:flex; align-items:baseline; justify-content:space-between; gap:7px; min-width:0; }
.mx-tg-node__title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.mx-tg-node__kind { flex:none; color:var(--mx-faint); font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.mx-tg-node__foot { display:flex; align-items:baseline; justify-content:space-between; gap:7px; min-width:0; font-size:10px; }
.mx-tg-node__state { flex:none; }
.mx-tg-node__worker { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mx-faint); }

/* Tone is the node's own status. Every value statusTone() can return is listed:
   an unlisted tone would silently fall back to the neutral border and read as
   "waiting" when it is not. */
.mx-tg-node--done { border-left-color:var(--mx-ok); }
.mx-tg-node--done .mx-tg-node__state { color:var(--mx-ok); }
.mx-tg-node--running { border-left-color:var(--mx-cyan); }
.mx-tg-node--running .mx-tg-node__state { color:var(--mx-cyan); }
.mx-tg-node--waiting { border-left-color:var(--mx-line-strong); }
.mx-tg-node--waiting .mx-tg-node__state { color:var(--mx-dim); }
.mx-tg-node--blocked { border-left-color:var(--mx-warn); }
.mx-tg-node--blocked .mx-tg-node__state { color:var(--mx-warn); }
.mx-tg-node--failed { border-left-color:var(--mx-danger); }
.mx-tg-node--failed .mx-tg-node__state { color:var(--mx-danger); }
.mx-tg-node--cancelled { border-left-color:var(--mx-faint); }
.mx-tg-node--cancelled .mx-tg-node__state { color:var(--mx-faint); }
.mx-tg-node--archived { border-left-color:var(--mx-faint); }
.mx-tg-node--archived .mx-tg-node__state { color:var(--mx-faint); }
/* `unknown` is a real outcome, not a styling gap: dashed says "not asserted". */
.mx-tg-node--unknown { border-left-style:dashed; border-left-color:var(--mx-faint); }
.mx-tg-node--unknown .mx-tg-node__state { color:var(--mx-faint); }

/* Run-level state tag in the header, on .mx-tag. Mirrors screenState(). */
.mx-tg-state { flex:none; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.mx-tg-state--running { border-color:rgba(84,203,216,.5); color:var(--mx-cyan); background:rgba(84,203,216,.07); }
.mx-tg-state--completed { border-color:rgba(100,221,164,.48); color:var(--mx-ok); background:rgba(100,221,164,.06); }
.mx-tg-state--blocked, .mx-tg-state--awaiting { border-color:rgba(243,182,92,.52); color:var(--mx-warn); background:rgba(243,182,92,.06); }
.mx-tg-state--failed { border-color:rgba(241,113,107,.5); color:var(--mx-danger); background:rgba(241,113,107,.06); }
.mx-tg-state--ready { border-color:rgba(125,141,255,.58); color:var(--mx-iris-soft); background:rgba(125,141,255,.08); }
.mx-tg-state--paused, .mx-tg-state--cancelled, .mx-tg-state--no_run, .mx-tg-state--unknown { color:var(--mx-faint); }

.mx-tg-side { min-width:0; padding:13px 14px; background:var(--mx-panel); border:1px solid var(--mx-line); border-radius:var(--mx-radius); }
@media (min-width:1041px) { .mx-tg-side { position:sticky; top:12px; max-height:calc(100vh - 120px); overflow-y:auto; } }
.mx-tg-side__title { margin:0; font-size:13px; font-weight:640; }
.mx-tg-side__name { margin:6px 0 10px; font-family:var(--mx-mono); font-size:11.5px; color:var(--mx-iris-soft); word-break:break-word; }
.mx-tg-side__sub { margin:14px 0 6px; color:var(--mx-faint); font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.mx-tg-side__text { margin:0; font-size:12px; line-height:1.6; color:var(--mx-dim); }

.mx-tg-kv { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--mx-line); }
.mx-tg-kv:last-child { border-bottom:0; }
.mx-tg-kv__k { flex:none; color:var(--mx-dim); font-size:11px; }
.mx-tg-kv__v { min-width:0; font-size:11.5px; text-align:right; word-break:break-word; }

/* ============ Pool v2 — four-pool single-screen drag board ============
   Ported from pool-prototype.html (v2). The p2-* prototype vocabulary maps to
   pool-* here so the redesign class contract keeps checking it. */

.pool-deck__head h1 { letter-spacing:-.03em; }
.pool-deck__head p { color:var(--mx-dim); font-size:11px; }
.pool-credit { display:flex; flex-direction:column; align-items:flex-end; margin-right:4px; }
.pool-credit b { font:700 14px/1.1 var(--mx-mono); }
.pool-credit small { color:var(--mx-faint); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; }

.pool-deck__grid {
  display: grid;
  grid-template-columns: 290px minmax(430px, 1fr) 350px;
  gap: 14px;
  align-items: stretch;
}
.pool-centercol { display:flex; flex-direction:column; gap:12px; min-width:0; min-height:0; }

/* -------- pool container -------- */
.pool-pool { display:flex; flex-direction:column; min-width:0; min-height:0; padding:0; transition:opacity .15s, box-shadow .15s, border-color .15s, filter .15s; }
.pool-pool--mine { flex:1; min-height:0; }
.pool-pool__head { flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px 6px; }
.pool-pool__head h2 { font-size:14px; margin:1px 0 0; letter-spacing:-.01em; }
.pool-eyebrow { font-size:9px; letter-spacing:.15em; text-transform:uppercase; font-weight:760; }
.pool-c-cyan { color:var(--mx-cyan); }
.pool-c-iris { color:var(--mx-iris-soft); }
.pool-pool__count { font:650 10.5px/1.4 var(--mx-sans); color:var(--mx-dim); white-space:nowrap; text-align:right; }
.pool-pool__hint { flex:none; display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:0; padding:0 14px 8px; color:var(--mx-faint); font-size:9.8px; }
.pool-pool__body { flex:1; min-height:0; overflow:auto; padding:2px 12px 12px; }
.pool-pool__body[hidden] { display:none; }

/* -------- unit cells / meter (idle green, busy red) -------- */
.pool-cells { display:flex; flex-wrap:wrap; gap:3px; }
.pool-cell { display:inline-block; width:9px; height:9px; border-radius:2.5px; background:var(--mx-ok); box-shadow:0 0 6px -1px rgba(100,221,164,.7); }
.pool-cell--busy { background:var(--mx-danger); box-shadow:0 0 6px -1px rgba(241,113,107,.7); }
.pool-meter { display:flex; gap:2px; }
.pool-meter i { flex:1; height:7px; border-radius:2px; background:var(--mx-ok); opacity:.92; }
.pool-meter i.pool-seg--busy { background:var(--mx-danger); }

/* -------- series rows (left lent + right borrow, pool-prototype v2) -------- */
.pool-krow {
  width:100%; text-align:left; border:1px solid var(--mx-line); background:var(--mx-panel-2);
  border-radius:12px; padding:9px 11px; display:flex; flex-direction:column; gap:7px;
  margin:0 0 8px; color:var(--mx-ink); user-select:none;
}
.pool-krow[draggable="true"] { cursor:grab; }
.pool-krow[draggable="true"]:hover { border-color:var(--mx-iris); transform:translateY(-1px); }
.pool-krow[draggable="true"]:active { cursor:grabbing; }
.pool-krow[data-empty="1"] { cursor:default; opacity:.62; }
.pool-krow[data-empty="1"]:hover { border-color:var(--mx-line); transform:none; }
.pool-krow__main { display:flex; align-items:center; gap:8px; min-width:0; }
.pool-krow__main .ai-badge { min-width:0; }
.pool-krow__name { flex:1; min-width:0; font-size:11.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pool-krow__action { display:flex; justify-content:flex-end; }
.pool-frac { font:700 11px/1 var(--mx-mono); color:var(--mx-faint); white-space:nowrap; }
.pool-frac b { color:var(--mx-ok); font-weight:760; }
.pool-frac--zero b { color:var(--mx-danger); }

/* -------- mine pool: stats chips, wells, legend -------- */
.pool-stats { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pool-deck .pool-stat { min-height:0; display:inline-flex; align-content:normal; align-items:center; gap:5px; border:1px solid var(--mx-line-strong); border-radius:999px; padding:3px 9px; background:transparent; box-shadow:none; font-size:10px; color:var(--mx-dim); }
.pool-stat b { font:750 11px/1 var(--mx-mono); color:var(--mx-ink); }
.pool-stat i { width:8px; height:8px; border-radius:2.5px; }
.pool-stat--busy i { background:var(--mx-danger); }
.pool-stat--idle i { background:var(--mx-ok); }

.pool-zone--busy, .pool-zone--idle { border-top:0; }
.pool-zone--idle { flex:1; min-height:0; display:flex; flex-direction:column; }
.pool-zone__head h3 .pool-cell { width:8px; height:8px; vertical-align:baseline; }
.pool-well {
  background:rgba(8,10,19,.55); border:1px solid rgba(42,49,88,.55); border-radius:12px;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.35); padding:8px; min-height:72px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px;
  align-content:flex-start; overflow:auto;
}
.pool-well--units {
  display:flex; flex-wrap:wrap; gap:2px 3px; grid-template-columns:none;
}
.pool-unit {
  position:relative; width:74px; border:0; background:transparent; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px 6px;
  cursor:grab; user-select:none; color:var(--mx-ink);
}
.pool-unit:hover { background:rgba(125,141,255,.09); transform:translateY(-1px); }
.pool-unit--busy { cursor:default; }
.pool-unit--busy:hover { transform:none; background:rgba(241,113,107,.06); }
.pool-unit small { max-width:70px; font-size:9px; line-height:1.15; color:var(--mx-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pool-unit__dot { width:10px; height:10px; border-radius:3px; background:var(--mx-ok); box-shadow:0 0 9px rgba(100,221,164,.55); }
.pool-unit--busy .pool-unit__dot { background:var(--mx-danger); }
.pool-unit__logo { position:relative; transform:scale(.85); }
.pool-unit .ai-badge, .pool-unit .resource-card__title { display:none; }
.pool-unit .resource-mark { width:28px; height:28px; }
.pool-zone--busy .pool-well { max-height:220px; }
.pool-zone--idle .pool-well { flex:1; min-height:0; }
.pool-well .pool-item { margin:0; }
.pool-well .mx-empty { grid-column:1/-1; }

.pool-legend { flex:none; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 14px 11px; color:var(--mx-faint); font-size:9.5px; }
.pool-legend__totals { margin-left:auto; font:650 9.5px/1.4 var(--mx-mono); color:var(--mx-dim); }

/* -------- LocalBrain bar -------- */
.pool-brainbar {
  margin-bottom:0; flex:none; display:flex; align-items:center; gap:12px; padding:9px 14px;
  border:1px solid rgba(125,141,255,.42); border-radius:var(--mx-radius);
  background:linear-gradient(180deg, rgba(125,141,255,.11), rgba(21,26,47,.94));
  transition:opacity .15s, box-shadow .15s, border-color .15s, filter .15s;
}
.pool-brainbar__mark { flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(125,141,255,.15); border:1px solid rgba(125,141,255,.5); color:var(--mx-iris-soft); }
.pool-brainbar__mark svg { width:19px; height:19px; }
.pool-brainbar__label { flex:none; }
.pool-brainbar__label b { display:block; font-size:12.5px; letter-spacing:-.01em; }
.pool-brainbar__label small { display:block; color:var(--mx-faint); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; margin-top:1px; }
.pool-brainbar__slot { flex:1; min-width:0; display:flex; align-items:center; min-height:0; padding:0; border:0; }
.pool-brainbar__empty { flex:1; border:1.5px dashed rgba(125,141,255,.5); border-radius:10px; padding:8px 12px; color:var(--mx-faint); font-size:10.5px; text-align:center; }
.pool-brainbar__chip { display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(125,141,255,.6); background:rgba(125,141,255,.14); border-left-width:1px; border-radius:10px; padding:5px 7px 5px 12px; margin:0; font-size:11.5px; }
.pool-brainbar__status { flex:none; }

/* -------- right pool: tabs -------- */
.pool-pool--in .pool-pool__head { align-items:center; }
.pool-tabbar { display:flex; gap:5px; margin:0; }
.pool-tabbar .mx-tab b { font:750 10px/1 var(--mx-mono); margin-left:4px; color:var(--mx-ok); }
.pool-deck .market-scroll { display:block; max-height:none; padding-right:0; }

/* Compact item cards inside the deck: actions get their own full row instead of
   wrapping into the first grid column. */
.pool-deck .pool-item { grid-template-columns:auto auto 1fr; gap:7px 8px; padding:8px 9px; }
.pool-deck .pool-item__actions { grid-column:1/-1; justify-content:space-between; }
.pool-deck .pool-qty { min-width:auto; }

/* -------- drop-target feedback -------- */
.pool-can { border-color:rgba(125,141,255,.75); box-shadow:0 0 0 1px rgba(125,141,255,.35), 0 0 28px -8px rgba(125,141,255,.55); }
.pool-hot { background:rgba(125,141,255,.09); }
.pool-cant { opacity:.45; filter:saturate(.5); }

/* Single-screen: on wide viewports each pool scrolls inside itself, like the
   prototype's fixed-height board; narrow viewports fall back to page scroll. */
@media (min-width:1241px) {
  .pool-deck__grid > .pool-pool, .pool-centercol { max-height:calc(100vh - 200px); }
  .pool-centercol .pool-pool--mine { overflow:hidden; }
}
@media (max-width:1240px) {
  .pool-deck__grid { grid-template-columns:1fr; }
  .pool-zone--busy .pool-well { max-height:none; }
}

.mx-tg-list { margin:0; padding-left:16px; color:var(--mx-dim); font-size:11.5px; line-height:1.65; }
.mx-tg-artifact { display:flex; align-items:center; gap:7px; padding:6px 0; border-bottom:1px solid var(--mx-line); }
.mx-tg-artifact:last-child { border-bottom:0; }
.mx-tg-artifact__name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; }

.mx-tg-empty { text-align:center; }
.mx-tg-empty h2 { margin:0 0 4px; font-size:15px; }
.mx-tg-empty .mx-btn { margin-top:12px; }

/* ============================================================
   Task SPA — single-screen workbench.
   Landed from the task-prototype design: compact device strip on top, the
   Workspace → Task Line → Task tree on the left, the embedded typed Task
   detail on the right. The page body never scrolls; the tree body and the
   detail body scroll independently. All automation hooks keep their existing
   selectors — this section only re-lays-out what the view already renders.
   Scoped under .task-page--spa so the <=1120px fallback can restore document
   scrolling.
   ============================================================ */
.task-page--spa { display:flex; flex-direction:column; height:calc(100vh - 64px); max-width:1780px; padding:12px 20px 14px; overflow:hidden; }

/* Compact device strip: connectivity dot + custom name; details live in the
   tooltip. Revoked devices keep their flag chip. */
.t2-linehead,.t2-task{width:100%;max-width:100%;min-width:0;box-sizing:border-box;display:flex;align-items:center;gap:5px;border:1px solid transparent;background:none;border-radius:8px;padding:5px 6px;cursor:pointer;color:var(--mx-ink);text-align:left}
.t2-linehead:hover,.t2-task:hover{background:rgba(125,141,255,.07)}
.t2-taskwrap{display:flex;align-items:center;gap:4px;padding-right:2px;border:1px solid transparent;border-radius:9px;min-width:0;max-width:100%;box-sizing:border-box}
.t2-taskwrap .t2-task{flex:1 1 0;min-width:0;width:auto}
.t2-taskwrap .t2-task:hover,.t2-taskwrap .t2-task.active{background:transparent;border-color:transparent}
.t2-taskwrap.is-selected{border-color:rgba(125,141,255,.6);background:rgba(125,141,255,.14)}
.t2-taskwrap:hover{background:rgba(125,141,255,.07)}
.t2-cfg{flex:none;flex-shrink:0;width:18px;height:18px;border-radius:6px;border:1px solid var(--mx-line-strong);background:var(--mx-panel-2);color:var(--mx-dim);cursor:pointer;font-size:10px;line-height:1;display:grid;place-items:center;opacity:.85}
.t2-cfg svg,.t2-plus svg{width:10px;height:10px;display:block}
.t2-chev svg{width:10px;height:10px;display:block}
.task-tree__addline svg{width:10px;height:10px;display:inline-block;vertical-align:-1px;margin-right:2px}
.t2-cfg--danger:hover{border-color:var(--mx-danger);color:var(--mx-danger)}
.t2-taskwrap:hover .t2-cfg,.t2-taskwrap.is-selected .t2-cfg{opacity:1;border-color:var(--mx-iris);color:var(--mx-iris)}
.t2-taskwrap:hover .t2-cfg--danger,.t2-taskwrap.is-selected .t2-cfg--danger{border-color:var(--mx-danger);color:var(--mx-danger)}
.t2-chev{flex:none;width:12px;height:12px;display:grid;place-items:center;color:var(--mx-faint)}
.t2-linehead.open .t2-chev{transform:rotate(90deg)}
.t2-linehead{padding-left:8px;color:var(--mx-dim)}
.t2-linehead b{flex:1 1 0;min-width:0;font-size:12px;font-weight:650;color:var(--mx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t2-linehead .t2-plus,.t2-taskwrap .t2-cfg{flex:none;flex-shrink:0;position:relative;z-index:2}
.t2-linehead small{flex:none;font:650 9px/1 var(--mx-mono);color:var(--mx-faint)}
.t2-plus{flex:none;flex-shrink:0;width:18px;height:18px;padding:0;border-radius:6px;border:1px solid var(--mx-line-strong);background:var(--mx-panel-2);color:var(--mx-dim);cursor:pointer;font:inherit;font-size:12px;line-height:1;display:grid;place-items:center}
.t2-rowplus{opacity:1}
.t2-linehead:hover .t2-rowplus{opacity:1;border-color:var(--mx-iris);color:var(--mx-iris)}
.task-tree__lines .task-line__add {
  width:100%; margin:2px 0 8px; padding:7px 12px 7px 42px; border:0; border-radius:8px;
  background:transparent; color:var(--mx-iris-soft); font:650 11px var(--mx-sans);
  text-align:left; cursor:pointer;
}
.task-tree__lines .task-line__add:hover { background:rgba(125,141,255,.08); color:var(--mx-iris); }
.task-device-more { display:inline-flex; align-items:center; }
.task-device-more > summary {
  list-style:none; cursor:pointer; padding:5px 11px; border:1px dashed var(--mx-line);
  border-radius:999px; color:var(--mx-dim); font:650 10px var(--mx-sans);
}
.task-device-more > summary::-webkit-details-marker { display:none; }
.task-device-more[open] > summary { border-color:var(--mx-iris); color:var(--mx-iris); }
.task-device-more__list { display:flex; flex-wrap:wrap; gap:6px; padding:6px 0 0; }
.t2-task{padding-left:18px;font-size:12px;color:var(--mx-dim)}
.t2-task span.title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t2-task.active{border-color:rgba(125,141,255,.6);background:rgba(125,141,255,.14);color:var(--mx-ink)}
.t2-status{flex:none;width:7px;height:7px;border-radius:50%;background:var(--mx-faint)}
.t2-status--running{background:var(--mx-ok)}
.t2-status--queued{background:var(--mx-faint)}
.t2-status--blocked{background:var(--mx-danger)}
.task-page--spa .task-line__head,.task-page--spa .task-row-wrap,.task-page--spa .task-line__ops{display:none}
.task-page--spa .task-device-bar { flex:none; min-height:0; margin-bottom:10px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.task-page--spa .task-page__title { display:grid; gap:1px; padding:0; color:inherit; letter-spacing:normal; text-transform:none; }
.task-page--spa .task-page__title > span { color:var(--mx-gold); font-size:9px; font-weight:760; letter-spacing:.15em; text-transform:uppercase; }
.task-page--spa .task-page__title h1 { margin:0; font-size:20px; line-height:1.1; letter-spacing:-.03em; }
.task-page--spa .task-device-tabs { align-items:center; gap:6px; padding:2px; }
.task-page--spa .task-device-tabs [role="tab"] { min-width:0; display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 9px; border:1px solid var(--mx-line); border-radius:999px; background:var(--mx-panel-2); }
.task-page--spa .task-device-tabs [role="tab"]:hover { border-color:var(--mx-line-strong); background:var(--mx-panel-2); }
.task-page--spa .task-device-tabs [role="tab"][aria-selected="true"] { border-color:var(--mx-iris); background:rgba(125,141,255,.13); }
.task-page--spa .task-device-tab__dot { grid-row:auto; }
.task-page--spa .task-device-tab__name { font-size:11.5px; font-weight:690; }
.task-page--spa .task-device-tab__state { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-device-tab__flag { font-size:8.5px; color:var(--mx-danger); border:1px solid rgba(241,113,107,.5); border-radius:999px; padding:1px 6px; white-space:nowrap; }
.task-device-bar__note { flex:none; margin:0; max-width:210px; color:var(--mx-faint); font-size:9.5px; line-height:1.4; text-align:right; }
.task-page--spa .task-partial { flex:none; }

/* Main grid: tree | detail. Both panels manage their own inner scrolling. */
.task-layout--spa { flex:1; min-height:0; grid-template-columns:minmax(360px,min(28vw,440px)) minmax(0,1fr); align-items:stretch; }
.task-page--spa .task-workspace-panel { min-height:0; display:flex; flex-direction:column; }
.task-page--spa .task-workspace-panel > header { flex:none; }
.task-tree__eyebrow { display:block; margin-bottom:2px; color:var(--mx-gold); font-size:9px; font-weight:760; letter-spacing:.15em; text-transform:uppercase; }
.task-page--spa .task-tree__body { flex:1; min-height:0; align-content:start; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; }
.task-page--spa .task-workspace { grid-template-columns:auto minmax(0,1fr) auto; }
.task-tree__legend { flex:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 12px 10px; border-top:1px solid var(--mx-line); color:var(--mx-faint); font-size:9px; }
.task-tree__legend span { display:inline-flex; align-items:center; gap:4px; }
.task-tree__cells { display:inline-flex; gap:2.5px; }
.task-tree__cell { width:8px; height:8px; border-radius:2.5px; background:var(--mx-ok); box-shadow:0 0 5px -1px rgba(100,221,164,.8); }

/* Typed task glyphs (single / team / dag). */
.task-ticon { flex:none; width:16px; height:16px; display:grid; place-items:center; border:1px solid; border-radius:5px; }
.task-ticon svg { width:11px; height:11px; display:block; }
.task-ticon--big { width:22px; height:22px; border-radius:7px; }
.task-ticon--big svg { width:14px; height:14px; display:block; }
.task-ticon--single { color:var(--mx-cyan); border-color:rgba(84,203,216,.5); background:rgba(84,203,216,.1); }
.task-ticon--team { color:var(--mx-gold); border-color:rgba(242,198,90,.5); background:rgba(242,198,90,.1); }
.task-ticon--dag { color:var(--mx-iris-soft); border-color:rgba(125,141,255,.55); background:rgba(125,141,255,.12); }
@keyframes task-spa-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(100,221,164,.5); } 55% { box-shadow:0 0 0 4px rgba(100,221,164,0); } }

/* Nested task lines under the selected Workspace: same markup as the old
   board (hooks unchanged), compacted into tree rows. The rich work-trace of a
   row moves to the embedded detail, so the tree keeps prototype density. */
.task-tree__lines { display:grid; gap:3px; margin:2px 0 8px 6px; padding-left:6px; border-left:1px solid var(--mx-line); min-width:0; max-width:100%; box-sizing:border-box; }
.task-tree__lines .task-board__warn { margin:2px 4px; font-size:9.5px; }
.task-tree__lines .task-line { border:0; border-radius:0; background:transparent; overflow:visible; min-width:0; max-width:100%; }
.task-tree__lines .task-line__head { align-items:center; padding:5px 4px 3px; border-bottom:0; }
.task-tree__lines .task-line__head h3 { font-size:11px; }
.task-tree__lines .task-line__head p { display:none; }
.task-tree__lines .task-line__ops .mx-btn { padding:2px 6px; font-size:8.5px; }
.task-tree__lines .task-row-wrap { grid-template-columns:minmax(0,1fr); border-bottom:0; }
.task-tree__lines .task-row__ops { display:none; }
.task-tree__lines .task-row { gap:7px; grid-template-columns:auto minmax(0,1fr) auto; padding:5px 6px; border:1px solid transparent; border-radius:8px; }
.task-tree__lines .task-row:hover { background:rgba(125,141,255,.07); }
.task-tree__lines .task-row.is-selected { border-color:rgba(125,141,255,.6); background:rgba(125,141,255,.14); }
.task-tree__lines .task-row__body small,
.task-tree__lines .task-row__meta,
.task-tree__lines .task-row__open { display:none; }
.task-tree__lines .task-row__body strong { font-size:11px; font-weight:600; }
.task-tree__lines .task-row__mode { padding:2px 5px; font-size:7.5px; }
.task-tree__lines .task-row__state { font-size:8.5px; }
.task-tree__lines .task-line__empty { padding:4px; text-align:left; }
.task-tree__lines .task-line__add { border-radius:8px; }
.task-tree__addline { width:100%; padding:6px 8px; border:1px dashed var(--mx-line-strong); border-radius:8px; background:transparent; color:var(--mx-iris-soft); font:600 10px var(--mx-sans); text-align:left; cursor:pointer; }
.task-tree__addline:hover { border-color:var(--mx-iris); }
.task-tree__addline:disabled { opacity:.4; cursor:not-allowed; }

/* Embedded typed Task detail (right column). */
.task-detail { min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--mx-line); border-radius:var(--mx-radius); background:var(--mx-panel); box-shadow:var(--mx-shadow); }
.task-detail__head { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--mx-line); }
.task-detail__title { flex:1; min-width:220px; }
.task-detail__title h2 { margin:0; overflow:hidden; font-size:15px; letter-spacing:-.01em; text-overflow:ellipsis; white-space:nowrap; }
.task-detail__title small { display:block; margin-top:2px; overflow:hidden; color:var(--mx-faint); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.task-detail__title small code { color:var(--mx-dim); font-family:var(--mx-mono); }
.task-detail__actions { flex:none; }
.task-detail__meta { flex:none; padding:8px 14px 0; }
.task-detail__body { flex:1; min-height:0; display:flex; flex-direction:column; overflow:auto; padding:14px; scrollbar-width:thin; }
.task-detail__empty { flex:1; display:grid; place-items:center; align-content:center; gap:8px; padding:24px; color:var(--mx-faint); font-size:11px; line-height:1.9; text-align:center; }
.task-detail__empty p { margin:0; }
.task-detail__empty-sub { color:var(--mx-faint); font-size:9.5px; }

/* Team / single board: Leader on top, Worker seats in a row. */
/* Founder 2026-08-19 task #5: conversations read LEFT→RIGHT as a node chain —
   Leader node, a connecting rail, then the worker seats in a horizontal row
   (each seat sits on the shared rail like nodes on an edge). Applies to both
   the Team board and the single-worker board. */
.task-detail__board { flex:1; min-height:0; display:flex; flex-direction:row; align-items:center; gap:0; overflow-x:auto; overflow-y:hidden; padding:6px 2px; }
.task-detail__board-sum { flex:none; max-width:190px; margin:0 14px 0 0; }
.task-detail__board-sum b { display:block; font-size:13px; letter-spacing:-.01em; }
.task-detail__board-sum small { display:block; margin-top:4px; color:var(--mx-faint); font-size:10px; line-height:1.55; }
.task-detail__board-leader { flex:none; align-self:center; min-width:172px; padding:12px 16px; border:1px solid rgba(242,198,90,.55); border-radius:14px; background:linear-gradient(165deg,rgba(242,198,90,.14),rgba(21,26,47,.55)); text-align:center; position:relative; z-index:1; }
.task-detail__board-spine { flex:none; align-self:center; width:34px; height:2px; background:linear-gradient(90deg,rgba(242,198,90,.6),rgba(125,141,255,.55)); }
.task-detail__board-seats { flex:1; display:flex; flex-direction:row; align-items:center; gap:18px; overflow-x:auto; padding:6px 4px; position:relative; }
.task-detail__board-seats::before { content:''; position:absolute; left:0; right:10px; top:50%; height:2px; background:linear-gradient(90deg,rgba(125,141,255,.5),rgba(125,141,255,.14)); }
.task-detail__board-seats > * { position:relative; z-index:1; flex:none; width:176px; }
.task-detail__seat { display:flex; align-items:center; gap:8px; padding:10px; border:1px solid var(--mx-line); border-radius:12px; background:var(--mx-panel-2); }
.task-detail__seat.is-working { border-color:rgba(100,221,164,.55); }
.task-detail__seat.is-empty { opacity:.55; border-style:dashed; }
.task-detail__seat-idx { flex:none; width:22px; color:var(--mx-faint); font:700 10px var(--mx-mono); }
.task-detail__seat-copy { flex:1; min-width:0; }
.task-detail__seat-copy b { display:block; overflow:hidden; font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.task-detail__seat-copy em { display:block; color:var(--mx-faint); font-size:9px; font-style:normal; }
.task-detail__seat-state { flex:none; display:inline-flex; align-items:center; gap:5px; color:var(--mx-faint); font-size:9px; }
.task-detail__seat-state i { width:7px; height:7px; border-radius:50%; background:var(--mx-faint); }
.task-detail__seat.is-working .task-detail__seat-state { color:var(--mx-ok); }
.task-detail__seat.is-working .task-detail__seat-state i { background:var(--mx-ok); animation:task-spa-pulse 1.6s infinite; }

/* Team: Leader → workers visualization. */
.task-detail__team { flex:1; min-height:0; display:flex; align-items:flex-start; overflow:auto; padding:12px 4px; }
.task-detail__leader { flex:none; width:200px; padding:12px; border:1px solid rgba(242,198,90,.55); border-radius:13px; background:linear-gradient(165deg,rgba(242,198,90,.12),rgba(21,26,47,.55)); }
.task-detail__leader-tag { display:block; color:var(--mx-gold); font-size:8.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.task-detail__leader b { display:block; margin-top:3px; font-size:12px; }
.task-detail__leader p { margin:9px 0 0; color:var(--mx-dim); font-size:9.8px; line-height:1.5; }
.task-detail__link { flex:none; width:34px; height:2px; margin-top:56px; background:linear-gradient(90deg,rgba(242,198,90,.6),rgba(125,141,255,.55)); }
.task-detail__workers { flex:1; min-width:240px; position:relative; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; align-content:start; padding-left:38px; }
.task-detail__workers::before { content:""; position:absolute; left:18px; top:9%; bottom:9%; width:2px; border-radius:2px; background:rgba(125,141,255,.4); }
.task-detail__worker { position:relative; display:flex; align-items:center; gap:9px; padding:9px 10px; border:1px solid var(--mx-line); border-radius:11px; background:var(--mx-panel-2); }
.task-detail__workers > .task-detail__worker::before { content:""; position:absolute; left:-20px; top:50%; width:20px; height:2px; background:rgba(125,141,255,.4); }
.task-detail__worker.is-working { border-color:rgba(100,221,164,.55); }
.task-detail__workers > .task-detail__worker:not(.is-working) { opacity:.6; }
.task-detail__worker-copy { flex:1; min-width:0; }
.task-detail__worker-copy b { display:block; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.task-detail__worker-state { flex:none; display:inline-flex; align-items:center; gap:5px; color:var(--mx-faint); font-size:9px; }
.task-detail__worker-state i { width:7px; height:7px; border-radius:50%; background:var(--mx-faint); }
.task-detail__worker.is-working .task-detail__worker-state { color:var(--mx-ok); }
.task-detail__worker.is-working .task-detail__worker-state i { background:var(--mx-ok); animation:task-spa-pulse 1.6s infinite; }

/* DAG: read-only runtime summary; the graph itself stays in the authoritative
   #task-runtime drawer (VL Agent runtime projection), opened from here. */
.task-detail__runtime { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--mx-line); border-radius:11px; }
.task-detail__runtime-bar { flex:none; display:flex; align-items:center; gap:10px; padding:7px 12px; border-bottom:1px solid var(--mx-line); color:var(--mx-dim); font-size:10px; }
.task-detail__runtime-bar code { color:var(--mx-faint); font-family:var(--mx-mono); font-size:9px; }
.task-detail__runtime-spacer { flex:1; }
.task-detail__runtime-body { flex:1; min-height:0; display:grid; place-items:center; align-content:center; gap:12px; padding:24px; text-align:center; background:radial-gradient(circle,rgba(125,141,255,.10) 1px,transparent 1.4px) 0 0/24px 24px,rgba(8,10,19,.45); }
.task-detail__runtime-body p { margin:0; max-width:430px; color:var(--mx-dim); font-size:10.5px; line-height:1.7; }

/* Single worker: worker card + goal + record pointer to the Assistant. */
.task-detail__single { flex:1; min-height:0; display:flex; flex-direction:column; gap:11px; max-width:720px; overflow:auto; }
.task-detail__goal { padding:10px 12px; border:1px solid var(--mx-line-strong); border-radius:10px; background:var(--mx-panel-2); color:var(--mx-dim); font-size:11px; line-height:1.6; }
.task-detail__goal b { display:block; margin-bottom:4px; color:var(--mx-gold); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; }

/* Below the single-screen threshold the SPA falls back to a scrolling single
   column, mirroring the prototype's own media query. */
@media (max-width:1120px) {
  .task-page--spa { height:auto; overflow:visible; }
  .task-layout--spa { grid-template-columns:1fr; }
  .task-page--spa .task-tree__body { max-height:46vh; }
  .task-detail { min-height:420px; }
  .task-device-bar__note { display:none; }
}
.task-detail__goal { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; padding:10px 12px; border:1px solid rgba(125,141,255,.4); border-radius:10px; background:rgba(125,141,255,.08); }
.task-detail__goal b { flex:none; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mx-iris-soft); }
.task-detail__goal span { font-size:12px; color:var(--mx-ink); line-height:1.5; }
/* Add-Task team builder (Founder 2026-08-19 #1) */
.task-mode-choices--row { display:flex; gap:8px; flex-wrap:wrap; }
.task-mode-choices--row label { flex:1 1 0; min-width:110px; }
.team-builder { display:grid; grid-template-columns: 1fr 1.2fr; gap:12px; margin-top:10px; }
.team-builder h4 { margin:0 0 7px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mx-faint); }
.team-builder__cards { display:flex; flex-direction:column; gap:6px; max-height:240px; overflow:auto; padding-right:2px; }
.team-cand { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 10px; border:1px solid var(--mx-line); border-radius:9px; background:var(--mx-panel-2); cursor:grab; text-align:left; color:var(--mx-ink); }
.team-cand:hover { border-color:var(--mx-iris); }
.team-cand b { font-size:11.5px; }
.team-cand small { color:var(--mx-faint); font-size:9.5px; }
.team-builder__slots { display:flex; flex-direction:column; gap:10px; }
.team-slot { border:1px dashed var(--mx-line-strong); border-radius:11px; padding:9px 10px; min-height:64px; }
.team-slot.is-over { border-color:var(--mx-iris); background:rgba(125,141,255,.07); }
.team-slot__hint { margin:6px 0; color:var(--mx-faint); font-size:10.5px; }
.team-slot__body { display:flex; flex-direction:column; gap:8px; }
.team-seat { border:1px solid var(--mx-line); border-radius:10px; background:var(--mx-panel-2); padding:8px 10px; }
.team-seat__head { display:flex; align-items:center; gap:8px; }
.team-seat__head b { font-size:11.5px; }
.team-seat__head small { flex:1; color:var(--mx-faint); font-size:9.5px; }
.team-seat__cfg { display:flex; gap:10px; margin-top:7px; }
.team-seat__cfg label { display:flex; flex-direction:column; gap:3px; font-size:9.5px; color:var(--mx-faint); flex:1; }
.mx-select--small { font-size:11px; padding:4px 6px; }
.dag-flow-picker { margin-top:10px; padding:10px 12px; border:1px dashed var(--mx-line-strong); border-radius:11px; }
.dag-flow-picker h4 { margin:0 0 7px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mx-faint); }
/* Workflow gallery — the empty right pane IS the "pick a workflow" surface */
.wf-gallery { padding:18px 16px; overflow:auto; }
.wf-gallery h3 { margin:0 0 4px; font-size:15px; letter-spacing:-.01em; }
.wf-gallery__hint { margin:0 0 14px; color:var(--mx-faint); font-size:11px; }
.wf-gallery__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.wf-card { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:13px 14px; border:1px solid var(--mx-line); border-radius:12px; background:var(--mx-panel-2); color:var(--mx-ink); text-align:left; cursor:pointer; }
.wf-card:hover { border-color:var(--mx-iris); background:rgba(125,141,255,.08); }
.wf-card__badge { font:650 9px/1 var(--mx-mono); color:var(--mx-iris-soft); border:1px solid rgba(125,141,255,.45); border-radius:5px; padding:3px 6px; }
.wf-card b { font-size:12.5px; }
.wf-card small { color:var(--mx-faint); font-size:10px; line-height:1.5; }
.wf-card--lib .wf-card__badge { color:var(--mx-gold); border-color:rgba(242,198,90,.5); }

/* ---- unified Task detail DAG + workflow-first Add-Task (0.100.66) ---------- */
.task-detail__runtime--dag { border-color:var(--mx-line-strong); }
.task-detail__runtime-bar em { font-style:normal; color:var(--mx-iris-soft); font-size:9px; letter-spacing:.04em; }
.task-detail__runtime-bar span { color:var(--mx-faint); font-size:9.5px; }
.task-detail__dag { flex:1; min-height:280px; display:flex; overflow:hidden; background:#090d13; }
.task-detail__dag .vl-runtime-dag { min-height:0; }
.task-detail__dag-error { margin:auto; padding:18px; color:#ff8b86; font-size:11px; text-align:center; }
.task-detail__dag-note { margin:0; padding:6px 12px; border-bottom:1px solid #593037; color:#ff8b86; font-size:9.5px; }
.task-detail__runtime-foot { flex:none; display:flex; justify-content:flex-end; padding:8px 12px; border-top:1px solid var(--mx-line); }
.wf-gallery__scenario { margin:16px 0 8px; font-size:12px; color:var(--mx-dim); letter-spacing:.02em; }
.wf-card.is-selected { outline:2px solid var(--mx-iris); outline-offset:1px; }
.wf-scenario-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.wf-scenario-tab { padding:5px 11px; border:1px solid var(--mx-line); border-radius:999px; background:transparent; color:var(--mx-dim); font-size:10.5px; cursor:pointer; }
.wf-scenario-tab.is-active { border-color:var(--mx-iris); color:var(--mx-ink); background:rgba(125,141,255,.12); }
.wf-scenario-tab i { font-style:normal; opacity:.7; margin-left:3px; }
.wf-scenario-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; max-height:230px; overflow:auto; }
.task-exec-prefs { display:flex; gap:12px; align-items:flex-end; }
.task-exec-prefs .mx-field { flex:1; margin:0; }
.task-advanced-roster { margin:6px 0; }
.task-advanced-roster > summary { cursor:pointer; color:var(--mx-dim); font-size:11px; padding:4px 0; }
.runtime-authority--plan { color:#9aa8ff; border-bottom-color:#2b3355; }
.runtime-no-actions .runtime-btn { margin-left:10px; }

/* ---- founder 2026-08-20: 5-step wizard + workflow tab menu + runtime diagnosis ---- */
.task-wiz-vlapp { display:inline-flex; align-items:center; gap:6px; margin-left:10px; color:var(--mx-dim); font-size:11px; }
.task-wiz-count { display:inline-flex; align-items:center; gap:8px; margin-left:10px; color:var(--mx-dim); font-size:11px; }
.task-wiz-count .mx-input { width:64px; padding:5px 8px; }
.task-wiz-optional { margin-left:6px; color:var(--mx-faint); font-weight:400; }
.task-seat-config { margin:8px 0; }
.task-seat-config h4, .wf-menu h4 { margin:0 0 6px; font-size:11.5px; color:var(--mx-dim); letter-spacing:.02em; }
.task-seat-row { display:grid; grid-template-columns:130px minmax(0,1.4fr) minmax(0,1fr) 110px; gap:8px; align-items:center; margin:4px 0; }
.task-seat-row b { font-size:11px; color:var(--mx-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wf-menu { margin:10px 0 6px; }
.task-detail__flow-title { color:var(--mx-ink); font-size:10px; }
.runtime-diagnosis { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px; text-align:left; }
.runtime-diagnosis li { display:flex; justify-content:space-between; gap:14px; padding:5px 10px; border:1px solid #202938; border-radius:8px; font-size:10px; color:#748197; }
.runtime-diagnosis li b { color:#d9e2ef; font-weight:600; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.runtime-diagnosis__hint { margin:8px 0 0; color:#667287; font-size:9.5px; line-height:1.6; text-align:left; }

/* --- Task workbench: inline DAG Runtime + conversation context (0.103.0) ----
   Founder 2026-08-20: the drawer is gone. The runtime host mounts INTO the
   detail pane ([data-detail-dag] becomes .task-runtime--inline): same state
   machine, same chrome classes, but static in the flow — no fixed position, no
   slide, no scrim. Node selection lives in the Assistant as context chips. */
.task-runtime--inline { position:static; z-index:auto; right:auto; top:auto; bottom:auto; width:auto; min-height:280px; flex:1; border-left:0; box-shadow:none; animation:none; }
.task-runtime--inline .runtime-head { min-height:34px; padding:3px 10px; }
.task-runtime--inline .runtime-head__title small { margin-top:0; }
.task-runtime--inline .runtime-body { min-height:240px; }
.task-runtime--inline .runtime-unavailable { position:relative; inset:auto; min-height:300px; flex:1; }
.task-runtime--inline .runtime-generate { position:relative; inset:auto; min-height:200px; flex:1; }
.task-runtime--inline .runtime-confirm { position:absolute; }
.runtime-patch-note { margin:0; padding:6px 12px; border-top:1px solid #3b2e14; background:rgba(210,153,34,.08); color:#e3b341; font-size:9.5px; }
.task-detail__seat-summary { color:var(--mx-ink-dim); font-size:9.5px; white-space:nowrap; }
.task-detail__goal [data-dag-provenance] { color:var(--mx-ink-dim); font-size:9px; font-style:normal; white-space:nowrap; }

/* Autopilot switch (Founder B): ON = the Leader's graph changes self-approve. */
.task-autopilot { gap:6px; }
.task-autopilot i { width:22px; height:12px; border-radius:7px; border:1px solid #30363d; background:#21262d; position:relative; display:inline-block; vertical-align:middle; transition:background .14s, border-color .14s; }
.task-autopilot i::after { content:''; position:absolute; top:1px; left:1px; width:8px; height:8px; border-radius:50%; background:#8b949e; transition:transform .14s, background .14s; }
.task-autopilot.is-on i { background:#1f6feb; border-color:#58a6ff; }
.task-autopilot.is-on i::after { transform:translateX(10px); background:#fff; }
.task-autopilot.is-on { color:#e6edf3; border-color:#58a6ff; }

/* Context strip above the Assistant composer: addressee + node chips. */
.task-context-strip { display:flex; flex-direction:column; gap:3px; padding:5px 10px 4px; border-top:1px solid #30363d; background:#0d1117; font-size:10px; }
.task-context-strip[hidden] { display:none; }
.task-context__row { display:flex; align-items:center; flex-wrap:wrap; gap:4px; min-height:20px; }
.task-context__label { color:#8b949e; font-size:9px; letter-spacing:.06em; text-transform:uppercase; margin-right:2px; }
.task-context__chip { height:18px; padding:0 7px; border:1px solid #30363d; border-radius:5px; background:#161b22; color:#8b949e; font:600 10px var(--mx-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); cursor:pointer; }
.task-context__chip:hover { border-color:#58a6ff; color:#e6edf3; }
.task-context__chip.is-on { background:#58a6ff; border-color:#58a6ff; color:#fff; }
.task-context__node { display:inline-flex; align-items:center; height:18px; border:1px solid rgba(88,166,255,.6); border-radius:5px; background:rgba(88,166,255,.12); color:#79c0ff; overflow:hidden; max-width:220px; }
.task-context__node-jump { height:100%; padding:0 6px; border:0; background:transparent; color:inherit; font:600 10px var(--mx-mono, ui-monospace, Menlo, monospace); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-context__node-x { height:100%; padding:0 5px; border:0; border-left:1px solid rgba(88,166,255,.35); background:transparent; color:inherit; font-size:11px; cursor:pointer; }
.task-context__node-x:hover, .task-context__node-jump:hover { background:rgba(88,166,255,.18); }
.task-context__hint { color:#6e7681; font-size:9.5px; }
.task-context__clear { margin-left:auto; border:0; background:transparent; color:#8b949e; font-size:9.5px; cursor:pointer; text-decoration:underline dotted; }

/* Node card pinned in the Assistant (replaces the drawer inspector). */
.task-node-card { display:grid; gap:4px; font-size:10.5px; }
.task-node-card__row { display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-bottom:1px dashed #30363d; }
.task-node-card__row span { color:#8b949e; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.task-node-card__row b { color:#e6edf3; font-weight:600; font-family:var(--mx-mono, ui-monospace, Menlo, monospace); max-width:65%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-node-card__status--running, .task-node-card__status--growing { color:#f0883e !important; }
.task-node-card__status--done, .task-node-card__status--completed { color:#3fb950 !important; }
.task-node-card__status--error, .task-node-card__status--failed { color:#f85149 !important; }
.task-node-card__status--waiting-human { color:#d29922 !important; }
.task-node-card__note { margin:2px 0 0; color:#8b949e; font-size:9.5px; line-height:1.5; }
.task-node-card__actions { display:flex; gap:6px; margin-top:4px; }
.task-node-card__btn { height:22px; padding:0 9px; border:1px solid #30363d; border-radius:6px; background:#21262d; color:#c9d1d9; font:600 10px var(--mx-sans, -apple-system, sans-serif); cursor:pointer; }
.task-node-card__btn:hover { border-color:#58a6ff; color:#fff; }
.task-node-card__btn:disabled { opacity:.5; cursor:progress; }

/* Graph-patch proposal card body. */
.task-patch-card__summary { font-size:11px; color:#e6edf3; margin-bottom:4px; }
.task-patch-card__ops { margin:0; padding:0 0 0 2px; list-style:none; display:grid; gap:2px; }
.task-patch-card__ops li { font:10px var(--mx-mono, ui-monospace, Menlo, monospace); color:#c9d1d9; padding:2px 6px; border-left:2px solid #d29922; background:rgba(210,153,34,.06); }
/* Inline runtime: the Task page already prints the title/meta rows, so an
   empty toolbar (no commands yet — plan projection / unbound) collapses and the
   authority strip alone carries the binding facts. */
.task-runtime--inline .runtime-head:not(:has(.runtime-controls button, .runtime-status)) { display:none; }
/* Inline toolbar is LEFT-aligned like VLC's editor toolbar: the floating
   Assistant lives at the right edge and must never sit on top of Approve/Run. */
.task-runtime--inline .runtime-head { justify-content:flex-start; }
.task-runtime--inline .runtime-head__title { flex:0 1 auto; max-width:42%; }
.task-runtime--inline .runtime-controls { flex-wrap:wrap; }