/* Bellatrix Agentix operator console.
   The Bellatrix design system as it ships in Prism Process and the Marine
   Underwriting workspace: tokens.css names the colours, ba-ui.css brings the
   window manager, the enhanced tables, the drawer and the toasts, and this
   file is the shell and the primitives the console pages are written in.
   Every value below is a token. There is no hex literal in this file. */

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.55 var(--sans)}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}

/* Every single line control shares one height so a row of buttons, links styled
   as buttons, inputs and selects sits on one baseline: 34px in forms and page
   headers, 28px inside table rows, packs and toolbars. */
:root{--control-h:34px;--control-h-sm:28px;--control-h-top:30px}

/* ------------------------------------------------------------------ topbar */
/* The brand block is exactly as wide as the sidebar (214px, padding included), so the separator
   after it runs down into the sidebar's right border and the two borders cross the topbar's
   bottom line at one point. */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 20px 10px 14px;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.brand{cursor:pointer;display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  white-space:nowrap;flex:0 0 200px;width:200px;box-sizing:border-box;overflow:hidden;padding:2px 0;margin-right:-14px}
.brand:hover{text-decoration:none}
.brand img{height:60px;width:60px;max-height:60px;max-width:60px;flex:0 0 60px;
  object-fit:contain;object-position:center;display:block}
.brand .wordmark{display:flex;flex-direction:column;justify-content:center;gap:1px;line-height:1}
.brand .house{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.032em;
  line-height:1.12;color:var(--ink)}
.brand .product{font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:-.005em;
  line-height:1.15;text-transform:uppercase;color:var(--slate)}
html[data-theme="dark"] .brand img{filter:invert(1) hue-rotate(180deg) brightness(1.08)}

/* what the screen below the rail operates on */
/* Stretched through the topbar's padding so its left border is continuous with the sidebar's
   right border below; the text starts 36px in, where the text of the tiles below starts
   (20px view padding plus 16px tile padding). */
.topbar .working{display:inline-flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 20px 10px 36px;
  margin:-10px 0;align-self:stretch;border-left:1px solid var(--line);min-width:0;text-decoration:none;color:var(--ink);font-size:inherit}
.working:hover{text-decoration:none}
.working .w-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);font-weight:700}
.working .w-v{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.working.empty .w-v{color:var(--muted-2);font-weight:600}
.working .w-v .sep{color:var(--muted-2);padding:0 6px;font-weight:400}

.icon-btn{width:var(--control-h-top);height:var(--control-h-top);min-height:var(--control-h-top);margin:0;padding:0;border-radius:var(--radius-sm);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer}
.icon-btn:hover{background:var(--bg);color:var(--ink);border-color:var(--line-strong)}
.icon-btn svg{width:15px;height:15px;display:block}
.icon-btn .ico-sun{display:none}
html[data-theme="dark"] .icon-btn .ico-sun{display:block}
html[data-theme="dark"] .icon-btn .ico-moon{display:none}
.spacer{flex:1}
.pill{font-size:12px;color:var(--muted);background:var(--bg);padding:0 10px;border-radius:20px;box-sizing:border-box;
  display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);white-space:nowrap;text-decoration:none}
.topbar .pill{height:var(--control-h-top)}
a.pill:hover{text-decoration:none;border-color:var(--line-strong);color:var(--ink)}
.pill.ok{color:var(--green);background:var(--green-bg);border-color:var(--green-bg)}
.pill.warn{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-bg)}
.pill.bad{color:var(--red);background:var(--red-bg);border-color:var(--red-bg)}
.pill.accent{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-soft)}
.pill svg{width:13px;height:13px}
.topbar form.signout{margin:0}
.topbar form.signout button{margin:0;padding:0 12px;min-height:var(--control-h-top);font-size:12px;border-radius:20px;
  border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;font-family:var(--sans)}
.topbar form.signout button:hover{color:var(--ink);border-color:var(--line-strong)}
/* A button: the generic button margin and minimum height are reset so it sits on the pills' line. */
.search-btn{display:inline-flex;align-items:center;gap:8px;height:var(--control-h-top);min-height:var(--control-h-top);margin:0;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--bg);color:var(--muted);cursor:pointer;font:13px var(--sans);min-width:220px;box-sizing:border-box}
.search-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.search-btn svg{width:14px;height:14px}
.search-btn kbd{margin-left:auto;font:11px var(--mono);color:var(--muted-2);border:1px solid var(--line);
  border-radius:4px;padding:0 5px;background:var(--surface)}

/* ------------------------------------------------------------------- shell */
.shell{display:flex;align-items:stretch;min-height:calc(100vh - var(--topbar-h))}
.sidebar{width:214px;flex:0 0 214px;background:var(--surface);border-right:1px solid var(--line);
  padding:10px 10px 12px;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow:auto;
  display:flex;flex-direction:column}
.sidebar .nav-main{flex:1 1 auto;min-height:0;overflow:auto}
.sidebar .nav-foot{flex:0 0 auto;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.sidebar .navitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;
  background:transparent;color:var(--muted);padding:9px 12px;border-radius:var(--radius-sm);
  cursor:pointer;font:600 14px var(--sans);margin-bottom:2px;text-decoration:none}
.sidebar .navitem:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.sidebar .navitem.active{background:var(--accent-soft);color:var(--accent-ink)}
.sidebar .navitem .ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.sidebar .navitem .count{margin-left:auto;font:600 11px var(--mono);color:var(--muted-2)}
.sidebar .navitem.active .count{color:var(--accent-ink)}
.sidebar .navitem .count.warn{color:var(--amber)}
.sidebar .navitem .count.bad{color:var(--red)}
.sidebar .navitem.disabled{color:var(--muted-2);cursor:not-allowed}
.nic{width:17px;height:17px;display:block;flex:0 0 17px}
.sidebar .navsec{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);
  margin:14px 10px 6px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .navsec:first-child,.sidebar .navpref:empty+.navsec{margin-top:4px}
.sidebar .navpref:empty{display:none}
.sidebar .prefrow{position:relative}
.sidebar .navitem.pref{align-items:flex-start;padding-right:28px}
.sidebar .navitem.pref .ic{padding-top:1px}
.sidebar .navitem.pref .nic.star-on{fill:currentColor;width:15px;height:15px;flex-basis:15px;margin:1px}
.sidebar .navlbl{min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere}
.sidebar .navsub{font:500 11px/1.3 var(--sans);color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.sidebar .navitem.pref.active .navsub{color:var(--accent-ink);opacity:.8}
.sidebar .prefrow .axstar.on{opacity:0}
.sidebar .prefrow:hover .axstar.on,.sidebar .prefrow .axstar:focus-visible{opacity:.85}

/* environment tile, the sidebar twin of the platform's cost tile */
.env-tile{display:block;width:100%;background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-align:left;font-family:inherit}
.env-tile .ct-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.env-tile .ct-amount{font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);margin-top:2px;line-height:1.2;text-transform:capitalize}
.env-tile .ct-sub{font-size:11px;color:var(--muted-2);margin-top:2px;word-break:break-all}
.env-tile.staging{border-color:var(--amber);background:linear-gradient(180deg,var(--surface) 0%,var(--amber-bg) 100%)}
.env-tile.staging .ct-amount{color:var(--amber)}

