/* ============================================================================
   DIVONCI WORLD — ARSENAL  ·  Capability registry surfaces
   Layers on tokens.css + system.css + app.css. Category accents are oklch
   hues injected per-element via --ax; everything else reads the core tokens.
   ========================================================================== */

/* ---- command-room sub navigation -------------------------------------- */
.ars-3pane { display: grid; grid-template-columns: 230px 1fr 322px; gap: var(--s-6); align-items: start; --ars-bar-h: 74px; }
.ars-3pane > .ars-catpane,
.ars-3pane > .ins-col {
  position: sticky; top: calc(var(--ars-bar-h) + var(--s-5)); align-self: start;
  max-height: calc(100vh - var(--header-h) - var(--ars-bar-h) - var(--s-8));
  overflow-y: auto; overflow-x: hidden;
}
@media (max-width: 1320px){ .ars-3pane { grid-template-columns: 200px 1fr; } .ars-3pane > .ins-col { display: none; } }
@media (max-width: 760px){
  .ars-3pane { grid-template-columns: 1fr; }
  .ars-3pane > .ars-catpane, .ars-3pane > .ins-col { position: static; max-height: none; overflow: visible; }
}

.ars-tabs { display: flex; gap: 4px; flex-wrap: wrap; }

/* sticky search + type-filter toolbar (Tool Library) */
.ars-searchbar {
  position: sticky; top: 0; z-index: 25;
  margin: 0 calc(-1 * var(--s-7)) var(--s-6);
  padding: var(--s-3) var(--s-7);
  background: color-mix(in srgb, var(--obsidian) 82%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--hairline-2);
}
.ars-searchbar > .panel { margin: 0; }

/* Capabilities tab: fill viewport; panel headers fixed, lists scroll internally */
.screen.ars-fill { height: 100%; display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--s-7); }
.screen.ars-fill .screen-head { flex: none; }
.screen.ars-fill .ars-tabs { flex: none; }
.screen.ars-fill .cap-view { flex: 1; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
.screen.ars-fill .cap-view > .panel { min-height: 0; display: flex; flex-direction: column; }
.screen.ars-fill .cap-view > .panel > .phead { flex: none; }
.screen.ars-fill .cap-view > .panel > .pbody { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
@media (max-width: 1280px){
  .screen.ars-fill { height: auto; display: block; overflow: visible; }
  .screen.ars-fill .cap-view > .panel > .pbody { overflow: visible; }
}

/* Agent Loadout: agency card pins to top of page; left column scrolls with the
   page, right column (legend + workflows) stays put beneath the card. */
.loadout-view > .panel { position: sticky; top: var(--s-5); z-index: 20; box-shadow: 0 calc(-1 * var(--s-5)) 0 var(--obsidian), var(--shadow-2), var(--shadow-inset); }
.loadout-view .ld-right { position: sticky; top: calc(104px + var(--s-5)); align-self: start; z-index: 5; }
@media (max-width: 1280px){
  .loadout-view .ld-right { position: static; top: auto; }
}
.ars-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 14px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--hairline-2); color: var(--ink-3);
  transition: all var(--dur-fast) var(--ease-out);
}
.ars-tab .glyph { width: 14px; height: 14px; }
.ars-tab:hover { color: var(--ink); border-color: var(--hairline-3); }
.ars-tab.on {
  color: var(--ink); border-color: color-mix(in srgb, var(--violet-bright) 60%, transparent);
  background: linear-gradient(180deg, var(--active-dim), transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet-bright) 22%, transparent);
}
.ars-tab .count { font-size: 9.5px; color: var(--ink-4); }
.ars-tab.on .count { color: var(--violet-ink); }

/* ---- monogram tool sigil ---------------------------------------------- */
.tsig {
  flex: none; display: grid; place-items: center; position: relative;
  border-radius: 10px; font-family: var(--font-display); font-weight: 600;
  background:
    radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--ax) 42%, transparent), transparent 72%),
    var(--panel-3);
  border: 1px solid color-mix(in srgb, var(--ax) 46%, var(--hairline-2));
  color: #fff; letter-spacing: -0.02em; overflow: hidden;
}
.tsig::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }

