/*
 * modernAIse — UI package stylesheet
 * ===================================
 * Layers --mai-* on the platform tokens (--color-*, --radius-*, --space-*,
 * --fs-*, --shadow-*, --focus-ring, --duration-*) from
 * /app/static/design-tokens.css. No raw hex anywhere in this file: the
 * accent is --color-accent (terracotta), everything else is the monochrome
 * ramp, and light/dark/auto come from the token file's data-theme blocks.
 *
 * Colour = meaning only: status pills, readiness bars and level segments are
 * the only coloured marks, and every one of them carries text as well.
 *
 * Coloured TEXT uses an -ink token (--mai-accent-text, --mai-good-ink,
 * --mai-warn-ink, --mai-crit-ink, --mai-info-ink) — never the base fill
 * token, which is tuned for buttons/dots/bars and falls under 4.5:1 as text
 * on the dark canvas (redesign 2026-09-25, epic #2426 WP1).
 */
@import url("/app/static/design-tokens.css");
@import url("./ibm-plex.css");

:root {
  --mai-ground: var(--color-bg-subtle);
  --mai-rail: var(--color-bg);      /* rail + top bar — a third tone between ground and surface */
  --mai-surface: var(--color-bg-card);
  --mai-surface-2: var(--color-bg-inset); /* wells, inset rows, table headers — was --color-bg-subtle */
  --mai-ink: var(--color-fg);
  --mai-ink-2: var(--color-fg-muted);
  --mai-ink-3: var(--color-fg-dim);
  --mai-line: var(--color-border);
  --mai-line-2: var(--color-border-strong);
  --mai-accent: var(--color-accent);
  --mai-accent-hover: var(--color-accent-hover);
  --mai-accent-ink: var(--color-accent-fg);   /* text ON an accent-filled surface (white) */
  --mai-accent-text: var(--color-accent-ink); /* accent AS text/links — do not confuse with --mai-accent-ink above */
  --mai-accent-soft: var(--color-accent-soft);
  --mai-good: var(--color-success);
  --mai-good-ink: var(--color-success-ink);
  --mai-good-soft: color-mix(in srgb, var(--color-success) 14%, var(--mai-surface));
  --mai-warn: var(--color-warning);
  --mai-warn-ink: var(--color-warning-ink);
  --mai-warn-soft: var(--color-warning-tint);
  --mai-crit: var(--color-danger);
  --mai-crit-ink: var(--color-danger-ink);
  --mai-crit-soft: var(--color-danger-tint);
  --mai-info: var(--color-teal);
  --mai-info-ink: var(--color-teal-ink);
  --mai-info-soft: var(--color-teal-soft);
  --mai-seg-off: var(--color-seg-off);
  --mai-l0: var(--color-border-strong);
  --mai-l1: var(--color-fg-muted);
  --mai-l2: color-mix(in srgb, var(--color-accent) 55%, var(--mai-surface));
  --mai-l3: var(--color-accent);
  --mai-sans: "IBM Plex Sans", var(--font-sans);
  --mai-mono: "IBM Plex Mono", var(--font-mono);
  --mai-display: var(--font-sans);
  --mai-radius: var(--radius-md);
  --mai-radius-lg: var(--radius-lg);
  --mai-shadow: var(--shadow-sm);
  --mai-shadow-lg: var(--shadow-lg);
  --mai-focus: var(--focus-ring);
  --mai-max: 1440px;
  --mai-gutter: var(--space-6);
  --mai-t: var(--duration-fast) var(--easing-default);
  --mai-rail-w: 248px;
  --mai-rail-w-icon: 72px;
  --mai-topbar-h: 64px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--mai-ground);
  color: var(--mai-ink);
  font-family: var(--mai-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a.mai-link { color: var(--mai-accent-text); text-decoration: underline; text-underline-offset: 3px; }
a.mai-link:hover { color: color-mix(in srgb, var(--mai-accent-text) 82%, var(--mai-ink)); }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: var(--lh-tight); text-wrap: balance; }
h1 { font-family: var(--mai-display); font-size: var(--fs-xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-base); }
h3 { font-size: var(--fs-sm); }
p { margin: 0; }
button { font: inherit; color: inherit; }
svg { display: block; }
.mai-icon { flex: none; }
:focus-visible { outline: none; box-shadow: var(--mai-focus); border-radius: var(--radius-sm); }
.mai-num { font-family: var(--mai-mono); font-variant-numeric: tabular-nums; }
.mai-eyebrow { font-family: var(--mai-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mai-ink-3); }
.mai-muted { color: var(--mai-ink-2); }
.mai-small { font-size: var(--fs-xs); }
.mai-strong { font-weight: 600; }
.mai-block { display: block; }
.mai-inline { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mai-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mai-skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--mai-surface); color: var(--mai-ink); padding: var(--space-2) var(--space-4);
  border-radius: var(--mai-radius); box-shadow: var(--mai-shadow-lg);
}
.mai-skip:focus { top: var(--space-4); }

/* ── Form controls — used by every dialog and inline filter across the app ── */
.mai-scope { display: flex; align-items: center; gap: var(--space-2); }
.mai-select, .mai-input {
  font: inherit; color: var(--mai-ink); background: var(--mai-surface); border: 1px solid var(--mai-line-2);
  border-radius: var(--mai-radius); padding: var(--space-2) var(--space-3); min-height: 40px; max-width: 100%;
}
.mai-select { padding-right: var(--space-8); appearance: none; -webkit-appearance: none; font-weight: 500; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mai-ink-2) 50%), linear-gradient(135deg, var(--mai-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.mai-select:focus-visible, .mai-input:focus-visible { border-color: var(--mai-accent); }
textarea.mai-input { min-height: 80px; resize: vertical; }

/* ── Shell: left rail + main column ──────────────────────────────────────
 * Rail before the top bar in DOM order (keyboard order: rail -> top bar ->
 * content — the acceptance rule, and the natural read for a sidebar shell).
 * The rail is `position: sticky` inside a flex row so it pins to the
 * viewport without leaving the document flow (a `fixed` rail would need its
 * own scroll-shadow bookkeeping the main column already gets for free). */
.mai-shell { display: flex; align-items: stretch; min-height: 100vh; }
.mai-shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Rail ─────────────────────────────────────────────────────────────── */
.mai-rail {
  width: var(--mai-rail-w); flex: none; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-3); background: var(--mai-rail); border-right: 1px solid var(--mai-line);
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; z-index: 25;
}
.mai-rail-brand { display: inline-flex; align-items: center; padding: 0 var(--space-2); text-decoration: none; min-height: 32px; flex: none; }
.mai-rail-scope {
  display: flex; align-items: center; gap: var(--space-2); text-align: left;
  background: var(--mai-surface-2); border: 1px solid var(--mai-line); border-radius: var(--mai-radius);
  padding: var(--space-2); min-height: 56px;
}
button.mai-rail-scope { font: inherit; color: inherit; cursor: default; width: 100%; }
.mai-rail-scope-avatar {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--mai-accent); color: var(--mai-accent-ink); display: grid; place-items: center;
  font-weight: 600; font-size: var(--fs-xs);
}
.mai-rail-scope-avatar img { width: 100%; height: 100%; object-fit: contain; background: var(--mai-surface); }
.mai-rail-scope-body { display: grid; gap: 1px; min-width: 0; flex: 1; }
.mai-rail-scope-name { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mai-rail-scope-select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--mai-ink-2);
  font: inherit; font-size: var(--fs-xs); padding: 0; margin: 0; width: 100%; cursor: pointer; min-height: 20px;
}
.mai-rail-scope-select:focus-visible { outline: none; box-shadow: var(--mai-focus); border-radius: var(--radius-sm); }

