/* Liyagent console — the Factory palette (ink, off-white, one signal orange). Zero external resources.
   White-label: every accent-derived color flows from the --accent* variables
   below; common.js recomputes and overrides them at runtime via setProperty. */

:root {
  /* What a dialog or drawer dims the page behind it with. */
  --scrim: rgba(0, 0, 0, 0.62);
  /* Height of the shared top bar. Pages that want to fill the rest of the
     viewport subtract this; it was previously guessed at twice, in two
     different places, with two different numbers. */
  --topnav-h: 59px;
  color-scheme: dark;
  --bg: #0e0e0d;
  --bg-2: #131312;
  --panel: #171716;
  --panel-2: #131312;
  --border: #2b2b28;
  --border-soft: #222220;
  --text: #eeeee8;
  --muted: #8f8f87;
  /* The Factory palette's one colour, signal orange; common.js recomputes
     these from the tenant's brand accent at runtime. */
  --accent: #ff5b1f;
  --accent-dim: rgba(255, 91, 31, 0.14);
  --accent-glow: rgba(255, 91, 31, 0.28);
  --accent-border: rgba(255, 91, 31, 0.4);
  --accent-faint: rgba(255, 91, 31, 0.06);
  --accent-hi: #ff7a48;   /* lighter accent — gradient tops */
  --accent-mid: #d64c1a;  /* darker accent — gradient bottoms */
  --accent-deep: #8c3211; /* deepest accent — bar/gauge tails */
  --accent-ink: #111111;  /* text on accent-filled surfaces */
  /* Status only: warm-leaning, so they sit with the ink and off-white. */
  --ok: #4cc38a;
  --warn: #e0a030;
  --crit: #f2705f;
  --dup: #c9c9c1;
  --info: #d4d4cc;
  --bg-glow: #0e0e0d;
  --nav-bg: rgba(14, 14, 13, 0.9);
  --scroll-thumb: #34342f;
  --hover-bg: rgba(255, 255, 255, 0.04);
  --chip-border: rgba(238, 238, 232, 0.18);
  --badge-bg: rgba(238, 238, 232, 0.10);
  --badge-fg: rgba(238, 238, 232, 0.70);
  --chip-bg: rgba(238, 238, 232, 0.05);
  --chip-text: #d4d4cc;
  --input-bg: #121211;
  --input-placeholder: #9a9a92;   /* 4.5:1 on the dark input */
  --input-hover-border: #3d3d38;
  --track-bg: #23231f;
  --panel-hover-border: #3d3d38;
  --divider: #262623;
  --dup-ink: #d4d4cc;
  --grid-line: rgba(238, 238, 232, 0.05);
  /* The landing page's faces (welcome.css), so the console reads the same. */
  --sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --danger: var(--crit);
  /* Status text: the dark theme's status colours read as text as they are. */
  --ok-ink: var(--ok);
  --warn-ink: var(--warn);
  --crit-ink: var(--crit);
  --crit-solid: #d92d20;
  --signal-text: #ff5b1f;
  --series-neutral: #9a9a92;
  /* One type scale (S1): page title, section title, body, small. */
  --fs-title: 25px;
  --fs-section: 15px;
  --fs-body: 13.5px;
  --fs-small: 12px;
  /* The smallest console text. Only an uppercase micro label with letter
     spacing goes below it, to 11px. */
  --fs-xs: 11.5px;
  /* Spacing steps for new rules (existing literals stay until touched). */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  /* One radius for cards and panels, one for controls. */
  --radius-card: 8px;
  --radius-control: 4px;
  /* Aliases a few rules reach for; they follow the theme through the panel
     and border tokens, so the light theme needs no copy. */
  --surface: var(--panel);
  --surface-2: var(--panel-2);
  --line: var(--border);
}

/* Light theme: same variable contract, brighter values. The effective theme
   is chosen pre-paint by an inline <head> snippet + common.js (light/dark/system). */
:root[data-theme="light"] {
  --scrim: rgba(17, 17, 17, 0.35);
  color-scheme: light;
  --bg: #f3f3f0;
  --bg-2: #ebebe6;
  --panel: #fbfbf9;
  --panel-2: #f3f3f0;
  --border: #d6d6cf;
  --border-soft: #e3e3dd;
  --text: #111111;
  --muted: #6b6b65;
  --ok: #1f9d55;
  --warn: #b86a00;
  --crit: #d92d20;
  --dup: #3b3b38;
  --info: #3b3b38;
  /* signal orange at small-text contrast (welcome.css --signal-text) */
  --accent: #c2410c;
  --accent-dim: rgba(194, 65, 12, 0.14);
  --accent-glow: rgba(194, 65, 12, 0.2);
  --accent-border: rgba(194, 65, 12, 0.4);
  --accent-faint: rgba(194, 65, 12, 0.08);
  --accent-hi: #cf6131;
  --accent-mid: #a3370a;
  --accent-deep: #6b2407;
  --accent-ink: #fbfbf9;
  --bg-glow: #f3f3f0;
  --nav-bg: rgba(243, 243, 240, 0.9);
  --scroll-thumb: #c9c9c1;
  --hover-bg: rgba(17, 17, 17, 0.05);
  --chip-border: rgba(17, 17, 17, 0.16);
  --badge-bg: rgba(17, 17, 17, 0.06);
  --badge-fg: rgba(17, 17, 17, 0.62);
  --chip-bg: rgba(17, 17, 17, 0.04);
  --chip-text: #3b3b38;
  --input-bg: #fbfbf9;
  --input-placeholder: #6b6b65;   /* 4.5:1 on the light input */
  --input-hover-border: #b9b9b0;
  --track-bg: #e6e6e0;
  --panel-hover-border: #b9b9b0;
  --divider: #e3e3dd;
  --dup-ink: #3b3b38;
  --grid-line: rgba(17, 17, 17, 0.07);
  /* The status colours as text on the light surfaces, at 4.5:1. */
  --ok-ink: #157a42;
  --warn-ink: #8a4f00;
  --crit-ink: #b42318;
  --crit-solid: #b42318;
  --signal-text: #c2410c;
  --series-neutral: #8a8a83;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

a { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- top nav ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 24px;
  height: 58px; display: flex; align-items: center; gap: 28px;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; letter-spacing: 0.04em;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
/* The mark is logo.svg painted through a CSS mask rather than an <img>: an
   <img> cannot inherit `currentColor`, and this instance's accent is set at
   runtime for white-labelling. Mask keeps one SVG on disk and lets every
   placement take its own colour and size. */
.brand-mark {
  width: 18px; height: 18px; flex: none;
  background: var(--accent);
  -webkit-mask: url("/logo.svg") center / contain no-repeat;
  mask: url("/logo.svg") center / contain no-repeat;
  transition: background 0.25s;
}
.brand-accent { color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }
.brand-text { color: var(--text); }
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-link {
  color: var(--muted); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 6px 12px; border-radius: 6px; position: relative;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover { color: var(--text); text-decoration: none; background: var(--hover-bg); }
.nav-link.active { color: var(--accent); }
.nav-link.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -14px;
  height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}
.nav-logout { margin-left: auto; }
.health { display: inline-flex; align-items: center; gap: 8px; }
.health-label { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.04em; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3a4a6e; flex: none;
}
.dot-ok { background: var(--ok); box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 80%, transparent); animation: pulse 2.4s ease-in-out infinite; }
.dot-warn { background: var(--warn); box-shadow: 0 0 8px color-mix(in srgb, var(--warn) 70%, transparent); }
.dot-crit { background: var(--crit); box-shadow: 0 0 8px color-mix(in srgb, var(--crit) 70%, transparent); }
@keyframes pulse { 50% { opacity: 0.55; } }

/* ---------- layout ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 26px 24px 64px; }
.page-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.page-title {
  margin: 0; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent);
  text-shadow: 0 0 16px var(--accent-glow);
}
.grid-main { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; gap: 18px; align-items: start; }
.grid-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 10px 30px rgba(0, 0, 0, 0.25);
  min-width: 0;
  transition: border-color 0.2s;
}
.panel:hover { border-color: var(--panel-hover-border); }
.panel-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
}
.panel-subtitle {
  margin: 18px 0 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
}
.panel-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.empty { color: var(--muted); font-size: 13px; padding: 10px 2px; }
.empty.pulse { animation: pulse 1.2s ease-in-out infinite; color: var(--accent); }
.error-line { color: var(--crit); font-size: 13px; min-height: 18px; margin-top: 8px; }
/* A field's own error, under it: the input outlined, the sentence beneath. */
.input[aria-invalid="true"] { border-color: var(--crit); }
.field-error { color: var(--crit); font-size: 12px; margin: 4px 0 0; }

/* ---------- stats ---------- */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.stat-card:hover {
  border-color: var(--accent-border); transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.stat-value { font-family: var(--mono); font-size: 27px; font-weight: 600; line-height: 1; }
.stat-value.accent { color: var(--accent); text-shadow: 0 0 18px var(--accent-glow); }
.stat-value.ok { color: var(--ok); }
.stat-value.dup { color: var(--dup); }
.stat-value.warn { color: var(--warn); }
.status-strip { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.strip-item { display: inline-flex; align-items: center; gap: 6px; }
.strip-count { font-size: 12px; color: var(--text); }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: 12px; min-width: 0; }
.field[hidden] { display: none; }
/* Sentence case, at reading size. Uppercase micro-labels with wide tracking
   read as a dashboard from 2016; ADP and every current console label fields the
   way a form is labelled on paper. */
.field-label {
  display: block; font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text); margin-bottom: 6px;
}
/* Input metrics match the ADP console: 40px tall, 10px radius, 14px text.
   The height matters more than it looks — a 40px control next to a 36px button
   is the difference between a form that reads as one row and one that reads as
   two. */
.input {
  width: 100%; font: inherit; font-size: 14px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 0 10px; height: 40px; transition: border-color 0.15s, box-shadow 0.15s;
}
textarea.input, select[multiple].input { height: auto; padding: 9px 10px; }
.input::placeholder { color: var(--input-placeholder); }
.input:hover:not(:focus) { border-color: var(--input-hover-border); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
textarea.input { resize: vertical; min-height: 64px; }
select.input { cursor: pointer; }

.btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 8px; padding: 9px 16px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text);
  transition: filter 0.15s, box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
  letter-spacing: 0.02em;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Flat, not a gradient with a glow. On a light surface the glow reads as a
   focus ring that never turns off, and the vertical gradient is the single
   strongest "old dashboard" tell in the whole console. */
.btn-primary {
  background: var(--accent-mid);
  border-color: transparent; color: var(--accent-ink);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-deep); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--text); }
.btn-danger { background: transparent; color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--crit) 10%, transparent); border-color: var(--crit); }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-wide { width: 100%; }
/* A link styled as a button (Add, Cancel) is a button: no link underline on
   hover, and laid out like one beside real buttons. */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.btn:hover { text-decoration: none; }
.btn:focus-visible, .nav-link:focus-visible, .brand:focus-visible,
.theme-toggle:focus-visible, .routing-del:focus-visible, .input:focus-visible,
.ticket-row:focus-visible, .flow-node:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* One accent for every checkbox, radio and slider in the console. Each
   component used to set its own — the theme accent here, a fixed orange
   (--signal, --llmp-orange) there — so in the light theme two checkboxes on
   one screen were two different oranges. Set once, on the element, so a new
   component inherits it rather than choosing again. */
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }

/* ---------- sortable table headers and page size (console.js table) ---------- */
.tbl th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl th.th-sort:hover { color: var(--text); }
.tbl th.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tbl th .th-sort-ico { color: var(--accent); font-size: var(--fs-xs); }
.tbl-foot .tbl-size { width: auto; height: 28px; padding: 0 6px; font-size: 12px; }

/* ---------- number steppers (common.js addStepper) ----------
   − and + beside every number input, as tall as the input and in the
   button language of the console. The native spinner is hidden inside a
   stepper so a field does not offer two sets of arrows. */
.num-step { display: inline-flex; align-items: stretch; gap: 4px; max-width: 100%; vertical-align: middle; }
.num-step-block { display: flex; width: 100%; }
.num-step[hidden] { display: none; }
.num-step > input { -moz-appearance: textfield; appearance: textfield; }
/* A field that filled its row shares that width with the buttons; one sized
   for its content (a rate cell sized to show seven digits) keeps its own
   width, and the buttons sit beside it rather than squeezing it. */
.num-step-block > input { flex: 1 1 auto; min-width: 0; }
.num-step:not(.num-step-block) > input { flex: 0 0 auto; }
.num-step > input::-webkit-inner-spin-button,
.num-step > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-step-btn {
  flex: 0 0 auto; min-width: 30px; padding: 0 8px; cursor: pointer;
  font-family: var(--mono); font-size: 14px; line-height: 1; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.num-step-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.num-step-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.pill-new { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.pill-open { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border); }
.pill-in_progress { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.pill-pending { color: var(--info); background: color-mix(in srgb, var(--info) 8%, transparent); border-color: color-mix(in srgb, var(--info) 30%, transparent); border-style: dashed; }
.pill-waiting { color: var(--muted); background: color-mix(in srgb, var(--muted) 8%, transparent); border-color: color-mix(in srgb, var(--muted) 35%, transparent); border-style: dashed; }
.pill-resolved { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pill-closed { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); border-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.pill-duplicate { color: var(--dup); background: color-mix(in srgb, var(--dup) 12%, transparent); border-color: color-mix(in srgb, var(--dup) 40%, transparent); }
.pill-p1 { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.pill-p2 { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.pill-p3 { color: var(--info); background: color-mix(in srgb, var(--info) 10%, transparent); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.pill-p4 { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); border-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.pill-type { color: var(--accent); background: transparent; border-color: var(--accent-border); }
/* sensitivity labels (sensitivity.py): a chip on fix cards and citations */
.pill-sens { margin-left: 6px; letter-spacing: 0.04em; }
.pill-sens-public { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pill-sens-internal { color: var(--info); background: color-mix(in srgb, var(--info) 8%, transparent); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.pill-sens-confidential { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pill-sens-restricted { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 50%, transparent); }
.pill-src-connected { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pill-src-error { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.pill-src-new { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); border-color: color-mix(in srgb, var(--muted) 30%, transparent); }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.table td {
  padding: 9px 10px; font-size: 13px;
  border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
tr.ticket-row { cursor: pointer; transition: background 0.12s; }
tr.ticket-row:hover { background: var(--accent-faint); }
.cell-id { color: var(--accent); font-size: 12px; white-space: nowrap; }
.cell-title, .cell-team, .cell-cat { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- charts ---------- */
.chart { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 118px 1fr 32px; align-items: center; gap: 10px; }
.bar-label { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 8px; background: var(--track-bg); border-radius: 999px; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.bar-count { font-size: 12px; color: var(--text); text-align: right; }

/* ---------- pipeline traces ---------- */
.pipe-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pipe-id { font-size: 16px; font-weight: 700; color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }
.pipe-run { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; }
.traces { display: flex; flex-direction: column; gap: 8px; }
.trace-row {
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px;
}
.trace-row.trace-failed { border-left-color: var(--crit); }
.trace-head { display: flex; align-items: center; gap: 10px; }
.trace-agent {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}
.trace-failed .trace-agent { color: var(--crit); }
.trace-action {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.trace-ms { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.trace-summary { margin-top: 6px; font-size: 12.5px; color: var(--text); line-height: 1.45; }
.trace-conf { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.confbar { flex: 1; height: 5px; background: var(--track-bg); border-radius: 999px; overflow: hidden; }
.confbar-fill {
  height: 100%; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
.conf-pct { font-size: var(--fs-xs); color: var(--muted); width: 34px; text-align: right; }

.reveal { opacity: 0; animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.dup-banner {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--dup) 10%, transparent); border: 1px solid color-mix(in srgb, var(--dup) 45%, transparent);
  color: var(--dup-ink); border-radius: 8px; padding: 10px 13px; margin: 10px 0;
  font-size: 13px;
}
.dup-link { color: var(--dup); font-weight: 700; }

.reco-list { display: flex; flex-direction: column; gap: 8px; }
.reco-item { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.reco-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.reco-ref { font-size: var(--fs-xs); color: var(--dup); flex: none; }
.reco-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reco-score { margin-left: auto; font-size: var(--fs-xs); color: var(--accent); flex: none; }
.reco-res { margin-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.45; }
/* The way back to the original in the customer's own system (ticketiq/origin.py). */
.origin-link { display: inline-block; margin-top: 5px; font-size: 12px; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
a.origin-link:hover, a.origin-link:focus-visible { text-decoration: underline; }

/* ---------- filter bar ---------- */
.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.filter-bar select.input { width: 180px; flex: none; }
.filter-bar .filter-q { flex: 1; }
#result-count { font-size: var(--fs-xs); flex: none; }

/* ---------- ticket detail drawer (tickets.html) ---------- */
.tdrawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(500px, 94vw); overflow-y: auto;
  background: var(--bg-2); border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
  padding: 22px 24px 40px;
  animation: slide-in 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes slide-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.tdrawer .drawer-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drawer-id { font-size: 16px; font-weight: 700; color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }
.drawer-close { margin-left: auto; }
.drawer-title { margin: 14px 0 6px; font-size: 17px; line-height: 1.35; }
.drawer-desc { margin: 6px 0 14px; font-size: 13px; color: var(--muted); line-height: 1.55; white-space: pre-wrap; }
.meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
  margin: 14px 0; padding: 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px;
}
.meta-cell dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 3px; }
.meta-cell dd { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.detail-traces { display: flex; flex-direction: column; gap: 8px; }
.run-head { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }
.update-row {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.update-triage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
@media (max-width: 560px) { .update-triage { grid-template-columns: 1fr; } }
.detail-activity { margin-top: 16px; }
.detail-activity .page-tabs { margin-bottom: 10px; }
.detail-history { display: flex; flex-direction: column; gap: 8px; }
.history-entry { padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px;
  font-size: 12.5px; }
.history-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 3px; }
.history-what { color: var(--text); overflow-wrap: anywhere; }

/* ---------- admin ---------- */
.admin-msg {
  flex: 1; min-height: 20px; font-size: 13px; font-family: var(--mono);
  color: var(--muted); overflow-wrap: anywhere;
}
.admin-msg.ok { color: var(--ok); }
.admin-msg.err { color: var(--crit); }
.sources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.source-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 13px 15px; }
.source-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.source-name { font-weight: 700; font-size: 14px; margin-right: auto; overflow: hidden; text-overflow: ellipsis; }
.source-meta { font-size: 12px; color: var(--muted); }
.source-meta .mono { color: var(--text); }
.source-error {
  margin-top: 8px; font-size: 11.5px; color: var(--crit); font-family: var(--mono);
  background: color-mix(in srgb, var(--crit) 7%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 25%, transparent);
  border-radius: 6px; padding: 6px 8px; overflow-wrap: anywhere;
}
.source-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.connect-form { border-top: 1px solid var(--border); padding-top: 6px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.mail-status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.mail-state { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.mail-state.on { color: var(--ok); }
.mail-state.off { color: var(--muted); }
.mail-count { color: var(--accent); font-size: 13px; }
.settings-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.settings-row .field { margin-bottom: 0; width: 200px; }
.admin-stack { display: flex; flex-direction: column; gap: 18px; }

/* ---------- a page of sections (sectionnav.js): Settings, Setup, Operator ----------
   A quiet left sub-nav, one section shown at a time. Flat hairlines; the
   signal orange only marks the section that is open. */
.section-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 28px; align-items: start; }
.section-nav { position: sticky; top: calc(var(--topnav-h) + 16px); display: flex; flex-direction: column;
  gap: 1px; padding-right: 14px; border-right: 1px solid var(--border-soft); }
.section-nav-label { margin: 14px 0 4px 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.section-nav-label:first-child { margin-top: 0; }
.section-nav a { display: block; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--muted);
  text-decoration: none; }
.section-nav a:hover { color: var(--text); background: var(--hover-bg); }
.section-nav a[aria-current="page"] { color: var(--text); background: var(--panel);
  box-shadow: inset 2px 0 0 var(--signal, var(--accent)); font-weight: 600; }
.section-nav a:focus-visible { outline: 2px solid var(--signal, var(--accent)); outline-offset: 1px; }
.section-views { min-width: 0; }
.section-view { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.section-view[hidden] { display: none; }
.section-view .panel { box-shadow: none; }
.section-links { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.section-links a, .section-view p.muted a { color: var(--text); text-underline-offset: 2px; }
.jobs-pager { align-items: center; }
@media (max-width: 860px) {
  /* Narrow: the sub-nav becomes one scrolling row above the section. */
  .section-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .section-nav { position: static; flex-direction: row; overflow-x: auto; padding: 0 0 6px;
    border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .section-nav-label { display: none; }
  .section-nav a { white-space: nowrap; }
  .section-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--signal, var(--accent)); }
}

/* ---------- toasts ---------- */
#toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; }
.toast {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--ok);
  border-radius: 8px; padding: 10px 15px; margin-top: 8px; font-size: 13px;
  max-width: 380px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  animation: rise 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.toast-err { border-left-color: var(--crit); }
.toast-out { opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; }

/* ---------- branding panel ---------- */
.brand-row {
  display: grid; grid-template-columns: 1.1fr 1.6fr auto auto;
  gap: 14px; align-items: end;
}
.brand-row .field { margin-bottom: 0; min-width: 0; }
.accent-inputs { display: flex; align-items: center; gap: 8px; }
.accent-swatch {
  width: 40px; height: 37px; padding: 3px; flex: none; cursor: pointer;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.accent-swatch:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.accent-hex { width: 104px; }
.brand-hint { margin: 12px 0 0; font-size: 12px; }

/* ---------- background jobs ---------- */
.jobs-list { display: flex; flex-direction: column; gap: 12px; }
.job-row {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
}
.job-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.job-label {
  font-weight: 600; font-size: 13.5px; margin-right: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.job-id { font-size: var(--fs-xs); }
.pill-job-queued { color: var(--info); background: color-mix(in srgb, var(--info) 10%, transparent); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.pill-job-running { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border); animation: pulse 1.8s ease-in-out infinite; }
.pill-job-done { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pill-job-failed { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.pill-job-cancelled { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); border-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.job-bar { height: 8px; background: var(--track-bg); border-radius: 999px; overflow: hidden; position: relative; }
.job-bar-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.job-bar.indeterminate .job-bar-fill {
  width: 38%; transition: none;
  animation: job-slide 1.4s ease-in-out infinite;
}
@keyframes job-slide {
  from { transform: translateX(-110%); }
  to { transform: translateX(300%); }
}
.job-meta {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: 8px; font-size: 11.5px; color: var(--muted);
}
.job-progress { color: var(--text); }
.job-message { margin-top: 6px; font-size: 12px; }
.job-error {
  margin-top: 8px; font-size: 11.5px; color: var(--crit); font-family: var(--mono);
  background: color-mix(in srgb, var(--crit) 7%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 25%, transparent);
  border-radius: 6px; padding: 6px 8px; overflow-wrap: anywhere;
}

/* ---------- scale metrics ---------- */
.scale-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.scale-hero { display: flex; flex-direction: column; gap: 6px; margin-right: auto; }
.scale-points {
  font-family: var(--mono); font-size: 30px; font-weight: 600; line-height: 1;
  color: var(--accent); text-shadow: 0 0 18px var(--accent-glow);
}
.bench-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.bench-stat {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
}
.bench-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.bench-stat-value { font-family: var(--mono); font-size: 18px; color: var(--accent); }
.bench-meta { margin-top: 10px; font-size: 11.5px; }

/* ---------- SLA chips ---------- */
.cell-status { white-space: nowrap; }
.sla-chip {
  display: inline-flex; align-items: center; margin-left: 8px;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700;
  padding: 1px 7px; border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap; vertical-align: middle;
}
.sla-ok { color: var(--muted); background: color-mix(in srgb, var(--muted) 8%, transparent); border-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.sla-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.sla-crit { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }

/* ---------- platform strip ---------- */
.platform-strip {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 18px; margin-bottom: 18px;
  transition: border-color 0.2s;
}
.platform-strip:hover { border-color: var(--panel-hover-border); }
.plat-item { display: inline-flex; align-items: baseline; gap: 9px; }
.plat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.plat-value { font-family: var(--mono); font-size: 14px; color: var(--text); }
.plat-value.accent { color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }

/* ---------- responsive ---------- */
/* The tickets page's two columns need about 880px; with the rail docked a
   1024px screen leaves 704. */
@media (max-width: 1100px) {
  .grid-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1020px) {
  .grid-main, .grid-duo { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .nav-inner { gap: 14px; }
  .brand-row { grid-template-columns: 1fr; align-items: stretch; }
  .bench-grid { grid-template-columns: 1fr; }
}

/* ---- insights page ---- */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 18px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.page-actions { display: flex; align-items: center; gap: 12px; }
.stats-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .stats-row-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }
.trend { padding-top: 6px; }
.trend-row { display: flex; align-items: flex-end; gap: 4px; min-height: 88px; }
.trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.trend-bar { width: 100%; max-width: 26px; background: var(--accent); opacity: 0.75; border-radius: 3px 3px 0 0; }
.trend-col:hover .trend-bar { opacity: 1; }
.trend-label { font-size: var(--fs-xs); color: var(--muted); font-family: var(--mono); transform: rotate(-45deg); transform-origin: top left; white-space: nowrap; margin-top: 8px; height: 26px; }
.sla-overdue { color: var(--crit); }
.sla-soon { color: var(--warn); }

/* ---- continuous learning controls ---- */
.input-sm { padding: 4px 8px; font-size: 12px; width: auto; }
.field-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; cursor: pointer; font-size: 12px; }
.source-auto { align-items: center; gap: 8px; border-top: 1px solid var(--divider); padding-top: 10px; margin-top: 10px; }
.source-auto .muted { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }

/* ---- table containment: never overflow the panel ---- */
.table { table-layout: fixed; }
.table th, .table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The fixed columns sum to 700px and Title takes what is left, so the floor
   is those plus room for a title (240px): narrower, the .tbl-scroll wrapper
   scrolls. A floor of just the fixed columns left Title 0px wide on a phone. */
.tbl-scroll > .table[data-testid="tickets-table"], [data-testid="tickets-table"] { min-width: 940px; }
/* The same on a phone for any static table in a .tbl-scroll: a fixed layout
   otherwise shares 350px out and every column reads a few letters wide. */
@media (max-width: 760px) { .tbl-scroll > .table { min-width: 640px; } }
[data-testid="tickets-table"] th:nth-child(1) { width: 118px; }  /* TIQ-5A03DB, INC0010200 whole */
[data-testid="tickets-table"] th:nth-child(3) { width: 138px; }
[data-testid="tickets-table"] th:nth-child(4) { width: 186px; }
[data-testid="tickets-table"] th:nth-child(5) { width: 88px; }
[data-testid="tickets-table"] th:nth-child(6) { width: 170px; }
[data-testid="recurring-list"] th:nth-child(1) { width: 58%; }
[data-testid="recurring-list"] th:nth-child(3) { width: 72px; }
[data-testid="sla-risk-list"] th:nth-child(1) { width: 92px; }
[data-testid="sla-risk-list"] th:nth-child(4) { width: 48px; }
[data-testid="sla-risk-list"] th:nth-child(5) { width: 96px; }
.panel { min-width: 0; }
.grid-2 > .panel { overflow: hidden; }


/* ---- theme toggle ---- */
.theme-toggle {
  width: 30px; height: 30px; flex: none;
  background: transparent; border: 1px solid var(--border); border-radius: 7px;
  color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent-border); background: var(--hover-bg); }

/* ---- incident flow graph (category -> team) ---- */
.flow-graph { position: relative; overflow-x: auto; }
.flow-svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.flow-edge { fill: none; transition: opacity 0.2s, stroke-width 0.2s; }
.flow-svg.has-focus .flow-edge:not(.focus) { opacity: 0.06 !important; }
.flow-svg.has-focus .flow-pulse:not(.focus) { opacity: 0; }
.flow-node { cursor: pointer; }
.flow-node circle {
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.flow-svg.has-focus .flow-node:not(.focus) { opacity: 0.25; }
.flow-label { fill: var(--text); font-size: 12px; font-weight: 600; }
.flow-count { fill: var(--muted); font-size: var(--fs-xs); font-family: var(--mono); }
.flow-col-head {
  fill: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.flow-legend { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.flow-legend .muted { font-size: var(--fs-xs); }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: middle; }

/* ---- routing rules editor ---- */
.routing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.routing-rows { display: flex; flex-direction: column; gap: 8px; }
.routing-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) 30px; gap: 8px; align-items: center; }
.routing-row .cat-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routing-row .pill-custom { justify-self: start; }
.routing-del {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
}
.routing-del:hover { color: var(--crit); border-color: var(--crit); }
.sla-grid { display: grid; grid-template-columns: repeat(4, minmax(80px, 1fr)); gap: 10px; }
.routing-hint { font-size: 12px; }
@media (max-width: 900px) { .routing-grid { grid-template-columns: 1fr; } }

/* ---- SLA policies editor ---- */
.sla-editor { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.sla-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.sla-hours, .sla-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sla-pause { display: flex; gap: 14px; flex-wrap: wrap; }
.sla-preview-result { font-size: 12px; white-space: pre-wrap; min-height: 1.4em; }

/* ---- production formatting sweep ---- */
/* Neutral pill for absent priority ("—") */
.pill-none { color: var(--muted); border-color: var(--border); background: transparent; }

/* Numeric table cells right-align + tabular figures for clean columns */
td.num, .num { text-align: right; font-variant-numeric: tabular-nums; }
#collections-table th:nth-child(2), #recurring-list th:nth-child(3) { text-align: right; }

/* Long unbroken tokens (URLs, IDs, stack traces) must wrap, never scroll */
.drawer-title, .drawer-desc, .cell-title, .reco-res, .job-message, .job-error,
.source-error, .admin-msg { overflow-wrap: anywhere; word-break: break-word; }

/* Source card name can ellipsis only with a width bound */
.source-name { max-width: 100%; white-space: nowrap; }

/* Toasts: cap width, wrap long errors */
.toast { max-width: min(90vw, 420px); overflow-wrap: anywhere; }

/* Load-more control */
.load-more-row { display: flex; justify-content: center; margin-top: 14px; }
.load-more-row button[hidden] { display: none; }

/* SLA chip must not force the status column to overflow */
.cell-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sla-chip { white-space: nowrap; }

/* ---- responsive: tablet & phone ---- */
@media (max-width: 760px) {
  .nav-inner { gap: 12px; padding: 0 14px; height: auto; min-height: 52px;
    flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; gap: 2px;
    -webkit-overflow-scrolling: touch; }
  .nav-link { padding: 6px 8px; letter-spacing: 0.06em; white-space: nowrap; }
  .nav-link.active::after { bottom: -8px; }
  .health { order: 2; }
  .wrap { padding: 16px 12px 48px; }
  .grid-main, .grid-duo { grid-template-columns: 1fr; }
  .stats-row, .stats-row-5 { grid-template-columns: repeat(2, 1fr); }
  .filter-bar { flex-wrap: wrap; }
  .filter-bar select.input, .filter-bar .input { width: 100%; flex: 1 1 100%; }
  .sla-grid { grid-template-columns: repeat(2, 1fr); }
  .routing-row { grid-template-columns: 1fr 1fr 28px; }
  /* Detail drawer becomes full-width on phones instead of a cramped side panel */
  .tdrawer { position: fixed; inset: 0; width: 100%; max-width: 100%; }
}
@media (max-width: 420px) {
  .stats-row, .stats-row-5 { grid-template-columns: 1fr; }
}

/* ---- integrations panel ---- */
.integrations-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.integration-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  background: var(--panel-2); display: flex; flex-direction: column; gap: 6px; }
.integration-head { display: flex; align-items: center; gap: 8px; }
.integration-name { font-weight: 700; font-size: 14px; margin-right: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.integration-meta { font-size: 11.5px; overflow-wrap: anywhere; }
.integration-actions { display: flex; gap: 8px; margin-top: 4px; }
.integ-events { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.integ-events .check { display: flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--text); cursor: pointer; }
.api-token-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 4px; }
.api-token-row .input { font-size: 12px; }
.api-endpoints { margin-top: 10px; font-size: 12px; display: flex; flex-direction: column; gap: 4px;
  color: var(--text); }
.api-endpoints .muted { color: var(--muted); }
.deflect-kpi { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel-2); display: flex; align-items: baseline;
  gap: 14px; flex-wrap: wrap; }
.deflect-rate { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; }
.deflect-rate-label { font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.deflect-detail { font-size: 12px; }

/* ---- Agent operations + tuning + audit (enterprise console) ---- */
.agent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px; margin-bottom: 6px; }
.agent-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  background: var(--panel-2); display: flex; flex-direction: column; gap: 10px; }
.agent-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-name { font-weight: 700; font-size: 14px; }
.pill-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pill-err { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.pill-audit { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border); }
.agent-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.agent-stat b { font-size: 15px; } .agent-stat { font-size: 12px; }
.agent-actions { display: flex; flex-direction: column; gap: 5px; }
.agent-action-row { display: grid; grid-template-columns: 1fr 70px 34px; align-items: center;
  gap: 8px; font-size: var(--fs-xs); }
.agent-action-name { color: var(--muted); text-transform: capitalize; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.agent-action-bar { height: 6px; background: var(--accent-faint); border-radius: 4px; overflow: hidden; }
.agent-action-fill { display: block; height: 100%; background: var(--accent);
  border-radius: 4px; }
.agent-action-n { text-align: right; color: var(--muted); }

.tune-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.tune-group:first-of-type { margin-top: 4px; border-top: none; padding-top: 0; }
.tune-agent { color: var(--accent); margin-bottom: 10px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; }

.bench-controls { margin: 8px 0 12px; }
.bench-slider-field { max-width: 420px; }
.bench-slider { width: 100%; }
.dedup-bench-result { border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  background: var(--panel-2); display: flex; flex-direction: column; gap: 8px; }
.bench-summary { font-size: 12px; }
.bench-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.bench-line-cand { font-weight: 600; }
.bench-line-label { min-width: 150px; color: var(--muted); }
.bench-chip { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); }
.bench-merge { color: var(--dup); border-color: color-mix(in srgb, var(--dup) 40%, transparent); background: color-mix(in srgb, var(--dup) 10%, transparent); }
.bench-review { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.bench-unique { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.bench-delta { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 2px; }

#audit-table td.audit-detail { max-width: 380px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--muted); font-size: 12px; }
/* Nine fixed-layout columns cannot share a phone's width: below ~900px each
   was a few letters wide. The table keeps its width and the wrap scrolls. */
.tbl-wrap[data-testid="audit-table"] { overflow-x: auto; }
.tbl-wrap[data-testid="audit-table"] > table { min-width: 900px; }

/* ---- Enterprise analytics (per-agent) ---- */
/* Factory: one hairline strip of tiles, numbers in ink (the home page's
   kpi-strip); the tone is a small square before the label, not the number. */
.exec-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:1px;
  border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--border); }
.exec-tile { padding:14px 16px; background:var(--panel); display:flex; flex-direction:column; gap:3px; }
.exec-val { font-size:24px; font-weight:600; letter-spacing:-0.02em; line-height:1.1; color:var(--text);
  font-variant-numeric: tabular-nums; }
.exec-label::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px;
  vertical-align:1px; background:var(--accent); }
.exec-tile.tone-ok .exec-label::before { background:var(--ok); }
.exec-tile.tone-warn .exec-label::before { background:var(--warn); }
.exec-tile.tone-dup .exec-label::before { background:var(--muted); }
.exec-label { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-top:8px; color:var(--muted); }
.exec-sub { font-size:var(--fs-xs); }
.agent-intel { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%),1fr)); gap:14px; }
.intel-card { border:1px solid var(--border); border-radius:10px; padding:16px 18px; background:var(--panel);
  display:flex; flex-direction:column; gap:9px; }
.intel-head { display:flex; align-items:center; gap:9px; }
.intel-icon { font-size:18px; } .intel-name { font-weight:600; font-size:15px; letter-spacing:-0.01em; }
.intel-tagline { font-size:12px; line-height:1.4; min-height:32px; }
.intel-headline { display:flex; align-items:baseline; gap:8px; padding:6px 0; border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft); }
.intel-headline-val { font-size:22px; font-weight:600; letter-spacing:-0.02em; color:var(--text); font-variant-numeric: tabular-nums; }
.intel-headline-lbl { font-size:11.5px; }
.intel-detail { display:flex; flex-direction:column; gap:6px; }
.intel-line { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; gap:10px; }
.intel-bar-row { display:grid; grid-template-columns:1fr 80px 42px; align-items:center; gap:8px; font-size:11.5px; }
.intel-bar-label { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:capitalize; }
.intel-bar { height:6px; background:var(--track-bg); border-radius:2px; overflow:hidden; }
.intel-bar-fill { display:block; height:100%; border-radius:4px; background:var(--accent); }
.intel-bar-fill.tone-ok { background:var(--ok); } .intel-bar-fill.tone-warn { background:var(--warn); }
.intel-bar-n { text-align:right; color:var(--muted); }
@media (max-width:640px){ .exec-grid,.agent-intel { grid-template-columns:1fr 1fr; } }
/* Triage accuracy: the confusion matrix (rows are labels, columns what the
   agents said), shaded by each cell's share of its row. */
.te-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.te-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; margin-top:12px; }
/* The confusion matrix scrolls sideways in its own box (analytics.js). */
.te-cm-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.te-cm { border-collapse:collapse; font-size:12px; font-family:var(--mono); }
.te-cm th { font-weight:600; color:var(--muted); padding:5px 7px; text-align:center; max-width:110px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.te-cm th.te-row { text-align:right; }
.te-cm td { padding:6px 8px; text-align:center; border:1px solid var(--border-soft); min-width:34px; }
.te-cm td.te-hit { font-weight:750; }
.te-cm td.te-miss { color:var(--warn); }
.te-warn { color:var(--warn); font-size:12px; margin:4px 0; }
.te-candidate { font-size:12px; margin:0 0 10px; padding:7px 10px; border-radius:8px;
  border:1px dashed var(--border); background:var(--panel-2); overflow-wrap:anywhere; }
.te-bench { display:flex; gap:10px; align-items:flex-start; margin-top:14px; flex-wrap:wrap; }
.te-bench textarea { flex:1 1 320px; min-height:54px; font-family:var(--mono); font-size:12px; }
@media (max-width:900px){ .te-grid { grid-template-columns:1fr; } }

/* ---- Liya panel (ticket drawer; built-in agent id `copilot`) ---- */
.copilot-panel { border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface)); padding: 12px 14px; margin: 14px 0; }
.copilot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.copilot-head .panel-subtitle { margin: 0; }
.copilot-body { margin-top: 4px; }
.copilot-meta { display: flex; gap: 10px; align-items: center; margin: 8px 0 4px; }
.copilot-summary { font-size: 13.5px; line-height: 1.55; margin: 6px 0 4px; }
.copilot-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 5px; }
.copilot-label-row { display: flex; align-items: center; justify-content: space-between; }
.copilot-case { border-left: 2px solid var(--accent); padding: 4px 0 4px 10px; margin: 6px 0; font-size: 12.5px; }
.copilot-case-head { display: flex; gap: 8px; justify-content: space-between; font-weight: 600; }
.copilot-case .muted { font-weight: 400; margin-top: 2px; line-height: 1.45; }
.copilot-reply { white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 0; }
.copilot-actions { margin: 4px 0 2px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
/* Quality-audit panel in the ticket drawer */
.audit-panel { margin-top: 4px; }
.audit-score { font-variant-numeric: tabular-nums; }
.audit-check { display: flex; gap: 7px; align-items: baseline; font-size: 12.5px; margin-top: 3px; }
.audit-ok { color: var(--ok, #22c55e); font-weight: 700; }
.audit-fail { color: var(--crit, var(--crit)); font-weight: 700; }

/* Sentiment tones — scoped to the co-pilot header: files.js already renders
   unstyled `pill pill-muted` badges, which a global rule would repaint. */
.copilot-meta .pill-muted { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.copilot-meta .pill-warn  { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.copilot-meta .pill-danger{ background: color-mix(in srgb, var(--crit, var(--crit)) 22%, transparent); color: var(--crit, var(--crit)); }

/* ==========================================================================
   CONSOLE SHELL — sidebar + breadcrumb layout for the admin/governance plane.

   Conventions borrowed from enterprise consoles generally: a grouped left rail,
   a breadcrumb bar, list pages built from search + filter chips + table +
   pagination, and detail pages built from labelled sections. Everything below
   is driven by the SAME theme tokens the rest of the app uses, so light/dark
   and white-labelling keep working — no second palette to maintain.
   ========================================================================== */

body.console {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 0.18s ease;
}
/* margin 0, not the legacy .wrap's `0 auto`: auto margins stop a grid item
   stretching to its column and size it to its CONTENT instead — so any wide
   row (nine catalogue tabs) dragged the whole page past the window edge. */
body.console > main.wrap { max-width: none; margin: 0; padding: 0 32px 64px; min-width: 0; }

/* Desktop, collapsed: the rail slides away entirely (ADP's "offcanvas") and
   the page takes the full width; a menu button appears in the top bar. */
body.console.side-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
body.console.side-collapsed > .sidebar { transform: translateX(-100%); visibility: hidden; }

/* The show-sidebar button lives in the top bar and exists only when the rail
   is out of view — collapsed on desktop, or always on a narrow screen. */
/* Two classes, so it outranks .icon-btn's display, which is declared later. */
.topbar .side-trigger { display: none; }
body.console.side-collapsed .topbar .side-trigger { display: inline-flex; }
.side-scrim { display: none; }

/* Narrow screens: the rail becomes a slide-over drawer instead of vanishing.
   It used to be `display: none` here with no way to bring it back, so a
   smaller window simply lost the navigation. */
@media (max-width: 900px) {
  body.console, body.console.side-collapsed { grid-template-columns: minmax(0, 1fr); }
  body.console > main.wrap { padding: 0 16px 48px; }
  body.console > .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: min(284px, 86vw);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
  }
  body.console.side-drawer-open > .sidebar { transform: none; visibility: visible; }
  body.console .topbar .side-trigger { display: inline-flex; }
  body.console .side-toggle { display: none; }
  body.console.side-drawer-open > .side-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(17, 17, 17, 0.45);
  }
}

/* ---- sidebar ---- */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: var(--panel-2);
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.18s ease, visibility 0.18s;
}
.side-head { display: flex; align-items: center; gap: 6px; padding: 2px 2px 8px 6px; }
.side-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.side-brand .brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The scrollable middle: the head and the user button stay put. */
.side-nav { flex: 1; min-height: 0; overflow-y: auto; margin: 4px -4px 0; padding: 0 4px 8px; }
.side-search {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 2px 6px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.side-search:hover { color: var(--text); border-color: var(--accent-border); }
.side-search span { flex: 1; }
kbd {
  font-family: var(--sans); font-size: var(--fs-xs); line-height: 1;
  padding: 3px 5px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
}
.side-brand .brand-mark {
  width: 24px; height: 24px; flex: none;
  border-radius: 6px;
  background: var(--accent);
}
/* Section heading, and the fold control for it. Sentence case like ADP's
   ("AI Gateway", "Tools & Access"), not the shouty uppercase eyebrow. */
.side-group {
  display: flex; align-items: center; gap: 4px;
  width: 100%;
  margin-top: 12px;
  padding: 4px 10px;
  border: 0; background: transparent;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--muted); cursor: pointer; text-align: left;
}
.side-group:disabled { cursor: default; }
.side-group:not(:disabled):hover { color: var(--text); }
.side-group svg { transition: transform 0.15s; }
.side-group:disabled svg { display: none; }
.side-block.folded .side-group svg { transform: rotate(-90deg); }
.side-block.folded .side-links { display: none; }
/* Where the tenant's solutions end and the platform every tenant has
   begins: a hairline over the PLATFORM heading. */
.side-group.side-split { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.side-block:first-child .side-group { margin-top: 0; }
.side-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.3;
}
.side-link:hover { background: var(--hover-bg); color: var(--text); }
.side-link.active { background: var(--accent-faint); color: var(--text); font-weight: 550; }
.side-link .ico { width: 15px; flex: none; text-align: center; opacity: 0.8; }
/* Maturity badge in the rail (Preview / Admin), as ADP marks its own.
   Deliberately quiet: it labels a capability, it is not a call to action.
   Sits hard right so a column of them scans as one list. */
.side-badge {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  flex: none;
  letter-spacing: 0;
  text-transform: none;
}
/* Nested entry (Agent Fleet under Agents). Indents to the parent's label,
   not its icon, so the hierarchy reads without a connector line. */
.side-link.sub {
  padding-left: 32px;
  font-size: 12.5px;
}
.side-link.sub .ico { width: 13px; font-size: var(--fs-xs); }

/* Tag chips (agent labels, ADP-style). Inline, quiet, with a +N overflow so a
   heavily-tagged row cannot push the table into a horizontal scroll. */
.tag-row { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tag-chip {
  font-size: var(--fs-xs); font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px; border-radius: 6px;
  background: var(--badge-bg); color: var(--badge-fg);
  white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.tag-chip.more { cursor: help; font-family: inherit; }
/* A fleet row's tag is a button: clicking it narrows the fleet to that tag. */
.tag-chip.pick { border: 1px solid transparent; cursor: pointer; line-height: inherit; }
.tag-chip.pick:hover { border-color: var(--panel-hover-border); }
.tag-chip.pick.on { border-color: var(--accent-border); background: var(--accent-faint); }

.side-tag {
  margin-left: auto;
  font-size: var(--fs-xs);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-text);
  text-transform: none;
  letter-spacing: 0;
}
.side-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.side-foot .pop-wrap { display: block; }
.side-user {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font: inherit; cursor: pointer; text-align: left;
}
.side-user:hover { background: var(--hover-bg); }
.side-avatar {
  width: 28px; height: 28px; flex: none;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 650;
  color: var(--accent-ink);
  background: var(--accent);
}
.side-who { min-width: 0; flex: 1; font-size: 12.5px; line-height: 1.25; }
.side-who b { display: block; color: var(--text); font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-role { display: block; color: var(--muted); font-size: 11.5px; text-transform: capitalize; }

/* ---- icon buttons, menus ---- */
.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--hover-bg); color: var(--text); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.unread-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--bg);
}
.pop-wrap { position: relative; display: inline-flex; }
.pop-menu {
  position: absolute; top: calc(100% + 6px); z-index: 80;
  min-width: 240px; padding: 5px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.pop-menu.left { left: 0; }
.pop-menu.right { right: 0; }
.pop-menu.up { top: auto; bottom: calc(100% + 6px); width: 100%; }
.menu-title { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; font-size: 12.5px; color: var(--muted); }
.menu-title b { color: var(--text); font-size: 13px; }
.menu-sep { height: 1px; margin: 4px 2px; background: var(--border-soft); }
.menu-item {
  display: block; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px;
  text-decoration: none; text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--hover-bg); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 9px; font-size: 13px; color: var(--text); }
.menu-row kbd + kbd { margin-left: 3px; }

/* Health, only when something is wrong (see startHealthPoll). */
.health-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 550;
  color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--crit) 35%, transparent);
}

/* ---- the drawer's scrim; the drawer itself is in the standard at the end.
   A bare .drawer-scrim is also the backdrop of the shown-once dialogs. ---- */
.drawer-scrim { position: fixed; inset: 0; z-index: 150; background: var(--scrim); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
.note-release { padding: 16px 0 6px; border-bottom: 1px solid var(--border-soft); }
.note-release:last-child { border-bottom: 0; }
.note-head { display: flex; align-items: baseline; gap: 10px; }
.note-version { font-weight: 650; color: var(--text); font-size: 15px; }
.note-date { font-size: 12.5px; color: var(--muted); }
.note-kind { margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.note-item { padding: 6px 0; }
.note-area { display: inline-block; font-size: var(--fs-xs); padding: 2px 6px; border-radius: 6px;
  background: var(--badge-bg); color: var(--badge-fg); margin-bottom: 4px; }
.note-item p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }

/* ---- breadcrumb bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  margin: 0 -32px 4px;
  padding: 0 32px;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { opacity: 0.5; }
.crumbs .here { color: var(--text); }
.topbar .spacer { margin-left: auto; }
.topbar { gap: 4px; }
.topbar .crumbs { margin-left: 4px; min-width: 0; overflow: hidden; white-space: nowrap; }
.topbar .theme-toggle { border: 0; }
@media (max-width: 900px) { .topbar { margin: 0 -16px 4px; padding: 0 12px; } }

/* ---- page header ---- */
.console .page-head { display: block; padding: 26px 0 18px; border: 0; }
/* The legacy page title is a small uppercase accent eyebrow, which reads as a
   section marker rather than a page name. A console page needs a real heading,
   so the console layer resets all four of those properties explicitly — a
   partial override would leave the glow or the letter-spacing behind. */
.console .page-title {
  margin: 0;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
  text-shadow: none;
}
/* Same reasoning for pills: uppercase micro-caps suit a dense status strip,
   not a table cell that has to be read as a word. */
.console .pill { text-transform: none; letter-spacing: 0; }
.page-sub { margin: 7px 0 0; color: var(--muted); font-size: 13.5px; max-width: 88ch; line-height: 1.55; }

/* ---- toolbar: search + filter chips + action ---- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; }
.search-box { position: relative; flex: 0 1 260px; }
.search-box input { width: 100%; padding-left: 30px; }
.toolbar .search-box input.input { height: 32px; }
/* A search box built without .input (the Agents list, Access, Secrets…) is
   still the console's input, never the browser's inset default. */
.search-box input[type="search"]:not(.input):not(.audit-q) {
  font: inherit; font-size: 13px; color: var(--text); background: var(--input-bg);
  border: 1px solid var(--border); border-radius: 8px; height: 32px; padding: 0 10px 0 30px;
  -webkit-appearance: none; appearance: none; }
.search-box input[type="search"]:not(.input):not(.audit-q):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.search-box .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 12px; pointer-events: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font-size: 13px; cursor: pointer;
}
.filter-chip:hover { border-color: var(--panel-hover-border); }
.filter-chip.on { border-color: var(--accent-border); background: var(--accent-faint); }
.filter-chip .ico { color: var(--muted); font-size: var(--fs-xs); }
.toolbar .spacer { margin-left: auto; }

/* ---- data table ---- */
.tbl-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); }
.tbl-scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left; font-weight: 600; color: var(--muted);
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  background: var(--panel-2); white-space: nowrap;
}
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--hover-bg); }
.cell-main { color: var(--text); font-weight: 550; }
/* A cell's second line: sans like the rest of the row (an id or a URL in it
   adds .mono itself). */
.cell-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.cell-sub.mono { font-family: var(--mono); }
/* Two lines at most, the whole text on hover (title). */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 46ch; }
/* A cell holding a pill and a line under it. */
.stack-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.num { font-variant-numeric: tabular-nums; }

/* ---- status pills ---- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 550;
  border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--chip-text);
}
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent); }
.pill.off { color: var(--muted); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent); }
.pill.crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent);
  background: color-mix(in srgb, var(--crit) 10%, transparent); }

/* ---- pagination footer ---- */
.tbl-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; color: var(--muted); font-size: 12.5px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
.tbl-foot .spacer { margin-left: auto; }

/* ---- empty state ---- */
.empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 15px; font-weight: 600; }
.empty p { margin: 0 auto; max-width: 54ch; font-size: 13.5px; line-height: 1.6; }

/* ---- section form: label column + field column ---- */
.form-section {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--border-soft);
}
.form-section:last-of-type { border-bottom: 0; }
.form-section > .lbl h3 { margin: 0 0 5px; font-size: 14px; font-weight: 600; }
.form-section > .lbl p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.form-section > .fields { display: flex; flex-direction: column; gap: 14px; }
.field label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 550; }
.field .hint { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.field .req { color: var(--crit); margin-left: 3px; }
@media (max-width: 760px) { .form-section { grid-template-columns: 1fr; gap: 12px; } }

/* ---- option cards (radio-style choice, e.g. transport / auth mode) ---- */
.opt-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.opt {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel); cursor: pointer; text-align: left; color: var(--text); font: inherit;
}
.opt:hover { border-color: var(--panel-hover-border); }
.opt.on { border-color: var(--accent-border); background: var(--accent-faint); }
.opt b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.opt span { color: var(--muted); font-size: 12px; line-height: 1.5; display: block; }
/* A catalogue card's glyph (or its letter fallback), as a gallery tile. */
.opt .opt-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-bottom: 6px; border-radius: 7px;
  border: 1px solid var(--border); color: var(--muted); font-weight: 600; font-size: 13px; line-height: 1; }