/* ---- tool library grid ------------------------------------------------- */
.ars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: var(--s-5); }
.tcard {
  text-align: left; cursor: pointer; padding: var(--s-5); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s-4);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.tcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ax), transparent); opacity: 0.7;
}
.tcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ax) 45%, var(--hairline-3)); box-shadow: var(--shadow-3); }
.tcard.sel { border-color: color-mix(in srgb, var(--ax) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ax) 40%, transparent), var(--shadow-2); }
.tcard .thead { display: flex; align-items: center; gap: var(--s-4); }
.tcard .tname { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; line-height: 1.15; }
.tcard .tvendor { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; }
.tcard .tcaps { display: flex; flex-wrap: wrap; gap: 5px; }
.tcard .tfoot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--s-3); }

/* type pill + cap chip */
.typill {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; color: var(--ax);
  background: color-mix(in srgb, var(--ax) 13%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--ax) 32%, transparent);
}
.capchip {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: var(--r-xs); color: var(--ink-2);
  background: var(--panel-2); border: 1px solid var(--hairline-2);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.capchip .glyph { width: 11px; height: 11px; color: var(--ink-4); }
.capchip.more { color: var(--ink-4); }

/* perm dots */
.permdots { display: inline-flex; gap: 4px; align-items: center; }
.permdot { width: 7px; height: 7px; border-radius: 99px; background: var(--ink-4); }
.permdot.on { background: var(--state-clear); box-shadow: 0 0 6px var(--state-clear); }
.permdot.admin.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }

/* ---- category filter rail --------------------------------------------- */
.catrail { display: flex; flex-direction: column; gap: 2px; }
.catbtn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; color: var(--ink-2); font-size: 12.5px; transition: all var(--dur-fast);
}
.catbtn .glyph { width: 15px; height: 15px; color: var(--ink-4); flex: none; }
.catbtn .cn { flex: 1; }
.catbtn .cc { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.catbtn:hover { background: var(--panel-2); color: var(--ink); }
.catbtn.on { background: var(--panel-2); color: var(--ink); border-color: var(--hairline-2); }
.catbtn.on .glyph { color: var(--ax); }
.catbtn.on::before { content: ""; width: 3px; height: 16px; border-radius: 99px; background: var(--ax); box-shadow: 0 0 8px var(--ax); margin: -2px 0; }

/* ---- inspector drawer -------------------------------------------------- */
.ins-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--hairline); }
.ins-row .glyph { width: 14px; height: 14px; color: var(--ax); flex: none; }
.ins-agent { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--hairline); }
.ins-agent img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex: none; }

/* ---- capability matrix ------------------------------------------------- */
.capgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
.capnode {
  cursor: pointer; text-align: left; padding: 14px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1px solid var(--hairline-2);
  display: flex; flex-direction: column; gap: 10px; transition: all var(--dur-fast);
}
.capnode:hover { border-color: var(--hairline-3); background: var(--panel-3); transform: translateY(-1px); }
.capnode.on { border-color: color-mix(in srgb, var(--violet-bright) 60%, transparent); background: linear-gradient(180deg, var(--active-dim), var(--panel-2)); box-shadow: var(--glow-violet); }
.capnode .ci { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-3); border: 1px solid var(--hairline-2); color: var(--violet-ink); }
.capnode.on .ci { color: #fff; background: color-mix(in srgb, var(--violet-bright) 30%, var(--panel-3)); }
.capnode .cn { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.capnode .ct { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }

/* ---- agent loadout ----------------------------------------------------- */
.loadhdr { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-6); }
.loadhdr img { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; flex: none; border: 1.5px solid color-mix(in srgb, var(--ac) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--ac) 35%, transparent); }
.agentpick { display: flex; gap: 8px; flex-wrap: wrap; }
.agentpick button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 99px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; background: var(--panel-2); border: 1px solid var(--hairline-2); color: var(--ink-3); transition: all var(--dur-fast); }
.agentpick button img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.agentpick button:hover { color: var(--ink); border-color: var(--hairline-3); }
.agentpick button.on { color: var(--ink); }

/* ---- workflow builder ---------------------------------------- */
.wfwrap { display: grid; grid-template-columns: 1fr 280px; gap: var(--s-6); align-items: start; }
@media (max-width: 1180px){ .wfwrap { grid-template-columns: 1fr; } }