.mai-rail-nav { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.mai-rail-group { display: flex; flex-direction: column; gap: 2px; }
.mai-rail-group-label {
  display: flex; align-items: center; gap: var(--space-1); font-family: var(--mai-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--mai-ink-3); padding: var(--space-1) var(--space-2);
}
.mai-rail-group-lock { display: inline-flex; color: var(--mai-ink-3); }
.mai-rail-group-lock[hidden] { display: none; }
.mai-rail-item {
  position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2);
  border-radius: var(--mai-radius); color: var(--mai-ink-2); text-decoration: none; min-height: 40px;
  font-size: var(--fs-sm);
}
.mai-rail-item:hover { background: var(--mai-surface-2); color: var(--mai-ink); }
.mai-rail-item[aria-current="page"] { background: var(--mai-accent-soft); color: var(--mai-ink); font-weight: 600; }
.mai-rail-item[aria-current="page"] .mai-rail-icon { color: var(--mai-accent-text); }
.mai-rail-icon { flex: none; color: var(--mai-ink-3); }
.mai-rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mai-rail-count {
  flex: none; font-family: var(--mai-mono); font-size: 11px; font-weight: 500; line-height: 1;
  color: var(--mai-accent-ink); background: var(--mai-accent); border-radius: var(--radius-pill);
  padding: 3px 7px; min-width: 18px; text-align: center;
}
.mai-rail-count[hidden] { display: none; }
.mai-rail-hint { flex: none; font-family: var(--mai-mono); font-size: 11px; color: var(--mai-warn-ink); }
.mai-rail-lock-ic { flex: none; color: var(--mai-ink-3); }
.mai-rail-lock-ic[hidden] { display: none; }
.mai-rail-item.is-locked { opacity: 0.68; }
.mai-rail-item.is-locked:hover { opacity: 1; }
.mai-rail-group.is-locked > .mai-rail-group-label { color: var(--mai-ink-3); }

.mai-rail-spacer { flex: 1; }
.mai-rail-foot { display: flex; flex-direction: column; gap: var(--space-2); }
.mai-rail-synthetic {
  display: flex; align-items: center; gap: var(--space-2); font-family: var(--mai-mono); font-size: 11px;
  color: var(--mai-warn-ink); background: var(--mai-warn-soft); border: 1px dashed var(--color-warning-border);
  border-radius: var(--mai-radius); padding: var(--space-2); line-height: 1.3;
}
.mai-rail-synthetic-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mai-warn); flex: none; }
.mai-rail-user {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1);
  background: none; border: 0; color: var(--mai-ink); text-align: left; width: 100%; border-radius: var(--mai-radius);
  min-height: 44px;
}
.mai-rail-user:hover { background: var(--mai-surface-2); }
.mai-rail-user-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--mai-surface-2); border: 1px solid var(--mai-line-2);
  display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none;
}
.mai-rail-user-body { display: grid; gap: 1px; min-width: 0; flex: 1; }
.mai-rail-user-email { font-size: var(--fs-xs); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mai-rail-user-role { font-size: 10px; color: var(--mai-ink-2); text-transform: capitalize; }

/* The account menu (My account / Sign out), opened from the rail's user
   button — a native <details> so it needs no focus-trap of its own. */
.mai-menu { position: relative; width: 100%; }
.mai-menu-summary { list-style: none; }
.mai-menu-summary::-webkit-details-marker { display: none; }
.mai-menu-list {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); min-width: 200px; display: grid; padding: var(--space-1);
  background: var(--mai-surface); border: 1px solid var(--mai-line); border-radius: var(--mai-radius); box-shadow: var(--mai-shadow-lg); z-index: 30;
}
.mai-menu-item { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: 0; background: none; border-radius: var(--radius-sm); text-decoration: none; min-height: 40px; cursor: pointer; color: var(--mai-ink); }
.mai-menu-item:hover { background: var(--mai-surface-2); }

/* Rail toggle (mobile drawer opener) lives in the top bar; hidden ≥720px. */
.mai-rail-toggle { display: none; width: 40px; padding: 0; flex: none; }
.mai-scrim {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--color-fg) 45%, transparent);
  z-index: 24; border: 0; padding: 0;
}
.mai-scrim[hidden] { display: none; }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.mai-topbar {
  position: sticky; top: 0; z-index: 20; height: var(--mai-topbar-h); flex: none;
  display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--mai-gutter);
  background: var(--mai-rail); border-bottom: 1px solid var(--mai-line);
}
.mai-crumbtrail {
  display: flex; align-items: center; gap: var(--space-1); font-family: var(--mai-mono); font-size: 12px;
  color: var(--mai-ink-2); flex-wrap: wrap; min-width: 0;
}
.mai-crumbtrail a { color: var(--mai-ink-2); text-decoration: none; }
.mai-crumbtrail a:hover { color: var(--mai-ink); text-decoration: underline; text-underline-offset: 2px; }
.mai-crumbtrail span[aria-current] { color: var(--mai-ink); }
.mai-topbar-spacer { flex: 1; }

.mai-jump { position: relative; display: none; }
.mai-jump-box {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; max-width: 420px; height: 40px;
  background: var(--mai-surface-2); border: 1px solid var(--mai-line); border-radius: var(--mai-radius);
  padding: 0 var(--space-3);
}
.mai-jump-box:focus-within { border-color: var(--mai-accent); box-shadow: var(--mai-focus); }
.mai-jump-ic { color: var(--mai-accent-text); flex: none; }
.mai-jump-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--mai-ink); font: inherit; font-size: var(--fs-sm); }
.mai-jump-input::placeholder { color: var(--mai-ink-3); }
.mai-jump-input:focus { outline: none; }
.mai-jump-key {
  flex: none; font-family: var(--mai-mono); font-size: 11px; color: var(--mai-ink-2);
  border: 1px solid var(--mai-line-2); border-radius: 5px; padding: 1px 6px;
}
.mai-jump-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow-y: auto;
  background: var(--mai-surface); border: 1px solid var(--mai-line); border-radius: var(--mai-radius);
  box-shadow: var(--mai-shadow-lg); z-index: 30; padding: var(--space-1); display: grid; gap: 1px;
}
.mai-jump-results[hidden] { display: none; }
.mai-jump-group { font-family: var(--mai-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mai-ink-3); padding: var(--space-2) var(--space-2) 2px; }
.mai-jump-option {
  display: flex; align-items: baseline; gap: var(--space-2); width: 100%; text-align: left; border: 0;
  background: none; color: var(--mai-ink); padding: var(--space-2); border-radius: var(--radius-sm); min-height: 36px;
  font-size: var(--fs-sm);
}
.mai-jump-option .mai-small { color: var(--mai-ink-2); }
.mai-jump-option:hover, .mai-jump-option.is-active { background: var(--mai-surface-2); }
.mai-jump-empty { padding: var(--space-3) var(--space-2); color: var(--mai-ink-2); font-size: var(--fs-xs); }