.opt .opt-icon img { width: 20px; height: 20px; display: block; }

/* ---- sticky form footer ---- */
.form-foot {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px;
  margin: 0 -32px; padding: 12px 32px;
  background: var(--nav-bg); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.form-foot .spacer { margin-left: auto; }
/* Evaluations holds two forms on one screen (Run a dataset, Write a version)
   above and below the Runs table: sticky, the lower form's footer floated
   over the runs while the upper one was in use. Each sits under its form. */
[data-page="evals"] .form-foot { position: static; background: transparent; backdrop-filter: none; }
/* The bleed matches main's gutter, which is 16px below 900px (see the
   console rail rules); at -32px the footer ran 16px past the screen. */
@media (max-width: 900px) {
  .form-foot { margin: 0 -16px; padding: 12px 16px; flex-wrap: wrap; }
}

/* ---- stat strip (cost totals row) ---- */
.totals { display: flex; flex-wrap: wrap; gap: 26px; padding: 14px 16px;
  border-top: 1px solid var(--border); background: var(--panel-2); }
.totals .t { display: flex; align-items: baseline; gap: 7px; }
.totals .t span { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.totals .t b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- mini bar chart (spend/tokens over time, no chart library) ---- */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding: 12px 16px; }
.spark .bar { flex: 1 1 0; min-width: 2px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-deep)); opacity: 0.85; }
.spark .bar:hover { opacity: 1; }
.spark .bar.zero { background: var(--track-bg); }

/* ---- spend, requests and tokens on one shared moment (usage.js) ----
   Three small charts side by side, stacked on a narrow screen. The bars are
   the selection; an outline behind each is the whole environment on the same
   scale. The moment's guide is drawn in ink, its figures in ink, and only the
   keyboard focus ring is orange — the chart the operator is driving. */
.uc-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 22px; padding: 12px 16px 6px; }
.uc-chart { min-width: 0; border-radius: 6px; outline: none; }
.uc-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.uc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px;
  flex-wrap: wrap; min-height: 18px; }
.uc-title { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.uc-readout { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  text-align: right; }
.uc-readout b { color: var(--text); font-weight: 650; }
.uc-bars { position: relative; display: flex; align-items: flex-end; height: 110px;
  margin-top: 8px; cursor: crosshair; touch-action: pan-y; }
.uc-col { position: relative; flex: 1 1 0; min-width: 1px; height: 100%;
  display: flex; align-items: flex-end; }
.uc-col .bar { position: relative; width: 100%; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-deep)); opacity: 0.85; }
.uc-col .bar.zero { background: var(--track-bg); }
.uc-col.on .bar { opacity: 1; }
.uc-ghost { position: absolute; left: 0; right: 0; bottom: 0; border: 1px solid var(--border);
  border-bottom: 0; border-radius: 2px 2px 0 0; background: var(--hover-bg); }
.uc-col.on .uc-ghost { border-color: var(--muted); }
.uc-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--text);
  opacity: 0.6; pointer-events: none; }
.uc-detail { white-space: pre-line; font-size: 11.5px; color: var(--muted); margin-top: 6px;
  font-variant-numeric: tabular-nums; }
.uc-key-mine { background: linear-gradient(180deg, var(--accent-hi), var(--accent-deep)); }
.uc-key-whole { border: 1px solid var(--muted); background: var(--hover-bg); box-sizing: border-box; }
.usage-share { margin: 10px 16px 0; font-size: 13px; color: var(--muted); }
.usage-share b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- stacked series (spend split by one dimension over time) ----
   Eight categorical hues in a fixed order, each stepped for its theme's
   surface; the order keeps neighbouring stacks apart for colour-blind
   readers too, so a slot is never re-ordered or generated past the eighth
   (the rest of the keys fold into a grey "Other"). Status colours are left
   to status. */
:root {
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
}
:root[data-theme="light"] {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
}
.stack { padding: 12px 16px 4px; }
.stack-svg { display: block; width: 100%; height: 150px; }
.stack-svg .seg { stroke: var(--panel); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.stack-svg .seg:hover { opacity: 0.8; }
.stack-svg .zero { fill: var(--track-bg); }
.stack-axis { display: flex; justify-content: space-between; margin-top: 4px;
  font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 4px 16px 10px; font-size: 12px; }
.stack-key { display: inline-flex; align-items: center; gap: 6px; }
.stack-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.stack-key b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- tenant switcher ---- */
.tenant-switch { position: relative; margin: 2px 0 6px; }
.tenant-current {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
  text-align: left;
}
.tenant-current:hover { border-color: var(--panel-hover-border); }
.tenant-dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.tenant-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-current .chev { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
.tenant-menu {
  position: absolute; z-index: 20; left: 0; right: -60px; top: calc(100% + 5px);
  padding: 5px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  max-height: 60vh; overflow-y: auto;
}
.tenant-item {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 8px 9px; border: 0; border-radius: 7px; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.tenant-item:hover { background: var(--hover-bg); }
.tenant-item b { display: block; font-size: 13px; font-weight: 600; }
.tenant-item .tenant-meta { display: block; color: var(--muted); font-size: 11.5px; }
.tenant-item .tenant-id {
  display: block; color: var(--muted); font-family: var(--mono); font-size: var(--fs-xs);
  opacity: 0.75;
}
.tenant-item .tick { margin-left: auto; color: var(--ok); }

/* ---- home: greeting, health banner, quick actions ---- */
.greet { font-size: 27px; font-weight: 650; letter-spacing: -0.02em; margin: 0; }
.greet-lede { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.greet-sub { display: flex; align-items: center; gap: 9px; margin: 8px 0 0;
  color: var(--muted); font-size: 13.5px; }
.greet-sub .tenant-dot { box-shadow: none; }
.banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 10px; margin: 20px 0 4px;
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
}
.banner.warn { border-color: color-mix(in srgb, var(--warn) 34%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent); }
.banner.crit { border-color: color-mix(in srgb, var(--crit) 40%, transparent);
  background: color-mix(in srgb, var(--crit) 8%, transparent); align-items: center; }
.banner.crit b { color: var(--crit); }
.banner .ico { font-size: 15px; line-height: 1.4; }
.banner b { display: block; font-size: 14px; margin-bottom: 2px; }
.banner p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.home-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  align-items: start; margin-top: 16px; }
.home-duo { display: grid; gap: 16px; grid-template-columns: 1fr 1fr;
  align-items: start; margin-top: 16px; }
@media (max-width: 980px) {
  .home-grid, .home-duo { grid-template-columns: 1fr; }
}
.card { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.card-head { display: flex; align-items: baseline; gap: 9px; padding: 14px 16px 0; }
.card-head b { font-size: 14px; font-weight: 600; }
.card-head .muted { color: var(--muted); font-size: 12.5px; }
.card-head .spacer { margin-left: auto; }
.kpi { display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  border-bottom: 1px solid var(--border-soft); }
.kpi:last-child { border-bottom: 0; }
.kpi .lbl { color: var(--muted); font-size: 13px; }
.kpi .val { margin-left: auto; text-align: right; }
.kpi .val b { display: block; font-size: 19px; font-weight: 650;
  font-variant-numeric: tabular-nums; }
.kpi .val span { color: var(--muted); font-size: 11.5px; }
.rank { display: flex; align-items: center; gap: 11px; padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft); }
.rank:last-child { border-bottom: 0; }
.rank .n { color: var(--muted); font-size: 12px; width: 12px; }
.rank .who { min-width: 0; flex: 1; }
.rank .who code { font-size: 12.5px; }
.rank .track { height: 3px; margin-top: 6px; border-radius: 2px; background: var(--track-bg); }
.rank .fill { height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-mid), var(--accent-hi)); }
.rank .amt { text-align: right; font-variant-numeric: tabular-nums; }
.rank .amt b { display: block; font-size: 13.5px; }
.rank .amt span { color: var(--muted); font-size: 11.5px; }
.quick { display: grid; gap: 12px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.quick a {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 550;
}
.quick a:hover { border-color: var(--accent-border); }
.quick a .arrow { margin-left: auto; color: var(--muted); }
.cfg { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px;
  padding: 14px 16px; font-size: 13px; }
.cfg dt { color: var(--muted); white-space: nowrap; }
.cfg dd { margin: 0; }


/* ---------- sign-in ----------
   One centred card. The page a customer's staff see every morning should get
   them in, not sell them the product they already bought — and the landing
   hero it replaces was reading live ticket and vector counts out to anyone who
   loaded the URL, signed in or not. */
.signin {
  /* The shared top bar sits above this; 100vh would push the footer line off
     screen and give the page a scrollbar it does not need. */
  min-height: calc(100vh - var(--topnav-h));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  padding: 40px 20px 72px;
  /* Flat ground, no wash: the card's hairline is what separates it. */
  background: var(--bg);
}
.signin-card {
  width: 100%; max-width: 360px;
  padding: 32px 28px 24px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
:root[data-theme="dark"] .signin-card { box-shadow: none; }
.signin-mark {
  width: 32px; height: 32px; align-self: center;
  background: var(--text);
  -webkit-mask: url("/logo.svg") center / contain no-repeat;
  mask: url("/logo.svg") center / contain no-repeat;
}
.signin-title {
  margin: 14px 0 0; text-align: center;
  font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--text);
}
.signin-sub {
  margin: 4px 0 24px; text-align: center;
  color: var(--muted); font-size: 13px;
}
.signin-foot {
  margin: 0; text-align: center; color: var(--muted); font-size: 12px;
  max-width: 360px; opacity: 0.85;
}
.signin-foot a { color: inherit; }
.signin-legal { margin-top: 10px; line-height: 1.9; }

/* Fields: labels above, quiet inputs, one dark neutral button. */
.signin-card .field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.signin-card .field-label {
  font-size: 12.5px; font-weight: 500; color: var(--text);
  text-transform: none; letter-spacing: 0;
}
.signin-card .input {
  height: 36px; padding: 0 11px; font-size: 13.5px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 7px;
  box-shadow: none;
}
.signin-card .input:hover { border-color: var(--input-hover-border); }
.signin-card .input:focus {
  outline: none; border-color: var(--text);
  box-shadow: 0 0 0 3px var(--hover-bg);
}
.signin-card .btn-primary {
  height: 36px; margin-top: 6px; padding: 0 14px;
  font-size: 13.5px; font-weight: 600;
  color: var(--panel); background: var(--text);
  border: 1px solid var(--text); border-radius: 7px;
  box-shadow: none; background-image: none;
}
.signin-card .btn-primary:hover { opacity: 0.88; }
.signin-card .error-line:not(:empty) {
  margin-top: 12px; padding: 8px 10px; font-size: 12.5px;
  color: var(--crit); background: color-mix(in srgb, var(--crit) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--crit) 25%, transparent); border-radius: 7px;
}

.sso-list { display: flex; flex-direction: column; gap: 8px; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 36px; padding: 8px 14px;
  /* "Continue with Microsoft Entra ID" wraps on a narrow card. Balanced
     wrapping keeps the two lines even instead of orphaning the last word. */
  font-size: 13.5px; font-weight: 500; line-height: 1.35; text-wrap: balance;
  text-decoration: none;
  color: var(--text); background: var(--panel);
  border: 1px solid var(--border); border-radius: 7px;
}
.sso-btn:hover { border-color: var(--input-hover-border); background: var(--hover-bg); }
.sso-btn svg { flex: none; }

/* Rule with the word sitting in the gap, rather than a word floating over a
   line — the latter needs a background colour to punch through and breaks the
   moment the card is not opaque. */
.signin-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 16px; color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
}
.signin-or::before, .signin-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

@media (max-width: 480px) {
  .signin { padding: 24px 16px 48px; }
  .signin-card { padding: 28px 20px 20px; }
}


/* Sign-in, two columns on a wide screen: what TicketIQ is on the left, the
   form on the right. One column, form first, on a phone. */
/* The sign-in page wears the landing page's palette (welcome.css), so the
   step from the front door to the form does not change worlds. */
:root:not([data-theme="dark"]) body[data-page="login"] {
  --bg: #f3f3f0; --panel: #fbfbf9; --panel-2: #f3f3f0; --text: #111111;
  --muted: #66665f; --border: #d6d6cf; --input-hover-border: #b9b9b0;
  --hover-bg: rgba(17, 17, 17, 0.06);
  background: var(--bg);
}
body[data-page="login"] .topnav { background: var(--bg); border-bottom-color: transparent; }
.signin { flex-direction: row; gap: clamp(32px, 6vw, 96px); }
.signin-side { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 360px; }
.signin-hero { flex: 1 1 0; max-width: 620px; min-width: 0; }
.hero-kicker {
  margin: 0 0 18px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.hero-title {
  margin: 0; font-size: clamp(34px, 4.4vw, 56px); line-height: 0.98;
  font-weight: 650; letter-spacing: -0.035em; text-transform: uppercase;
  color: var(--text); text-wrap: balance;
}
.hero-sub {
  margin: 16px 0 28px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.hero-trace {
  margin: 0; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); overflow: hidden;
}
.hero-trace figcaption {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.hero-trace .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.ht-body {
  padding: 12px 14px 14px; overflow-x: auto;
  font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--text);
}
.ht-q { margin-bottom: 4px; white-space: nowrap; }
.ht-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; white-space: nowrap; }
.ht-row > span:last-child { text-align: right; }
.hero-trace .t-dim { color: var(--muted); }
.hero-trace .t-q { color: var(--text); opacity: 0.8; }
.hero-trace .t-k { color: var(--muted); }
.hero-trace .t-ok { color: var(--ok); }
.hero-trace .t-warn { color: var(--warn); }
.hero-points {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.hero-points li { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.hero-points b { font-size: 13px; font-weight: 600; color: var(--text); }
.hero-points span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
@media (max-width: 960px) {
  .signin { flex-direction: column-reverse; justify-content: flex-start; }
  .signin-hero { max-width: 560px; width: 100%; }
  .hero-points { grid-template-columns: 1fr; }
}

/* ---- agent-suite panel primitives ----
   Lived in an inline <style> on agents.html, which meant any OTHER page using
   these classes rendered them unstyled — the Agent Fleet gallery and the MCP
   page both do. Shared stylesheet, one definition. */
.ag-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width: 980px) { .ag-grid { grid-template-columns:1fr; } }
.ag-head-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ag-item { padding:11px 13px; border:1px solid var(--border); border-radius:11px;
  margin-bottom:9px; background:var(--surface); }
.ag-item-cited { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ag-item-head { display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.ag-item-title { font-weight:600; font-size:13.5px; }
.ag-item-body { margin-top:6px; font-size:12.5px; color:var(--muted); line-height:1.5;
  white-space:pre-wrap; max-height:7.5em; overflow:auto; }
.ag-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.ag-empty { color:var(--muted); padding:22px 0; text-align:center; font-size:13px; }
.ag-score { font-variant-numeric:tabular-nums; font-weight:700; }
.ag-check { display:flex; gap:7px; align-items:baseline; font-size:12.5px; margin-top:3px; }
.ag-stats { display:flex; gap:18px; margin:2px 0 12px; }
.ag-stats b { font-size:20px; font-variant-numeric:tabular-nums; }
.ag-form { display:grid; gap:8px; margin-top:10px; }
.ag-form input { font-size:13px; }
.sev-critical { color:var(--crit,var(--crit)); font-weight:700; }
.sev-high { color:var(--warn); font-weight:700; }
.sev-warning { color:var(--muted); font-weight:600; }


/* ---- command palette (Cmd/Ctrl-K) ----
   Fixed overlay so it is reachable from wherever the operator already is,
   which is the entire point of it. */
.palette {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(17, 17, 17, 0.45); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.palette-box {
  width: min(560px, 92vw); background: var(--panel);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow: hidden;
}
.palette-search { display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border-bottom: 1px solid var(--border-soft); color: var(--muted); }
.palette-box .input {
  border: 0; border-radius: 0; height: 50px; font-size: 15px; padding-left: 0;
  background: transparent; flex: 1;
}
.palette-group { padding: 10px 11px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.palette-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); flex: none; }
.palette-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--muted); }
.palette-foot kbd { margin-right: 2px; }
.palette-box .input:focus { box-shadow: none; }
.palette-list { max-height: 56vh; overflow: auto; padding: 6px; }
.palette-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 11px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit;
  font-size: 13.5px; cursor: pointer; text-align: left;
}
.palette-item:hover, .palette-item.on { background: var(--hover-bg); }
.palette-hint {
  font-size: var(--fs-xs); color: var(--badge-fg); background: var(--badge-bg);
  padding: 2px 6px; border-radius: 6px; flex: none;
}
.palette-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---- table paging + page tabs (console.js) ---- */
.tbl-foot { display: flex; align-items: center; gap: 10px; }
.tbl-foot .spacer { flex: 1; }
.tbl-pos { color: var(--muted); font-size: 12px; }
.page-tabs { display: flex; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--border-soft); }
.page-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer;
}
.page-tab:hover { color: var(--text); }
.page-tab.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 550; }
.page-tab-count { font-size: var(--fs-xs); padding: 1px 6px; border-radius: 999px;
  background: var(--badge-bg); color: var(--badge-fg); }
.summary-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.summary-tile { flex: 1 1 150px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel); }
.summary-tile span { display: block; font-size: 12px; color: var(--muted); }
.summary-tile b { display: block; margin-top: 4px; font-size: 22px; font-weight: 650; color: var(--text); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.check-row { display: flex; flex-wrap: wrap; gap: 14px; }
.row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }
.token-once {
  position: absolute; top: 18vh; left: 50%; transform: translateX(-50%);
  width: min(560px, 92vw); padding: 20px 22px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.token-once h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
.showing-for { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; font-size: 13px; color: var(--muted); }
.showing-for .side-avatar { width: 22px; height: 22px; font-size: var(--fs-xs); border-radius: 6px; }
.showing-for b { color: var(--text); font-weight: 550; }
/* ---- MCP catalogue ---- */
.cat-kind { font-size: var(--fs-xs); padding: 2px 6px; border-radius: 6px; background: var(--badge-bg); color: var(--badge-fg); font-weight: 500; }
.back-link { display: inline-block; margin: 20px 0 0; font-size: 13px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--text); }
.palette-box .input, .palette-box .input:focus, .palette-box .input:focus-visible {
  border: 0; outline: none; box-shadow: none;
}
/* Tabs scroll inside their own row: ten catalogue categories must not push
   the whole page sideways on a laptop-width window. */
.page-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; min-width: 0; max-width: 100%; }
.page-tab { white-space: nowrap; flex: none; }
.console main.wrap { overflow-x: clip; }

/* ---- MCP server catalog, as ADP's ----
   Search on top, a row of quiet toggle chips, then an even grid of cards
   whose whole surface is the target. No counts on the chips (a chip's
   title carries the server's), no "All": no chip = all. */