/* ===== Langflow-style node canvas ===== */
.flowcanvas {
  position: relative; height: 660px; border-radius: var(--r-lg); overflow: hidden;
  background:
    radial-gradient(900px 500px at 70% -10%, rgba(139,92,246,0.10), transparent 60%),
    var(--void);
  border: 1px solid var(--hairline-2); box-shadow: var(--shadow-2), var(--shadow-inset);
  cursor: grab; touch-action: none; user-select: none;
}
.flowcanvas.panning { cursor: grabbing; }
.flowcanvas::before {
  content: ""; position: absolute; inset: -2000px; pointer-events: none;
  background-image: radial-gradient(rgba(176,148,255,0.13) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
.flowpan { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.flowedges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; z-index: 1; }
.edge-hit { pointer-events: stroke; cursor: pointer; }
.edge-hit:hover { stroke: rgba(205,182,255,0.10); }
.edge.live { stroke-dasharray: 7 7; stroke-opacity: 1 !important; stroke-width: 2.6; animation: edgeflow 0.45s linear infinite; }
@keyframes edgeflow { to { stroke-dashoffset: -28; } }

/* node lit while a signal is passing through it */
.flownode.running {
  border-color: color-mix(in srgb, var(--state-active) 80%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--state-active) 55%, transparent), 0 0 28px color-mix(in srgb, var(--state-active) 45%, transparent), var(--shadow-3) !important;
}
.flownode.running::before { opacity: 1 !important; background: linear-gradient(90deg, transparent, var(--state-active), transparent) !important; }
.fn-run.on { color: #fff; border-color: color-mix(in srgb, var(--state-active) 70%, transparent); background: color-mix(in srgb, var(--state-active) 55%, var(--panel-3)); animation: runpulse 0.5s ease-in-out infinite alternate; }
@keyframes runpulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--state-active) 50%, transparent); } to { box-shadow: 0 0 9px 1px color-mix(in srgb, var(--state-active) 60%, transparent); } }

/* persistent "ran" marker so a completed run is visible at a glance */
.flownode.ran { border-color: color-mix(in srgb, var(--state-clear) 50%, var(--hairline-2)); }
.flownode.ran::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-clear) 30%, transparent); }
.fn-ran { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.03em; color: var(--state-clear); padding: 2px 6px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--state-clear) 38%, transparent); background: color-mix(in srgb, var(--state-clear) 12%, transparent); white-space: nowrap; flex: none; }
.fn-ran .glyph { width: 9px; height: 9px; color: var(--state-clear); }
.fn-ran.live { color: var(--state-active); border-color: color-mix(in srgb, var(--state-active) 45%, transparent); background: color-mix(in srgb, var(--state-active) 14%, transparent); }
.fn-ran.live .d { width: 6px; height: 6px; border-radius: 99px; background: var(--state-active); animation: liveBlink 0.8s infinite; }

/* toolbar run status pill */
.runstat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--hairline-2); white-space: nowrap; }
.runstat.run { color: var(--state-active); border-color: color-mix(in srgb, var(--state-active) 40%, transparent); background: color-mix(in srgb, var(--state-active) 12%, transparent); }
.runstat.run .d { width: 7px; height: 7px; border-radius: 99px; background: var(--state-active); animation: liveBlink 0.8s infinite; }
.runstat.done { color: var(--state-clear); border-color: color-mix(in srgb, var(--state-clear) 40%, transparent); background: color-mix(in srgb, var(--state-clear) 12%, transparent); }
.runstat.done .glyph { color: var(--state-clear); }

.flownode {
  position: absolute; width: 250px; z-index: 2;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--hairline-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), var(--shadow-inset);
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.flownode.sel { border-color: color-mix(in srgb, var(--ax) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ax) 45%, transparent), var(--shadow-3); }
.flownode::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--ax), transparent); opacity: 0.8; }

.fn-head { display: flex; align-items: center; gap: 9px; padding: 11px 12px 10px; border-bottom: 1px solid var(--hairline); cursor: grab; }
.fn-head:active { cursor: grabbing; }
.fn-title { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-ms { font-family: var(--font-mono); font-size: 10px; color: var(--state-clear); }
.fn-run { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: var(--ink-3); border: 1px solid var(--hairline-2); background: var(--panel-3); flex: none; }
.fn-desc { padding: 9px 12px; font-size: 11px; line-height: 1.45; color: var(--ink-3); border-bottom: 1px solid var(--hairline); }
.fn-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 11px; }
.fn-flabel { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.fn-flabel .i { width: 11px; height: 11px; border-radius: 99px; border: 1px solid var(--ink-4); display: inline-grid; place-items: center; font-size: 7px; color: var(--ink-4); font-family: var(--font-ui); }
.fn-ctrl {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--graphite); border: 1px solid var(--hairline-2); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 12px; color: var(--ink-2); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.fn-ctrl.locked { color: var(--ink-4); }
.fn-ctrl .glyph { width: 13px; height: 13px; color: var(--ink-4); flex: none; }
.fn-ctrl .ctext { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-ctrl img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; flex: none; }

/* clickable tool / agent pickers + their dropdown menus */
.fn-field { position: relative; }
.fn-ctrl.pick { cursor: pointer; text-align: left; transition: border-color var(--dur-fast), background var(--dur-fast); }
.fn-ctrl.pick:hover { border-color: color-mix(in srgb, var(--ax) 55%, var(--hairline-3)); background: var(--panel-2); }
.fn-ctrl.pick.open { border-color: color-mix(in srgb, var(--ax) 70%, transparent); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px color-mix(in srgb, var(--ax) 35%, transparent); }
.fn-ctrl.pick .chev { margin-left: auto; transition: transform var(--dur-fast); }
.fn-ctrl.pick.open .chev { transform: rotate(270deg) !important; }
button.fn-run { padding: 0; cursor: pointer; transition: all var(--dur-fast); }
button.fn-run:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ax) 60%, transparent); background: color-mix(in srgb, var(--ax) 20%, var(--panel-3)); }