.mai-theme-switch { display: flex; gap: 2px; background: var(--mai-surface-2); border: 1px solid var(--mai-line); border-radius: var(--radius-pill); padding: 3px; flex: none; }
.mai-theme-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0;
  border-radius: var(--radius-pill); background: transparent; color: var(--mai-ink-2);
}
.mai-theme-btn[aria-pressed="true"] { background: var(--mai-surface); color: var(--mai-accent-text); box-shadow: 0 0 0 1px var(--mai-line-2); }
.mai-theme-btn:hover { color: var(--mai-ink); }

.mai-clock { display: flex; align-items: center; font-family: var(--mai-mono); font-size: 12px; color: var(--mai-ink-2); white-space: nowrap; flex: none; }

/* ── Page ─────────────────────────────────────────────────────────────── */
.mai-page { max-width: var(--mai-max); margin: 0 auto; padding: var(--space-5) var(--mai-gutter) var(--space-12); display: grid; gap: var(--space-5); align-content: start; width: 100%; }
.mai-page:focus { outline: none; }
/* Round 7: one container per route render (router.js) — keeps the page grid rhythm. */
.mai-route { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.mai-banner { display: flex; gap: var(--space-2); align-items: flex-start; max-width: var(--mai-max); margin: var(--space-4) auto 0; padding: var(--space-3) var(--space-4); background: var(--mai-info-soft); border: 1px solid var(--mai-line); border-radius: var(--mai-radius); color: var(--mai-ink); }
.mai-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.mai-page-head-main { display: grid; gap: var(--space-1); }
.mai-page-head-side { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.mai-lead { max-width: 68ch; color: var(--mai-ink-2); }
.mai-crumbs { display: flex; align-items: center; gap: var(--space-2); font-family: var(--mai-mono); font-size: var(--fs-xs); color: var(--mai-ink-3); flex-wrap: wrap; }
.mai-crumbs a { color: var(--mai-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.mai-crumbs a:hover { color: var(--mai-ink); }
.mai-stack { display: grid; gap: var(--space-5); }
.mai-stack-sm { display: grid; gap: var(--space-3); }
/* A tight two-line table cell (a pill over its own detail line, e.g. the
 * Decisions table's merged Priority/Confidence and Decide/reason cells,
 * round 3 SYNTHESIS #1/#3) — `mai-stack-sm`'s gap reads as two unrelated
 * rows at that scale. */
.mai-stack-xs { display: grid; gap: var(--space-1); }
.mai-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); }
.mai-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); }
.mai-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.mai-actions.is-end { justify-content: flex-end; }

/* ── Table pager (issue 26: pagination 25-50 for a long list) ───────────── */
.mai-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-1); flex-wrap: wrap; }
h1:focus, h1:focus-visible { outline: none; box-shadow: none; }

/* ── Locked-for-reference banner (USER DECISION 2026-09-25 item 3) ──────
 * Router-level, so every place honours the same visible lock without each
 * view having to build its own — the place is still fully OPEN to read;
 * only the reason is said out loud, and `ctx.locked`/`ctx.canMutate` do the
 * rest (a view's own mutating buttons already gate on `ctx.canMutate`, which
 * router.js overrides to false for the whole place while it is locked). */
.mai-locked-banner {
  display: flex; align-items: center; gap: var(--space-3); max-width: var(--mai-max); margin: var(--space-4) auto 0;
  padding: var(--space-3) var(--space-4); background: var(--mai-surface-2); border: 1px dashed var(--mai-line-2);
  border-radius: var(--mai-radius); color: var(--mai-ink-2);
}
.mai-locked-banner-ic { color: var(--mai-ink-3); flex: none; }

/* ── Panels ───────────────────────────────────────────────────────────── */
.mai-panel { background: var(--mai-surface); border: 1px solid var(--mai-line); border-radius: var(--mai-radius-lg); box-shadow: var(--mai-shadow); min-width: 0; }
.mai-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--mai-line); flex-wrap: wrap; }
.mai-panel-sub { display: block; }
.mai-panel-body { padding: var(--space-4); display: grid; gap: var(--space-4); }
.mai-panel-actions { display: flex; gap: var(--space-2); }

/* ── Tiles ────────────────────────────────────────────────────────────── */
.mai-tiles {
  display: grid; grid-template-columns: repeat(var(--mai-tile-cols, auto-fit), minmax(170px, 1fr)); gap: 1px;
  background: var(--mai-line); border: 1px solid var(--mai-line); border-radius: var(--mai-radius-lg); overflow: hidden;
}
.mai-tile { background: var(--mai-surface); padding: var(--space-3) var(--space-4); display: grid; gap: 2px; align-content: start; min-height: 84px; }
/* fxmet UX-review-20260925 issue 9: a linked tile (`href` given to tile()) — reset the
   anchor defaults and reuse the same clickable-row affordance `.mai-table tr.is-activatable` has. */