.cat-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 0 16px; }
.cat-head .page-sub { margin: 4px 0 0; }
.cat-back { margin-top: 4px; color: var(--muted); text-decoration: none; font-size: 18px; line-height: 1; }
.cat-back:hover { color: var(--text); }
.cat-search {
  width: 100%; height: 38px; padding: 0 12px; font: inherit; font-size: 13.5px;
  color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
}
.cat-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.cat-chip {
  padding: 4px 11px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.cat-chip:hover { background: var(--hover-bg); }
.cat-chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cat-card {
  display: flex; flex-direction: column; gap: 10px; min-height: 150px;
  padding: 14px 16px; text-align: left; font: inherit; color: inherit;
  background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.cat-card:hover:not(:disabled), .cat-card:focus-visible {
  border-color: var(--panel-hover-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); outline: none;
}
.cat-card:disabled { cursor: default; }
.cat-card.manual { grid-column: span 2; border-style: dashed; background: var(--panel-2); }
@media (max-width: 640px) { .cat-card.manual { grid-column: auto; } }
.cat-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cat-card-name { font-size: 14px; font-weight: 600; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-tag { flex: none; font-size: var(--fs-xs); font-weight: 500; padding: 2px 7px; border-radius: 6px;
  background: var(--badge-bg); color: var(--badge-fg); }
.cat-tag.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.cat-card-about {
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-card-foot { display: flex; gap: 10px; margin-top: auto; font-size: 11.5px; color: var(--muted); }
.cat-card-foot span + span::before { content: "\00B7"; margin-right: 10px; }
.cat-none { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
/* A card with a vendor docs link: the card stays the one big target and the
   link sits over its bottom-right corner, a sibling rather than a child. */
.cat-cell { position: relative; display: flex; min-width: 0; }
.cat-cell > .cat-card { flex: 1; min-width: 0; }
.cat-cell .cat-card-foot { padding-right: 52px; }
.cat-docs {
  position: absolute; right: 16px; bottom: 14px; font-size: 11.5px;
  color: var(--muted); text-decoration: none; border-radius: 4px;
}
.cat-docs:hover, .cat-docs:focus-visible { color: var(--accent); text-decoration: underline; }
.brand-tile {
  display: inline-grid; place-items: center; flex: none;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text);
}
/* Product logos (TIQ.brandTile, common.js): every mark sits on the same
   neutral tile at the same optical size. A near-black brand colour takes the
   text colour on the dark theme, a pale one on the light theme, so neither
   vanishes; a vendor's file swaps to the vendor's own dark-background
   variant, or keeps a light tile — never recoloured. */
.brand-bare { display: inline-grid; place-items: center; flex: none; }
.brand-tile img, .brand-bare img { display: block; object-fit: contain; }
.brand-tile.light-tile { background: #ffffff; border-color: #d4d4d0; }
.brand-bare.light-tile { background: #ffffff; border-radius: 4px; }
/* The trademark line under every list of product logos: quiet, not a banner. */
.tm-note { margin: 16px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.brand-logo.for-dark { display: none; }
:root[data-theme="dark"] .brand-logo.for-light { display: none; }
:root[data-theme="dark"] .brand-logo.for-dark { display: block; }
:root[data-theme="dark"] .brand-logo.ink-dark path,
:root[data-theme="light"] .brand-logo.ink-pale path { fill: currentColor; }
.server-cell { display: inline-flex; align-items: center; gap: 10px; }

/* Bare inputs inside a console form section get the app's input look. The
   section forms (Integrations setup, LLM providers, ...) build plain <input>s
   with no class, so they fell back to the browser's narrow default box. */
.form-section .fields :is(input:not([type=checkbox]):not([type=radio]), select, textarea):not(.input) {
  width: 100%; max-width: 560px; font: inherit; font-size: 14px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px;
  padding: 0 11px; height: 38px; transition: border-color 0.15s, box-shadow 0.15s;
}
.form-section .fields textarea:not(.input) { height: auto; min-height: 72px; padding: 9px 11px; resize: vertical; }
.form-section .fields :is(input, select, textarea):not(.input)::placeholder { color: var(--input-placeholder); opacity: 0.8; }
.form-section .fields :is(input, select, textarea):not(.input):hover:not(:focus) { border-color: var(--input-hover-border); }
.form-section .fields :is(input, select, textarea):not(.input):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ---- search, as ADP's: blurred page, a compact dialog, icon + label rows ---- */
.palette {
  background: rgba(15, 18, 25, 0.18); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding-top: 20vh;
}
.palette-box { width: min(620px, 92vw); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22); }
.palette-search { gap: 9px; padding: 0 8px 0 14px; }
.palette-box .input { height: 46px; font-size: 14px; }
.palette-close { width: 26px; height: 26px; }
/* Hide the native clear "x" — the dialog has its own close button. */
.palette-box input[type=search]::-webkit-search-cancel-button { display: none; }
.palette-list { max-height: 320px; padding: 4px 6px 6px; }
.palette-group { padding: 10px 8px 4px; font-size: 11.5px; font-weight: 500; }
.palette-item { gap: 10px; padding: 8px 8px; font-size: 13.5px; border-radius: 7px; justify-content: flex-start; }
.palette-ico { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; color: var(--muted); }
.palette-item.on .palette-ico { color: var(--text); }
.palette-sub { margin-left: auto; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.palette-foot { display: none; }

/* Rail icons are now line icons (SVG), sized with the label. */
.side-link .ico { width: 18px; display: inline-grid; place-items: center; opacity: 0.85; }
.side-link.active .ico { opacity: 1; }
.side-link.sub .ico { width: 16px; }

/* ---- Audit log: query bar, verdict timeline, facet rail ---- */
.audit-bar select.audit-window { height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); padding: 0 10px; font: inherit; font-size: 13px; }
.audit-bar .search-box input.audit-q { width: 100%; }
/* The query is what the bar is for: past four selects the bar wraps, rather
   than squeeze the box to a few characters of the filter being typed. */
.audit-bar .search-box { min-width: min(100%, 300px); }
.audit-bar .audit-exports { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.audit-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; min-height: 26px; }
.audit-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font: 12.5px var(--mono, ui-monospace, monospace); cursor: pointer; }
.audit-chip .x { color: var(--muted); font-size: 14px; line-height: 1; }
.audit-chip:hover .x { color: var(--crit); }
.audit-timeline { border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  padding: 12px 14px 8px; margin: 8px 0 14px; }
/* Wraps: with a width note ("3 h bars · widened from 1 min") the head is
   wider than a phone's card, and a single line cut the legend off. */
.audit-tl-head { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; font-size: 13px;
  color: var(--muted); }
.audit-tl-head b { color: var(--text); font-size: 15px; margin-right: 2px; }
.audit-tl-head b.crit { color: var(--crit); }
.audit-tl-head b.warn { color: var(--warn); }
.audit-tl-head .spacer { flex: 1; }
.audit-tl-head .legend { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.audit-tl-head .legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-left: 8px; }
.audit-tl-head .legend i.ok { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.audit-tl-head .legend i.warn { background: var(--warn); }
.audit-tl-head .legend i.crit { background: var(--crit); }
.audit-tl-bars { display: flex; align-items: flex-end; gap: 2px; height: 70px; margin-top: 10px; overflow: hidden; }
/* Set by audit.js from the width the bars have (fitBars), not from a count. */
.audit-tl-bars.dense { gap: 0; }
.audit-tl-bars.dense .audit-tl-bar { min-width: 0; }
.audit-tl-bar { flex: 1 1 0; min-width: 2px; max-width: 28px; height: 100%; padding: 0; border: 0;
  background: transparent; display: flex; flex-direction: column; justify-content: flex-end; cursor: zoom-in; }
.audit-tl-bar .a { background: color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 2px 2px 0 0; }
.audit-tl-bar .d { background: var(--crit); }
.audit-tl-bar .m { background: var(--warn); }
/* A grouped entry some of whose resources were refused and some not: between
   masked and denied, in the bars, the legend and its pill alike. */
.audit-tl-bar .p, .audit-tl-head .legend i.part { background: color-mix(in srgb, var(--crit) 55%, var(--warn)); }
.audit-tl-head b.part { color: color-mix(in srgb, var(--crit) 55%, var(--warn)); }
.pill.part { color: color-mix(in srgb, var(--crit) 55%, var(--warn));
  border-color: color-mix(in srgb, var(--crit) 40%, transparent);
  background: color-mix(in srgb, var(--crit) 8%, transparent); }
.audit-entry-res.crit { color: var(--crit); }
.audit-bar .btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-dim);
  border-color: var(--accent-border); }
.audit-tl-bar:hover .a { background: var(--accent); }
.audit-tl-axis { display: flex; justify-content: space-between; font: var(--fs-xs) var(--mono, ui-monospace, monospace);
  color: var(--muted); margin-top: 4px; }
.audit-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .audit-grid { grid-template-columns: minmax(0, 1fr); } }
.audit-facets { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 10px 12px; }
.audit-facets-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.audit-facet { padding: 8px 0; border-top: 1px solid var(--border-soft); }
.audit-facet:first-of-type { border-top: 0; }
.audit-facet-name { font-size: 12.5px; font-weight: 600; margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.audit-facets-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.audit-facets-head .audit-facets-title { margin-bottom: 0; }
.audit-facet-rm { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px;
  font-size: 14px; line-height: 1; }
.audit-facet-rm:hover { color: var(--crit); }
.audit-facet-denied { background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap;
  color: var(--crit); font: inherit; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.audit-facet-denied:hover { text-decoration: underline dotted; }
.audit-facet-vals { max-height: 340px; overflow-y: auto; }
.audit-facet-foot { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.audit-facet-more { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent);
  font: inherit; font-size: 12px; }
.audit-facet-more:hover { text-decoration: underline; }
.audit-facet-pick { padding: 8px 0; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.audit-facet-pick .hint { margin: 4px 0 0; }
.audit-facet-add { display: flex; gap: 6px; }
.audit-facet-add .input { flex: 1; min-width: 0; height: 30px; font-size: 12.5px; }
.audit-facet-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.audit-facet-val { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 2px 0;
  color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; }
.audit-facet-val:hover { color: var(--accent); }
.audit-facet-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.audit-facet-ex { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px;
  visibility: hidden; font-size: 14px; }
.audit-facet-row:hover .audit-facet-ex { visibility: visible; }
.audit-facet-ex:hover { color: var(--crit); }
/* A value no filter term can spell: shown and counted, never a filter. */
.audit-facet-val.fixed, .audit-facet-denied.fixed { cursor: help; }
.audit-facet-val.fixed:hover { color: var(--text); }
.audit-facet-denied.fixed:hover { text-decoration: none; }
.audit-facet-row:hover .audit-facet-ex.fixed { visibility: hidden; }
.audit-row { cursor: pointer; }
.audit-row:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
/* A control switched off (or an attempt): marked down the row's edge too, so
   it reads at a glance in a page of ordinary saves. */
.audit-row.weakening td { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.audit-row.weakening td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.audit-tags { white-space: nowrap; }
.audit-tags .pill + .pill, .audit-tags .audit-activity + .pill { margin-left: 4px; }
.audit-kv td:has(> .audit-weak) { white-space: normal; }
/* ticketiq/<component>@<host>: the host is the part that tells replicas
   apart, and the one a cut at the drawer's width would lose. */
.audit-kv td:has(> [data-testid="audit-event-source"]) { white-space: normal; }
.audit-kv [data-testid="audit-event-source"] { word-break: break-all; }
.audit-weak { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.audit-kv td:has(> .audit-status-detail) { white-space: normal; }
/* The transport's answer, read whole and copied: wrapped, never cut. */
.audit-response { display: flex; flex-direction: column; gap: 6px; }
.audit-response-error { margin: 0; padding: 8px 10px; background: var(--panel);
  border-radius: 6px; white-space: pre-wrap; word-break: break-word; font-size: 12px; }
/* A captured body: its label and size, then the text read whole. Capped in
   height — 4 KB is a long block — and scrolled inside, never off the drawer. */
.audit-capture-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.audit-body { display: flex; flex-direction: column; gap: 4px; }
.audit-body-text { max-height: 260px; overflow: auto; }
.audit-cell { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.audit-cell:hover { text-decoration: underline dotted; }
/* The Resource column: what a row acted on and, beneath it, what that belongs
   to. The server behind a tool call is the point of the second line, so both
   wrap — inside an id when they must — rather than end in an ellipsis that
   left "in e2e-res-…" on every tool row, and the column is a little wider
   than its neighbours. Three lines at most: past that an id is pathological,
   and the button's title carries it whole. */
.table col.audit-col-res { width: 18%; }
.table td.audit-res { white-space: normal; }
.audit-res .audit-cell { display: block; max-width: 100%; }
.audit-res .audit-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.audit-sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.audit-sort:hover { text-decoration: underline dotted; }
.audit-sec { font-size: 13px; margin: 18px 0 6px; }
/* How the log is kept: one quiet line under the toolbar, not a panel — it is
   context for the rows, and the drawer holds the controls. */
.audit-keep { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center;
  margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.audit-keep b { color: var(--text); font-weight: 600; }

/* ---- Audit log explorer (Factory palette: ink, signal orange, red) ----
   Additive: every rule below is scoped to an .audit-* class or to
   body.audit-full, the page's full-width mode. */
.audit-explorer { --audit-ink: #eeeee8; --audit-orange: #ff5b1f; --audit-deny: #f04438;
  --audit-bar-bg: color-mix(in srgb, var(--text) 7%, transparent); }
:root[data-theme="light"] .audit-explorer { --audit-ink: #111111; --audit-deny: #d92d20; }
.audit-ico { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.audit-ico.down { transform: rotate(90deg); width: 11px; height: 11px; opacity: .7; }
.audit-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.audit-querybar { flex-wrap: wrap; align-items: center; position: relative; }
.audit-subbar select.audit-window { height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); padding: 0 10px; font: inherit; font-size: 13px; }
.audit-subbar .audit-exports { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.audit-subbar .btn[aria-pressed="true"] { color: var(--audit-orange); border-color: var(--audit-orange); }
.audit-subbar { margin-top: 8px; }
/* The native select stays for keyboards and scripts; the button is what shows. */
.audit-bar select.audit-window-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px;
  opacity: 0; padding: 0; border: 0; }
.audit-range { position: relative; }
.audit-range-btn, .audit-icon-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px;
  padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font: 12.5px var(--mono); cursor: pointer; white-space: nowrap; }
.audit-icon-btn { padding: 0; width: 34px; justify-content: center; flex: none; }
.audit-fields-head .audit-icon-btn { width: 26px; height: 26px; border-color: transparent;
  background: transparent; color: var(--muted); }
.audit-range-btn:hover, .audit-icon-btn:hover { border-color: var(--input-hover-border); color: var(--text); }
.audit-icon-btn[aria-pressed="true"] { color: var(--audit-orange); border-color: var(--audit-orange); }
.audit-fields-head .audit-icon-btn[aria-pressed="true"] { border-color: transparent; }
.audit-range-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 250px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28); display: flex; flex-direction: column; }
.audit-range-menu[hidden], .audit-range-custom[hidden] { display: none; }
.audit-range-opt { text-align: left; background: none; border: 0; color: var(--text); padding: 7px 10px;
  border-radius: 6px; font: 13px var(--sans); cursor: pointer; display: flex; justify-content: space-between; }
.audit-range-opt:hover { background: var(--hover-bg); }
.audit-range-opt[aria-checked="true"] { color: var(--audit-orange); font-weight: 600; }
.audit-range-opt[aria-checked="true"]::after { content: "\2713"; }
.audit-range-custom { border-top: 1px solid var(--border-soft); margin-top: 6px; padding: 8px 4px 2px;
  display: flex; flex-direction: column; gap: 8px; }
.audit-range-custom label { display: flex; flex-direction: column; gap: 3px; font-size: 11px;
  color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.audit-range-custom .input { height: 32px; font: 12.5px var(--mono); }
/* Timeline: ink for allowed, red for denied, orange for masked. */
.audit-tl-stat { display: inline-flex; align-items: baseline; gap: 6px; }
.audit-tl-k { font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.audit-explorer .audit-tl-head b { font-size: 18px; font-variant-numeric: tabular-nums; }
.audit-explorer .audit-tl-head b.crit { color: var(--audit-deny); }
.audit-explorer .audit-tl-head .legend i.ok { background: var(--audit-ink); }
.audit-explorer .audit-tl-head .legend i.crit { background: var(--audit-deny); }
.audit-explorer .audit-tl-head .legend i.warn { background: var(--audit-orange); }
.audit-explorer .audit-tl-bar .a { background: var(--audit-ink); opacity: .82; }
.audit-explorer .audit-tl-bar:hover .a { background: var(--audit-ink); opacity: 1; }
.audit-explorer .audit-tl-bar .d { background: var(--audit-deny); }
.audit-explorer .audit-tl-bar .m { background: var(--audit-orange); }
.audit-tl-plot { display: flex; gap: 8px; align-items: stretch; }
.audit-tl-plot .audit-tl-bars { flex: 1; min-width: 0; position: relative; cursor: crosshair;
  touch-action: none; user-select: none; border-bottom: 1px solid var(--border); }
.audit-tl-y { display: flex; flex-direction: column; justify-content: space-between; margin-top: 10px;
  font: var(--fs-xs) var(--mono); color: var(--muted); text-align: right; min-width: 28px; }
.audit-explorer .audit-tl-axis { padding-left: 36px; }
.audit-tl-band { position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--audit-orange) 18%, transparent);
  border-left: 1px solid var(--audit-orange); border-right: 1px solid var(--audit-orange); pointer-events: none; }
/* Two panes and the splitter between them. */
.audit-split { --audit-panel-w: 280px; grid-template-columns: var(--audit-panel-w) 6px minmax(0, 1fr); gap: 0 8px; }
.audit-split.collapsed { grid-template-columns: 34px 0 minmax(0, 1fr); }
.audit-split.collapsed .audit-splitter { visibility: hidden; }
.audit-split.resizing { user-select: none; cursor: col-resize; }
.audit-splitter { align-self: stretch; cursor: col-resize; position: relative; min-height: 120px; }
.audit-splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px;
  background: var(--border-soft); border-radius: 2px; }
.audit-splitter:hover::after, .audit-split.resizing .audit-splitter::after,
.audit-splitter:focus-visible::after { background: var(--audit-orange); }
@media (max-width: 900px) {
  .audit-split, .audit-split.collapsed { grid-template-columns: minmax(0, 1fr); }
  .audit-splitter { display: none; }
}
.audit-panel-open { display: none; }
.audit-split.collapsed .audit-facets { padding: 0; border: 0; background: none; }
.audit-split.collapsed .audit-facets > :not(.audit-panel-open) { display: none; }
.audit-split.collapsed .audit-panel-open { display: inline-flex; }
.audit-explorer .audit-facets { padding: 10px 10px 12px; }
/* The Fields panel and the results fit the window side by side, each
   scrolling on its own: a long panel no longer stretches the page and
   leaves the table scrolled out of sight beside it. */
@media (min-width: 901px) {
  .audit-split .audit-facets {
    position: sticky; top: calc(var(--topnav-h) + 12px);
    max-height: calc(100vh - var(--topnav-h) - 66px); overflow-y: auto; overscroll-behavior: contain;
  }
  .audit-split .audit-facet-vals { max-height: none; }
  .audit-split .audit-rows { position: sticky; top: calc(var(--topnav-h) + 12px); }
  .audit-split .audit-scroll { max-height: calc(100vh - var(--topnav-h) - 130px); overscroll-behavior: contain; }
}
.audit-fields-head { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.audit-fields-head .spacer { flex: 1; }
.audit-fields-title { font-size: 13px; font-weight: 600; }
.audit-fields-about { font-size: 12px; color: var(--muted); margin: 0 0 8px; line-height: 1.45; }
.audit-fields-sec { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 4px; }
.audit-fld { border-radius: 6px; }
.audit-fld.dragging { opacity: .45; }
.audit-fld.drop { box-shadow: inset 0 2px 0 var(--audit-orange); }
.audit-fld-head { display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 2px;
  font-size: 12.5px; border-radius: 6px; }
.audit-fld-head:hover { background: var(--hover-bg); }
.audit-fld-head .spacer { flex: 1; }
.audit-fld-grip { color: var(--muted); cursor: grab; display: inline-flex; }
.audit-fld-grip .audit-ico { fill: currentColor; stroke: none; }
.audit-fld:not(.shown) .audit-fld-head { padding-left: 20px; }
.audit-fld-chev, .audit-fld-eye { background: none; border: 0; padding: 3px; color: var(--muted);
  cursor: pointer; display: inline-flex; border-radius: 4px; }
.audit-fld-chev.placeholder, .audit-fld-eye.placeholder { width: 20px; cursor: default; }
.audit-fld-chev .audit-ico { transition: transform .12s; }
.audit-fld.open .audit-fld-chev .audit-ico { transform: rotate(90deg); color: var(--text); }
.audit-fld-eye[aria-pressed="true"] { color: var(--text); }
.audit-fld-chev:hover, .audit-fld-eye:hover { color: var(--audit-orange); }
.audit-fld-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-fld:not(.shown) .audit-fld-name { color: var(--muted); }
.audit-fld-info { color: var(--muted); cursor: help; position: relative; font-size: 12px; }
.audit-fld-info:hover::after, .audit-fld-info:focus::after, .audit-top-row:hover::after {
  content: attr(data-tip); position: absolute; z-index: 30; left: 0; top: calc(100% + 4px);
  width: max-content; max-width: 240px; white-space: normal; background: var(--audit-ink);
  color: var(--bg); font: 11.5px/1.4 var(--sans); padding: 6px 8px; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); pointer-events: none; }
.audit-top { padding: 2px 0 8px 24px; display: flex; flex-direction: column; gap: 2px; }
.audit-top .hint { font-size: 11.5px; margin: 2px 0; }
.audit-top-row { position: relative; display: flex; align-items: center; gap: 4px; height: 24px;
  border-radius: 4px; font: 11.5px var(--mono); }
.audit-top-bar { position: absolute; left: 0; top: 2px; bottom: 2px; background: var(--audit-bar-bg);
  border-radius: 3px; pointer-events: none; }
.audit-top-row:hover .audit-top-bar { background: color-mix(in srgb, var(--audit-orange) 18%, transparent); }
.audit-top-val { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0 6px; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.audit-top-val:disabled { cursor: help; color: var(--muted); }
.audit-top-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-top-deny { width: 6px; height: 6px; border-radius: 50%; background: var(--audit-deny); flex: none; }
.audit-top-n { position: relative; color: var(--muted); font-variant-numeric: tabular-nums; }
.audit-top-ex { position: relative; background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--muted); width: 20px; height: 20px; cursor: pointer; font: 12px var(--mono); visibility: hidden; }
.audit-top-row:hover .audit-top-ex, .audit-top-ex:focus { visibility: visible; }
.audit-top-ex:hover { color: var(--audit-deny); border-color: var(--audit-deny); }
.audit-pinned { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.audit-fields-legend { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--border-soft); }
.audit-legend-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--muted);
  margin: 6px 0; line-height: 1.4; }
.audit-legend-row b { color: var(--text); font-weight: 600; }
.audit-ico.agent { color: var(--audit-orange); }
/* The table: scrolls inside, header pinned, next page appended at its foot. */
.audit-scroll { max-height: calc(100vh - var(--topnav-h) - 150px); overflow: auto; }
.audit-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.audit-xtable td { vertical-align: top; }
.audit-ts { font-size: 12px; color: var(--muted); white-space: nowrap; }
.audit-actor-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.audit-actor-line .audit-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-actor-name { font-family: var(--mono); font-size: 12.5px; }
.audit-behalf::before { content: "\21B3  on behalf of "; color: var(--muted); }
.audit-xtable .audit-tags { margin-top: 3px; white-space: normal; }
.audit-xtable .audit-tags:empty { display: none; }
.audit-more { text-align: center; padding: 8px; font-size: 12px; }
.audit-more:empty { display: none; }
.audit-drawer-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* The event's own link and the pages of what it names, above its actions. */
.audit-drawer-links { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
/* A row's policy chain: every engine's rule in the order it acted, each
   numbered and tagged with its engine, wrapped rather than cut. */
.table td .audit-chain { white-space: normal; }
.audit-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
  counter-reset: chain; }
.audit-chain li { counter-increment: chain; display: block; min-width: 0; overflow-wrap: anywhere; }
.audit-chain li::before { content: counter(chain) " "; font: var(--fs-xs) var(--mono); color: var(--muted); }
.audit-chain .audit-cell { display: inline; }
.audit-chain-engine { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-left: 6px; white-space: nowrap; }
.audit-xtable col.audit-col-policy, .audit-xtable col.audit-col-all_policies { width: 220px; }
.audit-chain-drawer li { display: flex; align-items: baseline; gap: 6px; }
.audit-chain-drawer li::before { min-width: 1ch; }
.audit-chain li[data-engine="cedar"] .audit-chain-engine { color: var(--accent, var(--muted)); }
.audit-chain-link { font-size: 11.5px; margin-left: auto; }
.audit-json { margin-top: 14px; border: 1px solid var(--border); border-radius: 8px; }
.audit-json summary { cursor: pointer; padding: 8px 10px; font: 11px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.audit-json-pre { margin: 0; padding: 10px 12px; max-height: 420px; overflow: auto; font-size: 11.5px;
  border-top: 1px solid var(--border-soft); white-space: pre; }
/* Full width: the whole content area, less padding, nothing cut short. */
body.console.audit-full > main.wrap { padding: 0 12px 32px; max-width: none; }
body.audit-full .audit-scroll { max-height: calc(100vh - var(--topnav-h) - 120px); }
body.audit-full .audit-xtable { table-layout: auto; }
body.audit-full .tbl-wrap[data-testid="audit-table"] > table.audit-xtable { min-width: 0; }
body.audit-full .audit-xtable td { white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; }
body.audit-full .audit-xtable th, body.audit-full .audit-xtable .audit-ts { white-space: nowrap; }
body.audit-full .audit-xtable .audit-actor-line .audit-cell { white-space: normal; }
body.audit-full .audit-xtable col { width: auto; }
body.audit-full .audit-xtable .audit-actor-line .audit-cell { overflow: visible; }
body.audit-full .audit-xtable .audit-res .audit-clamp { -webkit-line-clamp: unset; line-clamp: unset; }
.audit-xtable col.audit-col-time { width: 172px; }
.audit-xtable col.audit-col-outcome { width: 150px; }
.audit-xtable col.audit-col-subsystem { width: 120px; }
.audit-querybar .search-box { height: 36px; display: flex; align-items: center; }
.audit-querybar .search-box input.audit-q { height: 36px; font: 13px var(--mono); border: 1px solid var(--border);
  border-radius: 8px; background: var(--input-bg); color: var(--text); padding: 0 12px 0 30px; outline: none; }
.audit-querybar .search-box input.audit-q:focus { border-color: var(--audit-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--audit-orange) 18%, transparent); }
.audit-keep .spacer { flex: 1; }
.audit-kv td { padding: 6px 8px; vertical-align: top; word-break: break-word; }
.audit-diff td { vertical-align: top; word-break: break-word; }
.audit-diff .del { color: var(--crit); text-decoration: line-through; opacity: .85; }
.audit-diff .ins { color: var(--ok); }
/* Seven narrow columns in a drawer: the category is the one that runs long
   (a vendor's label), so it wraps rather than pushing Shadow off the edge. */
.table.audit-findings { table-layout: auto; }
.table.audit-findings td { vertical-align: top; padding: 6px 5px; font-size: 12px;
  white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
.table.audit-findings th { padding: 6px 5px; letter-spacing: 0.04em; overflow: visible;
  text-overflow: clip; }
.audit-related { display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 7px 10px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text); cursor: pointer; }

/* ---- Guardrail form: entity checkboxes and the pattern editor ---- */
.chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 13px; cursor: pointer;
  background: var(--panel); }
.chip-check:has(input:checked) { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.chip-check input { margin: 0; }
/* The PII picker, by group, and its per-entity, per-direction actions. */
.pii-groups { display: flex; flex-direction: column; gap: 10px; }
.pii-group-name { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.chip-check.chip-external { cursor: help; border-style: dashed; color: var(--muted); }
.pii-action-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px;
  gap: 8px; align-items: center; margin-bottom: 6px; }
.pii-action-row select { width: 100%; box-sizing: border-box; }
.pii-action-head { font-size: 12px; color: var(--muted); }
@media (max-width: 480px) { .pii-action-row { grid-template-columns: minmax(0, 1fr) 90px 90px; } }
.pattern-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 100px auto;
  gap: 8px; align-items: center; margin-bottom: 8px; }
.pattern-row input, .pattern-row select { width: 100%; box-sizing: border-box; }
@media (max-width: 760px) { .pattern-row { grid-template-columns: 1fr; } }

/* ---- Guardrail form: the denied-topic editor and its live score ---- */
.topic-card { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.topic-card textarea, .topic-card input[type=text] { width: 100%; box-sizing: border-box; }
.topic-head { display: flex; gap: 8px; align-items: center; }
.topic-head input[type=text] { flex: 1; min-width: 0; width: auto; font-weight: 600; }
.topic-sub { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.topic-examples { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.topic-example { display: flex; gap: 8px; width: 100%; }
.topic-example input[type=text] { flex: 1; min-width: 0; width: auto; }
.topic-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.topic-action { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.topic-try-row { display: flex; gap: 8px; align-items: flex-start; max-width: 560px; }
.topic-try-out { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 8px; }
/* One row per topic: label, a meter with the bar marked on it, the number,
   and what that score does. The marker is the point — "0.71" means nothing
   until it is seen next to a bar of 0.75. */
.topic-score { display: grid; width: 100%; gap: 10px; align-items: center; font-size: 13px;
  grid-template-columns: minmax(110px, 200px) minmax(80px, 1fr) 44px minmax(0, 1.4fr); }
.topic-score-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-meter { position: relative; height: 8px; border-radius: 999px; background: var(--track-bg); }
.topic-meter .fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--muted); }
.topic-meter .fill.hit { background: var(--crit); }
.topic-meter .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
  background: var(--text); }
.topic-score-num { text-align: right; }
@media (max-width: 760px) {
  .topic-score { grid-template-columns: minmax(0, 1fr) 44px; }
  .topic-score .topic-meter { grid-column: 1 / -1; grid-row: 2; }
  .topic-try-row { flex-direction: column; align-items: stretch; }
}

/* ---- MCP data policies editor ---- */
.dp-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .dp-grid { grid-template-columns: 1fr; } }
.dp-tools { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 8px; }
.dp-tools-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 6px 8px; }
.dp-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: none;
  color: var(--text); cursor: pointer; text-align: left; font-size: 13px; }
.dp-tool:hover { background: var(--panel-2); }
.dp-tool.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dp-editor { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dp-editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dp-editor-head h2 { margin: 0; font-size: 17px; }
.dp-section { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 12px 14px; }
.dp-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.dp-subhead { font-size: 12.5px; font-weight: 600; margin: 14px 0 6px; }
.dp-section select, .dp-section input[type=text], .dp-section textarea { width: 100%; box-sizing: border-box; }
.dp-clamp { min-width: 140px; }
.dp-clamp-line { display: flex; gap: 6px; align-items: center; }
.dp-clamp-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.dp-clamp-key, .dp-principals label { display: flex; flex-direction: column; gap: 2px; }
.dp-principals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dp-audience-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dp-section .dp-audience-bar select, .dp-section .dp-audience-bar input[type=text] { width: auto; }
@media (max-width: 760px) { .dp-principals { grid-template-columns: 1fr; } }
.dp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
.dp-row.with-absent { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px auto; }
.dp-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp-limit-row { display: grid; grid-template-columns: 160px 130px 110px minmax(0, 1fr) 120px auto; gap: 8px; margin-bottom: 8px; }
.dp-limit-row input, .dp-limit-row select { width: 100%; box-sizing: border-box; }
@media (max-width: 1100px) { .dp-limit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dp-preview-grid, .dp-row, .dp-row.with-absent, .dp-limit-row { grid-template-columns: 1fr; } }
.dp-out { white-space: pre-wrap; background: var(--panel-2); border-radius: 8px; padding: 10px 12px;
  margin-top: 10px; font-size: 12.5px; max-height: 360px; overflow: auto; }
/* A selector that matched nothing: its rule did nothing on this sample. */
.dp-unmatched { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent); }
.dp-unmatched ul { margin: 6px 0 0; padding-left: 18px; }
.dp-unmatched li { margin: 2px 0; overflow-wrap: anywhere; }
/* The preview's gate: whether the call would run at all, for whom. */
.dp-gate { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
  overflow-wrap: anywhere; border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.dp-gate[data-effect="DENY"] { border-color: color-mix(in srgb, var(--crit) 50%, transparent);
  background: color-mix(in srgb, var(--crit) 8%, transparent); }
/* The preview's before/after: each value beside what the policies made of it.
   The marker is a pill with a word; the row tint and the struck-through
   "before" of a removed value only repeat it. */
.dp-diff { margin-top: 10px; overflow-x: auto; }
.dp-diff-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; }
.dp-diff-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; margin: 0; padding: 0; }
.dp-diff-legend li { display: inline-flex; gap: 6px; align-items: center; }
.dp-diff-says { color: var(--muted); }
.dp-diff-legend .pill, .dp-diff-table .pill { font-size: var(--fs-xs); }
.dp-diff-toggle { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; }
.dp-diff-side { margin-top: 8px; }
.dp-diff-caption { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.dp-diff-table { table-layout: fixed; width: 100%; }
.dp-diff-table th[scope="col"]:nth-child(1) { width: 26%; }
.dp-diff-table th[scope="col"]:nth-child(4) { width: 110px; }
.dp-diff-table th[scope="row"], .dp-diff-table td { font-size: 12.5px; vertical-align: top;
  overflow-wrap: anywhere; white-space: normal; text-overflow: clip; font-weight: normal; text-align: left; }
/* The path is the row's header for a screen reader, but it is data: shown
   as written, not in the column headers' small caps — a path's case is
   part of what it selects. */
.dp-diff-table th[scope="row"] { text-transform: none; letter-spacing: normal;
  color: var(--text); background: transparent; font-family: var(--mono); }
.dp-diff-table td.absent { color: var(--muted); }
.dp-diff-row.is-masked, .dp-diff-row.is-replaced { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.dp-diff-row.is-dropped, .dp-diff-row.is-filtered { background: color-mix(in srgb, var(--crit) 8%, transparent); }
.dp-diff-row.is-added { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.dp-diff-row.is-dropped .dp-diff-before, .dp-diff-row.is-filtered .dp-diff-before { text-decoration: line-through; }
.dp-diff.changes-only .dp-diff-row.is-unchanged { display: none; }
/* The preview's explanation of the composition: fields, clamps, row filters. */
.dp-explain { margin-top: 10px; overflow-x: auto; }
/* Wrapped, not ellipsised as other tables are: a path cut to "$.chunks[*].e…"
   is the one detail the table exists to show. */
.dp-explain-table td { font-size: 12.5px; vertical-align: top; overflow-wrap: anywhere;
  white-space: normal; text-overflow: clip; }
.dp-explain-table[data-testid="dp-explain-fields"] th:nth-child(1) { width: 64px; }
.dp-explain-table[data-testid="dp-explain-fields"] th:nth-child(5) { width: 34%; }
.dp-explain-table .pill { font-size: var(--fs-xs); }
.dp-explain-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.dp-explain-list li { margin: 2px 0; overflow-wrap: anywhere; }
.cedar-summary { font-size: 14px; margin: 6px 0 10px; color: var(--text); }
.fields .chip-check { align-self: flex-start; width: fit-content; }
.chip-check .chip-link { color: var(--muted); padding: 0 2px; text-decoration: none; }
.chip-check .chip-link:hover, .chip-check .chip-link:focus-visible { color: var(--accent); }
.budget-meter { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.budget-bar { position: relative; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: visible; }
.budget-bar span { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.budget-bar span.warn { background: var(--warn); }
.budget-bar span.crit { background: var(--crit); }
.budget-bar i { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--muted); }
.net-alerts { padding: 10px 14px; }
.net-alerts summary { cursor: pointer; }
.net-alert { display: grid; grid-template-columns: 84px 180px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 7px 4px; border-top: 1px solid var(--border-soft); color: var(--text); text-decoration: none; font-size: 13px; }
.net-alert:hover { background: var(--panel-2); }
.ks-signals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 12px; }
@media (max-width: 760px) { .ks-signals { grid-template-columns: 1fr; } }
.ks-spark { display: flex; align-items: flex-end; gap: 1px; height: 38px; margin-top: 4px;
  border-bottom: 1px solid var(--border-soft); }
.ks-spark i { flex: 1 1 0; min-width: 1px; background: color-mix(in srgb, var(--accent) 60%, transparent); }
.ks-spark i.hi { background: var(--crit); }
/* The 7-day view: 169 hours in the width 72 windows had, so no gaps —
   and an hour with no calls keeps its place, drawn flat. */
.ks-spark.week { gap: 0; }
.ks-spark i.none { background: var(--border); }
/* A detector preview: the week's hours with a marker row over them, one
   cell per hour, so a marker sits over the hour a would-fire window is in.
   The triangle is wider than its cell, so one hour of 169 is still seen. */
.ks-backtest { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border-soft);
  border-radius: 8px; }
.ks-bt-marks { display: flex; height: 8px; margin-top: 6px; }
.ks-bt-marks > * { flex: 1 1 0; min-width: 1px; }
.ks-backtest-marker { position: relative; }
.ks-backtest-marker::after { content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%); border: 4px solid transparent; border-bottom: 0;
  border-top: 7px solid var(--crit); }
.ks-spark i.fire { background: var(--crit); }
.ks-det-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
/* Segmented control (Write / Preview / Split, Form / JSON / cURL). */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-btn { background: transparent; color: var(--muted); border: 0; padding: 5px 11px; font: inherit;
  font-size: 12.5px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.on { background: var(--accent-dim); color: var(--text); }
.ag-subhead { font-size: 13px; font-weight: 600; margin: 14px 0 8px; }
/* Markdown instruction editor. */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.md-pane { display: grid; grid-template-columns: 1fr; gap: 10px; }
.md-pane.split { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .md-pane.split { grid-template-columns: 1fr; } }
.md-source { width: 100%; box-sizing: border-box; min-height: 260px; font-size: 12.5px; line-height: 1.5; resize: vertical; }
.md-preview { border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 14px; min-height: 260px;
  max-height: 520px; overflow: auto; background: var(--panel-2); }
.md { font-size: 13.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.md h1, .md h2, .md h3, .md h4 { margin: 12px 0 6px; line-height: 1.3; }
.md h1 { font-size: 19px; } .md h2 { font-size: 16px; } .md h3, .md h4 { font-size: 14px; }
.md p, .md ul, .md ol, .md blockquote, .md pre { margin: 0 0 8px; }
.md ul, .md ol { padding-left: 22px; }
.md code { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; background: var(--panel);
  padding: 1px 4px; border-radius: 4px; }
.md pre { background: var(--panel); border-radius: 6px; padding: 8px 10px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { border-left: 3px solid var(--border); padding-left: 10px; color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.md a { color: var(--accent); }
/* Pipe tables: hairline rules, mono header labels, numbers right-aligned
   where the table says so. The box scrolls, never the page. */
.md-table { max-width: 100%; overflow-x: auto; margin: 0 0 10px; border: 1px solid var(--border-soft);
  border-radius: 6px; }
.md-table:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 1px; }
.md-table table { border-collapse: collapse; width: 100%; font-size: 13px; overflow-wrap: normal; }
.md-table th, .md-table td { padding: 5px 10px; text-align: left; border-bottom: 1px solid var(--border-soft);
  vertical-align: top; }
.md-table tr:last-child td { border-bottom: 0; }
.md-table th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); background: var(--panel-2); white-space: nowrap; }
.md-table .md-al-right { text-align: right; font-variant-numeric: tabular-nums; }
.md-table .md-al-center { text-align: center; }
/* ```chart blocks (common.js chart): inline SVG at a fixed aspect ratio, so
   a reply is laid out once. Series colours are theme variables — the signal
   orange first, then ink — with a second, fainter round after six. */
.md-chart { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px;
  background: var(--panel-2); max-width: 640px; }
.md-chart figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px; }
.md-chart-plot { aspect-ratio: 560 / 280; width: 100%; }
.md-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.md-chart text { font-family: var(--mono); font-size: var(--fs-xs); fill: var(--muted); }
.md-chart .ax-name { fill: var(--text); }
.md-chart .grid { stroke: var(--border-soft); stroke-width: 1; shape-rendering: crispEdges; }
.md-chart .grid.zero { stroke: var(--border); }
.md-chart .c0 { --c: var(--accent); }
.md-chart .c1 { --c: var(--text); }
.md-chart .c2 { --c: var(--muted); }
.md-chart .c3 { --c: var(--accent); --o: 0.45; }
.md-chart .c4 { --c: var(--text); --o: 0.45; }
.md-chart .c5 { --c: var(--muted); --o: 0.45; }
.md-chart .alt { --o: 0.25; }
.md-chart .mk { fill: var(--c); fill-opacity: var(--o, 1); }
.md-chart .mk.dot { fill-opacity: calc(var(--o, 1) * 0.8); }
.md-chart .mk.slice { stroke: var(--panel-2); stroke-width: 1.5; }
.md-chart .ln { fill: none; stroke: var(--c); stroke-opacity: var(--o, 1); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.md-chart .d1 .ln { stroke-dasharray: 7 4; }
.md-chart .d2 .ln { stroke-dasharray: 2 4; }
.md-chart .d3 .ln { stroke-dasharray: 10 4 2 4; }
.md-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--text); }
.md-chart-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px;
  vertical-align: -1px; background: var(--c); opacity: var(--o, 1); }