.fn-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 50;
  max-height: 224px; overflow-y: auto; padding: 5px;
  background: var(--panel-3); border: 1px solid var(--hairline-3); border-radius: var(--r-md);
  box-shadow: var(--shadow-3); scrollbar-width: thin;
}
.fn-menu-cat { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); padding: 7px 8px 4px; }
.fn-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  padding: 7px 8px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--ink-2);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.fn-menu-item:hover { background: var(--panel-2); color: var(--ink); }
.fn-menu-item.on { background: color-mix(in srgb, var(--violet-bright) 16%, transparent); color: var(--ink); }
.fn-menu-item img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; flex: none; }
.fn-menu-item .mn { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-menu-item .mt { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-4); flex: none; }

.flownode.sel { z-index: 5; }
.flownode.menuopen { z-index: 30; }
/* brief "loaded / ready" pulse when a workflow is opened from a Live-Ops run */
.flownode.flash { animation: nodeflash 1.5s var(--ease-out); }
@keyframes nodeflash {
  0%, 30% { border-color: color-mix(in srgb, var(--violet-bright) 80%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet-bright) 55%, transparent), 0 0 26px color-mix(in srgb, var(--violet-bright) 45%, transparent); }
  100% { }
}
.fn-toggle { width: 30px; height: 17px; border-radius: 99px; background: color-mix(in srgb, var(--ax) 70%, transparent); position: relative; flex: none; }
.fn-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 99px; background: #fff; }

.fn-prow { position: relative; }
.fn-orow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative;
  padding: 9px 12px; border-top: 1px solid var(--hairline); margin-top: 2px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2);
}
.fn-orow .ol { display: inline-flex; align-items: center; gap: 6px; }
.fn-orow .ol .glyph { width: 13px; height: 13px; color: var(--ink-4); }

.port {
  position: absolute; width: 13px; height: 13px; border-radius: 99px; z-index: 4;
  border: 2.5px solid var(--panel); box-shadow: 0 0 8px var(--pc);
  background: var(--pc); transition: transform var(--dur-fast); cursor: crosshair;
}
.port.in  { left: -7px; top: 50%; transform: translateY(-50%); }
.port.out { right: -7px; top: 50%; transform: translateY(-50%); }
.flownode .port:hover { transform: translateY(-50%) scale(1.25); }

.flow-ctl { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 6; }
.flow-ctl button { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(22,19,31,0.85); backdrop-filter: blur(8px); border: 1px solid var(--hairline-2); color: var(--ink-2); cursor: pointer; font-family: var(--font-mono); font-size: 15px; transition: all var(--dur-fast); }
.flow-ctl button:hover { color: var(--ink); border-color: var(--hairline-3); background: var(--panel-3); }
.flow-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 6; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); background: rgba(22,19,31,0.85); backdrop-filter: blur(8px); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); padding: 6px 10px; }
.flow-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); pointer-events: none; }