.mai-tile.is-link { color: inherit; text-decoration: none; cursor: pointer; transition: background var(--mai-t); }
.mai-tile.is-link:hover, .mai-tile.is-link:focus-visible { background: var(--mai-surface-2); }
/* round 6 #22: the window every tile counts ("now" / "30 d" / "QTD"), top right of the label. */
.mai-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.mai-tile-window { font-family: var(--mai-mono); font-size: var(--fs-xs); color: var(--mai-ink-3, var(--mai-ink-2)); white-space: nowrap; flex: none; }
/* round 6 #35: the last tile of a short final row spans the gap (tiles.js sets --mai-tile-span). */
.mai-tile[data-span] { grid-column: span var(--mai-tile-span, 1); }
@media (max-width: 1100px) {
  .mai-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .mai-tile[data-span] { grid-column: auto; }
}
.mai-tile-row { display: flex; align-items: baseline; gap: var(--space-2); }
.mai-tile-value { font-family: var(--mai-mono); font-size: var(--fs-2xl); font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mai-tile-value.is-small { font-size: var(--fs-base); font-family: var(--mai-sans); font-weight: 600; }
.mai-tile-delta { font-family: var(--mai-mono); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.mai-tile-delta.is-up { color: var(--mai-good-ink); }
.mai-tile-delta.is-down { color: var(--mai-crit-ink); }
.mai-tile-delta.is-warn { color: var(--mai-warn-ink); }
.mai-tile-spark { display: block; width: 100%; height: 34px; }
.mai-tile-detail { font-size: var(--fs-xs); color: var(--mai-ink-2); min-height: 1.25em; }
.mai-tile-detail.is-up { color: var(--mai-good-ink); }
.mai-tile-detail.is-down { color: var(--mai-crit-ink); }
.mai-tile-detail.is-warn { color: var(--mai-warn-ink); }
.mai-skeleton { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--mai-surface-2), var(--mai-line), var(--mai-surface-2)); background-size: 200% 100%; animation: mai-shimmer 1.4s linear infinite; }
@keyframes mai-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Tables ───────────────────────────────────────────────────────────── */
.mai-scroll-x { overflow-x: auto; max-width: 100%; }
.mai-table { width: 100%; border-collapse: collapse; }
.mai-table th, .mai-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle; border-top: 1px solid var(--mai-line); }
.mai-table thead th { border-top: 0; background: var(--mai-surface-2); font-family: var(--mai-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mai-ink-3); white-space: normal; overflow-wrap: normal; word-break: keep-all; min-width: 4.5em; }
.mai-table tbody th { font-weight: 500; }
/* Round 6 #31: wide tables fit 1440 px — tighter horizontal padding, headers wrap (above). */
.mai-table th, .mai-table td { padding-left: var(--space-3); padding-right: var(--space-3); }
.mai-table th:first-child, .mai-table td:first-child { padding-left: var(--space-4); }
.mai-table th:last-child, .mai-table td:last-child { padding-right: var(--space-4); }
.mai-cell-clip { display: block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mai-table .is-right { text-align: right; }
.mai-table.is-dense th, .mai-table.is-dense td { padding: var(--space-2) var(--space-4); }
.mai-table tr.is-activatable { cursor: pointer; transition: background var(--mai-t); }
.mai-table tr.is-activatable:hover { background: var(--mai-surface-2); }
.mai-table tr.is-activatable:focus-visible { box-shadow: inset var(--mai-focus); outline: none; }
.mai-table-empty { color: var(--mai-ink-2); padding: var(--space-6) var(--space-4); }
.mai-table.is-skeleton td { padding: var(--space-3) var(--space-4); }
.mai-table.is-matrix td, .mai-table.is-matrix th { border-left: 1px solid var(--mai-line); }
.mai-table.is-matrix td:first-child, .mai-table.is-matrix th:first-child { border-left: 0; }

/* Round 3 (SYNTHESIS #3 — "pin Decide on the right"): the Decisions table's
 * own act column stays visible when the row scrolls horizontally inside
 * `.mai-scroll-x`, instead of the review's own "Decide column is off-screen
 * at 1440px" finding. Above the 640px stacking breakpoint only — a stacked
 * mobile row already shows every column, Decide included, in document flow
 * (see the stacking block below), where a sticky offset would float a box
 * over the wrong content instead of pinning anything real. */
@media (min-width: 641px) {
  .mai-table .mai-col-pinned { position: sticky; right: 0; background: var(--mai-surface); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12); }
  .mai-table thead .mai-col-pinned { background: var(--mai-surface-2); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12); }
  /* Round 4 m3: a wide table scrolls inside its card with its first
   * (name) column held in place, so a row never loses what it is. */
  .mai-table .mai-col-sticky:first-child { position: sticky; left: 0; z-index: 1; background: var(--mai-surface); box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.12); }
  .mai-table thead .mai-col-sticky:first-child { background: var(--mai-surface-2); }
}
/* Round 4 B2: the Decisions queue toolbar (whose queue · layout · Mine) and
 * its department / agent tabs. */
.mai-queue-toolbar { padding: var(--space-3) var(--space-4) 0; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.mai-queue-tabs { padding: var(--space-3) var(--space-4) 0; }
.mai-name { display: grid; gap: 2px; min-width: 0; }
.mai-name-main { font-weight: 500; }
.mai-name-sub { font-size: var(--fs-xs); color: var(--mai-ink-2); }
.mai-cell-level { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.mai-agent-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }

/* ── Pills, dots, levels ──────────────────────────────────────────────── */
.mai-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 500; padding: 2px var(--space-2);
  border-radius: var(--radius-pill); background: var(--mai-surface-2); color: var(--mai-ink-2); white-space: nowrap; line-height: 1.5;
}
.mai-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mai-pill.is-plain::before { display: none; }
.mai-pill.is-good { background: var(--mai-good-soft); color: var(--mai-good-ink); }
.mai-pill.is-warn { background: var(--mai-warn-soft); color: var(--mai-warn-ink); }
.mai-pill.is-crit { background: var(--mai-crit-soft); color: var(--mai-crit-ink); }
.mai-pill.is-info { background: var(--mai-info-soft); color: var(--mai-info-ink); }
.mai-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--mai-l0); }
.mai-dot[data-level="1"] { background: var(--mai-l1); }
.mai-dot[data-level="2"] { background: var(--mai-l2); }
.mai-dot[data-level="3"] { background: var(--mai-l3); }
.mai-level { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2); white-space: nowrap; }
.mai-level-segs { display: inline-grid; grid-template-columns: repeat(4, 10px); gap: 2px; }
.mai-level-segs i { display: block; height: 8px; border-radius: 2px; background: var(--mai-seg-off); }
.mai-level-segs i.is-on { background: var(--mai-l0); }
.mai-level[data-level="1"] .mai-level-segs i.is-on { background: var(--mai-l1); }
.mai-level[data-level="2"] .mai-level-segs i.is-on { background: var(--mai-l2); }
.mai-level[data-level="3"] .mai-level-segs i.is-on { background: var(--mai-l3); }
.mai-level-text { font-size: var(--fs-xs); }
.mai-level-text b { font-family: var(--mai-mono); font-weight: 500; }
.mai-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); color: var(--mai-ink-2); }
.mai-legend-item { display: inline-flex; align-items: center; gap: 6px; }

/* ── Filter pills — a toggle-able pill row (aria-pressed), e.g. a table's
   "All / Needs attention / L3 and up" filter strip. ─────────────────────── */
.mai-filterbar { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mai-filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3);
  font-size: var(--fs-xs); font-weight: 500; color: var(--mai-ink-2); background: transparent;
  border: 1px solid var(--mai-line); border-radius: var(--radius-pill);
}
.mai-filter:hover { color: var(--mai-ink); border-color: var(--mai-line-2); }
.mai-filter[aria-pressed="true"] { color: var(--mai-ink); font-weight: 600; background: var(--mai-surface-2); border-color: var(--mai-line-2); }

/* ── Switch — role="switch" toggle, a track + knob (Auto-promote, node
   enabled, etc.) — replaces a raw checkbox wherever the control is a real
   on/off setting rather than a form field in a list. ────────────────────── */