.md-chart-legend .ln-key .sw { height: 3px; border-radius: 0; width: 16px; vertical-align: 2px; }
.md-chart-data { margin-top: 6px; }
.md-chart-data summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); }
.md-chart-data .md-table { margin: 6px 0 0; }
.md-chart-bad .cell-sub { margin: 0 0 4px; }
/* Playground: chat log, wire view and the context side panel. */
.pg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; margin-top: 12px; align-items: start; }
@media (max-width: 980px) { .pg-grid { grid-template-columns: 1fr; } }
.pg-main { padding: 12px 14px; }
.pg-log { display: flex; flex-direction: column; gap: 10px; min-height: 240px; max-height: 520px; overflow-y: auto;
  margin: 10px 0; padding: 4px 2px; }
.pg-wire { margin: 10px 0; }
.pg-compare { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.pg-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pg-variant { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pg-variant .pg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Compare's rules checklist: the editor's rows, and each column's results. */
.pg-rules { display: flex; flex-direction: column; gap: 6px; }
.pg-rule { display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1fr) minmax(0, 160px) auto;
  gap: 6px; align-items: center; }
@media (max-width: 640px) { .pg-rule { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .pg-rule > .input { width: 100%; } }
.pg-rules-kept { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pg-rule-results { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.pg-rule-results li { overflow-wrap: anywhere; }
.pg-rule-results li > span:first-child { display: inline-block; width: 1.2em; font-weight: 600; }
.pg-rule-results li.ok > span:first-child { color: var(--ok); }
.pg-rule-results li.bad > span:first-child { color: var(--crit); }
.pg-rule-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.pg-wire pre { max-height: 360px; overflow: auto; }
.pg-msg { border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 12px; max-width: 88%; }
.pg-msg.user { align-self: flex-end; background: var(--accent-faint); border-color: var(--accent-border); }
.pg-msg.agent { align-self: flex-start; background: var(--panel-2); }
.pg-msg.pg-sap { display: flex; flex-direction: column; gap: 6px; border-color: var(--accent-border); }
.pg-sap-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; font-size: 12.5px; }
.pg-sap-facts dt { color: var(--muted); }
.pg-sap-facts dd { margin: 0; overflow-wrap: anywhere; }
.pg-msg.refused { align-self: flex-start; border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.pg-msg.waiting { align-self: flex-start; border-color: color-mix(in srgb, var(--warn) 50%, transparent);
  display: flex; flex-direction: column; gap: 6px; }
.pg-wait-input { max-width: 420px; }
.pg-wait-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pg-elicit-field { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pg-elicit-link { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pg-elicit-link code { overflow-wrap: anywhere; font-size: 12px; }
.pg-role { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.pg-text { white-space: pre-wrap; font-size: 13.5px; overflow-wrap: anywhere; }
.pg-text .md { white-space: normal; }
.pg-empty { margin: auto 0; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.chip-btn:hover { border-color: var(--accent-border); }
.pg-side { padding: 12px 14px; position: sticky; top: calc(var(--topnav-h) + 12px); }
.pg-kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border-soft);
  font-size: 12.5px; }
.pg-kv .mono { text-align: right; overflow-wrap: anywhere; }
.pg-list { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; }
/* A footer inside a panel on a longer page — unlike .form-foot, not sticky. */
.panel-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.panel-foot .hint { margin: 0; }
.pg-kv .cell-sub { font-family: inherit; }
.panel-foot .spacer { margin-left: auto; }
.md-toolbar .spacer { margin-left: auto; }
/* Playground: a managed agent's tool steps, folded under its reply. */
.pg-steps { align-self: flex-start; max-width: 88%; font-size: 12.5px; }
.pg-step { border-left: 2px solid var(--border); padding: 4px 10px; margin: 6px 0; }
.pg-step.err { border-left-color: var(--crit); }
.pg-step.note { color: var(--muted); }
.pg-step pre { white-space: pre-wrap; margin: 4px 0 0; max-height: 160px; overflow: auto; font-size: 12px; }
/* Telemetry: where in the ingest pipeline spans were dropped. */
.tel-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.tel-stage { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex;
  flex-direction: column; gap: 2px; min-width: 150px; background: var(--panel); }
.tel-stage.bad { border-color: color-mix(in srgb, var(--crit) 50%, transparent); }
/* Agent network: canvas, minimap, zoom, alert cards, drawer. */
.net-toolbar { margin: -6px 0 14px; }
.net-select { font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); }
.net-stage { position: relative; padding: 0; overflow: hidden; }
.net-canvas { display: block; width: 100%; height: 480px; cursor: grab; touch-action: none; user-select: none; }
.net-canvas:active { cursor: grabbing; }
.net-node { cursor: pointer; }
.net-node:hover rect:first-of-type, .net-node:focus rect:first-of-type { stroke: var(--accent); }
.net-node:focus { outline: none; }
.net-edge { transition: stroke-opacity .12s; }
.net-zoom { position: absolute; bottom: 10px; left: 10px; display: flex; gap: 4px; }
.net-zoom .icon-btn { width: 30px; height: 30px; font-size: 16px; background: var(--panel); border: 1px solid var(--border); }
.net-minimap { position: absolute; right: 10px; bottom: 10px; width: 180px; height: 110px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.net-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 10px 2px 0; font-size: 12px; }
.net-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.net-legend-item i { display: inline-block; width: 22px; height: 3px; border-radius: 2px; }
.net-alert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.net-alert-card { text-align: left; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid var(--muted); border-radius: 8px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px;
  cursor: pointer; }
button.net-alert-card:hover { border-color: var(--accent-border); }
.net-alert-card.critical, .net-alert-card.error { border-left-color: var(--crit); }
.net-alert-card.warning { border-left-color: var(--warn); }
.net-alert-card.info { border-left-color: var(--info); }
.net-drawer .pg-kv { font-size: 13px; }
@media (max-width: 760px) { .net-canvas { height: 460px; } .net-minimap { display: none; } }

/* People who ask their OS for less motion get none: transitions and
   animations finish at once, and scrolling jumps instead of gliding. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Agent Context tab: explanatory cells and result rows wrap instead of clipping. */
.table td.ctx-wrap, .ctx-results td { white-space: normal; overflow: visible; text-overflow: clip; }
.ctx-results td:first-child { width: 64px; }
.ctx-results td:nth-child(2) { width: 170px; }
.ctx-results td:nth-child(3) { width: 26%; }
.ctx-results td:nth-child(4) { font-family: inherit; }


/* ---- Liyagent look (Factory palette) ----
   Ink-black primary actions, monospace labels, flat hairline surfaces. The
   brand accent (signal orange by default) is kept for links and small live
   marks, not for large fills. */
:root[data-theme="light"] .btn-primary, :root[data-theme="light"] .btn.primary {
  background: #111111; border-color: #111111; color: #fbfbf9; background-image: none; box-shadow: none;
}
:root[data-theme="light"] .btn-primary:hover { background: #2a2a28; }
:root:not([data-theme="light"]) .btn-primary {
  background: #eeeee8; border-color: #eeeee8; color: #111111; background-image: none; box-shadow: none;
}
.panel, .card { box-shadow: none; }
.panel-title, .card-head b { letter-spacing: -0.005em; }

/* Home: a centred column at a readable width, like the landing page */
/* The top bar spans the page like every other; only Home's content is held
   to a readable width. Auto margins on <main> itself sized it to its content
   in the console grid (see body.console > main.wrap), so while the cards
   were loading it shrank to the top bar and sat in the middle of the page. */
body[data-page="dashboard"] > main.wrap > :not(.topbar) { max-width: 1180px; margin-inline: auto; }
.greet { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.banner, .banner.warn, .banner.crit {
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--ok); border-radius: 8px; padding: 12px 16px;
}
.banner.warn { border-left-color: var(--warn); }
.banner.crit { border-left-color: var(--crit); }
.banner .ico { font-family: var(--mono); font-weight: 700; }
.banner.warn .ico { color: var(--warn); }
/* Eight numbers as one strip of tiles, not a tall column */
.kpi-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel);
}
.kpi-strip .kpi {
  flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
}
.kpi-strip .kpi:nth-child(4n) { border-right: 0; }
.kpi-strip .kpi:nth-last-child(-n+4) { border-bottom: 0; }
.kpi-strip .kpi .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.kpi-strip .kpi .val { flex-direction: column; align-items: flex-start; gap: 2px; margin-left: 0; text-align: left; }
.kpi-strip .kpi .val b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.kpi-strip .kpi .val span { font-size: 11.5px; }
body[data-page="dashboard"] .home-grid { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-strip .kpi:nth-child(4n) { border-right: 1px solid var(--border); }
  .kpi-strip .kpi:nth-child(2n) { border-right: 0; }
  .kpi-strip .kpi:nth-last-child(-n+4) { border-bottom: 1px solid var(--border); }
  .kpi-strip .kpi:nth-last-child(-n+2) { border-bottom: 0; }
}
#home-top > * + * { margin-top: 16px; }
#home-top .empty .btn { display: inline-flex; margin-top: 12px; }
.side-link.active { background: var(--hover-bg); box-shadow: inset 2px 0 0 var(--accent); }

.intel-icon { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; }
.banner .ico, .ico { font-family: var(--mono); }

/* ---- Sign-in page in the landing page's language ---- */
body[data-page="login"] > header.topnav { display: none; }
body[data-page="login"] { --topnav-h: 64px; }
.lx-nav { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 clamp(16px, 3vw, 32px); }
.lx-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; }
.lx-brand:hover { text-decoration: none; }
.lx-brand svg { width: 22px; height: 22px; }
.lx-back { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lx-back:hover { color: var(--text); text-decoration: none; }
body[data-page="login"] .signin-card { border-radius: 8px; padding: 30px 28px 24px; }
body[data-page="login"] .signin-mark { display: none; }
body[data-page="login"] .signin-title {
  margin: 0; text-align: left; font-size: 28px; font-weight: 600; letter-spacing: -0.035em; text-transform: uppercase;
}
body[data-page="login"] .signin-sub {
  margin: 6px 0 22px; text-align: left; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
body[data-page="login"] .signin-card .field-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
body[data-page="login"] .signin-card .input { border-radius: 4px; height: 38px; }
body[data-page="login"] .signin-card .btn-primary, body[data-page="login"] .sso-btn {
  border-radius: 4px; height: 38px; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
}
body[data-page="login"] .signin-foot { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
body[data-page="login"] .hero-title { font-size: clamp(38px, 5vw, 64px); letter-spacing: -0.045em; line-height: 0.95; }

/* ---- Console elements in the landing page's language ----
   Mono uppercase controls and labels, 4-6px corners, heavy tight headings. */
.btn { border-radius: 4px; }
.input, select.input, textarea.input { border-radius: 4px; }
.card, .panel { border-radius: 8px; }
.greet, .page-head h1, main.wrap > h1, .page-title {
  font-weight: 600; letter-spacing: -0.035em; text-transform: uppercase;
}
.greet { font-size: 34px; line-height: 1; }
.greet-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.card-head b { font-size: 13.5px; font-weight: 600; }
.card-head .muted { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.side-badge { border-radius: 3px; }
.side-brand .brand-text { letter-spacing: 0.02em; }
.quick a, .quick .q { border-radius: 6px; }

/* The Liyagent mark in the console: the spark in ink through the mask, and
   its orange core as a second mask and background layer (a pseudo-element
   would be clipped by the mask). */
.brand-mark, .side-brand .brand-mark, .signin-mark {
  border-radius: 0;
  background: radial-gradient(circle, #ff5b1f 0 16%, transparent 17%) center / 100% 100% no-repeat, var(--text);
  -webkit-mask: url("/logo.svg") center / contain no-repeat,
                radial-gradient(circle, #000 0 16%, transparent 17%) center / 100% 100% no-repeat;
          mask: url("/logo.svg") center / contain no-repeat,
                radial-gradient(circle, #000 0 16%, transparent 17%) center / 100% 100% no-repeat;
}

/* ---- Home: one screen (ADP-style). Needs attention, traffic + four
   numbers, budgets + top agents, quick actions — no scrolling at 1440x900. */
body[data-page="dashboard"] #home-top > .page-head { margin-bottom: 0; padding-bottom: 4px; }
#home-top > * + * { margin-top: 14px; }
.attention {
  border: 1px solid var(--border); border-left: 3px solid var(--ok);
  border-radius: 8px; background: var(--panel);
}
.attention.warn { border-left-color: var(--warn); }
.att-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--border-soft); }
.att-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); }
.att-count { font-family: var(--mono); font-size: var(--fs-xs); color: var(--warn); }
.att-head .spacer { margin-left: auto; }
.att-posture { margin: 0; font-size: 12px; color: var(--muted); }
.att-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.att-row:last-child { border-bottom: 0; }
.att-row .ico { font-family: var(--mono); font-weight: 700; color: var(--warn); width: 12px; flex: none; }
.att-row.ok .ico { color: var(--ok); }
.att-row .att-text { flex: 1; min-width: 0; }
.att-row .att-text b { font-weight: 600; }
.att-row .muted { color: var(--muted); }
.att-view { font-size: 12.5px; white-space: nowrap; }
.att-x { background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.att-x:hover { color: var(--text); background: var(--hover-bg); }
/* Waiting work (home.js): the count in ink, not orange — orange marks what is
   selected, and a count is not — then the sentence and the action. */
.att-n { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--text);
  color: var(--bg); font-size: var(--fs-xs); font-weight: 600; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums; flex: none; }
.att-all { font-size: 12.5px; white-space: nowrap; }
.att-row.att-loading { min-height: 34px; }
.att-row.att-loading .skel-line { flex: none; margin: 0; }
.home-row1 { display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.home-traffic { display: flex; flex-direction: column; min-width: 0; }
.home-traffic .spark { height: 150px; flex: 1; }
.home-traffic-empty { flex: 1; padding: 30px 20px; }
.kpi-strip.kpi-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-strip.kpi-stack .kpi { padding: 12px 14px; min-width: 0; }
.kpi-strip.kpi-stack .kpi:nth-child(2n) { border-right: 0; }
.kpi-strip.kpi-stack .kpi:nth-child(odd) { border-right: 1px solid var(--border); }
.kpi-strip.kpi-stack .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.kpi-strip.kpi-stack .kpi:nth-last-child(-n+2) { border-bottom: 0; }
.kpi-strip.kpi-stack .kpi .val b { font-size: 22px; }
.kpi-strip.kpi-stack .kpi .val span { font-size: var(--fs-xs); line-height: 1.3; }
.kpi-foot { font-size: var(--fs-xs); color: var(--muted); }
.kpi-foot b { font-weight: 600; color: var(--text); }
body[data-page="dashboard"] .home-duo { align-items: stretch; margin-top: 14px; }
body[data-page="dashboard"] .home-duo .kpi,
body[data-page="dashboard"] .home-duo .rank { padding: 9px 16px; }
body[data-page="dashboard"] .home-duo .empty { padding: 18px 16px; }
body[data-page="dashboard"] .home-duo .card-head { padding-bottom: 6px; }
.card-more { display: block; padding: 8px 16px; font-size: 12.5px; }
body[data-page="dashboard"] .quick { margin-top: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-page="dashboard"] .quick a { padding: 12px 14px; }
@media (max-width: 980px) {
  .home-row1 { grid-template-columns: 1fr; }
  body[data-page="dashboard"] .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  body[data-page="dashboard"] .quick { grid-template-columns: 1fr; }
  .att-posture { flex-basis: 100%; }
}

/* Tickets: the New ticket section, opened from the page head */
body[data-page="tickets"] .page-head { display: flex; align-items: center; }
.tk-new-btn { margin-left: auto; }
.new-ticket { margin-bottom: 18px; }
.tk-charts { margin-top: 18px; }

/* Categories: the learned-taxonomy review (categories.js) */
body[data-page="categories"] .panel { margin-bottom: 18px; }
.tx-lead { margin: 0 0 12px; max-width: 78ch; line-height: 1.55; }
.tx-active-row, .tx-learn-row, .tx-toolbar, .tx-version, .tx-card-head, .tx-team-row,
.tx-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tx-active-row .spacer, .tx-toolbar .spacer, .tx-version .spacer,
.tx-card-foot .spacer { margin-left: auto; }
.tx-learn-row .check-row { gap: 6px; align-items: center; font-size: 13px; }
.tx-routes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tx-route { display: inline-flex; gap: 6px; align-items: center; font-size: 12px;
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; }
.tx-route-cat { font-weight: 600; }
.tx-versions { display: flex; flex-direction: column; gap: 6px; }
.tx-version { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.tx-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: 8px; margin-bottom: 14px; }
.tx-stat { padding: 10px 14px; border-right: 1px solid var(--border); }
.tx-stat:last-child { border-right: 0; }
.tx-stat-label, .tx-label { font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tx-stat-value { font-family: var(--mono); font-size: 18px; margin-top: 4px; }
.tx-toolbar { margin-bottom: 14px; }
.tx-toolbar .input-sm { width: 200px; }
.tx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.tx-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  background: var(--panel-2); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tx-name { flex: 1; min-width: 0; font-weight: 600; }
.tx-count { font-size: 12px; white-space: nowrap; }
.tx-bar { height: 4px; background: var(--track-bg); border-radius: 999px; overflow: hidden; }
.tx-bar span { display: block; height: 100%; background: var(--accent); }
.tx-desc { margin: 0; font-size: 13px; line-height: 1.5; }
.tx-kw, .tx-subs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tx-chip { font-family: var(--mono); font-size: var(--fs-xs); padding: 1px 7px; border-radius: 4px;
  border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--chip-text); }
.tx-team-row .input-sm { width: 190px; }
.tx-basis { font-size: 11.5px; }
.tx-examples { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.55; }
.tx-examples li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-card-foot { font-size: 11.5px; border-top: 1px solid var(--border-soft); padding-top: 8px; }
.tx-del { color: var(--crit); }
@media (max-width: 720px) {
  .tx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-grid { grid-template-columns: 1fr; }
}
/* ---- agent avatars (TIQ.agentAvatar) ---- */
.agent-avatar { display: inline-block; flex: none; object-fit: cover; vertical-align: middle;
  border-radius: 5px; background: var(--surface-2, #f3f3f0); }
.agent-avatar-sm { width: 20px; height: 20px; margin-right: 8px; }
.agent-avatar-md { width: 28px; height: 28px; margin-right: 10px; border-radius: 7px; }
.agent-avatar-lg { width: 56px; height: 56px; border-radius: 12px; }
.agent-with-avatar { display: inline-flex; align-items: center; min-width: 0; }
.avatar-editor { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar-editor .muted { font-size: 12px; }

/* ---------- the agent page, ADP style (agent.js) ----------
   A compact header, six tabs as a segmented control, a small strip for the
   open tab's views, and settings as left-labelled sections. Factory tokens:
   ink on off-white, the signal orange only for what is live or chosen. */
:root { --signal: #ff5b1f; --ink: var(--text); }
.adp-head { display: flex; align-items: flex-start; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
.adp-head .agent-avatar { flex-shrink: 0; }
.adp-head-main { flex: 1 1 320px; min-width: 0; }
.adp-head-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adp-head-title .page-head { margin: 0; display: block; }
.adp-head-title .page-title { font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--text);
  text-shadow: none; font-weight: 650; }
.adp-head-title .page-sub { margin: 2px 0 0; font-size: 13px; }
.adp-head-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px;
  font-size: 12px; color: var(--muted); min-width: 0; }
.adp-head-meta .mono { font-size: 11.5px; overflow-wrap: anywhere; }
.adp-head-meta a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.adp-dot { color: var(--border); }
.adp-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adp-more-wrap { position: relative; }
.adp-more { min-width: 34px; font-size: 16px; line-height: 1; padding: 4px 8px; }
.adp-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 5px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; }
.adp-menu[hidden] { display: none; }
.adp-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--text); font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 6px;
  cursor: pointer; text-decoration: none; }
.adp-menu-item:hover { background: var(--hover-bg); }
.adp-menu-item.danger { color: var(--crit); }

.adp-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 0 10px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); max-width: 100%; }
.adp-tabs .opt { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px;
  cursor: pointer; color: var(--muted); }
.adp-tabs .opt b { font-size: 12.5px; font-weight: 600; margin: 0; display: inline; }
.adp-tabs .opt:hover { color: var(--text); }
.adp-tabs .opt.on { background: var(--panel); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 -2px 0 var(--signal); }
.adp-tabs .opt.on b { color: var(--text); }
.adp-views { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft); }
.adp-views[hidden] { display: none; }
.adp-views .opt { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 11px;
  font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  cursor: pointer; border-radius: 0; }
.adp-views .opt:hover { color: var(--text); }
.adp-views .opt.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--signal); }
.adp-body { min-width: 0; }

/* Settings: one page of sections, label and help on the left, control right. */
.adp-sections { display: flex; flex-direction: column; }
.adp-section { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 18px 28px;
  padding: 20px 0; border-top: 1px solid var(--border-soft); }
.adp-section:first-child { border-top: 0; padding-top: 4px; }
.adp-section-label { min-width: 0; }
.adp-section-label h3 { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.adp-section-label p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.adp-section-body { min-width: 0; }
.adp-section-body > .panel:last-child { margin-bottom: 0 !important; }
.adp-card { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 14px 16px; }
.adp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adp-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; }
.adp-kv > span:nth-child(odd) { color: var(--muted); }
.adp-kv .mono { overflow-wrap: anywhere; }
.adp-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.adp-choice button { text-align: left; border: 1px solid var(--border); background: var(--panel);
  border-radius: 9px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--text); }
.adp-choice button b { display: block; font-size: 13px; }
.adp-choice button span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.adp-choice button.on { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.adp-choice button:disabled { opacity: 0.55; cursor: not-allowed; }
.adp-tree { list-style: none; margin: 0; padding: 0; }
.adp-tree li { position: relative; padding: 6px 0 6px 18px; }
.adp-tree li::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; border-left: 1px solid var(--border); }
.adp-tree li::after { content: ""; position: absolute; left: 5px; top: 16px; width: 9px; border-top: 1px solid var(--border); }
.adp-tree li:last-child::before { bottom: calc(100% - 16px); }
.adp-tree .adp-tree { margin-top: 2px; }
.adp-tree-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.adp-tree-row a { color: var(--text); font-weight: 600; text-decoration: none; }
.adp-tree-row a:hover { text-decoration: underline; }
.adp-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--chip-border);
  border-radius: 999px; padding: 2px 9px; font-size: var(--fs-xs); font-family: var(--mono); color: var(--chip-text);
  background: var(--chip-bg); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.adp-chip b { font-weight: 600; letter-spacing: 0.06em; }
.adp-chip.signal { border-color: var(--signal); color: var(--signal-text); }
.adp-mono-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); }



/* Rule playground: a decision card. */
.adp-decision { border: 1px solid var(--border); border-left: 3px solid var(--signal); border-radius: 10px;
  padding: 12px 14px; background: var(--panel); }
.adp-decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 8px 0; }
.adp-decision-grid > div { min-width: 0; }
.adp-decision-grid b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.adp-rules { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.adp-rules li { padding: 4px 0; border-top: 1px dashed var(--border-soft); display: flex; gap: 8px; flex-wrap: wrap; }
.adp-rules li .mono { color: var(--muted); }

/* Playground shell. */
.pgx { display: flex; flex-direction: column; min-height: 62vh; border: 1px solid var(--border);
  border-radius: 12px; background: var(--panel); overflow: hidden; }
.pgx-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.pgx-bar .adp-row { gap: 6px; }
.pgx-tool { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 7px;
  padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.pgx-tool.on { border-color: var(--signal); color: var(--signal-text); }
.pgx-main { display: flex; flex: 1; min-height: 0; }
.pgx-chat { flex: 1; min-width: 0; padding: 14px; overflow-y: auto; max-height: 64vh; }
.pgx-drawer { width: 340px; max-width: 100%; border-left: 1px solid var(--border-soft); padding: 12px;
  overflow-y: auto; max-height: 64vh; background: var(--panel-2); }
.pgx-drawer[hidden] { display: none; }
.pgx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; padding: 48px 16px; color: var(--muted); }
.pgx-empty .ico { font-size: 26px; color: var(--text); }
.pgx-empty h3 { margin: 4px 0 0; color: var(--text); font-size: 15px; }
.pgx-input { border-top: 1px solid var(--border-soft); padding: 10px; }
.pgx-input textarea { width: 100%; resize: vertical; min-height: 54px; }
.pgx-input-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pgx-input.drop { outline: 2px dashed var(--accent-border); outline-offset: -4px; background: var(--accent-faint); }
/* Files on a message: the tray above the box, and under a sent question.
   Every chip is its final size from the first paint — the thumbnail box is
   fixed — so nothing moves as an image arrives. */
.pg-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.pg-files.sent { margin: 6px 0 0; }
.pg-file { display: flex; align-items: center; gap: 8px; max-width: 320px; min-width: 0; padding: 4px 6px 4px 4px;
  border: 1px solid var(--border-soft); border-radius: 8px; background: var(--panel-2); }
.pg-file.bad { border-color: var(--crit); }
.pg-file.expired, .pg-file.unreadable, .pg-file.unavailable { border-color: var(--warn); }
.pg-file-thumb { width: 36px; height: 36px; flex: none; border-radius: 6px; object-fit: cover;
  background: var(--chip-bg); }
.pg-file-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.pg-file-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pg-file-name { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.pg-file-name:hover { color: var(--accent); }
.pg-file-detail { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.pg-file.bad .pg-file-detail { color: var(--crit); }
.pg-file.expired .pg-file-detail, .pg-file.unreadable .pg-file-detail,
.pg-file.unavailable .pg-file-detail { color: var(--warn); }
.pg-file.uploading .pg-file-thumb { background: linear-gradient(90deg, var(--chip-bg), var(--accent-faint), var(--chip-bg));
  background-size: 200% 100%; animation: pg-file-wait 1.2s linear infinite; }
@keyframes pg-file-wait { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .pg-file.uploading .pg-file-thumb { animation: none; } }
.pg-file-remove { flex: none; }
.pg-files-note { margin: 0 0 6px; }
.pg-msg.user .pg-file { background: var(--panel); }
.pg-attach { display: inline-flex; align-items: center; gap: 5px; }
/* Requests a waiting run makes of the person: open ones pinned above the
   message box, settled ones a single line in their turn. */
.pg-dock { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; max-height: 46vh; overflow-y: auto; }
.pg-dock .pg-request { max-width: none; align-self: stretch; display: flex; flex-direction: column; gap: 6px;
  background: var(--panel-2); }
.pg-request[data-state="failed"] { border-color: var(--crit); }
.pg-request[data-state="submitting"] { opacity: 0.85; }
.pg-request .err { color: var(--crit); margin: 0; }
.pg-request-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pg-request-turn { margin-left: auto; background: none; border: 0; color: var(--accent); cursor: pointer;
  font-size: var(--fs-xs); padding: 0; }
.pg-questions { display: flex; flex-direction: column; gap: 6px; }
.pg-questions .pg-elicit-field[hidden] { display: none; }
.pg-request-line { align-self: flex-start; max-width: 88%; font-size: 12.5px; padding: 4px 0; }
.pg-request-line.open { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pg-request-line.open .link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0;
  font-size: var(--fs-xs); }
.pg-request-line > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
.pg-request-line > summary::-webkit-details-marker { display: none; }
.pg-request-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pg-request-line[open] .pg-request-summary { white-space: normal; }
.pg-request-line > p { margin: 4px 0 2px; }
/* A transcript grouped by question, in three resizable columns: User,
   Agent, Tools (agent.js txColumns). The widths are fr shares the dividers
   move; hairlines between the columns, mono labels above them. */
.tx-cols { --tx-c1: 30fr; --tx-c2: 38fr; --tx-c3: 32fr; }
.tx-cols-head, .tx-row { display: grid;
  grid-template-columns: minmax(0, var(--tx-c1)) minmax(0, var(--tx-c2)) minmax(0, var(--tx-c3)); }
.tx-cols-head { position: sticky; top: var(--topnav-h); z-index: 5; background: var(--bg); padding: 0 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.tx-col-name { position: relative; padding: 8px 12px; }
.tx-col-sep { position: absolute; top: 0; bottom: 0; right: -7px; width: 14px; z-index: 1; cursor: col-resize;
  touch-action: none; }
.tx-col-sep::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 6px; width: 2px;
  border-radius: 1px; background: var(--border); }
.tx-col-sep:hover::after, .tx-col-sep.dragging::after { background: var(--accent); }
.tx-col-sep:focus-visible { outline: none; }
.tx-col-sep:focus-visible::after { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.tx-row { border-top: 1px solid var(--border-soft); margin-top: 8px; }
.tx-cell { min-width: 0; padding: 8px 12px; }
.tx-cell + .tx-cell { border-left: 1px solid var(--border-soft); }
.tx-cell > pre.ag-item-body { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tx-cell > p.cell-sub { margin: 0 0 6px; }
.tx-tool { margin: 0 0 8px; border-left: 3px solid var(--border); }
@media (max-width: 760px) {
  .tx-cols-head { display: none; }
  .tx-row { grid-template-columns: 1fr; }
  .tx-cell + .tx-cell { border-left: 0; border-top: 1px dashed var(--border-soft); }
  .tx-cell::before { content: attr(data-col); display: block; margin-bottom: 4px; font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
}
/* Why a tool call did not go through (agent.js toolFailure), in words on
   the card: refused here, or rejected on the tool's side. */
.tool-fail { margin: 4px 0 2px; font-size: 12px; line-height: 1.4; padding-left: 8px;
  border-left: 2px solid var(--crit); color: var(--text); overflow-wrap: anywhere; }
.tool-fail b { font-weight: 600; }
.tool-fail.policy, .tool-fail.guardrail, .tool-fail.limit { border-left-color: var(--warn); }
.tool-fail.held { border-left-color: var(--muted); }
/* A Settings panel another view sent the reader to (agent.js openSection). */
.ag-reveal { box-shadow: 0 0 0 2px var(--accent-border); transition: box-shadow 0.6s ease; }
.tx-unrecorded a { white-space: nowrap; }
/* A context compaction in a transcript: where the model went on from a
   shortened context, how big it was before and after, against the limit. */
.tx-compact { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--warn); border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 6%, transparent); }
.tx-compact-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tx-compact-sizes { margin: 6px 0 4px; font-family: var(--mono); font-size: 12px; }
.tx-compact > p.cell-sub { margin: 6px 0 0; }
.tx-compact-meter { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  margin: 3px 0; }
.tx-compact-track { position: relative; height: 6px; border-radius: 3px; background: var(--track-bg); overflow: visible; }
.tx-compact-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--text); opacity: 0.55; }
.tx-compact-fill.hot { background: var(--accent); opacity: 1; }
.tx-compact-budget { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--accent); }
/* The Playground's context meter: an estimate against the model's limit,
   apart from the token counts the provider reported. */
.pg-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); flex-wrap: wrap; }
.pg-ctx .mono { font-size: var(--fs-xs); }
.pg-ctx-track { position: relative; width: 64px; height: 5px; border-radius: 3px; background: var(--track-bg);
  overflow: hidden; }