/* -------------------------------------------------------------- main area */
.mainarea{flex:1;min-width:0;display:flex;align-items:stretch}
.mainarea>main.view{flex:1 1 auto;min-width:0}

/* ---------------------------------------------------- vertical menus (axnav.js)
   Beside the rail: the page's tabs, then a drawer with the tiles of the tab
   chosen. Same entries, same highlight as the rail. */
.axnav{flex:0 0 auto;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow:auto;
  padding:10px 8px 24px;box-sizing:border-box;border-right:1px solid var(--line)}
.axnav[hidden]{display:none}
.axl1{width:200px;background:var(--surface)}
.axl2{width:212px;background:var(--surface-2)}
.axl2.ax-enter{animation:axSlide .2s ease-out}
@keyframes axSlide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.axrow{position:relative;margin-bottom:2px}
.axitem{display:flex;align-items:center;gap:7px;padding:8px 28px 8px 12px;border-radius:var(--radius-sm);color:var(--muted);
  font:600 13.5px/1.3 var(--sans);text-decoration:none;flex-wrap:wrap;row-gap:4px;overflow-wrap:break-word}
.axitem:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.axitem.active{background:var(--accent-soft);color:var(--accent-ink)}
.axitem .tcount{margin-left:auto;flex:0 0 auto;font:600 10.5px var(--mono);color:var(--muted-2);background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:0 6px;line-height:16px;white-space:nowrap}
.axitem.active .tcount{color:var(--accent-ink)}
.axitem .tab-warn-dot{flex:0 0 auto;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);
  box-shadow:0 0 6px rgba(156,43,43,.55);animation:warnPulse 1.4s infinite}
@keyframes warnPulse{0%,100%{opacity:1}50%{opacity:.5}}
.axsec{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);margin:14px 10px 6px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.axsec:first-child{margin-top:4px}
/* The star: small and quiet, shown on hover; a starred place keeps it, filled. */
.axstar{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:20px;height:20px;min-height:0;margin:0;padding:0;border:0;
  border-radius:4px;background:transparent;color:var(--muted-2);opacity:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .12s}
.axstar svg{width:11px;height:11px;display:block}
.axrow:hover .axstar,.prefrow:hover .axstar,.axstar:focus-visible{opacity:.75}
.axstar:hover{opacity:1;color:var(--ink);background:transparent}
.axstar.on{opacity:1;color:var(--accent-ink)}
.axstar.on svg{fill:currentColor}
/* A section chosen: the others are put away, and a grid left with one tile gives it the width. */
[data-ax-off]{display:none!important}
.grid[data-ax-solo],.packs[data-ax-solo]{grid-template-columns:1fr}
html.ax-js:not(.ax-ready) .mainarea>main.view{visibility:hidden}
/* Phones and narrow windows: the menus fold behind one button above the content. */
.axswitch{display:none}
@media (prefers-reduced-motion:reduce){.axl2.ax-enter{animation:none}.axstar{transition:none}}
.view{padding:20px 20px 110px;font-size:14px;line-height:1.55}
.tabpanel[hidden]{display:none}
.crumbs{font-size:13px;color:var(--muted-2);margin-bottom:10px}
.crumbs a{color:var(--muted)}

/* ------------------------------------------------------------ page header */
.pagehead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.pagehead .titles{min-width:0;flex:1 1 320px}
.pagehead h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pagehead .sub{color:var(--muted);font-size:13px;margin-top:2px}
.pagehead .actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.pagehead .actions form{margin:0;display:inline}
.pagehead .actions button,.pagehead .actions .btn{margin:0}
.pagehead .actions .badge,.actions-bar .badge{min-height:var(--control-h-sm);padding:0 10px;box-sizing:border-box}
.pagehead .actions .btn .badge,.actions-bar .btn .badge,.actions-bar button .badge{min-height:0;padding:1px 8px}
h1{font-size:20px;line-height:1.3;margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.01em}
h2{font-size:13px;line-height:1.4;margin:0 0 10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
h3{font-size:14px;line-height:1.4;margin:0 0 8px;font-weight:700}
h2.section{margin:22px 0 12px}
h2.section:first-child{margin-top:2px}

/* -------------------------------------------------------------- primitives */
.panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow-sm);min-width:0}
.panel.flush,.card.flush{padding:0;overflow:hidden}
.panel.accent{border-color:var(--accent);background:var(--accent-soft)}
.panel>h2:first-child{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.grid>*{min-width:0}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.ai-providers{grid-template-columns:repeat(auto-fit,minmax(720px,1fr));margin-bottom:14px}
.grid.ai-providers td.num input{width:4.2em;min-height:var(--control-h-sm);padding:0 5px}
.grid.ai-providers .tablewrap table{width:100%}
.grid.ai-providers td .badge{margin-left:4px}
.grid.ai-providers td.actions{white-space:nowrap}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.muted{color:var(--muted)} .small{font-size:13px} .mini{font-size:12px;color:var(--muted)}
.mono{font-family:var(--mono);font-size:12.5px}
.hint{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}
.hint.mono{font-size:11.5px;color:var(--muted-2)}
p{margin:0 0 10px}
p.hint{margin-bottom:10px}
.chip{font-size:11px;background:var(--bg);color:var(--muted);padding:3px 8px;border-radius:6px;border:1px solid var(--line);white-space:nowrap}
.empty{color:var(--muted);font-size:13px;padding:14px 0}

/* status badges. The class is the status itself, so a template that prints
   the status prints the colour. */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:20px;font:600 11px/1.6 var(--sans);
  white-space:nowrap;border:1px solid transparent;background:var(--bg);color:var(--muted);border-color:var(--line);vertical-align:middle}