.mai-switch {
  position: relative; display: inline-flex; align-items: center; width: 44px; height: 26px; flex: none;
  padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--mai-line-2); cursor: pointer;
  transition: background var(--mai-t);
}
.mai-switch[aria-checked="true"] { background: var(--mai-accent); }
.mai-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.mai-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mai-accent-ink);
  box-shadow: var(--mai-shadow); transition: left var(--mai-t);
}
.mai-switch[aria-checked="true"] .mai-switch-knob { left: 21px; }
.mai-switch-row { display: flex; align-items: center; gap: var(--space-3); }
.mai-switch-row-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.mai-switch-row-label { font-size: var(--fs-sm); font-weight: 500; }
.mai-switch-row-hint { font-size: var(--fs-xs); color: var(--mai-ink-2); }

/* ── Readiness bars, value bars ───────────────────────────────────────── */
.mai-axes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; min-width: 180px; }
.mai-axis { display: grid; gap: 3px; }
.mai-axis-k { font-family: var(--mai-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--mai-ink-3); text-transform: uppercase; }
.mai-axis-track { display: block; height: 6px; background: var(--mai-seg-off); border: 1px solid var(--mai-line); border-radius: 3px; overflow: hidden; }
.mai-axis-fill { display: block; height: 100%; background: var(--mai-good); }
.mai-axis-fill.is-mid { background: var(--mai-warn); }
.mai-axis-fill.is-low { background: var(--mai-crit); }
.mai-axis-fill.is-none { background: transparent; }
.mai-axis-v { font-size: 10px; color: var(--mai-ink-2); }
.mai-vp { display: grid; gap: 4px; min-width: 140px; }
.mai-vp-track { height: 6px; background: var(--mai-seg-off); border: 1px solid var(--mai-line); border-radius: 3px; overflow: hidden; }
.mai-vp-fill { height: 100%; background: var(--mai-accent); border-radius: 3px; }
.mai-vp-text { font-family: var(--mai-mono); font-size: var(--fs-xs); color: var(--mai-ink-2); font-variant-numeric: tabular-nums; }
.mai-vp.is-none .mai-vp-text { color: var(--mai-ink-3); }
/* fxmet UX-review-20260925 issue 12: colour a value-vs-plan bar by status against the PRO-RATA
   plan (never the same colour ahead or behind) — same up/warn/down ink as everywhere else. */
.mai-vp-fill.is-up { background: var(--mai-good-ink); }
.mai-vp-fill.is-warn { background: var(--mai-warn-ink); }
.mai-vp-fill.is-down { background: var(--mai-crit-ink); }
.mai-vp-pct.is-up { color: var(--mai-good-ink); }
.mai-vp-pct.is-warn { color: var(--mai-warn-ink); }
.mai-vp-pct.is-down { color: var(--mai-crit-ink); }

/* ── Handoffs, lists, facts ───────────────────────────────────────────── */
.mai-handoffs, .mai-list, .mai-checks, .mai-ladder, .mai-rules { list-style: none; margin: 0; padding: 0; }
.mai-handoff { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--mai-line); align-items: center; }
.mai-handoff:first-child { border-top: 0; }
.mai-handoff-flow { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mai-handoff-unit { font-weight: 500; }
.mai-handoff-arrow { color: var(--mai-accent-text); }
.mai-handoff-right { text-align: right; }
.mai-handoff-count { font-size: var(--fs-lg); font-weight: 500; }
.mai-list-item { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-top: 1px solid var(--mai-line); }
.mai-list-item:first-child { border-top: 0; }
.mai-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3) var(--space-6); }
.mai-fact { display: grid; gap: 2px; min-width: 0; }
.mai-agent-head { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: start; padding: var(--space-4); }
.mai-promo { display: grid; gap: var(--space-2); justify-items: end; max-width: 32ch; }
.mai-promo-reason { text-align: right; }

/* ── Ladder + checklist ───────────────────────────────────────────────── */
.mai-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.mai-ladder-step { position: relative; border: 1px solid var(--mai-line); border-radius: var(--mai-radius); padding: var(--space-3); display: grid; gap: 4px; align-content: start; min-height: 80px; background: var(--mai-surface); }
.mai-ladder-step.is-current { border-color: var(--mai-accent); box-shadow: inset 0 0 0 1px var(--mai-accent); }
.mai-ladder-step.is-over { opacity: 0.45; }
.mai-ladder-k { font-family: var(--mai-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--mai-ink-3); }
.mai-ladder-step.is-current .mai-ladder-k { color: var(--mai-accent-text); }
.mai-ladder-name { font-weight: 500; padding-right: 56px; }
.mai-ladder-tag { position: absolute; top: var(--space-2); right: var(--space-2); }
.mai-check { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--mai-line); }
.mai-check:first-child { border-top: 0; }
.mai-check-ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.mai-check.is-ok .mai-check-ic { background: var(--mai-good-soft); color: var(--mai-good-ink); }
.mai-check.is-no .mai-check-ic { background: var(--mai-crit-soft); color: var(--mai-crit-ink); }

/* ── Empty, error, boot ───────────────────────────────────────────────── */
.mai-empty { padding: var(--space-8) var(--space-6); display: grid; gap: var(--space-2); justify-items: start; max-width: 64ch; }
.mai-empty h2 { font-size: var(--fs-lg); }
.mai-empty p { color: var(--mai-ink-2); }
.mai-error { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); background: var(--mai-surface); border: 1px solid var(--color-danger-border); border-radius: var(--mai-radius-lg); }
.mai-error-ic { color: var(--mai-crit-ink); }
.mai-error-text { font-weight: 500; }
.mai-boot-error { max-width: 60ch; display: grid; gap: var(--space-3); padding: var(--space-8) 0; }
.mai-dialog-error:empty { display: none; }

/* ── Dialog + forms ───────────────────────────────────────────────────── */
.mai-dialog { border: 1px solid var(--mai-line); border-radius: var(--mai-radius-lg); padding: 0; width: min(560px, calc(100% - 32px)); background: var(--mai-surface); color: var(--mai-ink); box-shadow: var(--mai-shadow-lg); }
.mai-dialog::backdrop { background: color-mix(in srgb, var(--color-fg) 45%, transparent); }
/* hotfix (queue drawer): the detail sheet's sections and compact history tables */
.mai-sheet .mai-sheet-close { border-radius: var(--mai-radius-lg); }
.mai-sheet .mai-sheet-close:hover { background: color-mix(in srgb, var(--mai-ink) 8%, transparent); }
.mai-sheet-section { padding-top: var(--space-3); border-top: 1px solid var(--mai-line); }
.mai-sheet .mai-table-compact th, .mai-sheet .mai-table-compact td { padding: var(--space-2) var(--space-3); vertical-align: top; }
.mai-dialog-form { display: grid; gap: var(--space-4); padding: var(--space-6); }
.mai-field { display: grid; gap: var(--space-1); }
.mai-field label { font-weight: 500; }
.mai-guardrail-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr) auto; gap: var(--space-2); align-items: center; }