.pg-ctx-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text); opacity: 0.55; }
.pg-ctx-fill.hot { background: var(--accent); opacity: 1; }
/* The Outputs drawer: files the agent made and the sources it drew on. */
.pg-out-section { margin-bottom: 14px; }
.pg-out-section h3 { margin: 0 0 6px; }
.pg-out-list { list-style: none; margin: 0; padding: 0; }
.pg-out { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.pg-out:first-child { border-top: 0; }
.pg-out-name { font-size: 13px; overflow-wrap: anywhere; }
.pg-out-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pg-out-turns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pg-out-turns .link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: var(--fs-xs); }
.pg-out-meta .btn { margin-left: auto; }
.pg-msg[data-turn]:focus { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.pgx-bubble { max-width: 80%; border-radius: 12px; padding: 9px 12px; margin: 6px 0; font-size: 13.5px;
  line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.pgx-bubble.user { margin-left: auto; background: var(--text); color: var(--bg); border-bottom-right-radius: 4px; }
.pgx-bubble.agent { background: var(--panel-2); border: 1px solid var(--border-soft); border-bottom-left-radius: 4px; }
.pgx-history { position: relative; }
.pgx-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: 340px; max-width: calc(100vw - 32px);
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.pgx-pop[hidden] { display: none; }
.pgx-pop .input { width: 100%; }
.pgx-sessions { list-style: none; margin: 8px 0 0; padding: 0; max-height: 240px; overflow-y: auto; }
.pgx-sessions li { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; font-size: 12px; }
.pgx-sessions li:hover { background: var(--hover-bg); }
.pgx-sessions li button.link { background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; padding: 0;
  flex: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adp-modal-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(8, 8, 8, 0.45); display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.adp-modal { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; width: 720px;
  max-width: 100%; max-height: 86vh; display: flex; flex-direction: column; }
.adp-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.adp-modal-head h2 { margin: 0; font-size: 15px; }
.adp-modal-body { padding: 14px 16px; overflow: auto; }
.adp-modal-foot { padding: 10px 16px; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: 8px; }
.adp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 40px 16px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); }
.adp-empty .ico { font-size: 24px; color: var(--text); }
.adp-empty h3 { margin: 4px 0 0; color: var(--text); font-size: 15px; }
.adp-empty p { margin: 0; max-width: 46ch; font-size: 13px; }
.adp-sticky-foot { position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--border);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; z-index: 5; }
.adp-back { display: inline-block; margin-bottom: 10px; font-size: 13px; color: var(--muted); text-decoration: none; cursor: pointer;
  background: none; border: 0; padding: 0; font: inherit; }
.adp-back:hover { color: var(--text); }

@media (max-width: 760px) {
  .adp-section { grid-template-columns: 1fr; gap: 10px; }
  .adp-kv { grid-template-columns: 1fr; }
  .pgx-main { flex-direction: column; }
  .pgx-drawer { width: auto; border-left: 0; border-top: 1px solid var(--border-soft); }
  .pgx-bubble { max-width: 94%; }
  .adp-head-title .page-title { font-size: 18px; }
  .adp-tabs .opt { padding: 5px 9px; }
}
.adp-row > .input, .adp-row > select.input { width: auto; flex: 0 1 240px; min-width: 0; }
.adp-tree-row .btn-ghost { margin-left: auto; }
.adp-tree-row .cell-sub { flex: 1 1 200px; min-width: 0; }
/* Liya's Settings → Subagents: the per-client switch on each subagent. */
.adp-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.adp-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.adp-toggle-track { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--track-bg);
  border: 1px solid var(--border); flex: none; transition: background 0.15s, border-color 0.15s; }
.adp-toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--muted); transition: transform 0.15s; }
.adp-toggle input:checked + .adp-toggle-track { background: var(--signal); border-color: var(--signal); }
.adp-toggle input:checked + .adp-toggle-track::after { transform: translateX(14px); background: #140700; }
.adp-toggle input:checked ~ .adp-toggle-text { color: var(--text); }
.adp-toggle input:focus-visible + .adp-toggle-track { outline: 2px solid var(--signal); outline-offset: 2px; }
.adp-toggle input:disabled + .adp-toggle-track { opacity: 0.5; cursor: not-allowed; }
.adp-tree li.is-off > .adp-tree-row > :not(.adp-toggle):not(.btn),
.adp-tree li.is-off > .adp-tree .adp-tree-row { opacity: 0.5; }

/* Budgets (budgetui.js): spend against the limit, warn and block markers. */
.bud-bar { position: relative; height: 10px; border-radius: 999px; background: var(--track-bg); margin-top: 12px; }
.bud-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.bud-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; transform: translateX(-1px); }
.bud-mark.warn { background: var(--warn); }
.bud-mark.block { background: var(--crit); }
.adp-head-title .page-head { display: contents; }
.adp-head-title .page-sub { order: 10; flex-basis: 100%; margin: 2px 0 0; }
.adp-head-title .page-title { margin-right: 4px; }

/* The fleet's tree: Liya, her subagents, Triage's steps (fleet.js). */
.fleet-tree { display: flex; align-items: center; gap: 6px; position: relative; min-width: 0; }
.fleet-tree-d1 { padding-left: 26px; }
.fleet-tree-d2 { padding-left: 52px; }
.fleet-tree-d1::before, .fleet-tree-d2::before { content: ""; position: absolute; top: -12px; bottom: 50%;
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); width: 12px; border-bottom-left-radius: 4px; }
.fleet-tree-d1::before { left: 10px; }
.fleet-tree-d2::before { left: 36px; }
.fleet-tree-toggle { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; width: 16px; padding: 0; }

/* ---------- ADP-style lists, network and access (adplist.js) ----------
   Scoped to lx-*: the Agents list, the Agent network page and Access.
   Factory tokens: ink on the page, the signal orange only for what is
   chosen or needs attention. */
.lx-toolbar { gap: 8px; flex-wrap: wrap; align-items: center; }
.lx-filters { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lx-pop-wrap { position: relative; display: inline-flex; }
.lx-filter { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: 1px dashed var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.lx-filter:hover { border-color: var(--input-hover-border); }
.lx-filter.on { border-style: solid; border-color: var(--signal); }
.lx-filter-ico, .lx-caret { color: var(--muted); font-size: var(--fs-xs); }
.lx-filter-n { background: var(--signal); color: #fff; border-radius: 999px; font-size: var(--fs-xs);
  min-width: 17px; height: 17px; line-height: 17px; text-align: center; padding: 0 5px; font-weight: 700; }
.lx-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 80; min-width: 230px; max-width: 320px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }
.lx-pop[hidden] { display: none; }
.lx-right .lx-pop { left: auto; right: 0; }
.lx-pop-search { width: 100%; margin: 0 0 6px; }
.lx-pop-list { max-height: 260px; overflow-y: auto; }
.lx-pop-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; }
.lx-pop-row:hover { background: var(--hover-bg); }
.lx-pop-row input { margin: 0; }
.lx-pop-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-pop-count { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.lx-pop-empty { padding: 8px; color: var(--muted); font-size: 12px; }
.lx-pop-foot { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 4px; display: flex; justify-content: flex-end; }
.lx-pop-clear { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 4px 8px; }
.lx-pop-clear:not(:disabled):hover { color: var(--text); }
.lx-more { min-width: 30px; height: 30px; border: 1px solid transparent; border-radius: 7px; background: none;
  color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px; }
.lx-more:hover { border-color: var(--border); color: var(--text); background: var(--panel); }
.lx-toolbar > .lx-pop-wrap .lx-more { border-color: var(--border); height: 34px; }
.lx-menu { min-width: 180px; }
.lx-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text);
  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.lx-menu-item:hover:not(:disabled) { background: var(--hover-bg); }
.lx-menu-item:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.6; }
.lx-menu-item.danger { color: var(--crit); }
.lx-menu-sep { border-top: 1px solid var(--border-soft); margin: 4px 0; }
.lx-table-wrap { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: visible; }
.lx-table-wrap .tbl-scroll { overflow-x: auto; overflow-y: visible; }
.lx-table { width: 100%; }
.lx-table th { white-space: nowrap; }
.lx-table td { vertical-align: middle; }
.lx-table td.lx-col-menu, .lx-table th.lx-col-menu { width: 44px; text-align: right; }
.lx-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; text-transform: inherit; letter-spacing: inherit; }
.lx-sort-ico { color: var(--muted); font-size: var(--fs-xs); }
.lx-sort.on .lx-sort-ico { color: var(--signal-text); }
.lx-head-info { display: inline-flex; align-items: center; gap: 4px; }
.lx-info { color: var(--muted); cursor: help; font-size: 12px; }
.lx-name { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; }
.lx-depth-1 { padding-left: 26px; }
.lx-depth-2 { padding-left: 52px; }
.lx-tree-line { position: absolute; top: -14px; bottom: 50%; width: 12px; border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border); border-bottom-left-radius: 5px; }
.lx-depth-1 .lx-tree-line { left: 9px; }
.lx-depth-2 .lx-tree-line { left: 35px; }
.lx-tree-toggle { width: 18px; }
.lx-name-link { display: flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.lx-name-link:hover .cell-main { text-decoration: underline; }
.lx-name-text { display: block; min-width: 0; }
.lx-status { display: inline-flex; align-items: center; gap: 6px; }
.lx-model { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; min-width: 0; }
.lx-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px; }
.lx-provider { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 5px; color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.lx-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 2px 0; font-size: 12.5px;
  color: var(--muted); }
.lx-pager .spacer { flex: 1; }
.lx-size { height: 30px; font-size: 12px; }
.lx-pg-btn { min-width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel);
  color: var(--text); cursor: pointer; font: inherit; }
.lx-pg-btn:disabled { opacity: 0.4; cursor: default; }
.lx-initials { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px;
  height: 24px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--chip-border);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
.lx-views { margin-top: -4px; }
.lx-callout { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); padding: 10px 14px; font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.lx-callout b { color: var(--text); }
.lx-callout .lx-callout-ico { color: var(--text); }
/* .lx-drawer: retired — ADPL.drawer opens the console drawer. */
.lx-drawer-scrim { position: fixed; inset: 0; z-index: 180; background: var(--scrim); display: flex; justify-content: flex-end; }
.lx-drawer { max-width: 100%; height: 100%; background: var(--panel); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; box-shadow: -12px 0 30px rgba(0, 0, 0, 0.2); }
.lx-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 16px 18px 10px; border-bottom: 1px solid var(--border-soft); }
.lx-drawer-head h2 { margin: 0; font-size: 16px; }
.lx-drawer-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.lx-drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.lx-drawer-foot { border-top: 1px solid var(--border-soft); padding: 12px 18px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 760px) {
  .lx-toolbar .search-box { flex: 1 1 100%; }
  .lx-drawer { width: 100% !important; }
  .lx-model { max-width: 140px; }
}

/* ---- Secrets store (secrets.js) ----
   Ink primary action, mono uppercase IDs, hairline table; a sticky form
   footer and in-page modals. Factory tokens only. */
.secrets-page .btn.primary, .secrets-modal .btn.primary {
  background: var(--text); border-color: var(--text); color: var(--bg); background-image: none; box-shadow: none;
}
.secrets-page .btn.primary:hover:not(:disabled), .secrets-modal .btn.primary:hover:not(:disabled) { opacity: 0.88; }
.secrets-page .btn.primary:disabled, .secrets-modal .btn.primary:disabled { opacity: 0.35; cursor: not-allowed; }


.secrets-mono, .secrets-id { font-family: var(--mono); }
.secrets-toolbar { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; flex-wrap: wrap; }
.secrets-toolbar .spacer, .secrets-foot-bar .spacer, .secrets-sticky .spacer { flex: 1; }
.secrets-toolbar .search-box { flex: 0 1 320px; }
.secrets-label-filter { width: auto; min-width: 150px; }
.secrets-create { text-decoration: none; }
.secrets-create:hover { text-decoration: none; }
.secrets-table-wrap { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); overflow-x: auto; }
.secrets-table { width: 100%; border-collapse: collapse; }
.secrets-table th {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.secrets-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.secrets-table tbody tr:hover { background: var(--hover-bg); }
.secrets-id { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; word-break: break-all; }
.secrets-col-menu { width: 48px; text-align: right; }
.secrets-sort {
  background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.secrets-sort:hover { color: var(--text); }
.secrets-sort-mark { color: var(--accent); }
.secrets-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.secrets-chip {
  font-family: var(--mono); font-size: var(--fs-xs); padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--chip-text);
}
.secrets-chip b { font-weight: 600; }
.secrets-none { color: var(--muted); font-size: 13px; }
.secrets-empty { text-align: center; padding: 36px 14px !important; color: var(--muted); }
.secrets-empty b { display: block; color: var(--text); margin-bottom: 4px; }
.secrets-foot-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.secrets-per-label { display: inline-flex; align-items: center; gap: 8px; }
.secrets-per { width: auto; padding: 4px 8px; }
.secrets-pageof { font-family: var(--mono); font-size: 11.5px; margin: 0 4px; }
.secrets-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid transparent; border-radius: 4px; background: none; color: var(--muted); cursor: pointer;
}
.secrets-icon-btn:hover:not(:disabled) { color: var(--text); background: var(--hover-bg); border-color: var(--border); }
.secrets-icon-btn:disabled { opacity: 0.35; cursor: default; }
.secrets-menu {
  position: absolute; z-index: 60; width: 180px; padding: 4px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.secrets-menu-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 4px;
  background: none; color: var(--text); font-size: 13px; cursor: pointer;
}
.secrets-menu-item:hover { background: var(--hover-bg); }
.secrets-menu-item.danger { color: var(--crit); }
.secrets-menu-sep { height: 1px; background: var(--border-soft); margin: 4px 0; }
.secrets-backdrop {
  position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.secrets-modal {
  width: min(460px, 100%); background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.secrets-modal-title { margin: 0 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.secrets-modal-body { font-size: 13.5px; color: var(--muted); display: grid; gap: 10px; }
.secrets-modal-body p { margin: 0; }
.secrets-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.secrets-error { color: var(--crit); font-size: 12.5px; margin: 0; }
.secrets-error:empty { display: none; }
.secrets-back {
  display: inline-block; margin-bottom: 12px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.secrets-back:hover { color: var(--text); text-decoration: none; }
.secrets-form { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin: 18px 0 0; }
.secrets-section { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 22px; }
.secrets-section + .secrets-section { border-top: 1px solid var(--border-soft); }
.secrets-section-lbl h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.secrets-section-lbl p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.secrets-section-body { display: grid; gap: 8px; max-width: 560px; }
.secrets-section-body .hint { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.secrets-field-lbl { font-size: 12.5px; font-weight: 600; }
.secrets-field-lbl .req { color: var(--crit); margin-left: 3px; }
.secrets-seg {
  display: inline-flex; width: max-content; padding: 3px; gap: 2px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--input-bg);
}
.secrets-seg-btn {
  border: 0; background: none; color: var(--muted); padding: 5px 12px; border-radius: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.secrets-seg-btn.on { background: var(--text); color: var(--bg); }
.secrets-value-holder .input { width: 100%; }
.secrets-value-holder textarea { resize: vertical; min-height: 120px; }
.secrets-label-rows { display: grid; gap: 8px; }
.secrets-label-rows:empty { display: none; }
.secrets-label-row { display: grid; grid-template-columns: 1fr 1fr 30px; gap: 8px; align-items: center; }
.secrets-add-label { width: max-content; margin-top: 8px; }
.secrets-sticky {
  position: sticky; bottom: 0; z-index: 40; margin-top: 16px; border: 1px solid var(--border); border-radius: 8px;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--panel); border-top: 1px solid var(--border);
}
.secrets-sticky .hint { margin: 0; }
@media (max-width: 760px) {
  .secrets-section { grid-template-columns: 1fr; gap: 12px; }

  .secrets-sticky > .hint { display: none; }
}

/* ---- LLM providers (llm-providers.js): Factory black/orange, scoped under .llmp-* ---- */
.llmp-root { --llmp-orange: #ff5b1f; --llmp-orange-soft: rgba(255, 91, 31, 0.12);
  --llmp-orange-line: rgba(255, 91, 31, 0.45); --llmp-surface: var(--panel); --llmp-line: var(--border);
  color: var(--text); padding-bottom: 88px; }
.llmp-root .page-title { margin: 0; }
.llmp-sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.llmp-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.llmp-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.llmp-spacer { flex: 1; }
.llmp-input, .llmp-select { background: var(--input-bg); color: var(--text); border: 1px solid var(--llmp-line);
  border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 13px; min-width: 0; }
.llmp-input:focus, .llmp-select:focus { outline: none; border-color: var(--llmp-orange); box-shadow: 0 0 0 2px var(--llmp-orange-soft); }
.llmp-search { width: 260px; max-width: 100%; }
.llmp-select-sm { padding: 4px 8px; }
.llmp-table-wrap { border: 1px solid var(--llmp-line); border-radius: 8px; overflow-x: auto; background: var(--llmp-surface); }
.llmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.llmp-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--llmp-line); white-space: nowrap; }
.llmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.llmp-table tr.dragging { opacity: 0.4; }
.llmp-order { white-space: nowrap; width: 72px; }
.llmp-grip { cursor: grab; color: var(--muted); margin-right: 4px; letter-spacing: -2px; }
.llmp-arrow { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 3px; font-size: 13px; }
.llmp-arrow:hover:not(:disabled) { color: var(--llmp-orange); }
.llmp-arrow:disabled { opacity: 0.3; cursor: default; }
.llmp-prov { display: flex; align-items: center; gap: 10px; }
.llmp-name { font-weight: 600; }
.llmp-mono { font-family: var(--mono); font-size: 12px; }
.llmp-muted { color: var(--muted); font-size: 12px; }
.llmp-right { text-align: right; }
.llmp-icon { border-radius: 6px; }
.llmp-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid transparent; }
.llmp-pill-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.llmp-pill-off { color: var(--muted); background: var(--chip-bg); border-color: var(--chip-border); }
.llmp-pill-err { color: var(--crit); background: color-mix(in srgb, var(--crit) 10%, transparent); border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
.llmp-count { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--llmp-line);
  border-radius: 6px; color: var(--text); padding: 2px 8px; cursor: pointer; font: inherit; }
.llmp-chev { display: inline-block; transition: transform 0.15s; color: var(--muted); }
.llmp-count.open .llmp-chev { transform: rotate(90deg); color: var(--llmp-orange); }
.llmp-models-row td { background: var(--panel-2); }
.llmp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.llmp-chip { font: 12px var(--mono); padding: 2px 8px; border-radius: 4px; border: 1px solid var(--llmp-line); background: var(--llmp-surface); }
.llmp-metric { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.llmp-metric > span { min-width: 34px; font-variant-numeric: tabular-nums; }
.llmp-spark { width: 72px; height: 20px; }
.llmp-spark polyline { fill: none; stroke: var(--llmp-orange); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.llmp-spark-spend polyline { stroke: var(--muted); }
.llmp-menu { position: relative; display: inline-block; }
.llmp-kebab { background: none; border: 1px solid transparent; color: var(--muted); border-radius: 6px; cursor: pointer; font-size: 16px; padding: 0 8px; }
.llmp-kebab:hover { border-color: var(--llmp-line); color: var(--text); }
.llmp-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 170px; background: var(--llmp-surface);
  border: 1px solid var(--llmp-line); border-radius: 8px; padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); text-align: left; }
.llmp-menu-pop[hidden] { display: none; }
.llmp-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 7px 10px; border-radius: 5px; cursor: pointer; font: inherit; font-size: 13px; }
.llmp-menu-item:hover { background: var(--hover-bg); }
.llmp-danger { color: var(--crit); }
.llmp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 2px; font-size: 12.5px; color: var(--muted); }
.llmp-pages { display: flex; gap: 4px; }
.llmp-page { min-width: 28px; height: 28px; border: 1px solid var(--llmp-line); background: var(--llmp-surface); color: var(--text); border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; }
.llmp-page.on { border-color: var(--llmp-orange); color: var(--llmp-orange); background: var(--llmp-orange-soft); }
.llmp-empty { padding: 40px 16px; text-align: center; }
.llmp-empty h3 { margin: 0 0 6px; font-size: 15px; }
.llmp-empty p { margin: 0; color: var(--muted); font-size: 13px; }
.llmp-empty-sm { padding: 22px 12px; border: 1px dashed var(--llmp-line); border-radius: 8px; }
.llmp-back { display: inline-block; color: var(--muted); text-decoration: none; font-size: 13px; margin-bottom: 10px; }
.llmp-back:hover { color: var(--llmp-orange); }
.llmp-form .page-title { margin-bottom: 18px; }
.llmp-sections { display: flex; flex-direction: column; }
.llmp-section { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--llmp-line); }
.llmp-section-label h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.llmp-section-label p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.llmp-section-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 760px; }
.llmp-field { display: flex; flex-direction: column; gap: 5px; }
.llmp-field > label { font-size: 12.5px; font-weight: 500; }
.llmp-hint { margin: 0; color: var(--muted); font-size: 12px; }
.llmp-sub-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.llmp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.llmp-card { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px 14px; border: 1px solid var(--llmp-line);
  border-radius: 8px; background: var(--llmp-surface); color: var(--text); cursor: pointer; font: inherit; font-size: 13px; }
.llmp-card:hover { border-color: var(--input-hover-border); }
.llmp-card.on { border-color: var(--llmp-orange); box-shadow: 0 0 0 1px var(--llmp-orange) inset; background: var(--llmp-orange-soft); }
.llmp-card:focus-visible { outline: 2px solid var(--llmp-orange); outline-offset: 2px; }
.llmp-card-top { display: flex; align-items: center; gap: 10px; }
.llmp-card-check { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: var(--fs-xs); color: #140700; }
.llmp-card.on .llmp-card-check { background: var(--llmp-orange); }
.llmp-cards > button.llmp-card .llmp-card-check { position: absolute; top: 10px; right: 10px; }
.llmp-docs { color: var(--muted); font-size: 12px; text-decoration: none; align-self: flex-start; }
.llmp-docs:hover { color: var(--llmp-orange); text-decoration: underline; }
.llmp-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.llmp-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.llmp-toggle-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--track-bg); border: 1px solid var(--llmp-line); flex: none; transition: background 0.15s; }
.llmp-toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 0.15s; }
.llmp-toggle input:checked + .llmp-toggle-track { background: var(--llmp-orange); border-color: var(--llmp-orange); }
.llmp-toggle input:checked + .llmp-toggle-track::after { transform: translateX(14px); background: #140700; }
.llmp-toggle input:focus-visible + .llmp-toggle-track { outline: 2px solid var(--llmp-orange); outline-offset: 2px; }
.llmp-seg { display: inline-flex; border: 1px solid var(--llmp-line); border-radius: 7px; padding: 2px; align-self: flex-start; background: var(--input-bg); }
.llmp-seg button { background: none; border: 0; color: var(--muted); padding: 5px 14px; border-radius: 5px; cursor: pointer; font: inherit; font-size: 12.5px; }
.llmp-seg button.on { background: var(--llmp-orange-soft); color: var(--llmp-orange); font-weight: 600; }
.llmp-details { border: 1px solid var(--llmp-line); border-radius: 8px; padding: 8px 12px; }
.llmp-details summary { cursor: pointer; font-size: 13px; }
.llmp-keylist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 180px; overflow: auto; }
.llmp-keyitem { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.llmp-inline { display: flex; gap: 8px; align-items: center; }
.llmp-inline > .llmp-input { flex: 1; }
.llmp-verify { display: flex; align-items: center; gap: 12px; justify-content: space-between; border: 1px dashed var(--llmp-orange-line); border-radius: 8px; padding: 12px 14px; }
.llmp-verify-out { font-size: 12.5px; color: var(--muted); }
.llmp-verify-out:empty { display: none; }
.llmp-verify-out.ok { color: var(--ok); }
.llmp-verify-out.err { color: var(--crit); }
.llmp-models { display: flex; flex-direction: column; gap: 10px; }
.llmp-models-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.llmp-models-bar .llmp-input { width: 200px; }
.llmp-model-list { border: 1px solid var(--llmp-line); border-radius: 8px; overflow: hidden; }
.llmp-model-head, .llmp-model { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 34px 28px; gap: 10px; align-items: center; padding: 8px 12px; }
.llmp-model-head { font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--llmp-line); background: var(--panel-2); }
.llmp-model + .llmp-model { border-top: 1px solid var(--border-soft); }
.llmp-model input[type=checkbox] { width: 16px; height: 16px; }
/* A model an operator priced: ink, not orange — it is a fact about the
   price, not a live or selected state. */
.llmp-model-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.llmp-pill-custom { font: 500 var(--fs-xs) var(--sans, inherit); padding: 1px 7px; color: var(--text);
  background: var(--chip-bg); border-color: var(--chip-border); }
/* Bedrock's model list, one fold per publisher. */
.llmp-group { border: 1px solid var(--llmp-line); border-radius: 8px; overflow: hidden; }
.llmp-group > .llmp-model-list { border: 0; border-top: 1px solid var(--llmp-line); border-radius: 0; }
.llmp-group-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
  background: var(--panel-2); list-style: none; }
.llmp-group-head::-webkit-details-marker { display: none; }
.llmp-group-head::after { content: "▸"; margin-left: auto; color: var(--muted); }
.llmp-group[open] > .llmp-group-head::after { content: "▾"; }
.llmp-group-head input[type=checkbox] { width: 16px; height: 16px; }
.llmp-icon-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; }
.llmp-icon-btn:hover { color: var(--llmp-orange); }
.llmp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
  padding: 12px max(16px, calc((100vw - 1180px) / 2)); background: var(--nav-bg); backdrop-filter: blur(8px); border-top: 1px solid var(--llmp-line); }
.llmp-next { font-size: 13px; color: var(--muted); }
.llmp-next.ready { color: var(--ok); }
.llmp-err { color: var(--crit); font-size: 12.5px; }
@media (max-width: 760px) {
  .llmp-section { grid-template-columns: 1fr; gap: 10px; }
  .llmp-cards { grid-template-columns: 1fr; }
  .llmp-model-head, .llmp-model { grid-template-columns: minmax(0, 1fr) 64px 64px 28px 24px; }
}

/* ---- Guardrails (AI Gateway): grd.js. Factory palette — ink surfaces,
   hairlines, the brand accent (signal orange) for live marks only. ---- */
.grd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; }
.grd-spacer { flex: 1 1 auto; }
.grd-search { position: relative; flex: 0 1 300px; display: flex; align-items: center; }
.grd-search svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.grd-search input {
  width: 100%; height: 34px; padding: 0 10px 0 32px; box-sizing: border-box; font: inherit; font-size: 13px;
  background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
}
.grd-search input:focus { outline: none; border-color: var(--accent-border); }
.grd-ms { position: relative; }
.grd-fbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 13px; cursor: pointer;
}
.grd-fbtn:hover { border-color: var(--panel-hover-border); }
.grd-fbtn svg { color: var(--muted); }
.grd-fbtn.on { border-color: var(--accent-border); }
.grd-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: var(--fs-xs); line-height: 18px;
  text-align: center; background: var(--accent); color: #111; font-weight: 600;
}
.grd-count:empty, .grd-count[hidden] { display: none; }
.grd-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 280px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); overflow: hidden;
}
.grd-pop[hidden] { display: none; }
.grd-pop-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.grd-pop-head svg { color: var(--muted); flex: none; }
.grd-pop-head .grd-pop-q { flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; outline: none; padding: 4px 0; }
.grd-pop-list { max-height: 280px; overflow: auto; padding: 4px; }
.grd-pop-group { padding: 8px 8px 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.grd-pop-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.grd-pop-item:hover { background: var(--hover-bg); }
.grd-pop-item.dis { cursor: not-allowed; opacity: 0.55; }
.grd-pop-item input { margin: 0; }
.grd-pop-ico { display: inline-flex; color: var(--muted); }
.grd-pop-lbl { flex: 1; }
.grd-pop-empty { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 12.5px; }
.grd-pop-empty[hidden] { display: none; }
.grd-pop-foot { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-top: 1px solid var(--border); font-size: 12px; }
.grd-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
.grd-soon, .grd-rec {
  margin-left: 8px; padding: 1px 7px; border-radius: 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border); color: var(--muted); font-weight: 500;
}
.grd-rec { color: var(--accent); border-color: var(--accent-border); }
.grd-muted { color: var(--muted); font-size: 12.5px; }

/* list */
.grd-tbl td { vertical-align: middle; }
.grd-name { display: flex; align-items: center; gap: 10px; }
.grd-name a.cell-main { text-decoration: none; }
.grd-name a.cell-main:hover { color: var(--accent); }
.grd-gico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-2); color: var(--text);
}
.grd-gico-lg { width: 40px; height: 40px; border-radius: 10px; }
.grd-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.grd-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: 0.6; }
.grd-status.on { color: var(--text); }
.grd-status.on i { background: var(--accent); opacity: 1; box-shadow: 0 0 0 3px var(--accent-dim); }
.grd-eval { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.grd-eval svg { color: var(--muted); }
.grd-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.grd-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--chip-bg); font-size: 12px; color: var(--chip-text);
  white-space: nowrap;
}
.grd-chip svg { color: var(--muted); }
.grd-chip-t { font-family: var(--mono); font-size: 11.5px; }
.grd-num { font-variant-numeric: tabular-nums; }
.grd-actions { width: 44px; text-align: right; }
.grd-menu-wrap { position: relative; display: inline-block; }
.grd-more { background: none; border: 1px solid transparent; border-radius: 6px; color: var(--muted); cursor: pointer; padding: 3px 5px; display: inline-flex; }
.grd-more:hover { border-color: var(--border); color: var(--text); }
.grd-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 150px; padding: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.grd-menu[hidden] { display: none; }
.grd-menu-item {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none;
}
.grd-menu-item:hover { background: var(--hover-bg); }
.grd-menu-item.danger { color: var(--crit); }