/* legacy vertical pipe (kept for reference) */
.pipe { display: flex; flex-direction: column; gap: 0; padding: var(--s-7) var(--s-6); }
.pstage { display: flex; align-items: stretch; gap: var(--s-5); }
.pstage .rail { display: flex; flex-direction: column; align-items: center; width: 34px; flex: none; }
.pstage .knot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--panel-3); border: 1px solid color-mix(in srgb, var(--sx) 55%, var(--hairline-2)); color: var(--sx); position: relative; z-index: 2; }
.pstage .wire { flex: 1; width: 2px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--violet) 60%, transparent) 0 5px, transparent 5px 11px); }
.pstage.dragover .knot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet-bright) 26%, transparent); }
.pcard2 {
  flex: 1; margin-bottom: var(--s-5); padding: 13px 15px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1px solid var(--hairline-2);
  display: flex; align-items: center; gap: var(--s-5); cursor: grab; transition: all var(--dur-fast);
}
.pcard2:hover { border-color: var(--hairline-3); background: var(--panel-3); }
.pcard2.dragging { opacity: 0.45; }
.pcard2 .stagename { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.pcard2 .stagenum { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.pcard2 .stagenote { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.pcard2 .grip { color: var(--ink-4); display: flex; flex-direction: column; gap: 3px; flex: none; }
.pcard2 .grip i { width: 12px; height: 2px; border-radius: 2px; background: currentColor; display: block; }
.pcard2 .assignee { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.pcard2 .assignee img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }

/* palette */
.palette { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.palette-item { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--hairline); cursor: grab; transition: all var(--dur-fast); }
.palette-item:hover { border-color: color-mix(in srgb, var(--ax) 50%, var(--hairline-3)); background: var(--panel-3); }
.palette-item:active { cursor: grabbing; }
.palette-item .pn { font-size: 12px; font-weight: 500; flex: 1; }
.palette-item .pt { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); }

/* ---- live ops feed ----------------------------------------------------- */
.opsrow { display: grid; grid-template-columns: 74px 30px 1fr 150px 96px 84px; gap: var(--s-5); align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--hairline); }
.opsrow.head { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); border-bottom: 1px solid var(--hairline-2); }
.opsrow .t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.opsrow .actor { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.opsrow .actor img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none; }
.opsrow .act { font-size: 13px; color: var(--ink); }
.opsrow .toolref { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); min-width: 0; }
.opsrow .num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: right; }
@media (max-width: 1080px){ .opsrow { grid-template-columns: 64px 26px 1fr 90px; } .opsrow .toolref, .opsrow .num.cost { display: none; } }

.runbar { height: 4px; border-radius: 99px; background: var(--graphite); overflow: hidden; margin-top: 5px; }
.runbar > i { display: block; height: 100%; border-radius: 99px; animation: runGrow 1.1s var(--ease-out) both; }
@keyframes runGrow { from { width: 0; } }

/* workflow runs + expandable run detail in Live Operations */
.opsrow .ops-chev { color: var(--ink-4); transition: transform var(--dur-fast); vertical-align: -2px; margin-left: 4px; }
.opsrow.open { background: var(--panel-2); }
.opsrow.wf { border-left: 2px solid color-mix(in srgb, var(--violet-bright) 55%, transparent); }
.ops-wftag { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-ink); padding: 2px 6px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--violet-bright) 38%, transparent); background: color-mix(in srgb, var(--violet-bright) 12%, transparent); margin-left: 6px; white-space: nowrap; }
.ops-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); padding: 13px 16px; border-bottom: 1px solid var(--hairline); background: var(--graphite); }
.ops-hint .glyph { color: var(--violet-ink); flex: none; }
.ops-hint b { color: var(--ink); }
.ops-detail { padding: 13px 16px 15px; background: var(--graphite); border-bottom: 1px solid var(--hairline); }
.ops-detail-h { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px; }
.ops-stages { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; }
.ops-stage { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--hairline); }
.ops-stage-n { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); background: var(--graphite); border: 1px solid var(--hairline-2); }
.ops-stage-main { flex: 1; min-width: 0; }
.ops-stage-main b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-stage-main span { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); }
.ops-artifact { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); padding: 4px 9px; border-radius: 99px; border: 1px solid var(--hairline-2); background: var(--graphite); flex: none; }
.ops-artifact .glyph { color: var(--violet-ink); }
.ops-stage-st { font-family: var(--font-mono); font-size: 9.5px; flex: none; }
.ops-tooldetail { display: flex; flex-direction: column; gap: 9px; }
.ops-tooldetail-act { font-size: 12.5px; color: var(--ink); }
.ops-tool-meta { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }

/* small mono key/value stat strip */
.statstrip { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.statstrip .it { display: flex; flex-direction: column; gap: 3px; }
.statstrip .it b { font-family: var(--font-mono); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.statstrip .it span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); }

@keyframes liveBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.livedot { width: 7px; height: 7px; border-radius: 99px; background: var(--state-clear); box-shadow: 0 0 8px var(--state-clear); animation: liveBlink 1.6s var(--ease-inout) infinite; }
body.no-motion .livedot { animation: none; }