/* ── Toast ────────────────────────────────────────────────────────────── */
.mai-toast {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%); background: var(--mai-ink); color: var(--mai-ground);
  padding: var(--space-3) var(--space-4); border-radius: var(--mai-radius); font-weight: 500; box-shadow: var(--mai-shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--easing-default); max-width: calc(100% - 32px); z-index: 50;
}
.mai-toast[data-show] { opacity: 1; }

/* ── Login page ───────────────────────────────────────────────────────── */
.mai-login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); }
.mai-login-card { width: min(420px, 100%); background: var(--mai-surface); border: 1px solid var(--mai-line); border-radius: var(--mai-radius-lg); box-shadow: var(--mai-shadow-lg); padding: var(--space-8); display: grid; gap: var(--space-5); }
.mai-login-card .mai-wordmark { font-size: var(--fs-2xl); }
.mai-login form { display: grid; gap: var(--space-4); }
/* wadmin, 2026-09-25: `.mai-login form` above out-specifies the UA default
   `[hidden] { display: none }`, so every alternate login-page form (MFA,
   enrolment, forgot-password, recovery-code) rendered stacked and visible at
   once instead of one at a time — login.js's own hidden/show toggle never
   took visual effect. Same fix already applied to .mai-drawer/.mai-tab-count
   above for the identical reason. */
.mai-login form[hidden] { display: none; }
.mai-login .btn { width: 100%; }
.mai-login-alt { display: grid; gap: var(--space-2); }
.mai-login-alt:empty { display: none; }
.mai-login-msg { min-height: 1.5em; }

/* ── Wordmark — shared by the rail brand link and the login card ────────── */
.mai-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; white-space: nowrap; min-height: 40px; }
.mai-wordmark { font-family: var(--mai-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.mai-wordmark em { font-style: normal; color: var(--mai-accent-text); }
.mai-wordmark sup { font-size: 0.55em; font-weight: 600; vertical-align: super; margin-left: 1px; color: var(--mai-ink-2); }

/* ── The two faces of a place ─────────────────────────────────────────── */
.mai-faces { display: inline-flex; padding: 2px; gap: 2px; background: var(--mai-surface-2); border: 1px solid var(--mai-line); border-radius: var(--mai-radius); }
.mai-face {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3);
  font-size: var(--fs-xs); font-weight: 500; color: var(--mai-ink-2); text-decoration: none; border-radius: var(--radius-sm);
}
.mai-face:hover { color: var(--mai-ink); }
.mai-face.is-on { background: var(--mai-surface); color: var(--mai-ink); box-shadow: var(--mai-shadow); }

/* ── Sections inside a place ──────────────────────────────────────────── */
.mai-sections { display: flex; gap: var(--space-1); flex-wrap: wrap; border-bottom: 1px solid var(--mai-line); }
.mai-section {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3);
  font-weight: 500; color: var(--mai-ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mai-section:hover { color: var(--mai-ink); }
.mai-section.is-on { color: var(--mai-ink); border-bottom-color: var(--mai-accent); }
.mai-section-count { font-size: var(--fs-xs); color: var(--mai-ink-3); }
.mai-section.is-on .mai-section-count { color: var(--mai-ink-2); }

/* ── Honest gaps, warnings, dense forms ───────────────────────────────── */
.mai-warn { color: var(--mai-warn-ink); }
.mai-crit { color: var(--mai-crit-ink); }
.mai-nosurface {
  display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px dashed var(--mai-line-2);
  border-radius: var(--mai-radius); background: var(--mai-surface-2); max-width: 72ch;
}
.mai-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.mai-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3) var(--space-4); }
.mai-row-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.mai-code {
  font-family: var(--mai-mono); font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--mai-surface-2); border: 1px solid var(--mai-line); border-radius: var(--mai-radius); padding: var(--space-3); margin: 0;
}
.mai-tree { list-style: none; margin: 0; padding: 0; display: grid; }
.mai-tree ul { list-style: none; margin: 0; padding: 0 0 0 var(--space-5); display: grid; border-left: 1px solid var(--mai-line); }
.mai-tree-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3); border-radius: var(--mai-radius);
}
.mai-tree-row:hover { background: var(--mai-surface-2); }
.mai-tree-name { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.mai-tree-kind { font-family: var(--mai-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mai-ink-3); }

/* ── Home: attention list ─────────────────────────────────────────────── */
/* act → watch → info, in that order — the severity is the left rule AND a
   text badge, never colour alone. */
.mai-attention { list-style: none; margin: 0; padding: 0; display: grid; }
.mai-attention-item {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--space-3); align-items: start;
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--mai-line); border-left: 3px solid transparent;
}
.mai-attention-item:first-child { border-top: 0; }
.mai-attention-item[data-severity="act"] { border-left-color: var(--mai-crit); }
.mai-attention-item[data-severity="watch"] { border-left-color: var(--mai-warn); }
.mai-attention-item[data-severity="info"] { border-left-color: var(--mai-line-2); }
.mai-attention-badge {
  display: inline-flex; align-items: center; font-family: var(--mai-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-pill); white-space: nowrap;
}
.mai-attention-badge[data-severity="act"] { color: var(--mai-crit-ink); background: var(--mai-crit-soft); }
.mai-attention-badge[data-severity="watch"] { color: var(--mai-warn-ink); background: var(--mai-warn-soft); }
.mai-attention-badge[data-severity="info"] { color: var(--mai-ink-2); background: var(--mai-surface-2); }
.mai-attention-body { display: grid; gap: 2px; min-width: 0; }
.mai-attention-title { font-weight: 500; }
.mai-attention-title a { text-decoration: none; }
.mai-attention-title a:hover { text-decoration: underline; }
.mai-attention-detail { color: var(--mai-ink-2); }
/* The unit is its own chip (coordinator review, 2026-09-25 — it used to
   repeat as plain text right under a `detail` line that already named it
   once via the server's own "{unit}: …" prefix); `.mai-attention-meta` still
   holds it so age/due can join it later without a second row. */
.mai-attention-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
/* Round 4 M5: a merged row lists its reasons; platform jobs are one link. */
.mai-attention-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mai-attention-foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--mai-line); }
.mai-attention-money { color: var(--mai-ink-2); white-space: nowrap; align-self: center; }
.mai-attention-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; align-items: start; }

/* ── Home / Workbench: the child-unit grid (a number is a door) ─────────── */
.mai-unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
/* Command Centre's department grid pins 5 per row at desk width (the
   mockup's own layout); `auto-fill` still takes over below that so a
   narrower panel or a market with fewer children never leaves dead columns. */