.badge.active,.badge.connected,.badge.accepted,.badge.ok,.badge.approved,.badge.done,.badge.set{background:var(--green-bg);color:var(--green);border-color:transparent}
.badge.paused,.badge.suspended,.badge.pending,.badge.warn,.badge.gate,.badge.stale{background:var(--amber-bg);color:var(--amber);border-color:transparent}
.badge.retired,.badge.offboarded,.badge.bad,.badge.rejected,.badge.failed,.badge.blocked,.badge.disconnected{background:var(--red-bg);color:var(--red);border-color:transparent}
.badge.accent,.badge.auto,.badge.info{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.badge.manual,.badge.gray{background:var(--bg);color:var(--muted);border-color:var(--line)}
.badge.purple{background:var(--purple-bg);color:var(--purple);border-color:transparent}
.badge.blue{background:var(--blue-bg);color:var(--blue);border-color:transparent}

/* --------------------------------------------------------------- key values */
.kv{display:grid;grid-template-columns:190px 1fr;gap:7px 14px;font-size:13px;margin:0 0 12px}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.kv dd.mono{font-size:12px}
.kv dd.mono .hint{font-family:var(--sans);font-size:12.5px}
.kv dd .hint{display:block}
.kv+form{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}

/* ------------------------------------------------------------------- tables */
.tablewrap{overflow-x:auto;margin:0 -18px;padding:0 18px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--surface-2);color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;white-space:nowrap;border-bottom:2px solid var(--line)}
tbody tr:hover>td{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td{overflow-wrap:anywhere}
td .mono,td.mono{word-break:break-all;font-size:12px}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.nowrap,th.nowrap{white-space:nowrap}
td.nowrap.mono,td.nowrap .mono{word-break:normal}
th.wrap{white-space:normal;line-height:1.3;vertical-align:bottom}
th .thsub{display:block;font-weight:500;text-transform:none;letter-spacing:0;font-size:10.5px;color:var(--muted-2);margin-top:1px}
table.posture td{white-space:nowrap}
table.posture select{width:auto;min-width:110px}
td.actions{white-space:nowrap;text-align:right}
td.actions form{display:inline;margin:0 0 0 4px}
td.actions button,td.actions .btn{margin:0;vertical-align:middle}
td form.inline{display:inline;margin:0 4px 0 0}
td form.inline button{margin:0;white-space:nowrap}
tr.rowlink td{cursor:pointer}
td a.lnk{color:var(--accent-ink);font-weight:700;white-space:nowrap}
.panel.flush table{margin:0}
.panel.flush .tablewrap{margin:0;padding:0}
.panel.flush .ba-table-toolbar{padding:10px 14px}

/* -------------------------------------------------------------------- forms */
label{display:block;font-weight:600;margin:12px 0 4px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
label:first-child{margin-top:0}
label.inlinecheck,.checks label,label:has(> input[type=checkbox]),label:has(> input[type=radio]),label:has(> select){display:inline-flex;gap:7px;align-items:center;margin:3px 12px 3px 0;font-weight:500;font-size:13.5px;
  color:var(--ink);text-transform:none;letter-spacing:0;cursor:pointer;vertical-align:middle}
label.inlinecheck,.checks label,.checks label:has(> input[type=checkbox]),.checks label:has(> input[type=radio]){display:flex;margin:4px 0}
.checks.cols label{margin:3px 0}
label:has(> select){gap:8px}
label:has(> select) select{width:auto;min-width:160px}
/* radio choices read as a segmented control: the chosen state is the filled chip */
label:has(> input[type=radio]){padding:3px 10px 3px 8px;border:1px solid var(--line);border-radius:20px;background:var(--surface);font-size:12.5px;margin:2px 4px 2px 0}
label:has(> input[type=radio]:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
label:has(> input[type=radio]:disabled){opacity:.5;cursor:not-allowed}
td:has(> label > input[type=radio]){white-space:nowrap}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=file],input[type=date],textarea,select{
  width:100%;padding:8px 10px;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-sm);font:14px var(--sans);
  background:var(--surface);color:var(--ink);transition:border-color .12s,box-shadow .12s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent-ink);box-shadow:var(--ba-focus,0 0 0 3px var(--accent-soft))}
input[type=checkbox],input[type=radio]{width:15px;height:15px;accent-color:var(--accent-ink);margin:0;flex:0 0 auto}
select{appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2384878d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
select:not([size]){cursor:pointer}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=date],input[type=search],select:not([size]):not([multiple]){height:var(--control-h);padding-top:0;padding-bottom:0;line-height:normal}
textarea{min-height:110px;font-family:var(--mono);font-size:12.5px;line-height:1.5;resize:vertical}
input[type=file]{padding:0 10px;min-height:var(--control-h);line-height:calc(var(--control-h) - 2px);background:var(--bg)}
input:disabled,select:disabled,textarea:disabled{background:var(--bg);color:var(--muted-2)}
.field-row{display:flex;gap:8px;align-items:center}
.field-row>*{flex:1}

button,.btn,.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding:0 13px;min-height:var(--control-h);box-sizing:border-box;border-radius:var(--radius-sm);
  border:1px solid var(--accent-ink);background:var(--accent-ink);color:var(--surface);font:600 13.5px var(--sans);cursor:pointer;
  text-decoration:none;white-space:nowrap;line-height:1.4;transition:filter .12s,background .12s}
button:hover,.btn:hover{filter:brightness(1.06);text-decoration:none}
button.secondary,.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
button.secondary:hover,.btn.secondary:hover{background:var(--bg);filter:none}
button.danger,.btn.danger{background:var(--surface);color:var(--red);border-color:var(--red-bg)}
button.danger:hover,.btn.danger:hover{background:var(--red-bg);filter:none}
button.ghost,.btn.ghost{background:transparent;color:var(--accent-ink);border-color:transparent;padding-left:6px;padding-right:6px}
button.sm,.btn.sm{padding:0 10px;min-height:var(--control-h-sm);font-size:12.5px}
.btn .badge,button .badge{margin:-2px 0}
button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
button svg,.btn svg{width:14px;height:14px}
button.ba-confirm-armed,.btn.ba-confirm-armed{background:var(--red);color:var(--surface);border-color:var(--red)}
button.icon-btn{padding:0;margin:0;gap:0;min-height:0;background:var(--surface);color:var(--muted);border-color:var(--line)}
button.icon-btn:hover{filter:none;background:var(--bg);color:var(--ink)}
button.icon-btn svg{width:15px;height:15px;flex:0 0 15px}
.inline{display:inline}
.inline button{margin:0 6px 0 0}
/* inside table rows, settings lists and packs every button is the small size */
td .inline button,td.actions button,td.actions .btn,td .btn,.setting .inline button,.setting button,.pack .packbtns button{min-height:var(--control-h-sm);padding:0 10px;font-size:12.5px}
form.inline{margin:0}
.formfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.formfoot button{margin:0}
.formfoot .hint{margin:0 0 0 auto}
.actions-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.actions-bar form{margin:0;display:inline}
.actions-bar button,.actions-bar .btn{margin:0}