/* create */
.grd-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; text-decoration: none; margin-bottom: 10px; }
.grd-back:hover { color: var(--accent); }
.grd-form { padding-bottom: 8px; }
.grd-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grd-card {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
  font: inherit; cursor: pointer;
}
.grd-card:hover:not(:disabled) { border-color: var(--panel-hover-border); }
.grd-card[aria-checked="true"] { border-color: var(--accent-border); background: var(--accent-faint); }
.grd-card:disabled { cursor: not-allowed; opacity: 0.55; }
.grd-radio { flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--muted); }
.grd-card[aria-checked="true"] .grd-radio { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 8px var(--accent); }
.grd-card-ico { display: inline-flex; color: var(--muted); margin-top: 1px; }
.grd-card-body b { display: flex; align-items: center; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.grd-card-body > span { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.grd-attach { display: flex; flex-direction: column; gap: 10px; }
.grd-pick { align-self: flex-start; }
.grd-picked { min-height: 22px; }
.grd-x { background: none; border: 0; padding: 0 0 0 2px; color: var(--muted); cursor: pointer; display: inline-flex; }
.grd-x:hover { color: var(--crit); }
.grd-err { color: var(--crit); font-size: 13px; margin: 8px 0 0; }
.grd-err:empty { display: none; }
.grd-foot {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  margin: 8px -4px 0; padding: 12px 16px; background: var(--nav-bg); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.grd-foot-hint { color: var(--muted); font-size: 12.5px; }

/* detail */
.grd-dhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.grd-dhead .page-title { margin: 0; }
.grd-dhead .page-sub { margin: 2px 0 0; }
.grd-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .grd-split { grid-template-columns: 1fr; } }
.grd-pcards { display: flex; flex-direction: column; gap: 10px; }
.grd-pcard { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.grd-pcard.on { border-color: var(--panel-hover-border); }
.grd-pcard > header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.grd-pcard.on > header .grd-gico { color: var(--accent); border-color: var(--accent-border); }
.grd-ptitle { flex: 1; min-width: 0; }
.grd-ptitle h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.grd-ptitle p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.grd-pbody { padding: 4px 14px 14px 54px; display: flex; flex-direction: column; gap: 10px; }
.grd-pbody[hidden] { display: none; }
.grd-switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; }
.grd-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.grd-knob { position: absolute; inset: 0; border-radius: 10px; background: var(--track-bg); border: 1px solid var(--border); transition: background 0.15s; }
.grd-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s; }
.grd-switch input:checked + .grd-knob { background: var(--accent); border-color: var(--accent); }
.grd-switch input:checked + .grd-knob::after { transform: translateX(14px); background: #111; }
.grd-switch input:focus-visible + .grd-knob { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.grd-rows, .grd-pii { display: flex; flex-direction: column; gap: 6px; }
.grd-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.grd-rlabel { font-size: 13px; display: inline-flex; gap: 8px; align-items: baseline; }
.grd-rlabel code { color: var(--muted); font-size: var(--fs-xs); }
.grd-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.grd-seg button { border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--muted); font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer; }
.grd-seg button:last-child { border-right: 0; }
.grd-seg button[aria-checked="true"] { background: var(--accent-faint); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.grd-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.grd-plist { display: flex; flex-direction: column; gap: 8px; }
.grd-prow { display: flex; gap: 6px; align-items: center; }
.grd-prow input[type=text] { flex: 1; min-width: 0; }
.grd-prow .grd-pname { flex: 0 0 130px; }
.grd-mono { font-family: var(--mono); font-size: 12.5px; }
.grd-topic { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; }
.grd-ptestbox { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 6px; border-top: 1px solid var(--border-soft); }
.grd-ptestbox textarea { width: 100%; }
.grd-ptest { font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.grd-hit b { color: var(--accent); }
.grd-miss { color: var(--muted); }
.grd-test {
  position: sticky; top: calc(var(--topnav-h) + 12px); display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
}
.grd-test h3 { margin: 0; font-size: 14px; }
.grd-test p { margin: 0; }
.grd-test textarea { width: 100%; box-sizing: border-box; background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13px; resize: vertical; }
.grd-test-out { display: flex; flex-direction: column; gap: 8px; }
.grd-test-out:empty { display: none; }
.grd-verdict { align-self: flex-start; padding: 3px 10px; border-radius: 6px; font-weight: 600; font-size: 12.5px; border: 1px solid var(--border); }
.grd-verdict.crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.grd-verdict.warn { color: var(--accent); border-color: var(--accent-border); }
.grd-verdict.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.grd-fired { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.grd-fired li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.grd-fired .grd-gico { width: 22px; height: 22px; border-radius: 5px; }
.grd-act { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); }
.grd-act.block { color: var(--crit); }
.grd-act.mask { color: var(--accent); }
.grd-out-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.grd-out { margin: 0; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 640px) {
  .grd-search { flex: 1 1 100%; }
  .grd-pbody { padding-left: 14px; }
  .grd-pop { width: min(280px, calc(100vw - 32px)); }
}

/* ---- Add trigger: type cards as ADP draws them (agent.js TYPE_CARDS) ----
   An icon tile at the left, the title in bold, one muted line under it.
   Factory palette: an ink tile with a signal-orange mark; the chosen card
   turns its tile orange. Scoped to .trig-type, so the other .adp-choice
   rows keep their plain look. */
.adp-choice button.trig-type { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  min-height: 66px; transition: border-color .12s ease; }
.adp-choice button.trig-type:hover:not(:disabled) { border-color: var(--input-hover-border, var(--muted)); }
.adp-choice button.trig-type.on:hover { border-color: var(--signal); }
.adp-choice button.trig-type span.trig-type-tile { display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; margin: 0; border-radius: 9px; background: #0b0b0a; color: var(--signal);
  border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); }
.adp-choice button.trig-type.on span.trig-type-tile { background: var(--signal); color: #0b0b0a;
  border-color: var(--signal); }
.trig-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.adp-choice button.trig-type span.trig-type-text { display: flex; flex-direction: column; gap: 2px;
  min-width: 0; margin: 0; color: var(--text); }
.adp-choice button.trig-type span.trig-type-text b { display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 650; }
.adp-choice button.trig-type span.trig-type-line { display: block; margin: 0; font-size: 12px;
  color: var(--muted); line-height: 1.4; }
.trig-type-soon { font: 600 11px var(--mono); font-style: normal; letter-spacing: .08em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 4px; color: var(--muted);
  border: 1px solid var(--border); }

/* ---- Audit log: one row as ADP has it (audit.js) ----
   Search (with the filter syntax behind an ⓘ), range, expand, ⋯ More. The
   secondary controls live in the More menu; how the log is kept is one
   small muted line beside the chips; Hide timeline sits in the card head. */
.audit-search { position: relative; }
.audit-search input.audit-q { padding-right: 38px; }
.audit-q-help { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 1;
  display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0;
  border-radius: 6px; background: transparent; color: var(--muted); cursor: help; }
.audit-q-help:hover, .audit-q-help:focus-visible, .audit-q-help[aria-expanded="true"] {
  color: var(--audit-orange); background: var(--hover-bg); }
.audit-q-help .audit-ico { width: 15px; height: 15px; }
.audit-q-tip { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45;
  width: min(440px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  font-size: 12.5px; line-height: 1.5; color: var(--text); text-align: left;
  visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility .12s; pointer-events: none; }
.audit-q-help:hover + .audit-q-tip, .audit-q-help:focus-visible + .audit-q-tip, .audit-q-tip.open {
  visibility: visible; opacity: 1; pointer-events: auto; }
.audit-q-tip p { margin: 0 0 6px; }
.audit-q-tip p:last-child { margin: 8px 0 0; color: var(--muted); }
.audit-q-tip b { font: 600 12px var(--mono); }
.audit-q-tip .audit-q-tip-k { margin: 8px 0 4px; font: 11px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.audit-q-tip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.audit-q-tip li { color: var(--muted); font-size: 12px; }
.audit-q-tip code { font: 11.5px var(--mono); color: var(--text); padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--panel-2, transparent); }
.audit-opts { position: relative; }
.audit-opts-btn[aria-expanded="true"] { border-color: var(--audit-orange); color: var(--audit-orange); }
.audit-opts-btn:focus-visible, .audit-more-item:focus-visible, .audit-q-help:focus-visible,
.audit-tl-toggle:focus-visible, button.audit-keep-line:focus-visible {
  outline: 2px solid var(--audit-orange); outline-offset: 1px; }
.audit-opts-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 292px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28); display: flex; flex-direction: column; }
.audit-opts-menu[hidden] { display: none; }
/* On a phone the row wraps and the button may sit anywhere in it: the menu
   spans the bar instead of hanging off the button's right edge. */
@media (max-width: 600px) {
  .audit-querybar .audit-opts { position: static; }
  .audit-querybar .audit-opts-menu { left: 0; right: 0; width: auto; }
}
.audit-more-sec { padding: 8px 8px 4px; font: 11px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.audit-more-sec:first-child { padding-top: 4px; }
.audit-more-field { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 8px 4px; font-size: 12.5px; color: var(--muted); }
.audit-opts-menu select.audit-window { height: 30px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); padding: 0 8px; font: inherit; font-size: 12.5px;
  max-width: 150px; }
.audit-more-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: none; color: var(--text);
  font: 13px var(--sans, inherit); text-align: left; text-decoration: none; cursor: pointer; }
.audit-more-item:hover, .audit-more-item:focus-visible { background: var(--hover-bg); color: var(--text); }
.audit-more-note { font: var(--fs-xs) var(--mono); color: var(--muted); }
.audit-more-check { width: 28px; height: 16px; flex: none; border-radius: 999px; position: relative;
  border: 1px solid var(--border); background: var(--track-bg, var(--panel-2)); transition: background .12s; }
.audit-more-check::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--muted); transition: transform .12s, background .12s; }
.audit-more-toggle[aria-pressed="true"] .audit-more-check { background: var(--audit-orange);
  border-color: var(--audit-orange); }
.audit-more-toggle[aria-pressed="true"] .audit-more-check::after { transform: translateX(12px);
  background: #0b0b0a; }
.audit-more-sep { height: 1px; margin: 6px 2px; background: var(--border-soft, var(--border)); }
.audit-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 8px 0 10px; }
.audit-meta-row .audit-chips { flex: 1 1 320px; margin: 0; }
.audit-meta-row .audit-chips[hidden] { display: none; }
.audit-keep-box { margin-left: auto; min-width: 0; }
.audit-keep-box:empty { display: none; }
button.audit-keep-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
  margin: 0; padding: 2px 4px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: 11.5px var(--sans, inherit); color: var(--muted); text-align: left; }
button.audit-keep-line:hover { color: var(--text); background: var(--hover-bg); }
button.audit-keep-line b { font-weight: 600; color: var(--muted); }
button.audit-keep-line:hover b { color: var(--text); }
button.audit-keep-line .audit-ico { width: 13px; height: 13px; margin-right: 6px; }
button.audit-keep-line > span + span::before { content: "·"; margin: 0 7px; opacity: .6; }
.audit-tl-toggle { padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--muted); font: 11px var(--mono); letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.audit-tl-toggle:hover { color: var(--text); border-color: var(--input-hover-border, var(--muted)); }
.audit-timeline.audit-timeline-off { padding-top: 8px; padding-bottom: 8px; }

/* ---- LLM providers: a drawn mark per provider in its tile (llm-providers.js
   MARKS), in place of the letter. The tile keeps its ink and orange. */
.llmp-card.on .llmp-icon { border-color: var(--llmp-orange); box-shadow: 0 0 0 1px var(--llmp-orange); }
.audit-timeline.audit-timeline-off .audit-tl-head { margin: 0; align-items: center; }
/* Agent network (network.js): KPIs, the attention bar, the canvas overlays. */
.lx-kpis { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); margin: 0 0 12px; }
.lx-kpis .t i { font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--signal-text); }
.lx-attention { border: 1px solid var(--signal); border-radius: 10px; background: var(--panel); margin: 0 0 12px; }
.lx-attention summary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; list-style: none; }
.lx-attention summary::-webkit-details-marker { display: none; }
.lx-attention summary .cell-sub { margin-left: auto; }
.lx-attention[open] summary .cell-sub { visibility: hidden; }
.lx-attention-ico { color: var(--signal-text); }
.lx-attention-list { border-top: 1px solid var(--border-soft); padding: 4px 6px 6px; }
.lx-attention-row { display: grid; grid-template-columns: 10px minmax(120px, 200px) minmax(0, 1fr) auto; gap: 10px;
  align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 7px 8px;
  font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; }
.lx-attention-row:hover { background: var(--hover-bg); }
.lx-attention-err { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.lx-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.lx-net-stage { border-radius: 12px; overflow: hidden; }
.lx-net-canvas { background-image: radial-gradient(var(--grid-line) 1px, transparent 1px); background-size: 18px 18px; }
.lx-net-canvas:focus { outline: none; }
.lx-node.lx-dim { opacity: 0.35; }
.lx-node.lx-selected rect:first-of-type { stroke: var(--signal); stroke-width: 2; }
.lx-node:hover rect:first-of-type, .lx-node:focus rect:first-of-type { stroke: var(--text); }
.lx-net-controls { left: 10px; bottom: 10px; align-items: center; gap: 4px; flex-wrap: wrap; }
.lx-ctl { height: 30px; min-width: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel);
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer; padding: 0 8px; }
.lx-ctl:hover { border-color: var(--text); }
.lx-ctl-wide { font-size: 12px; }
.lx-hint-btn { background: none; border: 0; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; padding: 0 6px; }
.lx-hint-btn:hover { color: var(--text); }
.lx-controls-pop { top: auto; bottom: calc(100% + 8px); left: 0; min-width: 270px; font-size: 12.5px; padding: 10px 12px; }
.lx-controls-row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; padding: 3px 0; color: var(--muted); }
.lx-controls-row kbd { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text); }
.lx-minimap { right: 10px; bottom: 10px; }
.lx-net-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 12px; align-items: start; }
.lx-legend { background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.lx-legend-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; color: var(--muted); }
.lx-legend-row { display: flex; align-items: center; gap: 7px; color: var(--text); }
.lx-legend-line { width: 20px; border-top: 3px solid; }
.lx-legend-dot { width: 9px; height: 9px; border-radius: 3px; }
.lx-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.lx-seg button { flex: 1; background: none; border: 0; padding: 4px 8px; font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.lx-seg button.on { background: var(--text); color: var(--bg); }
.lx-toolbar-hint { font-size: 12px; }
@media (max-width: 760px) {
  .lx-net-wrap { grid-template-columns: 1fr; }
  .lx-attention-row { grid-template-columns: 10px 1fr; }
  .lx-attention-row .lx-attention-err, .lx-attention-row .cell-sub { grid-column: 2; }
}
/* Access (access.js): tabs, policy table cells, cards, the template drawer. */
.lx-access-tabs { margin-bottom: 6px; }
.lx-access-more { align-items: center; margin-bottom: 14px; }
.lx-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--text); cursor: pointer;
  text-align: left; }
.lx-link:hover { text-decoration: underline; }
.lx-pol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lx-principal { display: inline-flex; align-items: center; gap: 7px; }
.lx-pre { white-space: pre-wrap; font-size: 12px; background: var(--panel-2); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; overflow-x: auto; }
.lx-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.lx-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lx-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lx-card-head > div { display: flex; flex-direction: column; min-width: 0; }
.lx-card-title { font-size: 14.5px; }
.lx-card-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.lx-card-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.lx-tpl-perms summary { cursor: pointer; }
.lx-tpl-perms[open] summary { margin-bottom: 6px; }
.lx-perm-group { margin: 4px 0 8px; }
.lx-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.lx-form[hidden] { display: none; }
.lx-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.lx-field-label { font-size: 12px; font-weight: 600; color: var(--text); }
.lx-picker { border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px 6px; max-height: 250px; overflow-y: auto; }
.lx-picker .lx-pop-row .cell-sub { margin-left: auto; font-size: 11.5px; }
.lx-conds { display: flex; flex-direction: column; gap: 8px; }
.lx-cond-row { display: grid; grid-template-columns: 96px 120px 84px minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.lx-cond-hint { margin-top: 3px; font-size: 11.5px; }
.lx-code { width: 100%; box-sizing: border-box; font-size: 12.5px; }
@media (max-width: 760px) {
  .lx-cond-row { grid-template-columns: 1fr 1fr; }
}
.lx-toolbar .search-box { flex: 0 1 300px; min-width: 240px; }
.lx-toolbar .search-box input { width: 100%; }
.lx-chip-list { list-style: none; margin: 0; padding: 0; }
.lx-controls-pop { min-width: 320px; }
.lx-controls-row { grid-template-columns: 150px 1fr; }
.lx-controls-row kbd { background: none; border: 0; padding: 0; box-shadow: none; white-space: nowrap; }

/* ---- Access: four tabs and one "More ▾" at the bar's right (access.js) ----
   The ten other views were a row of small caps links under the tabs. */
.lx-access-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-soft, var(--border)); }
.lx-access-bar .lx-access-tabs { margin: 0; }
.lx-access-bar .lx-access-more { position: relative; margin: 0; }
.lx-access-more-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); color: var(--muted);
  font: 600 12.5px var(--sans, inherit); cursor: pointer; }
.lx-access-more-btn:hover { color: var(--text); }
.lx-access-more-btn[aria-expanded="true"] { color: var(--text); border-color: var(--signal); }
.lx-access-more-btn.on { color: var(--text); background: var(--panel); box-shadow: inset 0 -2px 0 var(--signal); }
.lx-access-more-btn:focus-visible, .lx-access-more-menu .opt:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 1px; }
.lx-access-more-chev { font-size: var(--fs-xs); opacity: .7; }
.lx-access-more-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px;
  padding: 6px; display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.lx-access-more-menu[hidden] { display: none; }
.lx-access-more-menu .opt { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--text);
  font: 13px var(--sans, inherit); text-align: left; cursor: pointer; }
.lx-access-more-menu .opt:hover { background: var(--hover-bg); }
.lx-access-more-menu .opt.on { color: var(--signal-text); font-weight: 600; }
.lx-access-more-menu .opt.on::after { content: "\2713"; }

/* ---- Sign-in page: skip link and a focus ring on every control (WCAG 2.4.1, 2.4.7) ---- */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: 4px;
  background: #111111; color: #fbfbf9; font: 500 12px var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 12px; }
body[data-page="login"] a:focus-visible, body[data-page="login"] button:focus-visible {
  outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px;
}
body[data-page="login"] #login-form:focus { outline: none; }

/* Admin → Demo requests: a request sent from the agent finder (/start)
   folds its blueprint and the visitor's answers under the row. */
.finder-bp { margin-top: 6px; min-width: 340px; font-size: 12.5px; white-space: normal; }
.finder-bp summary { cursor: pointer; font-weight: 600; }
.finder-bp > div, .finder-agent { margin-top: 6px; }
.finder-agent > div { margin-top: 2px; }
.finder-answers { margin: 4px 0 0; padding-left: 18px; }

/* ---- Create agent (/agents/create, agentcreate.js) ----
   ADP's flow, Liyagent's look: the landing page's factory language — ink
   on off-white, mono uppercase stamps, square-ish 4-6px corners, hairline
   rules, a dashed "belt" between parts — with the signal orange only for
   what is chosen or live. Every colour is a console token, so both themes
   carry it. */
.ac-head { display: flex; align-items: flex-start; gap: 14px; margin: 4px 0 18px; }
.ac-back { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-top: 2px;
  border: 1px solid var(--border); border-radius: 4px; color: var(--text); background: var(--panel);
  text-decoration: none; transition: border-color .12s; }
.ac-back:hover { border-color: var(--text); }
.ac-back:focus-visible, .ac-type:focus-visible, .ac-tpl:focus-visible, .ac-chip:focus-visible,
.ac-model-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ac-head-main { min-width: 0; flex: 1; }
.ac-head-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-head-title .page-title { margin: 0; }
.ac-type-pill { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px;
  border-radius: 3px; background: var(--text); color: var(--bg); }

/* Step 1: two large type cards. */
.ac-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1040px; }
@media (max-width: 760px) { .ac-types { grid-template-columns: 1fr; } }
.ac-type { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 0;
  min-height: 300px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  color: var(--text); text-decoration: none; overflow: hidden; transition: border-color .12s, transform .12s; }
.ac-type::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 16px); }
.ac-type:hover { border-color: var(--text); transform: translateY(-1px); }
.ac-type, .ac-type:hover, .ac-type:hover * { text-decoration: none; }
.ac-type:hover::before { background: var(--signal); }
.ac-type-top { display: flex; align-items: center; justify-content: space-between; }
.ac-type-tile { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 6px;
  background: #0b0b0a; color: var(--signal); border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); }
.ac-type:hover .ac-type-tile { background: var(--signal); color: #0b0b0a; }
.ac-type-no { font: 500 var(--fs-xs) var(--mono); letter-spacing: .16em; color: var(--muted); }
.ac-type-title { font-size: 22px; font-weight: 650; letter-spacing: -.02em; text-transform: uppercase; margin-top: 6px; }
.ac-type-line { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.ac-type-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; }
.ac-type-points li { position: relative; padding-left: 18px; }
.ac-type-points li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px;
  border: 1.5px solid var(--text); border-radius: 1px; }
.ac-type-foot { margin: auto -22px 0; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed var(--border); background: var(--panel-2);
  font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ac-type-go { font-size: 16px; color: var(--text); transition: transform .12s; }
.ac-type:hover .ac-type-go { transform: translateX(3px); color: var(--signal-text); }
.ac-fixed { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
.ac-fixed.sm { margin: -8px 0 10px; }
.ac-fixed a { color: var(--text); }
.ac-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }

/* Step 2: numbered, left-labelled sections. */
.ac-form { max-width: 1120px; }
.ac-section .adp-section-label h3 { display: flex; align-items: baseline; gap: 8px; }
.ac-no { font: 500 var(--fs-xs) var(--mono); letter-spacing: .1em; color: var(--signal-text); }
.ac-fields { display: flex; flex-direction: column; gap: 14px; }
.ac-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ac-inline > .input { flex: 1 1 260px; max-width: 420px; }
.ac-link { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; }
.ac-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; }
.ac-id .mono { padding: 2px 6px; border: 1px dashed var(--border); border-radius: 3px; overflow-wrap: anywhere; }
.ac-id [data-state="ok"] { color: var(--ok); }
.ac-id [data-state="invalid"], .ac-id [data-state="error"] { color: var(--crit); }

/* Model listbox. */
.ac-model { position: relative; max-width: 640px; }
.ac-model-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 4px; background: var(--input-bg); color: var(--text);
  font: inherit; cursor: pointer; }
.ac-model-btn:hover { border-color: var(--input-hover-border); }
.ac-model-btn .ac-model-row { flex: 1; padding: 0; }
.ac-caret { color: var(--muted); }
.ac-model-pop { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 4px); padding: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.ac-model-pop[hidden] { display: none; }
.ac-model-search { margin-bottom: 6px; }
.ac-model-list { max-height: 320px; overflow: auto; }
.ac-model-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px;
  border-radius: 4px; min-width: 0; }
.ac-model-list .ac-model-row { cursor: pointer; }
.ac-model-list .ac-model-row:hover, .ac-model-list .ac-model-row.active { background: var(--hover-bg); }
.ac-model-list .ac-model-row[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--signal); }
.ac-model-left { display: flex; flex-direction: column; min-width: 0; }
.ac-model-left b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-model-left .cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-model-right { display: flex; gap: 6px; flex: none; }
.ac-region { color: var(--muted); }

/* Instructions. */
.ac-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ac-chip { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 3px;
  padding: 5px 9px; font: 500 var(--fs-xs) var(--mono); letter-spacing: .04em; cursor: pointer; }
.ac-chip:hover { border-color: var(--text); }
.ac-chip.on { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.ac-editor { display: flex; flex-direction: column; gap: 10px; }
.ac-editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
.ac-md-toolbar { margin: 0; flex: 1; }
.ac-md-toolbar[hidden] { display: none; }
.ac-md-btn { min-width: 30px; font-family: var(--mono); }
.ac-seg .seg-btn { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; }
.ac-seg .seg-btn.on { background: var(--text); color: var(--bg); }
.ac-seg { border-radius: 4px; }

/* Tools. */
.ac-tools { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.ac-tool { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel); cursor: pointer; }
.ac-tool + .ac-tool { border-top: 1px solid var(--border-soft); }
.ac-tool:hover { background: var(--hover-bg); }
.ac-tool.off { opacity: .55; cursor: not-allowed; }
.ac-tool input { width: 15px; height: 15px; margin: 0; }
.ac-tool-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ac-tool-main b { font-size: 13px; }
.ac-tool-meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* Access: template cards, the policy row, the live summary. */
.ac-tpls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .ac-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ac-tpls { grid-template-columns: 1fr; } }
.ac-tpl { display: flex; flex-direction: column; gap: 6px; padding: 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; }
.ac-tpl:hover { border-color: var(--text); }
.ac-tpl.on { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.ac-tpl-head { display: flex; align-items: center; gap: 8px; }
.ac-tpl-head b { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .02em; }
.ac-tpl-about { font-size: 12px; line-height: 1.45; color: var(--muted); }
.ac-radio { width: 12px; height: 12px; border: 1.5px solid var(--muted); border-radius: 50%; flex: none; }
.ac-tpl.on .ac-radio { border-color: var(--signal); background: radial-gradient(circle, var(--signal) 0 40%, transparent 45%); }
.ac-policy-grid { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 14px; align-items: center;
  padding: 12px 14px; border: 1px dashed var(--border); border-radius: 6px; }
.ac-policy-grid > .adp-mono-label { align-self: start; padding-top: 6px; }
.ac-principal { display: inline-flex; align-items: center; gap: 8px; padding: 4px 9px; border: 1px solid var(--border);
  border-radius: 3px; background: var(--panel-2); width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.ac-scope-tool { margin-top: 8px; max-width: 460px; }
.ac-scope-tool[hidden] { display: none; }
.ac-summary { border: 1px solid var(--border); border-left: 3px solid var(--ok); border-radius: 6px; padding: 12px 14px;
  background: var(--panel); }
.ac-summary[data-effect="forbid"] { border-left-color: var(--crit); }
.ac-summary-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.ac-summary-head b { font: 600 12.5px var(--mono); overflow-wrap: anywhere; }
.ac-summary-lines { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; }
.ac-summary-lines li { position: relative; padding-left: 20px; }
.ac-summary-lines li::before { position: absolute; left: 0; top: 0; font: 600 12px var(--mono); }
.ac-summary-lines li.yes::before { content: "+"; color: var(--ok); }
.ac-summary-lines li.no::before { content: "\2212"; color: var(--crit); }
.ac-summary-lines li.same { color: var(--muted); }
.ac-summary-lines li.same::before { content: "="; color: var(--muted); }
.ac-cedar { margin: 6px 0 0; }

/* Advanced. */
.ac-advanced { border-top: 1px solid var(--border-soft); padding: 14px 0 4px; }
.ac-advanced > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.ac-advanced > summary::-webkit-details-marker { display: none; }
.ac-advanced > summary::before { content: "+"; font: 600 13px var(--mono); width: 14px; color: var(--muted); }
.ac-advanced[open] > summary::before { content: "\2212"; }
.ac-advanced .ac-section { border-top: 0; }
.ac-err { color: var(--crit); margin: 10px 0 0; }
.ac-err:empty { display: none; }

/* The sticky footer. */
.ac-foot { gap: 14px; flex-wrap: wrap; }
.ac-foot-note { margin: 0; max-width: 62ch; font: var(--fs-xs)/1.5 var(--mono); letter-spacing: .02em; color: var(--muted); }
.ac-reason { font-size: 12.5px; color: var(--warn); }
.ac-reason[hidden] { display: none; }
.ac-save { display: inline-flex; align-items: center; gap: 10px; }
.ac-save:disabled { opacity: .45; cursor: not-allowed; }
.ac-kbd { font-family: var(--mono); font-size: var(--fs-xs); padding: 2px 5px; border-radius: 3px; background: transparent;
  color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); }

/* Self-managed: the credential, shown once. */
.ac-issued { max-width: 820px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ac-issued-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--border); }
.ac-issued-head h2 { margin: 0; font-size: 18px; text-transform: uppercase; letter-spacing: -.01em; }
.ac-stamp { flex: none; font: 700 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--signal-text);
  border: 2px solid var(--signal); border-radius: 3px; padding: 5px 9px; transform: rotate(-4deg); }
.ac-cred-warn { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ac-cred-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 4px; background: var(--panel-2); }
.ac-cred-row code { font-size: 12.5px; overflow-wrap: anywhere; user-select: all; }
.ac-copy { display: inline-flex; align-items: center; gap: 6px; }
.ac-issued-foot { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
@media (max-width: 620px) {
  .ac-cred-row { grid-template-columns: 1fr auto; }
  .ac-cred-row .adp-mono-label { grid-column: 1 / -1; }
  .ac-policy-grid { grid-template-columns: 1fr; }
}

/* ---- An agent's own pages as tabs (common.js appTabs): the service desk is
   one agent from the catalogue, so its pages sit under its name, not in the
   rail. Factory: mono name, ink tabs, the signal orange under the open one. */
.app-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin: -4px 0 18px; border-bottom: 1px solid var(--border); }
.app-tabs-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-right: 14px; }
.app-tab { padding: 9px 12px; font-size: 13px; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.app-tab:hover { color: var(--text); }
.app-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }

/* Home's cards while their data is on the way (home.js pending): the card's
   own frame with quiet lines, so the page is laid out from the first paint. */