.mai-unit-grid.is-5up { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1279px) {
  .mai-unit-grid.is-5up { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.mai-unit-card {
  display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--mai-surface);
  border: 1px solid var(--mai-line); border-radius: var(--mai-radius-lg); min-width: 0; transition: box-shadow var(--mai-t), border-color var(--mai-t);
}
.mai-unit-card.is-activatable:hover { border-color: var(--mai-line-2); box-shadow: var(--mai-shadow); }
.mai-unit-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.mai-unit-card-name { font-weight: 600; }
.mai-unit-card-sub { font-size: var(--fs-xs); color: var(--mai-ink-2); }
.mai-unit-card.is-dark { opacity: 0.72; }
.mai-unit-card-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.mai-unit-card-ready { display: grid; gap: 2px; }
.mai-unit-card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--fs-xs); color: var(--mai-ink-2); border-top: 1px solid var(--mai-line); padding-top: var(--space-2); }

/* ── Home: header pulse, trust bar, hand-offs, compact journey ──────────── */
.mai-journey-line { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mai-trust-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--mai-seg-off); }
.mai-trust-seg[data-level="0"] { background: var(--mai-l0); }
.mai-trust-seg[data-level="1"] { background: var(--mai-l1); }
.mai-trust-seg[data-level="2"] { background: var(--mai-l2); }
.mai-trust-seg[data-level="3"] { background: var(--mai-l3); }
.mai-trust-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.mai-trust-item { display: grid; gap: 2px; }
.mai-trust-count { font-size: var(--fs-lg); font-weight: 500; }
.mai-trust-foot { border-top: 1px solid var(--mai-line); padding-top: var(--space-2); }
.mai-handoff-row { display: grid; gap: 4px; padding: var(--space-2) 0; border-top: 1px solid var(--mai-line); }
.mai-handoff-row:first-child { border-top: 0; }
.mai-value-stream-head { font-size: var(--fs-xs); font-family: var(--mai-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mai-ink-3); margin: 0; }

/* ── The flow line: signal → play → decision → action → system ─────────── */
/* How a decision links to the actual system, made literal: a row of steps
   with an arrow between them. A step with nothing behind it (`is-dim`) is
   dashed, never dropped — the gap is shown, not hidden. */
.mai-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-1) var(--space-2); }
.mai-flow-step {
  display: grid; gap: 2px; align-content: center; padding: var(--space-2) var(--space-3); min-width: 108px;
  background: var(--mai-surface-2); border: 1px solid var(--mai-line); border-radius: var(--mai-radius);
}
.mai-flow-step.is-dim { border-style: dashed; color: var(--mai-ink-3); }
.mai-flow-step.is-live { border-color: var(--mai-accent); }
.mai-flow-k { font-family: var(--mai-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mai-ink-3); }
.mai-flow-v { font-size: var(--fs-xs); font-weight: 500; overflow-wrap: anywhere; }
.mai-flow-arrow { display: flex; align-items: center; color: var(--mai-accent-text); flex: none; }

/* ── Workbench: fail-closed parameter warning ────────────────────────── */
.mai-param-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--mai-line); }
.mai-param-row:first-child { border-top: 0; }
.mai-param-failclosed { color: var(--mai-crit-ink); font-weight: 500; }

/* ── Fleet controls (agents.js manage face, redesign 2026-09-25) ─────────
   "Needs you on this fleet" cards, the kill-switch scope switch, and the
   guardrail-replay histogram + slider. New classes only — every existing
   piece (panels, pills, tables, filter bar, level bar, facts) is reused
   unchanged from the shared set above. */
.mai-need-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.mai-need-card { background: var(--mai-surface-2); border: 1px solid var(--mai-line); border-radius: var(--mai-radius); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.mai-need-tag-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mai-need-tag { font-family: var(--mai-mono); font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: var(--radius-sm); }
.mai-need-tag[data-severity="act"] { color: var(--mai-crit-ink); background: var(--mai-crit-soft); }
.mai-need-tag[data-severity="watch"] { color: var(--mai-warn-ink); background: var(--mai-warn-soft); }
.mai-need-tag[data-severity="info"] { color: var(--mai-ink-2); background: var(--mai-surface); border: 1px solid var(--mai-line); }
.mai-need-claim { font-weight: 500; margin: 0; }
.mai-need-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }

/* Kill-switch scope: Whole fleet / Domain / One — same visual language as
   the theme switch (a segmented pill group), reused rather than forked. */
.mai-scope-switch { display: inline-flex; gap: 2px; background: var(--mai-surface-2); border: 1px solid var(--mai-line); border-radius: var(--mai-radius); padding: 3px; }
.mai-scope-btn { border: 0; background: transparent; color: var(--mai-ink-2); font-size: var(--fs-xs); padding: 6px 10px; border-radius: var(--radius-sm); min-height: 32px; }
.mai-scope-btn[aria-pressed="true"] { background: var(--mai-surface); color: var(--mai-ink); font-weight: 600; box-shadow: 0 0 0 1px var(--mai-line-2); }
.mai-scope-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Guardrail replay: a confidence histogram + a native range slider. */
.mai-hist-card { display: grid; gap: var(--space-2); }
.mai-hist-head { display: flex; align-items: baseline; justify-content: space-between; }
.mai-histogram { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.mai-hist-bar { flex: 1 1 auto; background: var(--mai-seg-off); border-radius: 2px 2px 0 0; min-height: 2px; }
.mai-hist-bar[data-pass="true"] { background: var(--mai-accent); }
.mai-range { width: 100%; accent-color: var(--mai-accent); }

/* Decision Specialists table: the confidence bar + fleet-threshold tick,
   and the 24h mini-sparkline cell. */
.mai-conf-cell { display: grid; gap: 4px; min-width: 110px; }
.mai-conf-track { position: relative; height: 6px; background: var(--mai-seg-off); border-radius: 3px; }
.mai-conf-fill { height: 100%; border-radius: 3px; background: var(--mai-good); }
.mai-conf-fill.is-warn { background: var(--mai-warn); }
.mai-conf-fill.is-crit { background: var(--mai-crit); }
.mai-conf-fill.is-plain { background: var(--mai-ink-3); }
.mai-conf-tick { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--mai-ink); transform: translateX(-1px); }
.mai-spark-cell { display: grid; gap: 2px; justify-items: end; }
.mai-mini-spark { display: block; }

/* ── Motion + responsive ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ≥720px: the jump box shows (it hides only in the true mobile drawer
   regime, alongside the breadcrumb, to keep the top bar from crowding). */
@media (min-width: 720px) {
  .mai-jump { display: block; flex: 1; max-width: 460px; }
}

/* <1100px: the rail collapses to icons + native-tooltip labels (still real
   text in the DOM — `aria-label` always carries it — CSS only clips the
   visible glyph so the accessible name and the tooltip text stay correct). */