/* ------------------------------------------------------------------ notices */
.flash,.notice{border-radius:var(--radius-sm);padding:11px 14px;font-size:13.5px;margin-bottom:14px;border:1px solid;
  display:flex;gap:10px;align-items:flex-start;line-height:1.5;overflow-wrap:anywhere}
.flash .msg,.notice .msg{flex:1;min-width:0}
.flash .fx,.notice .fx{margin:0;flex:0 0 auto}
.flash button,.notice button{margin:0}
.flash svg,.notice svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px}
.flash.ok,.notice.ok{background:var(--green-bg);border-color:var(--green-bg);color:var(--green)}
.flash.err,.notice.bad{background:var(--red-bg);border-color:var(--red-bg);color:var(--red)}
.notice.warn{background:var(--amber-bg);border-color:var(--amber-bg);color:var(--amber)}
.notice.info{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.notice .link{font-family:var(--mono);font-size:12px;word-break:break-all;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;padding:6px 8px;margin-top:6px;display:block}
code,pre{font-family:var(--mono);font-size:12.5px}
pre{background:var(--bg);padding:10px 12px;border-radius:var(--radius-sm);overflow:auto;max-height:360px;margin:0;
  white-space:pre-wrap;border:1px solid var(--line);line-height:1.5}
details summary{cursor:pointer;color:var(--accent-ink);font-size:12.5px;user-select:none}
details[open] summary{margin-bottom:6px}

/* ---------------------------------------------------------------- stat tiles */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  box-shadow:var(--shadow-sm);text-decoration:none;color:var(--ink);display:block;min-width:0}
a.stat:hover{border-color:var(--accent-ink);text-decoration:none}
.stat .v{font:700 24px/1.15 var(--mono);text-transform:capitalize;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:5px}
.stat .s{font-size:11px;color:var(--muted-2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat.lead{background:linear-gradient(135deg,var(--brand-block) 0%,var(--brand-block-2) 100%);border-color:var(--brand-block)}
.stat.lead .v{color:var(--brand-block-ink)}
.stat.lead .l,.stat.lead .s{color:var(--brand-block-soft)}
.stat.flag .v{color:var(--red)}
.stat.warn .v{color:var(--amber)}
.stat.good .v{color:var(--green)}

/* ------------------------------------------------------------------ playbook */
.help-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--accent-ink);color:var(--accent-ink);font:700 11px/1 var(--display);text-decoration:none;
  margin-left:8px;vertical-align:middle;cursor:help;flex:0 0 auto}
.help-btn:hover{background:var(--accent-ink);color:var(--surface);text-decoration:none}
h2 .help-btn,h3 .help-btn{position:relative;top:-1px}
.playbook-op h3,.playbook-client h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:16px 0 6px}
.playbook-op h3:first-of-type{margin-top:10px}
.playbook-op p{margin:0 0 8px}
.playbook-op ol,.playbook-op ul{margin:0 0 10px;padding-left:20px}
.playbook-op li{margin:3px 0}
.lessons li{margin:4px 0;padding-left:4px}
.lessons{border-left:3px solid var(--amber);padding-left:14px;margin:0}
.email-subject{font-weight:600;margin:6px 0}
pre.email{white-space:pre-wrap;font:13.5px/1.55 var(--sans);background:var(--surface-2);max-height:none}
.panel.topic h3 a{color:var(--ink)}