.home-pending { min-height: 132px; display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.home-pending.kpi-strip { display: flex; }
.skel-line { display: block; height: 10px; border-radius: 3px; background: var(--track-bg); width: 72%; }
.skel-line:first-child { width: 38%; }
.skel-line:last-child { width: 56%; }
@media (prefers-reduced-motion: no-preference) {
  .skel-line { animation: skel 1.4s ease-in-out infinite; }
  @keyframes skel { 50% { opacity: .45; } }
}

/* ---- Home, after ADP's: the numbers as one list (label left, value right),
   attention rows with their own action, and the quick actions as one joined
   strip with icons. */
.home-metrics { display: flex; flex-direction: column; padding: 0; }
.home-metrics .metric { flex: 1; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.home-metrics .metric:last-child { border-bottom: 0; }
.metric-ico { color: var(--muted); display: inline-flex; }
.metric-lbl { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.metric-lbl small { color: var(--muted); font-size: 11.5px; }
.metric-val { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 16px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); }
.quick a, .quick .q { border: 0; border-radius: 0; border-right: 1px solid var(--border); padding: 13px 16px; }
.quick a:last-child { border-right: 0; }
.quick a:hover { background: var(--hover-bg); border-color: var(--border); }
.quick .q-ico { display: inline-flex; color: var(--muted); }
@media (max-width: 860px) {
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick a:nth-child(2n) { border-right: 0; }
  .quick a:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
.attention.warn .att-head { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.att-row .att-view { padding: 3px 10px; }

/* ---- The console from its first paint ("boot"), before common.js draws
   the rail and top bar: a signed-in page (it has a data-page, and is not
   sign-in or consent) is already the console grid, the rail's column
   painted and the top bar's height held, so nothing moves when they
   arrive. theme-init.js marks a collapsed rail before paint. */
body[data-page]:not([data-page="login"]):not([data-page="consent"]):not(.console) {
  display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(to right, var(--panel-2) 0 255px, var(--border) 255px 256px, var(--bg) 256px);
}
html.side-collapsed-boot body[data-page]:not([data-page="login"]):not([data-page="consent"]):not(.console) {
  grid-template-columns: 0 minmax(0, 1fr); background: var(--bg);
}
body[data-page]:not([data-page="login"]):not([data-page="consent"]):not(.console) > main.wrap {
  grid-column: 2; grid-row: 1; max-width: none; margin: 0; padding: 52px 32px 64px; min-width: 0;
}
@media (max-width: 900px) {
  body[data-page]:not([data-page="login"]):not([data-page="consent"]):not(.console) {
    grid-template-columns: minmax(0, 1fr); background: var(--bg);
  }
  body[data-page]:not([data-page="login"]):not([data-page="consent"]):not(.console) > main.wrap {
    grid-column: 1; padding: 52px 16px 48px;
  }
}

/* ---- One LLM provider (providers.js, /providers?name=): the attention
   banner, the one range control, the zoomable traffic chart and the
   sortable leaderboard. Numbers in ink; orange only for what is selected
   (the range, the brush band, the sorted column). */
.pv-back { display: inline-block; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.pv-back:hover { color: var(--text); }
.pv-attention { margin: 14px 0 6px; }
.pv-signals { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.pv-signals li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px;
  align-items: baseline; }
.pv-signal-what { color: var(--text); font-size: 13px; line-height: 1.5; }
.pv-signal-step { grid-column: 2; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pv-attention-pill { margin-left: 8px; text-decoration: none; }
.pv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.pv-range-label { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.pv-panel { margin-top: 6px; }
.pv-h { font-size: 15px; font-weight: 600; margin: 22px 0 10px; }
.pv-chart-wrap { border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  padding: 12px 14px; }
.pv-chart-bar { display: flex; align-items: center; gap: 10px; }
.pv-chart-sums { padding: 10px 0 4px; border: 0; background: transparent; }
.pv-chart-sums b { color: var(--text); font-variant-numeric: tabular-nums; }
.pv-chart { position: relative; width: 100%; min-height: 220px; cursor: crosshair; touch-action: pan-y;
  border-radius: 6px; user-select: none; }
.pv-chart:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.pv-chart-svg { display: block; }
.pv-grid { stroke: var(--grid-line); stroke-width: 1; }
.pv-axis { fill: var(--muted); font: var(--fs-xs) var(--mono); }
.pv-bar { fill: var(--muted); opacity: 0.55; }
.pv-bar:hover { opacity: 0.9; }
.pv-line { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; }
.pv-dot { fill: var(--text); }
.pv-brush { fill: var(--accent-dim); stroke: var(--accent-border); stroke-width: 1; }
.pv-subtable { margin: 4px 0; font-size: 12.5px; }
.pv-subtable td, .pv-subtable th { padding: 6px 10px; }
.pv-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; }
.pv-sort:hover { color: var(--text); }
.pv-sort:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; border-radius: 3px; }
.pv-sort-ico { font-size: var(--fs-xs); opacity: 0.7; }
th.pv-sorted .pv-sort { color: var(--text); }
th.pv-sorted .pv-sort-ico { color: var(--accent); opacity: 1; }
.pv-panel table.tbl td.num { color: var(--text); font-variant-numeric: tabular-nums; }
.pv-panel table.tbl th.num { text-align: right; }
.pv-panel .pv-when, .pv-panel .pv-rank { color: var(--text); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.pv-ink-link { color: var(--text); text-decoration: none; }
.pv-ink-link:hover { text-decoration: underline; }

/* =====================================================================
   The console standard (S1–S12). Last in the file on purpose: the rules
   above grew in layers, and this one states what every page shares —
   type scale, radii, buttons, pills, links, the page header, tables,
   toolbars, forms, the drawer and the in-page question — once, so a page
   can rely on it rather than restyle it.
   ===================================================================== */

/* ---- S1: type scale and radii ---- */
.console .page-title { font-size: var(--fs-title); }
.page-sub { font-size: var(--fs-body); max-width: 72ch; }
.empty h3, .form-section > .lbl h3 { font-size: var(--fs-section); font-weight: 600; }
.panel-title {
  font-family: var(--sans); font-size: var(--fs-section); font-weight: 600;
  letter-spacing: -0.005em; text-transform: none; color: var(--text);
}
.panel-title::before { content: none; display: none; }
.cell-sub { font-size: var(--fs-small); }
.tbl-wrap, .panel, .card, .adp-card, .adp-empty, .adp-modal, .lx-card, .cat-card,
.summary-tile, .intel-card, [class^="gv-card"], [class*=" gv-card"], .gv-panel, .gv-tile {
  border-radius: var(--radius-card);
}
.input, select.input, textarea.input, .btn, .filter-chip, .input-sm { border-radius: var(--radius-control); }

/* ---- S2: buttons — sentence case, the sans face, one primary ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 14px;
  font-family: var(--sans); font-size: 13px; font-weight: 550; line-height: 1.2;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.btn-sm { min-height: 28px; padding: 0 10px; font-size: 12px; letter-spacing: 0; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.is-busy { cursor: wait; }
.btn-primary, :root[data-theme="light"] .btn-primary, :root:not([data-theme="light"]) .btn-primary {
  background: var(--text); border-color: var(--text); color: var(--bg); background-image: none; box-shadow: none;
}
.btn-primary:hover:not(:disabled), :root[data-theme="light"] .btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 82%, var(--bg)); border-color: transparent;
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: transparent; background: var(--hover-bg); }
.btn-danger { background: transparent; color: var(--crit-ink); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--crit) 10%, transparent); border-color: var(--crit); }
.btn-danger-solid { background: var(--crit-solid); border-color: var(--crit-solid); color: #fff; }
.btn-danger-solid:hover:not(:disabled) { filter: brightness(0.92); }
.form-section > .fields > .btn, .fields > .btn { align-self: flex-start; }
a.btn, a.btn:hover { text-decoration: none; }

/* ---- S3: the sans face by default; mono only where it is opted into ---- */
.cell-sub { font-family: inherit; }
.cell-sub.mono, .mono .cell-sub { font-family: var(--mono); }
.input.mono, textarea.input.mono { font-family: var(--mono); font-size: 13px; }
.adp-chip { font-family: inherit; }
.adp-chip.mono { font-family: var(--mono); }
.adp-toggle, .adp-toggle-text { font-family: inherit; }
.admin-msg { font-family: inherit; }
.audit-range-btn { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.adp-views .opt { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.panel-desc { margin: 4px 0 12px; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 65ch; }
.side-group { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.side-badge { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; }
.crumbs { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; }

/* ---- S4: links in ink; orange only for what is live or selected ---- */
a { color: var(--text); }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.card-head a, .panel-head a { color: var(--muted); }
.card-head a:hover, .panel-head a:hover { color: var(--text); }
.hint a, p.muted a, .page-sub a, .how a, .empty p a { text-decoration: underline; text-underline-offset: 2px; }
.spark .bar { background: var(--text); opacity: 0.62; border-radius: 2px 2px 0 0; }
.spark .bar:hover { opacity: 0.85; }
.spark .bar.zero { background: var(--track-bg); opacity: 1; }
.rank .fill, .bar-fill, .confbar-fill, .intel-bar-fill { background: var(--text); opacity: 0.65; box-shadow: none; }
.scale-points, .stat-value.accent, .pipe-id, .drawer-id, .brand-accent { text-shadow: none; }
.flow-node, .flow-node:hover { box-shadow: none; filter: none; }
.net-canvas { background-image: none; }
.side-avatar { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.unread-dot { background: var(--text); }
.agent-avatar { background: var(--panel-2); }
.stack-legend, .stack-svg { --series-2: var(--series-neutral); }
.dot-ok, .dot-warn, .dot-crit { box-shadow: none; }

/* ---- S5: one status pill — four states and neutral ---- */
.pill, .console .pill {
  display: inline-block; vertical-align: middle; max-width: 100%;
  padding: 1px 8px; border-radius: 999px; line-height: 18px;
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 550;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--chip-text);
}
.pill::first-letter { text-transform: uppercase; }
.pill.live, .pill.pill-job-running {
  color: var(--accent); border-color: var(--accent-border); background: var(--accent-faint);
}
.pill.live::before, .pill.pill-job-running::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0;
  border-radius: 50%; background: currentColor; vertical-align: middle;
}
.pill.ok, .pill.pill-resolved, .pill.pill-ok, .pill.pill-job-done, .pill.pill-src-connected,
.pill.pill-sens-public {
  color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 9%, transparent);
}
.pill.paused, .pill.warn, .pill.part, .pill.pill-p2, .pill.pill-in_progress, .pill.pill-pending,
.pill.pill-sens-confidential {
  color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.pill.error, .pill.crit, .pill.pill-p1, .pill.pill-err, .pill.pill-job-failed, .pill.pill-src-error,
.pill.pill-sens-restricted {
  color: var(--crit-ink); border-color: color-mix(in srgb, var(--crit) 45%, transparent);
  background: color-mix(in srgb, var(--crit) 9%, transparent);
}
.pill.off, .pill.pill-closed, .pill.pill-job-cancelled, .pill.pill-src-new, .pill.pill-waiting,
.pill.pill-none, .pill.pill-p4 {
  color: var(--muted); border-color: var(--border); background: transparent;
}
.pill.neutral, .pill.pill-type, .pill.pill-new, .pill.pill-open, .pill.pill-p3, .pill.pill-job-queued,
.pill.pill-audit, .pill.pill-duplicate, .pill.pill-sens-internal, .pill.pill-custom {
  color: var(--chip-text); border-color: var(--chip-border); background: var(--chip-bg);
}
.pill.pill-sens { margin-left: 6px; }

/* ---- S6: the page header ---- */
.page-head:has(> .page-head-main), .console .page-head:has(> .page-head-main) {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px;
  flex-wrap: nowrap; padding: 26px 0 18px; margin-bottom: 0; border: 0;
}
.page-head-main { min-width: 0; flex: 1 1 auto; }
.page-actions { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.how { margin: 8px 0 0; max-width: 65ch; font-size: var(--fs-body); color: var(--muted); }
.how > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--muted); user-select: none;
}
.how > summary::-webkit-details-marker { display: none; }
.how > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s; margin-right: 2px;
}
.how[open] > summary::before { transform: rotate(45deg); }
.how > summary:hover { color: var(--text); }
.how > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.how-body { padding: 8px 0 2px 14px; border-left: 2px solid var(--border-soft); margin-top: 8px; line-height: 1.6; }
.how-body p { margin: 0 0 8px; }
.how-body p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .page-head:has(> .page-head-main), .console .page-head:has(> .page-head-main) { flex-direction: column; align-items: stretch; padding: 18px 0 14px; }
  .page-actions { justify-content: flex-start; }
}

/* ---- S7: loading and load errors ---- */
.skel { padding: 26px 0; }
.skel-bar { height: 12px; margin: 0 0 12px; border-radius: 4px; background: var(--track-bg);
  animation: skel 1.4s ease-in-out infinite; }
.skel-title { width: 220px; height: 22px; }
.skel-sub { width: 360px; max-width: 80%; margin-bottom: 24px; }
.skel-block { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px; background: var(--panel); }
@keyframes skel { 50% { opacity: 0.55; } }
.load-error .load-error-detail { margin: 12px auto 0; max-width: 60ch; text-align: left; }
.load-error .load-error-detail summary { cursor: pointer; font-size: 12.5px; color: var(--muted); text-align: center; }
.load-error .load-error-detail p { margin: 8px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.form-error { margin: 12px 0 0; color: var(--crit-ink); font-size: 13px; }

/* ---- S8: tables ---- */
table.tbl th.num, table.tbl td.num, .table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl td.trunc { max-width: 0; width: 30%; }
.trunc-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tbl th.col-menu, table.tbl td.col-menu { width: 44px; text-align: right; padding-left: 4px; }
/* A row's one visible action beside its ⋯ menu: as narrow as its buttons. */
table.tbl th.col-actions, table.tbl td.col-actions { width: 1%; white-space: nowrap; text-align: right; padding-left: 4px; }
/* A name cell led by a logo tile. */
.logo-cell { display: inline-flex; align-items: flex-start; gap: 10px; min-width: 0; }
.logo-cell > .brand-tile { flex: none; margin-top: 1px; border-radius: 6px; }
.logo-cell > span { min-width: 0; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap.tbl-empty { background: var(--panel); }
.empty-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.tbl-foot .tbl-count { font-variant-numeric: tabular-nums; }
.tbl-pos:empty { display: none; }
.row-more {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px;
  border: 1px solid transparent; border-radius: var(--radius-control); background: transparent;
  color: var(--muted); cursor: pointer;
}
.row-more:hover, .row-more[aria-expanded="true"] { color: var(--text); background: var(--hover-bg); border-color: var(--border); }
.row-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.layer { position: fixed; z-index: 400; }
.menu-pop {
  min-width: 180px; max-width: min(320px, calc(100vw - 16px)); max-height: min(360px, 70vh); overflow-y: auto;
  padding: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.menu-pop-item {
  display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 4px; background: transparent;
  font: inherit; font-size: 13px; text-align: left; color: var(--text); cursor: pointer; text-decoration: none;
}
.menu-pop-item:hover, .menu-pop-item:focus-visible { background: var(--hover-bg); outline: none; text-decoration: none; }
.menu-pop-item.on { font-weight: 600; }
.menu-pop-item.on::after { content: "✓"; float: right; color: var(--muted); }
.menu-pop-item.danger { color: var(--crit-ink); }
.menu-pop-item:disabled { color: var(--muted); cursor: not-allowed; background: transparent; }
.menu-pop-sep { height: 1px; margin: 4px 2px; background: var(--border-soft); }
/* A choice of one (CON.picker / CON.rangePicker): a button with its value,
   opening a menu with the current one ticked. */
.picker {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.picker:hover, .picker[aria-expanded="true"] { border-color: var(--text-2, var(--muted)); background: var(--hover-bg); }
.picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.picker svg { color: var(--muted); flex-shrink: 0; }
.picker-label { color: var(--muted); }
.picker-text { font-weight: 500; }
.picker-chev { color: var(--muted); font-size: var(--fs-xs); transition: transform .12s; }
.picker[aria-expanded="true"] .picker-chev { transform: rotate(180deg); }
.range-pop { min-width: 240px; max-height: none; }
.range-pop .menu-pop-item svg { vertical-align: -2px; color: var(--muted); }
.range-custom { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 6px; border-top: 1px solid var(--border-soft); margin-top: 4px; }
.range-custom label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.range-custom .input { width: 100%; }
.range-custom-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 760px) {
  .tbl-hidecols .ph-hide { display: none; }
  .tbl-stack table.tbl, .tbl-stack table.tbl tbody, .tbl-stack table.tbl tr, .tbl-stack table.tbl td { display: block; width: auto; }
  .tbl-stack table.tbl thead { display: none; }
  .tbl-stack table.tbl tr { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
  .tbl-stack table.tbl td { padding: 3px 0; border: 0; max-width: none; text-align: left; }
  .tbl-stack table.tbl td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; font-size: var(--fs-small); color: var(--muted);
  }
  .tbl-stack table.tbl td.col-menu { position: absolute; right: 8px; margin-top: -4px; }
  .tbl-stack table.tbl tr { position: relative; }
  .tbl-foot { flex-wrap: wrap; }
}

/* ---- S9: toolbar ---- */
.toolbar { gap: 8px; }
.toolbar .search-box, .lx-toolbar .search-box { flex: 0 1 300px; min-width: 180px; }
.search-box .ico { display: inline-flex; left: 10px; color: var(--muted); }
.toolbar .search-box input.input, .search-box input[type="search"] { height: 32px; font-size: 13px; }
.filter-chip {
  height: 32px; padding: 0 10px; gap: 6px; font-size: 13px; color: var(--text);
  border-radius: var(--radius-control);
}
.filter-chip .chip-caret { display: inline-flex; color: var(--muted); }
.filter-chip.on { border-color: var(--text); background: var(--hover-bg); }
.toolbar .btn { min-height: 32px; }
@media (max-width: 760px) {
  .toolbar .search-box, .lx-toolbar .search-box { flex: 1 1 100%; min-width: 0; }
}

/* ---- S10: forms ---- */
.hint { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; max-width: 65ch; }
.field .hint { margin: 5px 0 0; }
.field-error { color: var(--crit-ink); font-size: var(--fs-small); margin: 5px 0 0; }
/* A field in error stays red while it is being fixed, focused or not. */
:is(input, select, textarea, .input)[aria-invalid="true"],
.form-section .fields :is(input, select, textarea)[aria-invalid="true"]:not(.input) { border-color: var(--crit); }
:is(input, select, textarea, .input)[aria-invalid="true"]:focus,
.form-section .fields :is(input, select, textarea)[aria-invalid="true"]:not(.input):focus {
  border-color: var(--crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 20%, transparent);
}
.field .req { color: var(--muted); margin-left: 3px; }
.input::placeholder { color: var(--input-placeholder); opacity: 1; }
.input-sm { height: 32px; padding: 0 8px; font-size: 13px; }
.net-select, .lx-size, .tbl-foot .tbl-size {
  height: 32px; padding: 0 8px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-control);
}
.tbl-foot .tbl-size { height: 28px; font-size: 12px; }
/* A form's footer sits under the form, in the flow: sticky and bled to the
   page edges it covered the fields above it (Identity) and, inside a
   drawer, ran past the drawer's edge into a horizontal scroll (Incidents).
   In a drawer it lines up with the drawer's padding. */
.form-foot, .drawer .form-foot, .drawer-form .form-foot, .panel .form-foot, [data-page] .form-foot {
  position: static; margin: 20px 0 0; padding: 14px 0 0; flex-wrap: wrap;
  background: transparent; backdrop-filter: none; border-top: 1px solid var(--border-soft);
}
@media (max-width: 900px) {
  .form-foot, .drawer .form-foot, .panel .form-foot, [data-page] .form-foot { margin: 16px 0 0; padding: 12px 0 0; }
}
.llmp-pill-ok { color: var(--ok-ink); }
.llmp-pill-err { color: var(--crit-ink); }
.grd-status.on i { background: var(--ok); box-shadow: none; }

/* ---- S11: the drawer and the in-page question ---- */
.drawer-scrim.sheet {
  position: fixed; inset: 0; z-index: 150; display: flex; justify-content: flex-end;
  background: rgba(17, 17, 17, 0.35);
}
.drawer-scrim.sheet > .drawer {
  position: relative; inset: auto; height: 100%; width: min(560px, 100vw); max-width: 100vw;
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  background: var(--panel); border-left: 1px solid var(--border);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.2); animation: drawer-in 0.18s ease;
}
.drawer-scrim.sheet > .drawer > .drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: nowrap;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border-soft);
}
.drawer-titles { min-width: 0; }
.drawer-scrim.sheet .drawer-head h2 { margin: 0; font-size: 17px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.drawer-scrim.sheet .drawer-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.drawer-scrim.sheet > .drawer > .drawer-body { flex: 1; overflow-y: auto; padding: 14px 20px 24px; }
.drawer-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--border-soft); background: var(--panel);
}
@media (max-width: 760px) {
  .drawer-scrim.sheet > .drawer { width: 100vw !important; }
  .drawer-scrim.sheet > .drawer > .drawer-body { padding: 12px 16px 20px; }
  .drawer-scrim.sheet > .drawer > .drawer-head, .drawer-foot { padding-left: 16px; padding-right: 16px; }
}
.modal-scrim {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 16px;
  background: rgba(17, 17, 17, 0.42);
}
.modal {
  width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 20px 20px 16px; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); animation: modal-in 0.14s ease;
}
@keyframes modal-in { from { transform: translateY(6px); opacity: 0; } }
.modal-title { margin: 0 0 8px; font-size: var(--fs-section); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.modal-body { margin: 0 0 14px; font-size: var(--fs-body); line-height: 1.55; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.modal .field { margin: 0 0 4px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
/* On the dark theme a light veil barely shows: the page goes darker. */
:root:not([data-theme="light"]) .modal-scrim { background: rgba(0, 0, 0, 0.62); }
:root:not([data-theme="light"]) .drawer-scrim.sheet { background: rgba(0, 0, 0, 0.5); }
:root:not([data-theme="light"]) .modal { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }

/* ---- TIQ.modal: a dialog that is not a question ----
   Above a drawer (150), under a menu layer (400) and the question (500). */
.dlg-scrim {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--sp-4);
  background: rgba(17, 17, 17, 0.42);
}
.dlg {
  width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  overflow: hidden; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); animation: modal-in 0.14s ease;
}
.dlg-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--border-soft);
}
.dlg-titles { min-width: 0; }
.dlg-title { margin: 0; font-size: var(--fs-section); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.dlg-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.dlg-head-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.dlg-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-body); }
.dlg-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-soft);
}
:root:not([data-theme="light"]) .dlg-scrim { background: rgba(0, 0, 0, 0.62); }
:root:not([data-theme="light"]) .dlg { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
@media (max-width: 760px) {
  .dlg-scrim { padding: var(--sp-2); }
  .dlg-head, .dlg-body, .dlg-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* ---- S12: shell ---- */
.crumbs .here { overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
@media (max-width: 760px) {
  .crumbs > :not(:nth-last-child(-n+3)) { display: none; }
  .crumbs > * { min-width: 0; }
  .crumbs .here { max-width: 22ch; }
}
.section-nav a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--text); }
@media (max-width: 760px) {
  .section-nav {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
    scrollbar-width: none;
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--text); }
  .app-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  main.wrap { overflow-x: clip; }
}

/* The agent page and the other headers that hold a page-head inside their
   own layout keep that layout. */
.adp-head-title .page-head:has(> .page-head-main) { display: block; padding: 0; }

/* ---- a record's details in a drawer (CON.facts) ---- */
.facts { display: flex; flex-direction: column; gap: 22px; }
.facts-sec > .hint { margin: -2px 0 8px; }
.facts-h { margin: 0 0 8px; font-size: var(--fs-section); font-weight: 600; color: var(--text); }
.facts-list { margin: 0; display: grid; grid-template-columns: minmax(110px, 32%) minmax(0, 1fr);
  border-top: 1px solid var(--border-soft); }
.facts-row { display: contents; }
.facts-row > dt, .facts-row > dd { padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; line-height: 1.45; }
.facts-row > dt { color: var(--muted); padding-right: 14px; }
.facts-row > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.facts-row > dd.mono { font-family: var(--mono); font-size: 12.5px; }
.facts-row > dd .cell-sub { margin-top: 4px; }
.facts-row > dd > .btn-ghost:first-child { margin-left: -10px; }
.facts-row > dd .btn + .btn { margin-left: 4px; }
@media (max-width: 480px) {
  .facts-list { grid-template-columns: minmax(0, 1fr); }
  .facts-row > dt { border-bottom: 0; padding-bottom: 0; }
  .facts-row > dd { padding-top: 2px; }
}
/* A ghost button leading a value lines its label up with the text above. */
.facts-row > dd > span > .btn-ghost:first-child { margin-left: -10px; }
/* What an action from a row's menu was refused with, under the cell it is about. */
.row-note { color: var(--crit-ink); }
.row-note:empty { display: none; }
.health-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.health-cell > .cell-sub { margin-top: 0; }
.facts-row > dd .cell-sub + .btn-ghost { margin-left: -10px; }
.facts-row > dd .mono { font-size: 12.5px; }
/* A chip in a details list shows its whole value: there is room to wrap. */
.facts-row > dd .tag-chip { max-width: none; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  /* A stacked row's actions sit on its last line, Details first. */
  .tbl-stack table.tbl td.col-actions { white-space: normal; text-align: left; padding-top: 6px; }
  .tbl-stack table.tbl td.col-actions .row-actions { justify-content: flex-start; }
  .tbl-stack table.tbl td.col-actions .row-actions > .btn-ghost:first-child { margin-left: -10px; }
}

/* ---------- Home fits the window ----------
   On a desktop window Home is one screen: the greeting, what needs
   attention, traffic beside the headline numbers, and one row of cards
   (the top agents with their budgets, then each solution). The rows share the height left
   after the fixed parts and a long card scrolls inside itself, so the page
   never does. A short or narrow window keeps the scrolling layout. */
@media (min-width: 1100px) and (min-height: 700px) {
  body[data-page="dashboard"] #home-top {
    display: flex; flex-direction: column; gap: 12px;
    height: calc(100vh - var(--topnav-h) - 60px); min-height: 600px;
  }
  body[data-page="dashboard"] #home-top > * { margin: 0; flex-shrink: 0; }
  body[data-page="dashboard"] #home-top > .page-head { margin-bottom: 0; row-gap: 2px; }
  body[data-page="dashboard"] .greet { font-size: 28px; }
  body[data-page="dashboard"] #home-top > .attention { max-height: 132px; overflow-y: auto; }
  body[data-page="dashboard"] #home-top > .home-row1 { flex: 1 1 0; min-height: 150px; }
  body[data-page="dashboard"] .home-row1 > * { min-height: 0; overflow: hidden; }
  body[data-page="dashboard"] .home-traffic .spark { height: auto; min-height: 0; }
  body[data-page="dashboard"] #home-top > .home-bottom {
    flex: 0 1 auto; min-height: 230px; max-height: 330px; display: flex; gap: 14px;
  }
  body[data-page="dashboard"] .home-bottom > .home-duo,
  body[data-page="dashboard"] .home-bottom > .home-solutions { display: contents; }
  body[data-page="dashboard"] .home-bottom > .home-solutions[hidden] { display: none; }
  body[data-page="dashboard"] .home-bottom .card {
    flex: 1 1 0; min-width: 0; min-height: 0 !important; margin: 0; overflow-y: auto;
  }
  /* Top agents is twice a solution's width: a name, its spend and its budget
     each keep their room. */
  body[data-page="dashboard"] .home-bottom .home-agents { flex: 2 1 0; }
  body[data-page="dashboard"] #home-top > .quick { margin-top: 0; }
}

/* ---------- Home's cards read cleanly at any width ----------
   A card's head is one line: its title keeps its width, the subtitle gives
   way first. An agent's name never wraps under its avatar; the amount keeps
   its own column. The traffic chart names each bar's day. */
body[data-page="dashboard"] #home-top .card-head { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
body[data-page="dashboard"] #home-top .card-head > b,
body[data-page="dashboard"] #home-top .card-head > a { flex: none; }
body[data-page="dashboard"] #home-top .card-head > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-page="dashboard"] .rank { gap: 10px; }
body[data-page="dashboard"] .rank .agent-with-avatar { display: flex; align-items: center; gap: 7px; min-width: 0; }
body[data-page="dashboard"] .rank .agent-with-avatar code { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="dashboard"] .rank .amt { flex: none; white-space: nowrap; }
body[data-page="dashboard"] .rank .amt span { margin-left: 4px; }
body[data-page="dashboard"] .rank .amt b { display: inline; }
body[data-page="dashboard"] .home-budget-empty { text-align: left; padding: 12px 16px 14px; }
body[data-page="dashboard"] .home-budget-empty h3 { font-size: 13.5px; margin-bottom: 4px; }
body[data-page="dashboard"] .home-budget-empty p { margin: 0; max-width: none; font-size: 12.5px; line-height: 1.5; }
body[data-page="dashboard"] #home-top .home-budget-empty .btn { margin-top: 10px; }
body[data-page="dashboard"] .home-bottom .card { scrollbar-width: thin; }
body[data-page="dashboard"] .sol-stat { padding: 4px 0; }
/* A short desktop window: the headline numbers two by two, so all four
   show beside the traffic chart instead of the last being cut off. */
/* On a desktop window the headline numbers are two by two beside the
   traffic chart, so all four show at any height instead of the last being
   cut off. */
@media (min-width: 1100px) and (min-height: 700px) {
  body[data-page="dashboard"] .home-metrics { display: grid; grid-template-columns: 1fr 1fr; }
  body[data-page="dashboard"] .home-metrics .metric { grid-template-columns: minmax(0, 1fr);
    align-content: center; gap: 2px; padding: 8px 14px; border-right: 1px solid var(--border); }
  body[data-page="dashboard"] .home-metrics .metric:nth-child(2n) { border-right: 0; }
  body[data-page="dashboard"] .home-metrics .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  body[data-page="dashboard"] .home-metrics .metric:nth-child(n+3) { border-bottom: 0; }
  body[data-page="dashboard"] .home-metrics .metric-ico { display: none; }
  body[data-page="dashboard"] .home-metrics .metric-val { font-size: 18px; order: -1; }
  /* The systems' dots are on the solution's own page; a card keeps its
     numbers and notes. */
  body[data-page="dashboard"] .sol-card .sol-dots { display: none; }
}
.home-spark { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.home-spark .spark { flex: 1; padding-bottom: 4px; }
.home-spark-days { display: flex; gap: 3px; padding: 0 16px 10px; }
.home-spark-days span { flex: 1 1 0; min-width: 0; text-align: center; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---------- phones and tablets (touch) ----------
   iOS zooms into any field under 16px when it is tapped, and a finger
   needs a bigger target than a mouse pointer. Tables scroll sideways in
   their own box instead of being cut off. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
  .btn, .btn-sm, .picker, .row-more, .chip-btn, .filter-chip, .menu-pop-item, .audit-icon-btn,
  .page-tabs a, .page-tabs button { min-height: 40px; }
  .row-more, .audit-icon-btn { min-width: 40px; }
  .tbl-pager button, .pager button, [data-testid$="-prev"], [data-testid$="-next"] { min-width: 40px; min-height: 40px; }
  .menu-pop-item { padding-block: 10px; }
  .net-svg, [data-testid="network-svg"] { touch-action: pan-y; }
}
@media (max-width: 700px) {
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  [data-testid="network-svg"] { min-height: 70vh; }
}
@media (max-width: 700px) {
  .routing-row { grid-template-columns: minmax(0, 1fr) !important; row-gap: 6px; }
  .routing-row select, .routing-row input { width: 100%; max-width: 100%; }
  .intel-card { min-width: 0; }
  select { max-width: 100%; }
}

/* ==== Page groups ====
   One block per page group, for the console overhaul. Each page's own
   rules go inside its group's block only, so edits made side by side
   never meet. */
/* == group:providers == */
/* The tab strip under the head of /providers and /llm-providers
   (providerTabs): links drawn as page tabs. */
.prov-tabs { margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); }
.prov-tabs .page-tab { text-decoration: none; }
.prov-tabs .page-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.prov-bindings { margin-top: var(--sp-6); }
.prov-bindings-head { font-size: 17px; margin: 0; }
.prov-bindings-head:focus { outline: none; }
.llmp-root .prov-tabs { margin-top: 0; }
.llmp-note { margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); color: var(--muted); font-size: var(--fs-body); line-height: 1.5; }
.llmp-note a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
/* == end group:providers == */
/* == group:guardrails == */
/* The family strip under the head of /guardrail-policies and /guardrails:
   two link tabs (Rules, Profiles) and one line saying what the open one is. */
.grd-subtabs { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.grd-subtabs .page-tabs { margin: 0; }
.grd-subtabs a.page-tab { text-decoration: none; display: inline-flex; align-items: center; }
.grd-subtabs a.page-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.grd-subtab-about { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--muted); }
/* What a person without admin.write sees on /guardrails. */
.grd-noaccess { margin-top: var(--sp-4); }
.grd-noaccess p { max-width: 60ch; }
/* Field errors inside the profile editor's rows (pattern and topic inputs
   have no .field box of their own, so the note sits under the row). */
.grd-prow { flex-wrap: wrap; }
.grd-prow select { flex: 0 0 auto; width: auto; }
.grd-prow .field-error, .grd-topic .field-error { flex: 1 1 100%; margin: 0; }
.grd-prow input[aria-invalid="true"], .grd-topic input[aria-invalid="true"] { border-color: var(--crit); }
/* The rules page's advanced filter box never runs past the page. */
[data-testid="gr-filter"] { max-width: 100%; }
@media (max-width: 700px) {
  .grd-subtabs .page-tabs { overflow-x: auto; }
  [data-testid="gr-filter"] { flex-basis: 100%; }
  /* The create page's sticky footer: the hint on its own line, the buttons under it. */
  .grd-foot { flex-wrap: wrap; justify-content: flex-end; }
  .grd-foot .grd-foot-hint { flex: 1 1 100%; }
  .grd-foot .grd-spacer { display: none; }
}
/* == end group:guardrails == */
/* == group:access == */
/* A panel's own title (the service account issue form): a line of its own
   above the first field, not pressed against its label. */
.lx-panel-title { display: block; margin-bottom: var(--sp-3); }
/* A checkbox row inside a drawer's field list (Enforce it now): the box
   beside its words, not centred above them. */
label.lx-field.adp-row { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--sp-2); }
/* The last column of the users table (Built-in, or the row menu) stays on one line. */
[data-testid="users-table"] td:last-child, [data-testid="users-table"] th:last-child { white-space: nowrap; }
/* == end group:access == */
/* == group:budgets == */
/* The per-agent table: cells wrap (a meter, an about line, a sentence on a
   shared agent), and the Edit column keeps to one line. */
.tbl-wrap[data-testid="budgets-table"] table.tbl td { white-space: normal; vertical-align: top; }
.tbl-wrap[data-testid="budgets-table"] table.tbl td.col-actions { white-space: nowrap; }
.tbl-wrap[data-testid="budgets-table"] .budget-meter { min-width: 160px; max-width: 320px; }
.tbl-wrap[data-testid="budgets-table"] .cell-sub:not(.mono) { max-width: 46ch; }
.tbl-wrap[data-testid="scoped-table"] table.tbl td,
.tbl-wrap[data-testid="rl-table"] table.tbl td { white-space: normal; vertical-align: top; }
.budget-cap { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 1280px) { .budget-cap > .cell-main { white-space: nowrap; } }
.tbl-wrap[data-testid="budgets-table"] .budget-cap { min-width: 9ch; }
/* The edit drawer: limit and period side by side, the rest one under another. */
.budget-fields-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--sp-3); }
.budget-fields-2 .field { min-width: 0; }
/* Scoped budgets and rate limits: a panel each, the inline form under its table. */
.budget-panel { padding: var(--sp-3) var(--sp-4) var(--sp-3); margin-top: var(--sp-4); }
.budget-panel .tbl-wrap { margin-top: var(--sp-2); }
.budget-inline-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.budget-inline-form .hint { flex-basis: 100%; }
@media (max-width: 760px) {
  .tbl-wrap[data-testid="budgets-table"] .budget-meter { max-width: none; }
  .tbl-wrap[data-testid="budgets-table"] .cell-sub:not(.mono) { max-width: none; }
  .tbl-stack[data-testid="budgets-table"] table.tbl td.col-actions { text-align: left; padding-top: var(--sp-2); }
  .budget-inline-form .input { flex: 1 1 140px; width: auto !important; min-width: 0; }
}
@media (max-width: 560px) {
  .budget-fields-2 { grid-template-columns: minmax(0, 1fr); }
}
/* == end group:budgets == */
/* == group:secrets-mcp == */
/* What a person without the page's permission sees: the page's own head,
   then an explanation in the empty-state box, left to read as a paragraph. */
.secrets-no-access, .mcp-no-access { padding: var(--sp-6) var(--sp-4); }
.secrets-no-access p, .mcp-no-access p { max-width: 60ch; }
.secrets-no-access p + p, .mcp-no-access p + p { margin-top: var(--sp-2); }
/* The secrets dialogs on TIQ.modal: their body is a column of value box,
   hint and error, as the old modal laid them out. */
.dlg-body.secrets-modal-body { display: grid; gap: var(--sp-3); color: var(--text); }
.dlg-body.secrets-modal-body .secrets-error:empty { display: none; }
/* A once-shown token or client secret in a TIQ.modal: the box reads as code. */
.dlg textarea.input.mono { width: 100%; box-sizing: border-box; margin-top: var(--sp-2); }
.dlg .dp-out { margin: var(--sp-2) 0 0; }
/* A gated control says what it needs on hover; it stays visible but plainly off. */
.mcp-no-access .empty-actions, .secrets-no-access .empty-actions { margin-top: var(--sp-4); }
/* == end group:secrets-mcp == */
/* == group:agent == */
/* A refused detector save: its field message sits on its own line under
   the inline form instead of squeezing between the controls. */
.ks-det-form .field-error { flex-basis: 100%; margin: 0; }
/* The playground's Wire and Agent card dialogs: the shared dialog keeps
   their long preformatted bodies scrolling inside it. */
.dlg .pg-wire, .dlg .ag-item-body { max-height: 60vh; overflow: auto; }
/* Set up <agent>: the checklist card above a new managed agent's tabs. */
.agent-setup { margin: 0 0 var(--sp-4); }
.agent-setup-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.agent-setup-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--sp-3);
  align-items: center; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-soft);
  border-radius: 8px; }
.agent-setup-list li.done { opacity: .7; }
.agent-setup-mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs);
  font-weight: 700; color: var(--ok-ink); }
.agent-setup-list li.done .agent-setup-mark { border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, transparent); }
.agent-setup-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agent-setup-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .agent-setup-list li { grid-template-columns: 22px minmax(0, 1fr); }
  .agent-setup-list li > :last-child { grid-column: 2; justify-content: flex-start; }
}
/* A sub-agent's Run limits: a collapsed group under its own caps. */
.sub-limits { margin: var(--sp-1) 0 var(--sp-2); border-top: 1px solid var(--border-soft); padding-top: var(--sp-2); }
.sub-limits > summary { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none; }
.sub-limits > summary::-webkit-details-marker { display: none; }
.sub-limits > summary::before { content: "+"; font: 600 13px var(--mono); width: 14px; color: var(--muted); }
.sub-limits[open] > summary::before { content: "\2212"; }
.sub-limits[open] > summary { margin-bottom: var(--sp-2); }
/* == end group:agent == */
/* == group:fleet-network-evals == */
/* Fleet controls: the default detector form as labelled fields in a grid,
   the fields a signal does not take hidden (.field is display:block, so
   [hidden] needs saying again). */
.fleet-dd-form { margin-top: var(--sp-4); }
.fleet-dd-form > .ag-subhead { margin: 0 0 var(--sp-3); }
.fleet-dd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--sp-3) var(--sp-4); align-items: start; }
.fleet-dd-grid .field { margin: 0; min-width: 0; }
.fleet-dd-grid .field[hidden] { display: none; }
.fleet-dd-grid .field .input, .fleet-dd-grid .field select { width: 100%; max-width: 100%; }
.fleet-dd-foot { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
/* The fleet's danger row actions (Remove a default detector). */
.btn.btn-ghost.danger { color: var(--crit-ink); }
/* Evaluations: the New queue panel's summary sits apart from its first
   field once it is open. */
.evals-new-queue[open] > summary { margin-bottom: var(--sp-3); }
/* The Run and Save footers sit close under their forms rather than a
   section's padding plus a footer's margin away. */
[data-page="evals"] .form-foot, [data-page="redteam"] .form-foot { margin-top: var(--sp-2); }
/* == end group:fleet-network-evals == */
/* == group:governance-audit == */
/* Incidents: a refusal under an inline control (the case drawer's rows)
   takes the row's full width under the control, not a slot beside it. */
.gv-row > .field-error { flex-basis: 100%; margin: 0; }
.gv-row > .input[aria-invalid="true"] { border-color: var(--crit); }
/* Compliance: the crosswalk has seven columns; at 1024 it scrolls inside its
   wrapper rather than squeezing every control's name onto six lines. On a
   phone the rows stack (CON.table phone: "stack"). */
@media (min-width: 761px) {
  .tbl-wrap[data-testid="cw-table"] .tbl-scroll > table { min-width: 960px; }
}
/* Audit: the tables inside the 560px drawers scroll in their own box, so a
   wide findings table (seven columns) or a long detail value never pushes
   the drawer sideways. */
.audit-drawer-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--sp-2); }
.audit-drawer-table > .table.audit-findings { min-width: 620px; }
.audit-drawer-table > .table.audit-kv { min-width: 0; }
/* == end group:governance-audit == */
/* == group:settings-tenants-identity == */
/* Tenants: the blocks under the table, the grant editor, the form's checks. */
.tn-block { margin-top: var(--sp-6); }
.tn-grant { display: flex; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; margin: 0; }
.tn-grant select { min-width: 160px; }
.tn-sources { display: flex; flex-direction: column; gap: 6px; }
.tn-check { display: flex; gap: var(--sp-2); align-items: center; }
/* Identity map: a select beside its text field, stacked on a phone. */
.idm-h { margin-top: var(--sp-5); }
.idm-pair { display: flex; gap: var(--sp-2); min-width: 0; }
.idm-pair > input { flex: 1 1 200px; min-width: 0; }
.idm-pair > select { flex: 0 1 240px; min-width: 0; max-width: 100%; }
.idm-form { margin-top: var(--sp-5); }
/* Grants and the operator desk: the toolbar's "Show" filter. */
.grant-show, .op-show { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.grant-show select, .op-show select { height: 32px; font-size: 13px; }
.op-toolbar { margin-top: var(--sp-3); }
/* Operator: a privacy request's controls as a form, not a row of inputs. */
.privacy-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }
.privacy-controls .privacy-note { flex: 1 1 260px; min-width: 0; margin: 0; }
.privacy-controls .privacy-note .hint { margin: 2px 0 0; }
.privacy-check { display: inline-flex; align-items: center; gap: 6px; }
.privacy-close { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 720px; margin-top: var(--sp-3); }
.privacy-close .field { margin: 0; }
.privacy-close textarea { width: 100%; }
.privacy-close .btn { align-self: flex-start; }
/* Operator: the request tables wrap their cells instead of cutting a
   requester's name or what they asked for. */
#privacy-requests-table, #demo-requests-table { table-layout: auto; }
/* Operator: the site funnel (operator.js). Each step's share of landed
   sessions as a bar beside the figure; the breakdowns scroll sideways. */