@media (max-width: 1099px) {
  .mai-rail:not([data-open]) { width: var(--mai-rail-w-icon); padding-left: var(--space-2); padding-right: var(--space-2); }
  .mai-rail:not([data-open]) .mai-rail-scope-body,
  .mai-rail:not([data-open]) .mai-rail-label,
  .mai-rail:not([data-open]) .mai-rail-hint,
  .mai-rail:not([data-open]) .mai-rail-group-label span:not(.mai-rail-group-lock),
  .mai-rail:not([data-open]) .mai-rail-synthetic span,
  .mai-rail:not([data-open]) .mai-rail-user-body {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .mai-rail:not([data-open]) .mai-rail-item,
  .mai-rail:not([data-open]) .mai-rail-scope,
  .mai-rail:not([data-open]) .mai-rail-user { justify-content: center; }
  .mai-rail:not([data-open]) .mai-rail-count { position: absolute; top: 2px; right: 2px; font-size: 9px; padding: 2px 5px; }
}

@media (max-width: 980px) {
  .mai-split { grid-template-columns: 1fr; }
}

/* <720px: the rail becomes an off-canvas drawer, opened by the top bar's
   toggle button. It always renders full-width (labels shown) once open. */
@media (max-width: 719px) {
  .mai-rail-toggle { display: inline-flex; }
  /* Closed: off-screen AND `visibility: hidden`, so its links leave the tab
     order entirely (a `transform` alone keeps them focusable, just
     off-screen — a real trap for a keyboard user tabbing past a "closed"
     drawer). The visibility switch is delayed on CLOSE until the slide
     finishes, and instant on OPEN, so it never cuts the animation short. */
  .mai-rail {
    position: fixed; top: 0; left: 0; width: min(84vw, var(--mai-rail-w)); transform: translateX(-100%);
    visibility: hidden; transition: transform var(--duration-base) var(--easing-default), visibility 0s var(--duration-base);
    box-shadow: var(--mai-shadow-lg);
  }
  .mai-rail[data-open] {
    transform: translateX(0); visibility: visible;
    transition: transform var(--duration-base) var(--easing-default), visibility 0s;
  }
  :root { --mai-gutter: var(--space-4); }
  .mai-faces { width: 100%; }
  .mai-face { flex: 1; justify-content: center; }
  .mai-page { padding-top: var(--space-4); padding-bottom: var(--space-12); }
  .mai-ladder { grid-template-columns: 1fr 1fr; }
  .mai-agent-head { grid-template-columns: 1fr; }
  .mai-promo { justify-items: start; max-width: none; }
  .mai-promo-reason { text-align: left; }
  .mai-facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .mai-guardrail-row { grid-template-columns: 1fr; }
  .mai-attention-item { grid-template-columns: 1fr; }
  .mai-attention-actions { justify-content: flex-start; }
  .mai-param-row { grid-template-columns: 1fr; }
  .mai-crumbtrail { display: none; }
}
@media (max-width: 480px) {
  .mai-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .mai-ladder { grid-template-columns: 1fr; }
  .mai-unit-grid { grid-template-columns: 1fr; }
  .mai-flow { flex-direction: column; align-items: stretch; }
  .mai-flow-arrow { transform: rotate(90deg); justify-content: center; padding: 2px 0; }
}

/* ── Table stacking below phone width ─────────────────────────────────────
 * A `dataTable()` row (Inbox, Evidence, Admin, Dimensions, …) drops from a
 * fixed-width grid of columns to one column per row, each cell on its own
 * line with the header text ahead of it — the primary action (Approve /
 * Reject, Edit, Open) is then always in view, never past the scroll
 * container's right edge (2026-09-25 copy-trim pass; audit §7). `.is-matrix`
 * (estate.js's hand-built KPI grid, not a `dataTable()`) is excluded — it
 * carries no `data-label` for the CSS below to read, and a matrix genuinely
 * reads as a grid, not a list of records. `<thead>` stays in the DOM
 * (visually hidden, not `display:none`) so a screen reader still gets real
 * column headers, not just the generated `::before` text sighted users see.
 */
@media (max-width: 640px) {
  .mai-table:not(.is-matrix) { min-width: 0 !important; }
  .mai-table:not(.is-matrix) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .mai-table:not(.is-matrix) tbody,
  .mai-table:not(.is-matrix) tr,
  .mai-table:not(.is-matrix) td {
    display: block;
    width: 100%;
  }
  .mai-table:not(.is-matrix) tr {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--mai-line);
  }
  .mai-table:not(.is-matrix) tbody tr:first-child { border-top: 0; }
  .mai-table:not(.is-matrix) td {
    border-top: 0;
    padding: 3px 0;
    text-align: left !important;
  }
  .mai-table:not(.is-matrix) td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mai-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mai-ink-3);
  }
  .mai-table:not(.is-matrix) td:not([data-label])::before,
  .mai-table:not(.is-matrix) td[data-label=""]::before {
    content: none;
  }
  .mai-table:not(.is-matrix) td.mai-table-empty {
    padding: var(--space-6) 0;
  }
}

/* `dataTable({ compact: true })` — figure tables (legal Analyse, Model,
 * Funder pack). The stacked row above puts every figure on its own line: a
 * 10-column partner row became 20 lines and the page 4,600px tall. Here the
 * first cell (the row's name) keeps a line of its own and the figures sit
 * three to a line, label above value. Same cells, nothing hidden. */
@media (max-width: 640px) {
  .mai-table.is-compact:not(.is-matrix) tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-3);
    row-gap: 2px;
    padding: var(--space-2) var(--space-3);
  }
  .mai-table.is-compact:not(.is-matrix) td { padding: 1px 0; min-width: 0; overflow-wrap: anywhere; }
  .mai-table.is-compact:not(.is-matrix) td:first-child,
  .mai-table.is-compact:not(.is-matrix) td.mai-table-empty { grid-column: 1 / -1; }
  .mai-table.is-compact:not(.is-matrix) td:first-child::before { content: none; }
  .mai-table.is-compact:not(.is-matrix) td::before { font-size: 9px; letter-spacing: 0.04em; }
}

/* ── Native <select> option fix ────────────────────────────────────────────
   On Linux desktops with a dark OS theme (gnome adwaita-dark, kde breeze-dark)
   Chromium can render the popped-out <option> list in OS dark mode, producing
   illegible black-on-black until the user hovers a row. Pinning explicit
   theme bg + fg on every <option> overrides the OS chrome and matches the
   app's own theme, light or dark, instead of pinning a permanent light popup. */
select option {
  background: var(--mai-surface);
  color: var(--mai-ink);
}

/* Round 4 M8: an Organisation hand-off lane is a link into its own items. */
/* Round 6 #16: the WHOLE row is the door — flow and counts inside one anchor. */
.mai-handoff.is-link { display: block; padding: 0; }
.mai-handoff-link { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); color: inherit; text-decoration: none; }
.mai-handoff-link::after { content: '›'; color: var(--mai-ink-3); font-size: var(--fs-lg); }
.mai-handoff.is-link:hover { background: var(--mai-surface-2); cursor: pointer; }
.mai-handoff-link:focus-visible { outline: 2px solid var(--mai-focus, currentColor); outline-offset: 2px; }
/* Round 4 M17: market chips above a group table. */
.mai-market-chips { padding: var(--space-3) var(--space-4) 0; }