/* ------------------------------------------------------------------ timeline */
.tl{list-style:none;margin:0;padding:0}
.tl li{padding:9px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:150px 1fr auto;gap:4px 12px;align-items:baseline}
.tl li:last-child{border-bottom:0}
.tl .when{font:12px var(--mono);color:var(--muted-2);white-space:nowrap}
.tl .type{font-weight:600;font-size:13px}
.tl .meta{color:var(--muted);font-size:12px}
.tl .meta a{color:var(--muted);text-decoration:underline dotted}
.tl details{grid-column:2/4;margin-top:4px}
.tl summary{font-size:12px}
.actor-agent .type{color:var(--accent-ink)}.actor-operator .type{color:var(--purple)}.actor-external .type{color:var(--blue)}.actor-system .type{color:var(--muted)}
.actor{font:600 10.5px var(--sans);text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:4px;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.actor.agent{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent}
.actor.operator{color:var(--purple);background:var(--purple-bg);border-color:transparent}
.actor.external{color:var(--blue);background:var(--blue-bg);border-color:transparent}
.actor.system{color:var(--muted)}

/* ------------------------------------------------------------ capability packs */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin:8px 0 16px}
.pack{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--surface);min-width:0;box-shadow:var(--shadow-sm)}
.pack h3{margin:0 0 2px;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.pack .price{font-size:11px;font-weight:normal;color:var(--muted-2);text-align:right;line-height:1.3}
.pack .desc{font-size:12px;color:var(--muted);margin:0 0 8px}
.pack .checks label{margin:2px 0;font-size:13px}
.pack .setting{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.pack .setting label{margin-top:4px}
.packbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.packbtns button{margin:0}
.pack.on{border-color:var(--green);box-shadow:inset 3px 0 0 var(--green)}
.setting{margin:6px 0}
.checks{display:block}
.checks.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 12px}

/* -------------------------------------------------------------------- login */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 20% -10%,var(--accent-soft),transparent 60%),var(--bg)}
.login{width:100%;max-width:420px;margin:0}
.login .lockup{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.login .lockup img{width:56px;height:56px;object-fit:contain}
.login .lockup .house{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.login .lockup .product{font-family:var(--display);font-size:12.5px;font-weight:700;text-transform:uppercase;color:var(--slate)}
.login h1{font-size:18px;margin-bottom:4px}
.login button{width:100%;margin-top:16px}
.login .env{margin-top:16px;text-align:center}
html[data-theme="dark"] .login .lockup img{filter:invert(1) hue-rotate(180deg) brightness(1.08)}

/* -------------------------------------------------- inside a pop-out window */
.ba-window .view{padding:0}
.ba-window .pagehead{margin-bottom:10px}
.ba-window .panel{box-shadow:none}
.ba-win-body .fragment{padding:14px 16px}
.fragment .kv{grid-template-columns:150px 1fr}

/* ------------------------------------------------------------ small screens */
@media (max-width:900px){
  .sidebar{display:none}
  .axnav{display:none}
  .axswitch:not([hidden]){display:flex;align-items:center;gap:8px;width:100%;min-height:var(--control-h);margin:0 0 12px;padding:0 12px;
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:600 13.5px var(--sans);cursor:pointer;text-align:left}
  .axswitch svg{width:15px;height:15px;flex:0 0 15px}
  .axswitch-where{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .axswitch[aria-expanded="true"] .axswitch-chev{transform:rotate(180deg)}
  .mainarea.ax-open .axnav:not([hidden]){display:block;position:fixed;top:var(--topbar-h);bottom:0;height:auto;z-index:60;box-shadow:0 12px 30px rgba(0,0,0,.28)}
  .mainarea.ax-open .axl1{left:0;width:50vw}
  .mainarea.ax-open .axl2{left:50vw;width:50vw}
  .mainarea.ax-open .axl1:has(+ .axl2[hidden]){width:min(100vw,380px)}
  .working .w-v{max-width:200px}
  .topbar .pill.optional,.search-btn{display:none}
  .kv{grid-template-columns:1fr}
  .tl li{grid-template-columns:1fr}
}
/* Phones and narrow windows: one column, nothing wider than the screen, buttons that wrap. */
@media (max-width:640px){
  .view{padding:14px 12px 110px}
  .grid,.grid.two,.grid.ai-providers{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .stat .v{font-size:20px}
  .panel,.card{padding:12px 12px}
  .tablewrap{margin:0 -12px;padding:0 12px}
  .pagehead .actions{justify-content:flex-start;width:100%}
  .setting,.pack{min-width:0}
  .setting button,.pack button,.formfoot button{white-space:normal;height:auto;min-height:var(--control-h-sm);line-height:1.25;padding-top:5px;padding-bottom:5px}
  .checks.cols{grid-template-columns:1fr 1fr}
  .working{display:none}
  .topbar{gap:6px;padding:0 10px}
  .brand{flex:0 0 auto;width:auto;margin-right:0}
  .brand .wordmark{display:none}
  .topbar .pill{padding:0 8px}
  .signout button{padding:0 8px}
  .cx-tiles{grid-template-columns:1fr}
  .cx-host{min-height:240px;padding:4px}
  .cx-host .cx-svg{min-height:220px}
  .cx-legend{gap:8px}
  .cx-context{grid-template-columns:1fr 1fr}
}

/* Provisioning steps on the WhatsApp panel */
.psteps{list-style:none;margin:10px 0 14px;padding:0;display:grid;gap:6px}
.pstep{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-2)}
.pstep svg{width:16px;height:16px;flex:0 0 auto}
.pstep.done{color:var(--ink)}
.pstep.done svg{color:var(--green)}
.pstep.current{color:var(--ink)}
.pstep.current svg{color:var(--accent-ink)}
.pstep.failed{color:var(--red)}

/* Clone: setup remaining checklist and the collapsible import panel */
.checklist{margin:8px 0 0;padding-left:20px}.checklist li{margin:4px 0}
details.panel>summary{cursor:pointer;list-style:none}details.panel>summary::-webkit-details-marker{display:none}details.panel>summary h2::before{content:"\25B8  ";font-size:12px}details.panel[open]>summary h2::before{content:"\25BE  "}

/* Connext: procedure tiles, the live graph, the case feed and the case record */
.cx-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:16px}
.cx-tile{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden}
.cx-tile:hover{border-color:var(--accent-ink);box-shadow:var(--shadow)}
.cx-tile .head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cx-tile h3{margin:0;font:700 15px/1.25 var(--display);color:var(--ink)}
.cx-tile .cust{font-size:12px;color:var(--muted);margin-top:2px}
.cx-tile .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.cx-tile .nums div{font:700 18px/1.15 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.cx-tile .nums small{display:block;font:600 10.5px/1.3 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.cx-tile .foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--muted-2);margin-top:2px}
.cx-tile .mini{width:100%;height:34px;opacity:.5;margin-top:2px}
.cx-tile .mini circle{fill:var(--accent-ink)}.cx-tile .mini path{stroke:var(--accent-ink);stroke-width:1;fill:none;opacity:.6}
.cx-tile.live{border-color:var(--green)}
.cx-tile.live::after{content:"live";position:absolute;top:10px;right:12px;font:600 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--green);animation:cx-blink 1.2s ease-in-out infinite}
@keyframes cx-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* The board: cases and graph side by side at one height, the rules below, dividers dragged. */
.cx-board{--cx-left:320px;--cx-top:480px;display:grid;grid-template-columns:var(--cx-left) 8px minmax(0,1fr);grid-template-rows:var(--cx-top) 8px minmax(240px,auto);gap:0}
.cx-board>.cx-pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cx-board>.cx-pane.cases{grid-column:1;grid-row:1}
.cx-board>.cx-pane.graph{grid-column:3;grid-row:1}
.cx-board>.cx-pane.rules{grid-column:1/4;grid-row:3;max-height:520px}
.cx-pane .th{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);font:700 11px var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);flex:0 0 auto}
.cx-pane .th .spacer{flex:1}
.cx-pane .th .hint{text-transform:none;letter-spacing:0;font-weight:500;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-pane .tb{flex:1 1 auto;min-height:0;overflow:auto;padding:10px 12px}
.cx-pane.graph .tb{padding:0}
.cx-div-v{grid-column:2;grid-row:1;cursor:col-resize}
.cx-div-h{grid-column:1/4;grid-row:2;cursor:row-resize}
.cx-div-v,.cx-div-h{position:relative}
.cx-div-v::after{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;border-radius:2px;background:var(--line)}
.cx-div-h::after{content:"";position:absolute;top:3px;left:0;right:0;height:2px;border-radius:2px;background:var(--line)}
.cx-div-v:hover::after,.cx-div-h:hover::after{background:var(--accent-ink)}
body.cx-resizing{user-select:none;cursor:grabbing}
@media (max-width:1100px){.cx-board{grid-template-columns:1fr;grid-template-rows:auto auto auto}.cx-board>.cx-pane.cases{grid-column:1;grid-row:1;max-height:300px}.cx-board>.cx-pane.graph{grid-column:1;grid-row:2;height:420px}.cx-board>.cx-pane.rules{grid-column:1;grid-row:3}.cx-div-v,.cx-div-h{display:none}}
.cx-host{--cx-node:#4472C4;--cx-node-deep:#1E3A70;--cx-edge:rgba(68,114,196,.28);--cx-lit:#5FD3A8;--cx-active:#FFC857;--cx-fail:#E5534B;--cx-wait:#FFC857;
  position:relative;background:radial-gradient(1200px 500px at 30% 0%,rgba(68,114,196,.16),transparent 60%),linear-gradient(180deg,#0E1A33 0%,#0A1226 100%);border:1px solid var(--line);border-radius:var(--radius);padding:0;min-height:380px;overflow:hidden}
.cx-pane.graph .cx-host{border:0;border-radius:0;min-height:0;height:100%}
.cx-host .cx-view{position:absolute;inset:0;overflow:hidden;cursor:grab}
.cx-host.cx-panning .cx-view{cursor:grabbing}
.cx-host .cx-svg{display:block;transform-origin:0 0;will-change:transform}
.cx-zoom{position:absolute;right:10px;top:10px;display:flex;gap:4px;z-index:2}
.cx-zoom button{margin:0;min-height:26px;height:26px;padding:0 9px;font:600 12px var(--mono);background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:6px}
.cx-zoom button:hover{background:rgba(255,255,255,.2);filter:none}
.cx-svg .cx-edge{fill:none;stroke:var(--cx-edge);stroke-width:1.4}
.cx-svg .cx-edge-lit{fill:none;stroke:var(--cx-lit);stroke-width:2.4;opacity:0;filter:url(#cx-glow);transition:opacity .35s}
.cx-svg .cx-edge-lit.on{opacity:.95}
.cx-svg .cx-node{cursor:pointer;outline:none}
.cx-svg .cx-node .cx-core{stroke:rgba(255,255,255,.55);stroke-width:1;transition:transform .2s}
.cx-svg .cx-node .cx-ring{fill:none;stroke:var(--cx-node);stroke-width:1.2;opacity:.35}
.cx-svg .cx-node .cx-halo{fill:var(--cx-node);opacity:0}
.cx-svg .cx-node .cx-type{font:700 9px var(--mono);fill:#fff;pointer-events:none;letter-spacing:.02em}
.cx-svg .cx-node .cx-label{font:600 10.5px var(--sans);fill:rgba(255,255,255,.72);pointer-events:none}
.cx-svg .cx-layer{font:600 9.5px var(--sans);fill:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em}
.cx-svg .cx-node:hover .cx-core,.cx-svg .cx-node:focus .cx-core{transform:scale(1.15)}
.cx-svg .cx-node:hover .cx-ring{opacity:.9}
.cx-svg .cx-node.trust-assisted .cx-ring{stroke-dasharray:3 3}
.cx-svg .cx-node.type-Gate .cx-core{stroke:var(--cx-active);stroke-width:2}
.cx-svg .cx-node.type-Act .cx-ring{stroke:var(--cx-lit)}
/* idle: still. The network moves only while a case runs. */
.cx-host.cx-idle .cx-node .cx-halo{opacity:0}
/* live: done steps hold the light, the running step pulses, a failure burns red, a wait hums amber */
.cx-svg .cx-node.done .cx-core{filter:url(#cx-glow);stroke:var(--cx-lit);stroke-width:2}
.cx-svg .cx-node.done .cx-ring{stroke:var(--cx-lit);opacity:.75}
.cx-svg .cx-node.active .cx-core{filter:url(#cx-glow-strong);stroke:var(--cx-active);stroke-width:2.5}
.cx-svg .cx-node.active .cx-halo{fill:var(--cx-active);animation:cx-pulse 1s ease-out infinite}
.cx-svg .cx-node.active .cx-ring{stroke:var(--cx-active);opacity:1;animation:cx-ring 1s ease-out infinite}
.cx-svg .cx-node.waiting .cx-core{stroke:var(--cx-wait);stroke-width:2.5;filter:url(#cx-glow)}
.cx-svg .cx-node.waiting .cx-halo{fill:var(--cx-wait);animation:cx-pulse 2.2s ease-in-out infinite}
.cx-svg .cx-node.failed .cx-core{stroke:var(--cx-fail);stroke-width:2.5;filter:url(#cx-glow-strong)}
.cx-svg .cx-node.failed .cx-halo{fill:var(--cx-fail);opacity:.35}
@keyframes cx-pulse{0%{opacity:.6;transform:scale(.7)}100%{opacity:0;transform:scale(1.9)}}
@keyframes cx-ring{0%{transform:scale(1)}100%{transform:scale(1.35);opacity:0}}
.cx-svg .cx-signal{fill:#fff;filter:url(#cx-glow-strong)}
.cx-tip{position:absolute;z-index:5;width:300px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 12px;font-size:12px;pointer-events:none}
.cx-tip .t{font:700 13px/1.3 var(--display);margin-bottom:2px}.cx-tip .m{color:var(--muted);margin-top:4px}.cx-tip .d{margin-top:4px;line-height:1.4}
.cx-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:11.5px;color:var(--muted);margin:8px 2px 0}
.cx-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.cx-feed{display:flex;flex-direction:column;gap:8px}
.cx-case{position:relative;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;padding:9px 30px 9px 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .15s}
.cx-case:hover{border-color:var(--accent-ink)}
.cx-case.focus{border-color:var(--green);box-shadow:0 0 0 2px var(--green-bg)}
.cx-case .ref{font:700 12.5px var(--mono)}.cx-case .badge{justify-self:end}
.cx-case .t{grid-column:1/3;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-case .m{grid-column:1/3;font-size:11px;color:var(--muted)}
.cx-case .open{position:absolute;right:8px;top:8px;font-size:13px;color:var(--muted-2);text-decoration:none;padding:2px 4px;border-radius:4px}
.cx-case .open:hover{color:var(--accent-ink);background:var(--accent-soft)}
.cx-case.hist{opacity:.85}
.cx-feed .sec{font:700 10.5px var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);margin:8px 0 2px}
.cx-feed .sec:first-child{margin-top:0}
/* compact stat tiles: one row, money as $ x,xxx.yy */
.stats.compact{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:12px}
.stats.compact .stat{padding:8px 10px}
.stats.compact .stat .v{font-size:17px}
.stats.compact .stat .l{font-size:10px;margin-top:2px}
.stats.compact .stat .s{font-size:10.5px}
tr[data-row-link]{cursor:pointer}
tr[data-row-link]:hover td{background:var(--accent-soft)}
/* the new procedure wizard: three numbered tiles */
.cx-wizard{display:flex;flex-direction:column;gap:12px}
.cx-wz{display:grid;grid-template-columns:44px 1fr;gap:0 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.cx-wz .num{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font:700 15px var(--display);display:flex;align-items:center;justify-content:center}
.cx-wz.done .num{background:var(--green-bg);color:var(--green)}
.cx-wz h2{margin:4px 0 2px;font:700 15px var(--display)}
.cx-wz .hint{margin:0 0 8px}
.cx-wz .grid.two{gap:8px 12px}
.cx-wz .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.cx-wz .actions form{margin:0}
.cx-wz .actions button{margin:0}
.cx-src{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.cx-src:last-child{border-bottom:0}
.cx-src .m{font-size:11.5px;color:var(--muted)}
.cx-src form{margin:0}.cx-src button{margin:0}
.cx-stats .stat .v{font-size:19px}
.cx-context{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 14px;font-size:12.5px}
.cx-context dt{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.cx-context dd{margin:1px 0 0;overflow-wrap:anywhere}
.cx-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cx-step{display:grid;grid-template-columns:24px 1fr auto;gap:0 10px;align-items:start;padding:7px 0;border-bottom:1px solid var(--line)}
.cx-step:last-child{border-bottom:0}
.cx-step .dot{width:12px;height:12px;border-radius:50%;margin:4px 0 0 6px;background:var(--line)}
.cx-step.done .dot{background:var(--green)}.cx-step.running .dot{background:var(--amber);animation:cx-blink 1s infinite}.cx-step.waiting .dot{background:var(--amber)}.cx-step.failed .dot{background:var(--red)}
.cx-step .n{font-weight:600}.cx-step .s{font-size:11.5px;color:var(--muted)}.cx-step .when{font:11px var(--mono);color:var(--muted-2);white-space:nowrap}
.cx-findings td.delta.pos{color:var(--red);font-weight:700}.cx-findings td.delta.neg{color:var(--amber);font-weight:700}
.cx-rule{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.cx-rule:last-child{border-bottom:0}.cx-rule .k{font:600 11px var(--mono);color:var(--muted);padding-top:3px}.cx-rule .st{font-size:13px}.cx-rule .m{font-size:11.5px;color:var(--muted);margin-top:2px}
.cx-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}.cx-bar i{display:block;height:100%;background:var(--accent-ink)}
.cx-source{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.cx-source:last-child{border-bottom:0}
.cx-arrivals{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;font-size:13px}
.cx-arrivals a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--mono)}
.cx-arrivals a svg{width:13px;height:13px}
.cx-source .m{font-size:11.5px;color:var(--muted)}

/* Live activity: rows that just arrived, and the refresh pill while the operator is filtering */
@keyframes tl-arrive{0%{background:var(--accent-soft)}100%{background:transparent}}
tr.tl-new>td{animation:tl-arrive 6s ease-out 1}
.tl-pill{margin:0 0 10px}
/* Drop zones: the file inputs inside stay as they are; the zone lights up while a file is over it. */
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:12px 14px;margin:6px 0 4px;transition:border-color .12s,background .12s}
.drop.over{border-color:var(--accent-ink);background:var(--accent-soft)}
.drop .drop-hint{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:6px}
.drop .drop-hint svg{width:16px;height:16px;flex:none}
.drop .drop-status{margin-top:4px}
.cx-text{white-space:pre-wrap;font:12px/1.5 var(--mono);max-height:360px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 10px}

/* Connext sources: the attach line inside the needs table, one row of compact controls. */
.cx-attach{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 2px}
.cx-attach select,.cx-attach input[type=text]{margin:0;min-height:30px;font-size:12.5px;max-width:260px}
.cx-attach button{margin:0;min-height:30px}
.cx-needs td{vertical-align:top}
.cx-needs td:first-child{min-width:220px}
.cx-needs td:nth-child(2){white-space:nowrap}
.cx-needs .m{font-size:12.5px;color:var(--ink-2,inherit);margin-top:2px}

/* Connext: the compiler at work under a document being read, typed out line by line. */
.cx-activity{margin:2px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2,var(--panel,transparent));font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;line-height:1.5;max-height:320px;overflow:auto}
.cx-activity .ln{white-space:pre-wrap;word-break:break-word;margin:0 0 2px}
.cx-activity .ln .at{color:var(--muted);margin-right:8px}
.cx-activity .ln.read,.cx-activity .ln.bind,.cx-activity .ln.replay{color:var(--muted)}
.cx-activity .ln.found{padding-left:14px}
.cx-activity .ln.rule{padding-left:14px;color:var(--ink)}
.cx-activity .ln.question{padding-left:14px;color:var(--warn-ink,#8a6d1f)}
.cx-activity .ln.graph,.cx-activity .ln.done{font-weight:600}
.cx-activity .ln.error{color:var(--danger-ink,#b3261e);font-weight:600}
.cx-caret{display:inline-block;width:7px;height:13px;background:var(--accent-ink);vertical-align:-2px;animation:cx-blink 1s steps(2,start) infinite}
.cx-activity.done .cx-caret{display:none}
@keyframes cx-blink{to{visibility:hidden}}

/* Signature editor (agent page, Signatures tab) */
.sig-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 6px 0; }
.sig-toolbar select { width: auto; min-width: 0; padding: 4px 6px; font-size: 13px; }
.sig-toolbar .sig-color { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; padding: 0 4px; cursor: pointer; }
.sig-toolbar .sig-color input { width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.sig-toolbar .sig-image { cursor: pointer; }
.sig-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px 0; }
.sig-inline input[type="url"] { flex: 1 1 280px; }
.sig-inline input[type="number"] { width: 90px; }
.sig-inline label { margin: 0; }
.sig-editor { min-height: 120px; padding: 12px; border: 1px solid var(--line, #d1d5db); border-radius: 8px; background: #ffffff; color: #111827; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4; overflow: auto; }
.sig-editor:focus { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }
.sig-editor img { max-width: 100%; }
.sig-editor img.sig-selected { outline: 2px dashed var(--accent, #2563eb); }
.sig-editor table td { vertical-align: middle; }
.sig-status { min-height: 18px; margin: 0 0 4px 0; }
.sig-status.sig-bad { color: #b91c1c; }

/* Find: the place opened from the search box glows until one of its words is clicked. */
mark.ba-find{background:var(--amber-bg);color:inherit;border-radius:3px;padding:0 2px;margin:0 -2px;cursor:pointer;box-shadow:0 0 0 2px var(--amber);animation:ba-find-glow 1.6s ease-in-out infinite}
mark.ba-find.soft{animation:none;box-shadow:none;background:var(--amber-bg)}
.ba-find-el{outline:2px solid var(--amber);outline-offset:2px;border-radius:var(--radius-sm);animation:ba-find-glow 1.6s ease-in-out infinite;cursor:pointer}
@keyframes ba-find-glow{0%,100%{box-shadow:0 0 0 2px var(--amber),0 0 6px 1px var(--amber)}50%{box-shadow:0 0 0 2px var(--amber),0 0 16px 5px var(--amber)}}
@media (prefers-reduced-motion:reduce){mark.ba-find,.ba-find-el{animation:none}}
/* The search box: the other records holding a place, and how complete the index is. */
.ba-pal-more{margin:-2px 12px 6px 50px}
.ba-palette-foot .ax-index{margin-left:auto;display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:11px;white-space:normal;line-height:1.3}
.ba-palette-foot .ax-index button{min-height:22px;font-size:11px}

/* Charts (src/admin/charts.ts). Roles, not hex, in the marks: two series slots validated for colour
   vision deficiency on both surfaces, a one hue magnitude ramp, the fixed status roles, and the
   chart chrome (recessive hairlines, text in text colours). */
:root{
  --viz-1:#2a78d6; --viz-2:#eb6834;
  --viz-good:#0ca30c; --viz-warning:#fab219; --viz-serious:#ec835a; --viz-critical:#d03b3b; --viz-muted:#b9bcc3;
  --viz-seq-0:#f1f3f6; --viz-seq-1:#cde2fb; --viz-seq-2:#9ec5f4; --viz-seq-3:#5598e7; --viz-seq-4:#2a78d6; --viz-seq-5:#1c5cab;
  --viz-grid:#e8eaee; --viz-axis:#c9cdd4; --viz-tick:#84878d;
}
html[data-theme="dark"]{
  --viz-1:#3987e5; --viz-2:#d95926;
  --viz-muted:#4a5568;
  --viz-seq-0:#1d2638; --viz-seq-1:#184f95; --viz-seq-2:#1c5cab; --viz-seq-3:#2a78d6; --viz-seq-4:#5598e7; --viz-seq-5:#9ec5f4;
  --viz-grid:#232d40; --viz-axis:#2f3b52; --viz-tick:#6b7a90;
}
.viz{margin:6px 0 0}
.viz svg{display:block;width:100%;height:auto;overflow:visible}
.viz-grid{stroke:var(--viz-grid);stroke-width:1}
.viz-axis{stroke:var(--viz-axis);stroke-width:1}
.viz-tick{fill:var(--viz-tick);font:11px var(--sans);font-variant-numeric:tabular-nums}
.viz-value{fill:var(--ink);font:600 12px var(--sans)}
.viz-band{fill:transparent;cursor:default}
.viz-band:hover{fill:var(--accent-soft);opacity:.45}
.viz-fill-1{fill:var(--viz-1);background:var(--viz-1)}
.viz-fill-2{fill:var(--viz-2);background:var(--viz-2)}
.viz a path:hover,.viz a rect:hover{opacity:.82;cursor:pointer}
.viz-line-1{fill:none;stroke:var(--viz-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.viz-wash-1{fill:var(--viz-1);opacity:.1;pointer-events:none}
.viz-dot-1{fill:var(--viz-1);stroke:var(--surface);stroke-width:2;pointer-events:none}
.viz-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin:0 0 4px}
.viz-legend span{display:inline-flex;align-items:center;gap:6px}
.viz-key{display:inline-block;width:10px;height:10px;border-radius:2px}
.viz-tone-1{fill:var(--viz-1);background:var(--viz-1)}
.viz-tone-2{fill:var(--viz-2);background:var(--viz-2)}
.viz-tone-good{fill:var(--viz-good);background:var(--viz-good)}
.viz-tone-warning{fill:var(--viz-warning);background:var(--viz-warning)}
.viz-tone-serious{fill:var(--viz-serious);background:var(--viz-serious)}
.viz-tone-critical{fill:var(--viz-critical);background:var(--viz-critical)}
.viz-tone-muted{fill:var(--viz-muted);background:var(--viz-muted)}
.viz-bars{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.viz-bar-row{display:grid;grid-template-columns:minmax(120px,38%) 1fr auto;align-items:center;gap:10px;padding:5px 6px;border-radius:var(--radius-sm);color:var(--ink);text-decoration:none;font-size:13px}
a.viz-bar-row:hover{background:var(--accent-soft)}
.viz-bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz-bars-stacked .viz-bar-row{grid-template-columns:1fr auto;row-gap:4px}
.viz-bars-stacked .viz-bar-label{grid-column:1/-1;white-space:normal}
.stat .v.viz-v{text-transform:none}
.viz-cell-sub{min-width:180px;max-width:320px;margin-top:2px}
.viz-path{display:inline-block;max-width:260px;white-space:normal}
.viz-bar-track{height:12px;background:var(--viz-seq-0);border-radius:0 4px 4px 0;overflow:hidden}
.viz-bar{display:block;height:100%;border-radius:0 4px 4px 0}
.viz-bar-value{font:600 12px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.viz-hm-row{display:grid;grid-template-columns:40px repeat(24,1fr);gap:2px;margin-bottom:2px}
.viz-hm-head span{font:10px var(--sans);color:var(--viz-tick);text-align:left}
.viz-hm-label{font:11px var(--sans);color:var(--muted);align-self:center}
.viz-hm-cell{display:block;height:18px;border-radius:3px;background:var(--viz-seq-0)}
a.viz-hm-cell:hover{outline:2px solid var(--ink);outline-offset:-1px}
.viz-seq-0{background:var(--viz-seq-0)}.viz-seq-1{background:var(--viz-seq-1)}.viz-seq-2{background:var(--viz-seq-2)}.viz-seq-3{background:var(--viz-seq-3)}.viz-seq-4{background:var(--viz-seq-4)}.viz-seq-5{background:var(--viz-seq-5)}
.viz-hm-scale{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:11px}
.viz-hm-scale i{display:inline-block;width:18px;height:10px;border-radius:2px}
.viz-tick-dot{stroke:var(--surface);stroke-width:2}
.viz-js{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.viz-js-row{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px}
.viz-js-label{font-size:12px;color:var(--muted)}
.viz-js-lane{position:relative;height:14px;border-bottom:1px solid var(--viz-grid)}
.viz-js-dot{position:absolute;top:2px;width:10px;height:10px;margin-left:-5px;border-radius:50%;box-shadow:0 0 0 2px var(--surface)}
.viz-js-dot.viz-lane-in{background:var(--viz-2)}.viz-js-dot.viz-lane-out{background:var(--viz-1)}.viz-js-dot.viz-lane-tier2{background:var(--purple)}.viz-js-dot.viz-lane-operator{background:var(--viz-serious)}
.viz-js-bar,.viz-js-caps{display:flex;gap:2px;min-width:0}
.viz-js-seg{height:18px;border-radius:4px;min-width:3px}
.viz-js-cap{min-width:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:var(--muted)}
.viz-js-cap b{display:block;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.viz-js-axis>span:last-child{display:flex;justify-content:space-between;font-size:11px;color:var(--viz-tick);font-variant-numeric:tabular-nums}
.viz-lane-in{fill:var(--viz-2)}.viz-lane-out{fill:var(--viz-1)}.viz-lane-tier2{fill:var(--purple)}.viz-lane-operator{fill:var(--viz-serious)}
.viz-filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:0 0 14px}
.viz-filter{display:flex;flex-direction:column;gap:3px;margin:0;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.viz-filter select{min-width:130px;max-width:220px;text-transform:none;letter-spacing:0}
.ax-tip{position:fixed;z-index:3000;pointer-events:none;background:var(--surface);color:var(--muted);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:6px 9px;font-size:12px;line-height:1.4;max-width:320px}
.ax-tip b{display:block;color:var(--ink);font-size:13px}