.op-show input[type="date"] { height: 32px; font-size: 13px; }
.funnel-table { table-layout: auto; }
.funnel-table th, .funnel-table td { white-space: nowrap; }
.funnel-caption { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.funnel-conv { display: flex; align-items: center; gap: var(--sp-2); min-width: 180px; }
.funnel-conv .bar-track { flex: 1 1 120px; }
.funnel-conv .conf-pct { width: 52px; }
#privacy-requests-table td, #demo-requests-table td { white-space: normal; }
#privacy-requests-table td.mono, #demo-requests-table td.mono { white-space: nowrap; }
/* Service desk setup: the SLA hours sit two to a row, so each number and
   its stepper has room in the routing panel's second column; the SLA
   table's row menu; the access note under the page's sub line. */
.sla-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sla-grid .field { margin: 0; min-width: 0; }
/* Beside the section nav the routing panel has no room for two columns
   under 1200px: the SLA hours go under the table instead of beside it. */
@media (max-width: 1200px) { .routing-grid { grid-template-columns: minmax(0, 1fr); } }
#sla-policies-table .col-menu { text-align: right; width: 44px; }
.sd-setup-access { flex-basis: 100%; width: 100%; }
.sd-setup-access[hidden] { display: none; }
.sd-setup-access .hint { margin: var(--sp-2) 0 0; }
/* Settings with no section the person may read: the nav is taken away. */
.section-nav[hidden] { display: none; }
@media (max-width: 760px) {
  .idm-pair { flex-wrap: wrap; }
  .idm-pair > select, .idm-pair > input { flex: 1 1 100%; }
  .tn-grant select { width: 100%; }
  /* The rows stack on a phone (styles.css, the phone rules): the dot that
     marks a built-in category would sit on a line of its own. */
  .routing-row > span.muted { display: none; }
}
/* == end group:settings-tenants-identity == */
/* == group:solutions == */
/* The solution apps (sap.js, hr.js, salesforce.js, finance.js) draw from
   solapp.css; only what touches shared parts lives here. A page head for
   a solution tab keeps its actions beside the title at every width. */
.sol-stack .panel-actions { gap: var(--sp-2); }
.sol-stack .panel-actions .btn[disabled][title] { pointer-events: auto; }
@media (max-width: 1100px) {
  .sol-stack .sol-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
/* == end group:solutions == */
/* == group:service-desk == */
/* The IT service desk pages (tickets, analytics, insights, files, categories). */
/* The ticket detail panel is a dialog of its own (tickets.js): it takes focus
   on open, so the ring the browser draws on a focused container is not wanted. */
.tdrawer:focus { outline: none; }
.tdrawer .drawer-close { margin-left: auto; }
.detail-readonly { margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: 13px; }
.update-row .field { margin-bottom: var(--sp-3); }
.update-row .field-error { margin-top: var(--sp-1); }
.update-row > .error-line { margin: 0 0 var(--sp-2); }
.update-row > .error-line[hidden] { display: none; }
/* The New ticket form: the form-level sentence sits between the fields and the button. */
#ticket-form .error-line[hidden] { display: none; }
#ticket-form .error-line { margin: 0 0 var(--sp-3); min-height: 0; }
/* Analytics: panel heads with their controls at the right, the fields of the
   cost model and the routing bench, and the triage field switch as tabs. */
.te-head-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.vr-model { margin-top: var(--sp-4); }
.vr-model > summary { cursor: pointer; }
.vr-model .field { margin-top: var(--sp-3); }
.vr-model-json { width: 100%; font-family: var(--mono, monospace); font-size: 12px; }
.te-fields { margin-top: var(--sp-4); }
.te-fields .seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.te-empty { grid-column: 1 / -1; margin: 0; padding: var(--sp-3) 14px; background: var(--panel); }
.te-bench-title { margin-top: var(--sp-5); }
.te-bench-field { flex: 1 1 320px; margin: 0; }
.te-bench-field textarea { width: 100%; min-height: 54px; font-family: var(--mono); font-size: 12px; }
.te-bench .btn { margin-top: 26px; }
.te-bench-result { margin-top: var(--sp-3); }
.te-bench-result:empty { display: none; }
/* Insights: a panel head with its one action at the right. */
.sd-panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sd-panel-head .panel-title { margin-bottom: 0; }
.sd-panel-head + .panel-desc { margin-top: var(--sp-2); }
.sd-cell-stack { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.sd-title-gap { margin-top: var(--sp-5); }
/* Files: the search row, the stats, a result card (a button in all but markup) and the preview. */
.fi-search { display: flex; gap: var(--sp-3); margin: 2px 0 var(--sp-2); }
.fi-search input { flex: 1; font-size: 15px; min-width: 0; }
.fi-stats { display: flex; gap: 18px; margin: 0 0 18px; flex-wrap: wrap; }
.fi-stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.fi-result { padding: var(--sp-3) 14px; border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: var(--sp-3); background: var(--surface); cursor: pointer; transition: border-color .12s; }
.fi-result:hover { border-color: var(--accent); }
.fi-result:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.fi-result-head { display: flex; gap: var(--sp-2); align-items: baseline; min-width: 0; }
.fi-kind { font-size: var(--fs-xs); color: var(--muted); flex: none; }
.fi-member { padding: var(--sp-2) 10px; }
.fi-crumb { font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.fi-crumb .seg { color: var(--muted); display: inline; border: 0; }
.fi-crumb .seg.last { color: var(--text); font-weight: 600; }
.fi-crumb .sep { color: var(--muted); opacity: .5; margin: 0 5px; }
.fi-snippet { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.5;
  max-height: 4.5em; overflow: hidden; }
.fi-snippet mark { background: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--text); border-radius: 3px; padding: 0 2px; }
.fi-meta { display: flex; gap: 10px; align-items: center; margin-top: var(--sp-2); flex-wrap: wrap; }
.fi-meta-top { margin-top: 0; }
.fi-empty { color: var(--muted); padding: 36px 0; text-align: center; }
.fi-preview { white-space: pre-wrap; font-family: var(--mono, monospace); font-size: 12px;
  background: var(--surface-2, var(--surface)); border: 1px solid var(--border);
  border-radius: 10px; padding: var(--sp-3); max-height: 60vh; overflow: auto; }
@media (max-width: 760px) {
  .fi-search { flex-wrap: wrap; }
  .fi-search .btn { flex: 1 1 100%; }
}
/* Categories: a reader's card names the category without an input. */
.tx-name-static { flex: 1; min-width: 0; font-size: 14px; }
.tx-basis { font-size: var(--fs-xs); }
.tx-card-foot { font-size: var(--fs-xs); }
/* == end group:service-desk == */
/* == group:home-inbox-usage == */
/* Cost and usage: the answer caches panel and the rate editor. */
.usage-caches { padding: var(--sp-3) var(--sp-4); margin-bottom: 14px; }
.usage-caches-fields { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  margin-top: var(--sp-2); }
.usage-caches-fields label { display: inline-flex; align-items: center; gap: 6px; }
.usage-caches-fields .field-error { flex: 1 1 100%; margin: 0; }
.usage-caches .input[readonly] { color: var(--muted); }
[data-testid="rate-msg"]:empty { display: none; }
[data-testid="rate-table"] input[readonly] { color: var(--muted); border-style: dashed; }
/* Connections: the section titles under the table. */
.conn-section-title { margin-top: var(--sp-6); }
/* == end group:home-inbox-usage == */
/* == group:workspace == */
/* The Liyagent app (workspace.html): an employee's place to use their
   agents. A slim header with the four places as tabs (Home, Agents, Needs
   you, Chats); below 760px the tabs move to a bar at the bottom of the
   screen, and the Agents place shows the list or the chat, one at a time.
   The offline screen (app-offline.html) is the service worker's. */
/* Not the console's boot grid (the rail's column): the app has no rail. */
html body[data-shell="workspace"][data-page]:not([data-page="login"]):not([data-page="consent"]):not(.console) {
  display: block; min-height: 100vh; background: var(--bg); color: var(--text); }
.ws-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); height: 56px; padding: 0 max(var(--sp-5), env(safe-area-inset-right)) 0 max(var(--sp-5), env(safe-area-inset-left));
  border-bottom: 1px solid var(--border); background: var(--nav-bg); backdrop-filter: blur(8px); }
.ws-brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); text-decoration: none;
  font: 600 13px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; flex: none; }
.ws-brand svg { width: 22px; height: 22px; }
.ws-tabs { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; margin-left: var(--sp-4); }
.ws-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: var(--fs-body); font-weight: 500; white-space: nowrap; }
.ws-tab:hover { color: var(--text); background: var(--hover-bg); }
.ws-tab:hover, .ws-tabbar-item:hover { text-decoration: none; }
.ws-tab.active { color: var(--text); background: var(--accent-faint); }
.ws-tab .ws-tab-icon { display: none; }
.ws-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font: 600 11px/18px var(--sans); text-align: center; }
.ws-top-actions { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ws-user { font-size: var(--fs-small); color: var(--muted); max-width: 22ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.ws-console-link { font-size: var(--fs-small); color: var(--accent); text-decoration: none; padding: 6px 8px;
  border: 1px solid var(--accent-border); border-radius: 6px; white-space: nowrap; }
.ws-console-link:hover { background: var(--accent-faint); }
.ws-tabbar { display: none; }
.ws-offline { position: sticky; top: 56px; z-index: 19; margin: 0; padding: 8px var(--sp-5); font-size: var(--fs-small);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 14%, var(--bg)); color: var(--text); }
.ws { display: block; outline: none; }
.ws-view-title:focus:not(:focus-visible), .ws-side-title:focus:not(:focus-visible),
.ws-head-name:focus:not(:focus-visible) { outline: none; }
.ws :focus-visible, .ws-top :focus-visible, .ws-tabbar :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Home, Needs you and Chats: one readable column. */
.ws-home, .ws-needs, .ws-allchats-view { max-width: 880px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-6);
  box-sizing: border-box; }
.ws-view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-4); }
.ws-view-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.ws-view-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.45; }
.ws-home-needs { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-4); box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); text-align: left;
  cursor: pointer; font: inherit; }
.ws-home-needs:hover { border-color: var(--accent-border); }
.ws-home-needs-on { border-color: var(--accent-border); background: var(--accent-faint); }
.ws-home-needs-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; background: var(--bg-2); color: var(--muted); }
.ws-home-needs-on .ws-home-needs-icon { background: var(--accent); color: var(--accent-ink); }
.ws-home-needs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-home-needs-count { font-weight: 600; font-size: var(--fs-section); }
.ws-home-needs-sub { font-size: var(--fs-small); color: var(--muted); }
.ws-home-needs-go { flex: none; font-weight: 600; font-size: var(--fs-body); color: var(--accent); }
.ws-home-section { margin-top: var(--sp-5); }
.ws-home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  margin-bottom: var(--sp-2); }
.ws-home-h2 { margin: 0; font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ws-home-more { font-size: var(--fs-small); color: var(--accent); text-decoration: none; }
.ws-home-more:hover { text-decoration: underline; }
.ws-home-agents { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ws-home-agent { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border);
  border-radius: 12px; background: var(--panel); }
.ws-home-agent-open { display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: transparent;
  color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ws-home-agent-open:hover .ws-agent-name { color: var(--accent); }
.ws-home-agent-open .agent-avatar { flex: none; width: 36px; height: 36px; border-radius: 9px; margin: 0; }
.ws-home-prompts { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-home-prompts .ws-suggestion { text-align: left; }
.ws-install { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.ws-install-icon { flex: none; margin-top: 2px; color: var(--accent); }
.ws-install-text { flex: 1; min-width: 0; }
.ws-install-title { margin: 0; font-weight: 600; }
.ws-install-sub { margin: 2px 0 0; font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
.ws-install .btn, .ws-install-dismiss { flex: none; }
.ws-allchats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-allchat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid transparent;
  border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ws-allchat:hover { background: var(--hover-bg); }
.ws-allchat .agent-avatar { flex: none; width: 32px; height: 32px; border-radius: 8px; margin: 0; }
.ws-allchat-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-allchat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); }
.ws-allchat-meta { font-size: var(--fs-xs); color: var(--muted); }
/* Needs you: one card per thing that waits, settled where it is shown. */
.ws-needs-status { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--muted); }
.ws-needs-status:empty { display: none; }
.ws-needs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ws-need { border-left-width: 3px; }
.ws-need-approval { border-left-color: var(--accent); }
.ws-need-input, .ws-need-auth { border-left-color: var(--warn); }
.ws-need-sap { border-left-color: var(--accent-border); }
.ws-need:focus { outline: none; }
.ws-need:focus-visible, .ws-need-focus { box-shadow: 0 0 0 3px var(--accent-dim); border-color: var(--accent-border); }
.ws-need-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ws-need-who .agent-avatar { flex: none; width: 24px; height: 24px; border-radius: 6px; margin: 0; }
.ws-need-agent { font-size: var(--fs-small); font-weight: 600; }
.ws-need-when { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.ws-risk { margin-left: 8px; padding: 1px 6px; border-radius: 999px; color: var(--crit-ink);
  background: color-mix(in srgb, var(--crit) 14%, transparent); }
.ws-need-summary { overflow-wrap: anywhere; }
.ws-need-args { margin: 6px 0; font-size: var(--fs-small); }
.ws-need-args summary { cursor: pointer; color: var(--muted); }
.ws-need-args dl { display: grid; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0;
  padding: 8px 10px; border-radius: 8px; background: var(--bg-2); }
.ws-need-args dt { font-family: var(--mono); color: var(--muted); }
.ws-need-args dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-need-reject-box { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-2); }
.ws-need-reject-box textarea { width: 100%; box-sizing: border-box; }
.ws-needs-empty { padding: var(--sp-6) 0; text-align: center; }
.ws-need a:not(.btn) { color: var(--accent); }
.ws-need .ws-actions + .ws-meta { margin-top: var(--sp-2); }
/* Agents: the list and past chats on the left, the chat on the right. */
.ws-agents-view { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); height: calc(100vh - 56px);
  height: calc(100dvh - 56px); }
.ws-side { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 0; overflow-y: auto;
  padding: var(--sp-4); border-right: 1px solid var(--border); background: var(--bg-2); }
.ws-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-top: var(--sp-2); }
.ws-side-title { margin: 0; font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ws-search { width: 100%; box-sizing: border-box; }
.ws-agents, .ws-chats, .ws-tray, .ws-files { list-style: none; margin: 0; padding: 0; }
.ws-agents { display: flex; flex-direction: column; gap: 2px; }
.ws-agent { display: flex; align-items: flex-start; gap: 0; width: 100%; padding: 8px 10px; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ws-agent:hover { background: var(--hover-bg); }
.ws-agent[aria-current="true"] { background: var(--accent-faint); border-color: var(--accent-border); }
.ws-agent .agent-avatar { width: 32px; height: 32px; border-radius: 8px; margin: 2px 10px 0 0; }
.ws-agent-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-agent-name { font-weight: 600; font-size: var(--fs-body); }
.ws-agent-about { font-size: var(--fs-small); color: var(--muted); line-height: 1.4; display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-empty { padding: 8px 10px; font-size: var(--fs-small); color: var(--muted); }
.ws-chat-row { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.ws-chat-row:hover { background: var(--hover-bg); }
.ws-chat-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ws-chat-open[aria-current="true"] { background: var(--accent-faint); }
.ws-chat-title { font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-chat-when { font-size: var(--fs-xs); color: var(--muted); }
.ws-chat-del { flex: none; width: 28px; height: 28px; color: var(--muted); }
.ws-chat-del:hover { color: var(--crit); }
.ws-new { padding: 4px 8px; font-size: var(--fs-small); }
.ws-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ws-chat-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border-soft); }
.ws-chat-head .agent-avatar { width: 36px; height: 36px; border-radius: 9px; margin: 0; }
.ws-back { display: none; flex: none; }
.ws-head-text { min-width: 0; }
.ws-head-name { margin: 0; font-size: var(--fs-section); }
.ws-head-about, .ws-head-empty { margin: 2px 0 0; font-size: var(--fs-small); color: var(--muted); }
.ws-notice { margin: var(--sp-4) var(--sp-5) 0; padding: var(--sp-4); border: 1px solid var(--accent-border);
  border-radius: 10px; background: var(--accent-faint); font-size: var(--fs-body); line-height: 1.5; }
.ws-notice p { margin: 0 0 var(--sp-2); max-width: 72ch; }
.ws-notice-title { font-weight: 600; }
.ws-log { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: flex;
  flex-direction: column; gap: var(--sp-3); }
.ws-log:focus-visible { outline-offset: -2px; }
.ws-msg { max-width: min(760px, 92%); border-radius: 12px; padding: 10px 14px; line-height: 1.5; }
.ws-you { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
.ws-you-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-you .ws-file { background: rgba(0, 0, 0, 0.12); border-color: transparent; color: inherit; }
.ws-reply { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); }
.ws-reply .md > :first-child { margin-top: 0; }
.ws-reply .md > :last-child { margin-bottom: 0; }
.ws-refused { color: var(--crit-ink); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.ws-refused p { margin: 0; }
.ws-note { align-self: center; margin: 0; font-size: var(--fs-small); color: var(--muted); text-align: center; }
.ws-meta { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.ws-output { margin-top: 8px; font-size: var(--fs-small); }
.ws-output pre { max-height: 240px; overflow: auto; padding: 8px; border-radius: 6px; background: var(--bg-2);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-feedback { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-soft); }
.ws-feedback-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ws-feedback-row .ws-meta { margin: 0; }
.ws-vote { padding: 3px 8px; border: 1px solid var(--chip-border); border-radius: 999px; background: transparent;
  color: var(--text); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.ws-vote:hover:not(:disabled) { border-color: var(--accent-border); color: var(--accent); }
.ws-feedback-ask { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; align-items: flex-start; }
.ws-feedback-ask textarea { width: 100%; box-sizing: border-box; }
.ws-welcome { margin: auto; max-width: 520px; text-align: center; padding: var(--sp-6) 0; }
.ws-welcome-title { margin: 0 0 var(--sp-2); font-size: 20px; font-weight: 600; }
.ws-welcome-sub { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-body); }
.ws-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.ws-suggestion { padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel);
  color: var(--text); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.ws-suggestion:hover:not(:disabled) { border-color: var(--accent-border); }
.ws-suggestion:disabled { opacity: 0.5; cursor: default; }
.ws-cards { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-5); }
.ws-card { padding: var(--sp-3) var(--sp-4); border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); font-size: var(--fs-body); }
.ws-card p { margin: 0 0 6px; }
.ws-wait { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.ws-sap { border-color: var(--accent-border); }
.ws-card-kicker { font: 600 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ws-card-title { font-weight: 600; }
.ws-field { margin: 6px 0; }
.ws-field label { display: block; margin-bottom: 4px; font-size: var(--fs-small); }
.ws-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.ws-error { margin: 6px var(--sp-5) 0; color: var(--crit-ink); font-size: var(--fs-small); }
.ws-card .ws-error, .ws-feedback .ws-error { margin: 6px 0 0; }
.ws-composer { padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid var(--border-soft); }
.ws-compose-row { display: flex; align-items: flex-end; gap: var(--sp-2); }
.ws-compose-row .ws-input { flex: 1; min-width: 0; box-sizing: border-box; resize: none; min-height: 40px; max-height: 220px;
  line-height: 1.45; padding-top: 9px; padding-bottom: 9px; font: inherit; }
.ws-attach, .ws-voice { flex: none; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; }
/* Listening: the microphone button turns red and a line says so. */
.ws-voice-on { color: var(--crit-ink); border-color: color-mix(in srgb, var(--crit) 50%, transparent);
  background: color-mix(in srgb, var(--crit) 10%, transparent); }
.ws-voice-status { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-2); font-size: var(--fs-small);
  color: var(--crit-ink); }
.ws-voice-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--crit);
  animation: pulse 1.2s ease-in-out infinite; }
.ws-send { flex: none; height: 40px; }
.ws-keys { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--sp-3); margin: 6px 0 0;
  font-size: var(--fs-xs); color: var(--muted); }
.ws-tray { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.ws-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ws-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px;
  border: 1px solid var(--chip-border); border-radius: 999px; background: var(--chip-bg); font-size: var(--fs-xs); }
.ws-files .ws-file { padding-right: 10px; }
.ws-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.ws-file-note { color: var(--muted); }
.ws-file-bad { border-color: color-mix(in srgb, var(--crit) 50%, transparent); }
.ws-file-bad .ws-file-note { color: var(--crit-ink); }
.ws-file .icon-btn { width: 22px; height: 22px; }
/* Settings, for this browser: notifications and installing. */
.ws-settings { display: flex; flex-direction: column; gap: var(--sp-4); }
.ws-settings-part { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ws-settings-h { margin: 0; font-size: var(--fs-section); }
.ws-settings .ws-meta { margin: 0; font-size: var(--fs-small); line-height: 1.45; }
.ws-settings .ws-error { margin: 0; }
.ws-switch-row { display: flex; align-items: center; gap: 10px; }
.ws-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0;
  border: 1px solid var(--border); border-radius: 999px; background: var(--track-bg); cursor: pointer;
  transition: background-color 0.15s; }
.ws-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text); transition: transform 0.15s; }
.ws-switch:checked { background: var(--accent); border-color: var(--accent); }
.ws-switch:checked::after { transform: translateX(16px); background: var(--accent-ink); }
.ws-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The service worker's offline screen. */
.app-offline { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 100vh; min-height: 100dvh; padding: var(--sp-5); box-sizing: border-box; text-align: center; }
.app-offline-mark { width: 48px; height: 48px; color: var(--text); }
.app-offline-title { margin: 0; font-size: 22px; }
.app-offline-text { margin: 0; max-width: 42ch; color: var(--muted); line-height: 1.5; }
@media (max-width: 1100px) {
  .ws-agents-view { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
  .ws-chat-head, .ws-log, .ws-composer { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .ws-cards { padding: 0 var(--sp-4); }
}
@media (max-width: 900px) {
  .ws-user { display: none; }
}
/* A phone: the tab bar at the bottom, one column, the list or the chat. */
@media (max-width: 760px) {
  .ws-top { padding: 0 max(var(--sp-3), env(safe-area-inset-right)) 0 max(var(--sp-3), env(safe-area-inset-left)); }
  .ws-tabs { display: none; }
  .ws-signout { padding-left: 8px; padding-right: 8px; }
  .ws-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-top: 1px solid var(--border); background: var(--nav-bg); backdrop-filter: blur(8px); }
  .ws-tabbar-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 56px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 500; }
  .ws-tabbar-item.active { color: var(--accent); }
  .ws-tabbar-item .ws-tab-icon { display: inline-flex; }
  .ws-tabbar-item .ws-badge { position: absolute; top: 5px; left: calc(50% + 6px); }
  .ws-offline { padding: 8px var(--sp-3); }
  .ws-home, .ws-needs, .ws-allchats-view { padding: var(--sp-4) var(--sp-3) calc(80px + env(safe-area-inset-bottom)); }
  .ws-view-title { font-size: 20px; }
  .ws-home-agents { grid-template-columns: minmax(0, 1fr); }
  .ws-agents-view { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 56px - 57px);
    height: calc(100dvh - 56px - 57px - env(safe-area-inset-bottom)); }
  .ws-side { display: none; border-right: 0; }
  body.ws-side-open .ws-side { display: flex; }
  body.ws-side-open .ws-chat { display: none; }
  .ws-back { display: inline-flex; }
  .ws-chat-head, .ws-log, .ws-composer { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .ws-notice { margin: var(--sp-3) var(--sp-3) 0; }
  .ws-cards { padding: 0 var(--sp-3); }
  .ws-error { margin-left: var(--sp-3); margin-right: var(--sp-3); }
  .ws-msg { max-width: 100%; }
  .ws-console-link { padding: 5px 6px; }
  .ws-need-args dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ws-brand-text { display: none; }
}
/* == end group:workspace == */

/* Home's top agents: one card, the agent's spend over 7 days with its budget
   for the period beside it. Without the separate budgets card, so one card
   says what an agent costs and how far through its budget it is. */
.home-duo-one { grid-template-columns: 1fr; }
.home-agents .rank .amt { text-align: right; }
.home-agents .rank .amt b { display: block; }
.home-agents .rank .amt span { display: block; margin: 0; font-size: 11.5px; color: var(--muted); }
body[data-page="dashboard"] .home-agents .rank .amt b { display: block; }
body[data-page="dashboard"] .home-agents .rank .amt span { margin-left: 0; }
.home-agents .track.over .fill { background: var(--danger, #d4483b); }
.home-agents .home-budget-cta { display: block; padding: 8px 16px 12px; font-size: 12.5px; }
.home-agents .card-head > a + a { margin-left: 12px; }
.home-agents .rank .who .budget { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.home-agents .rank .who .budget.over { color: var(--danger, #d4483b); }
/* On Home a solution card's note reads whole: its text on its own lines,
   the button under it. */
body[data-page="dashboard"] .sol-card-att { flex-wrap: wrap; align-items: flex-start; row-gap: 6px; }
body[data-page="dashboard"] .sol-card-att-text { flex: 1 1 calc(100% - 24px); }
body[data-page="dashboard"] .sol-card-att .btn { margin-left: 16px; }
body[data-page="dashboard"] .home-agents .rank { padding: 8px 16px; }
body[data-page="dashboard"] .home-agents .rank .who .budget { margin-top: 3px; }

/* ---------- Liya at work (TIQ.loader) ----------
   The mark instead of a "Loading…" line: it turns a quarter at a time with
   a small overshoot, its outline tracing round as it goes, and its core
   breathing, the way an assistant's mark shows it is working. */
.liya-loader { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 28px 16px; color: var(--muted); font-size: 12.5px; }
.liya-loader.inline { display: inline-flex; padding: 0; gap: 7px; vertical-align: middle; }
.liya-loader .liya-mark { width: 22px; height: 22px; flex: none; overflow: visible;
  animation: lm-turn 1.8s cubic-bezier(.65, -0.25, .35, 1.35) infinite; transform-origin: 50% 50%; }
.liya-loader.inline .liya-mark { width: 15px; height: 15px; }
.liya-loader.lg { flex-direction: column; padding: 64px 16px; gap: 14px; }
.liya-loader.lg .liya-mark { width: 40px; height: 40px; }
.liya-mark .lm-ghost { fill: none; stroke: var(--border, #d8d8d2); stroke-width: 2.8; stroke-linejoin: round; }
.liya-mark .lm-ink { fill: none; stroke: var(--text, #111); stroke-width: 2.8; stroke-linejoin: round;
  stroke-linecap: round; stroke-dasharray: 34 66; animation: lm-trace 1.8s linear infinite; }
.liya-mark .lm-core { fill: #ff5b1f; transform-origin: 16px 16px; animation: lm-breathe 0.9s ease-in-out infinite alternate; }
.liya-loader .lm-label::after { content: ""; display: inline-block; width: 1.2em; text-align: left;
  animation: lm-dots 1.2s steps(4, end) infinite; }
@keyframes lm-turn { 0%, 20% { transform: rotate(0deg); } 50%, 70% { transform: rotate(90deg); } 100% { transform: rotate(180deg); } }
@keyframes lm-trace { to { stroke-dashoffset: -100; } }
@keyframes lm-breathe { from { transform: scale(.75); opacity: .75; } to { transform: scale(1.3); opacity: 1; } }
@keyframes lm-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) {
  .liya-loader .liya-mark, .liya-mark .lm-ink, .liya-mark .lm-core, .liya-loader .lm-label::after { animation: none; }
  .liya-mark .lm-ink { stroke-dasharray: none; }
}

/* ---------- Opening a page ----------
   Moving between console pages is one motion, as an app opens on a phone:
   the rail and top bar stay put, and the new page grows out of the point
   that was clicked (common.js keeps it) while the old one recedes. Cards
   then settle in one after another as their data lands. Chrome and Safari
   run it on every same-site navigation; elsewhere pages simply change. */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: liya-rail; }
.topnav { view-transition-name: liya-top; }
main.wrap { view-transition-name: liya-page; }
::view-transition-old(liya-page) { animation: liya-recede 160ms ease-in both; }
::view-transition-new(liya-page) {
  animation: liya-open 460ms cubic-bezier(.2, .9, .2, 1.04) both;
  transform-origin: calc(var(--open-x, 50vw) - 240px) calc(var(--open-y, 30vh) - 40px);
}
::view-transition-group(liya-rail), ::view-transition-group(liya-top) { animation: none; }
@keyframes liya-open {
  from { opacity: 0; transform: scale(.86); border-radius: 28px; filter: blur(2px); }
  60% { opacity: 1; filter: none; }
  to { opacity: 1; transform: none; border-radius: 0; }
}
@keyframes liya-recede { to { opacity: 0; transform: scale(.98); } }
main.wrap .card, main.wrap .liya-loader { animation: liya-settle 380ms cubic-bezier(.2, .9, .2, 1) both; }
main.wrap .card:nth-child(2) { animation-delay: 40ms; }
main.wrap .card:nth-child(3) { animation-delay: 80ms; }
main.wrap .card:nth-child(4) { animation-delay: 120ms; }
main.wrap .card:nth-child(n+5) { animation-delay: 160ms; }
@keyframes liya-settle { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  main.wrap .card, main.wrap .liya-loader { animation: none; }
}

/* Settings > Telemetry (settings.js loadTelemetry): the heartbeat's facts
   and the exact body it sends. */
.telemetry-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; font-size: 13px; }
.telemetry-facts dt { color: var(--muted); }
.telemetry-facts dd { margin: 0; overflow-wrap: anywhere; }
.telemetry-about { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: var(--muted); }
.telemetry-payload { max-height: 360px; overflow: auto; padding: 10px 12px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--border-soft); font-size: 12px; margin: 0; }

/* ---------- One size for every control ----------
   Every field, dropdown and button in the console is one height, one text
   size and one corner, so a field and the button beside it read as one row
   on every page: 36px, or 28px for the small size of table rows, pagers
   and dense toolbars. A button's height is fixed rather than a minimum, so a
   flex row never stretches it to a field's. A field a page builds with no
   class (a drawer's form, a filter, a detector's settings) gets the same
   look rather than the browser's own. Last in the file on purpose: it is
   the one rule for these, and page rules that set a height of their own
   (search boxes, filter buttons, page sizes) are named here too. The
   workspace (data-shell="workspace") keeps its own composer and chips. */
:root { --ctl-h: 36px; --ctl-h-sm: 28px; --ctl-font: 14px; }
body:not([data-shell="workspace"]) :is(main.wrap, .drawer, .drawer-scrim, .dlg-scrim, .modal, .adp-modal)
  :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden],
                 [type=image], [type=submit], [type=button], [type=reset]),
      select:not([multiple]):not([size]), textarea):not([class]),
.input, select.input, .form-section .fields :is(input:not([type=checkbox]):not([type=radio]), select, textarea):not(.input),
.grd-search input, .cat-search, .llmp-input, .net-select, .lx-size, .secrets-per,
.toolbar .search-box input.input, .search-box input[type="search"] {
  box-sizing: border-box; height: var(--ctl-h); min-height: 0;
  padding: 0 12px; font-family: var(--sans); font-size: var(--ctl-font); line-height: 20px;
  color: var(--text); background-color: var(--input-bg);
  border: 1px solid var(--border); border-radius: var(--radius-control);
  transition: border-color 0.15s, box-shadow 0.15s;
}
body:not([data-shell="workspace"]) :is(main.wrap, .drawer, .drawer-scrim, .dlg-scrim, .modal, .adp-modal)
  :is(input, select, textarea):not([class]):hover:not(:focus):not(:disabled) { border-color: var(--input-hover-border); }
body:not([data-shell="workspace"]) :is(main.wrap, .drawer, .drawer-scrim, .dlg-scrim, .modal, .adp-modal)
  :is(input, select, textarea):not([class]):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
body:not([data-shell="workspace"]) :is(main.wrap, .drawer, .drawer-scrim, .dlg-scrim, .modal, .adp-modal)
  :is(input, textarea):not([class])::placeholder { color: var(--input-placeholder); opacity: 1; }
:is(main.wrap, .drawer, .drawer-scrim, .dlg-scrim, .modal, .adp-modal) select:not([class]),
select.input, .form-section .fields select:not(.input), .net-select, .lx-size, .secrets-per { cursor: pointer; padding-right: 8px; }
/* A text area: as tall as its content wants, at least four lines, and its
   padding all round (the old :is() rule lost its top padding). */
body:not([data-shell="workspace"]) :is(main.wrap, .drawer, .drawer-scrim, .dlg-scrim, .modal, .adp-modal) textarea:not([class]),
textarea.input, .form-section .fields textarea:not(.input), select[multiple].input {
  height: auto; min-height: 88px; padding: 8px 12px; resize: vertical;
}
/* The small size: a table row's field, a pager, a dense toolbar. */
.input-sm, .tbl-foot .tbl-size { height: var(--ctl-h-sm); padding: 0 8px; font-size: 13px; }

.btn, a.btn { height: var(--ctl-h); min-height: 0; padding: 0 14px; font-size: 13px; }
.btn-sm, a.btn-sm, .toolbar .btn-sm { height: var(--ctl-h-sm); min-height: 0; padding: 0 10px; font-size: 12px; }
.toolbar .btn { min-height: 0; }
/* Filter buttons and their kin: one height with the fields beside them. */
.filter-chip, .lx-filter, .grd-fbtn { height: var(--ctl-h); min-height: 0; }
/* A yes-or-no setting in a form: its box and its words on one line. */
.field.field-check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.field.field-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--text); }
/* The rest of the one size: the gateway routes' own dropdowns, a home card's
   Open button, and a text area whose class is empty (it is still a text
   area: as tall as its rows). */
.llmp-select { height: var(--ctl-h); padding: 0 8px 0 12px; font-size: 13px; border-radius: var(--radius-control); }
.llmp-select-sm { height: var(--ctl-h-sm); padding: 0 8px; font-size: 12px; }
.att-row .att-view { padding: 0 10px; }
body:not([data-shell="workspace"]) :is(main.wrap, .drawer, .drawer-scrim, .dlg-scrim, .modal, .adp-modal) textarea:is(:not([class]), [class=""]) {
  height: auto !important; min-height: 88px; padding: 8px 12px;
}
/* Segmented switches (Live / Draft, Managed / Self-managed, a panel's
   views): one height and one voice, sentence case, wherever they are. */
.seg-btn, .ac-seg .seg-btn {
  height: var(--ctl-h-sm); padding: 0 12px; display: inline-flex; align-items: center;
  font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none;
}
/* A row is one size: a small button in the same row as a field (Override
   beside the model, Add subagent beside its dropdown, Apply beside a
   filter) takes the field's height, and a footer with a full-size button
   (Save) brings its small ones (Backfill, Preview) to that size too. Table
   rows and pagers, which have no field and no full-size button beside them,
   keep the small size. */
:where(div, span, form, footer, p, li):has(> :is(.input, select, input[type="text"], input[type="number"], input[type="search"], input[type="url"], input[type="email"]):not([type="checkbox"]):not(.input-sm)) > :is(.btn-sm, a.btn-sm),
:where(div, span, form, footer, p):has(> .btn:not(.btn-sm)) > :is(.btn-sm, a.btn-sm) {
  height: var(--ctl-h); padding: 0 14px; font-size: 13px;
}
/* A search box keeps room for its magnifier: the one size above sets the
   padding of every field, and a search field's left edge holds the icon. */
.search-box input, .search-box input.input, .search-box input[type="search"],
.toolbar .search-box input.input, .grd-search input { padding-left: 32px; }
.telemetry-view { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 8px; }
.telemetry-view .panel-subtitle { margin-top: 0; }
.telemetry-score { margin: 4px 0 8px; font-size: 13px; }
.telemetry-score b { font-size: 22px; font-weight: 600; margin-right: 2px; }
.telemetry-reasons { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.telemetry-sev { font-weight: 600; font-size: 12px; }
.telemetry-sev.critical { color: var(--crit-ink); }
.telemetry-sev.warning { color: var(--warn-ink); }

/* ---------- Tabs: three kinds, one look each ----------
   Page tabs (a page's top-level sections: an agent's Settings, Triggers,
   Playground...; Evaluations' Datasets and runs...) are underlined text on
   a rule, 36px, wherever they are. View tabs (the second level: an agent's
   Sections, Context, Posture...; All agents' views) are smaller underlined
   text, 28px. Switches (Live / Markdown / Preview) are segmented buttons,
   28px (above). */
.adp-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0; margin: 0 0 12px; background: none;
  border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; box-shadow: none; }
.adp-tabs .opt, .page-tab {
  height: var(--ctl-h); display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
  margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  box-shadow: none; font: 500 13.5px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted);
}
.adp-tabs .opt:hover, .page-tab:hover { color: var(--text); }
.adp-tabs .opt.on, .page-tab.on { background: none; box-shadow: none; color: var(--text);
  border-bottom-color: var(--accent); font-weight: 600; }
.adp-tabs .opt b { font: inherit; }
.adp-views .opt, .lx-views .opt {
  height: var(--ctl-h-sm); display: inline-flex; align-items: center; padding: 0 2px;
  font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted);
  background: none; border: 0; border-radius: 0;
}
.adp-views .opt.on, .lx-views .opt.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--signal); }
/* The model picker, closed, is one control among the others: 36px, the
   model's name then its provider on one line. Opened, its list keeps the
   two-line rows that tell models apart. */
.ac-model-btn { height: var(--ctl-h); padding: 0 12px; }
.ac-model-btn .ac-model-left { display: flex; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0;
  overflow: hidden; white-space: nowrap; }
.ac-model-btn .ac-model-left .cell-sub { overflow: hidden; text-overflow: ellipsis; }
.ac-model-btn .ac-model-right .adp-chip { padding-top: 0; padding-bottom: 0; }