/* ════════════════════════════════════════════════════════════════════════
   GridFractAL — Refined UI

   Design system ported from the Claude Design handoff bundle
   ("GridFractAL Refined UI" — Bloomberg-meets-Linear: dense, data-forward,
   light-first, neutral palette, one cool accent).

   Sections:
     1. Design tokens (light/dark, density, accent hue, type)
     2. Base + reset
     3. App shell (sidebar, page chrome)
     4. Components (buttons, inputs, chips, cards, tabs, tables, utilities)
     5. Page modules (inbox, landscape, agents, continuum, plugins)
     6. Blazor framework chrome
     7. Legacy helpers (MudBlazor-era — progressively displaced)
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Theme the browser's native form controls (textarea, <select> option popups,
     scrollbars, date pickers) — without this, a bare control renders light-default
     (white bg) under dark theme while inheriting the light --text, making text
     invisible until selected. */
  color-scheme: light;
  /* Light */
  --bg: #fafaf9;
  --bg-2: #f5f5f4;
  --surface: #ffffff;
  --surface-2: #fafaf9;
  --surface-hover: #f5f5f4;
  --surface-active: #efeeec;
  --border: #ebe9e6;
  --border-strong: #d6d3d1;
  --border-subtle: var(--divider);
  --divider: #f0efed;

  --text: #18181b;
  --text-2: #57534e;
  --text-3: #a8a29e;
  --text-inv: #fafaf9;

  --accent-h: 252;
  --accent: oklch(0.52 0.16 var(--accent-h));
  --accent-hover: oklch(0.46 0.18 var(--accent-h));
  --accent-soft: oklch(0.96 0.025 var(--accent-h));
  --accent-border: oklch(0.85 0.06 var(--accent-h));
  --accent-text: oklch(0.42 0.18 var(--accent-h));

  --success: oklch(0.58 0.13 155);
  --success-soft: oklch(0.96 0.04 155);
  --success-text: oklch(0.42 0.14 155);

  --warn: oklch(0.72 0.15 70);
  --warn-soft: oklch(0.96 0.05 70);
  --warn-text: oklch(0.50 0.14 60);

  --danger: oklch(0.58 0.20 25);
  --danger-soft: oklch(0.96 0.04 25);
  --danger-text: oklch(0.48 0.18 25);

  --info: oklch(0.58 0.12 230);
  --info-soft: oklch(0.96 0.03 230);
  --info-text: oklch(0.42 0.14 230);

  --neutral-soft: oklch(0.96 0.005 250);
  --neutral-text: #57534e;

  /* Type */
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Density (compact default) */
  --row-h: 30px;
  --row-pad-y: 6px;
  --row-pad-x: 12px;
  --gap: 8px;
  --pad-page: 20px;
  --radius: 6px;
  --radius-lg: 10px;

  /* Unified header height — sidebar brand + page bar draw one line */
  --header-h: 48px;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;

  /* MudBlazor bridge — keep Mud components on the design accent, not purple */
  --mud-palette-primary: #5B5FE3;
}

[data-density="regular"] {
  --row-h: 36px;
  --row-pad-y: 9px;
  --row-pad-x: 14px;
  --gap: 10px;
  --pad-page: 24px;
}

[data-density="comfy"] {
  --row-h: 44px;
  --row-pad-y: 12px;
  --row-pad-x: 16px;
  --gap: 14px;
  --pad-page: 32px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a;
  --bg-2: #0f0f10;
  --surface: #131314;
  --surface-2: #18181a;
  --surface-hover: #1e1e20;
  --surface-active: #26262a;
  --border: #26262a;
  --border-strong: #3a3a3f;
  --divider: #1c1c1f;

  --text: #f4f4f5;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --text-inv: #18181b;

  --accent-soft: oklch(0.22 0.06 var(--accent-h));
  --accent-border: oklch(0.32 0.10 var(--accent-h));
  --accent-text: oklch(0.78 0.14 var(--accent-h));

  --success-soft: oklch(0.22 0.05 155);
  --success-text: oklch(0.78 0.14 155);
  --warn-soft: oklch(0.22 0.06 70);
  --warn-text: oklch(0.82 0.14 70);
  --danger-soft: oklch(0.22 0.06 25);
  --danger-text: oklch(0.78 0.18 25);
  --info-soft: oklch(0.22 0.05 230);
  --info-text: oklch(0.78 0.13 230);
  --neutral-soft: #1e1e20;
  --neutral-text: #a1a1aa;
}

/* ── 2. Base ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01", "ss03";
  font-variant-numeric: tabular-nums;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: default; background: none; border: 0; padding: 0; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--accent-soft); color: var(--accent-text); }

/* ── 3. App shell ───────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  /* Exact viewport height (not min-height) so the page-body's overflow:auto
     is the only scroll region — the shell stays fixed, content scrolls. */
  height: 100vh;
  overflow: hidden;
}
[data-density="compact"] .app { grid-template-columns: 220px 1fr; }

.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Guard a very short viewport — the nav scrolls within the shell
     rather than clipping; the shell itself never scrolls the page. */
  overflow-y: auto;
}

.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: var(--header-h);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.sb-logo {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--text);
  color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sb-brand-name {
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -0.005em;
}
.sb-brand-ws {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.sb-section {
  padding: 12px 8px 4px;
}
.sb-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  padding: 4px 10px 6px;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: var(--fs-md);
  color: var(--text-2);
  margin: 1px 0;
  position: relative;
  cursor: default;
  text-decoration: none;
}
.sb-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.sb-item.active {
  background: var(--surface-active);
  color: var(--text);
  font-weight: 500;
}
.sb-item.active::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px;
  width: 2px; background: var(--accent); border-radius: 1px;
}
.sb-item-icon {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--text-3);
  flex-shrink: 0;
}
.sb-item.active .sb-item-icon { color: var(--accent); }
/* Persistent descriptor after a brand-name nav label ("Landscape · sessions") — the
   scope-level story for names a first-timer can't decode (UX review D3/D4). */
.sb-item-desc { color: var(--text-3); font-size: 11px; font-weight: 400; }
.sb-item-desc::before { content: "· "; margin: 0 1px 0 5px; }
.sb-item-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.sb-item.has-alert .sb-item-count { color: var(--danger-text); background: var(--danger-soft); border-color: transparent; }

/* Collapsible admin group header: looks like an sb-item but is a button. */
.sb-group-header {
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  color: var(--text-2);
}
.sb-group-header:hover { background: var(--surface-hover); color: var(--text); }
.sb-group-header .sb-item-icon:first-child { color: var(--text-3); }

/* Children of a collapsible group: indented under the header. */
.sb-item.sb-subitem {
  padding-left: 30px;
}
.sb-item.sb-subitem.active::before { left: -8px; }

/* Nested plugin-nav subtree (Products schema nav, SQL Explorer object tree). Was
   referenced unstyled before the SQL Explorer tree — the indent guide makes 3+
   levels of nesting legible. Subtree items drop the flat-list 30px indent (the
   guide carries the depth instead). */
.sb-subtree {
  margin-left: 14px;
  padding-left: 4px;
  border-left: 1px solid var(--border-subtle);
}
.sb-subtree .sb-item.sb-subitem { padding-left: 8px; }

/* SQL Explorer navigator tree + object list pane */
.sqlx-list-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 6px 12px;
  border: 0; background: transparent; font: inherit; cursor: pointer;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-subtle);
}
.sqlx-list-row:hover { background: var(--surface-hover); color: var(--text); }
.sqlx-list-row.active { background: var(--surface-active); color: var(--text); }
.sqlx-list-schema { margin-left: auto; font-size: 10.5px; color: var(--text-3); flex-shrink: 0; }
.sqlx-tree-btn { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; cursor: pointer; }

.sb-footer {
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid var(--border);
}
/* The notification bell in the identity block.

   POSITIONED RELATIVE so the count can sit on the icon rather than beside it: the row is a flex
   line with the avatar and sign-out, and a badge that took its own width would push those around
   every time the number changed digits. */
.sb-notify {
  position: relative;
  flex: none;
}

.sb-notify-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 14px;
  padding: 0 3px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 14px;
  text-align: center;
  color: var(--bg);
  background: var(--accent);
  border-radius: 7px;
  /* Against the sidebar rather than the button, so it reads as attached to the icon even where the
     ghost button has no fill of its own. */
  box-shadow: 0 0 0 1.5px var(--surface);
}

/* Unread is carried by the badge; this keeps the icon itself from fading into the chrome when
   there is something to look at. */
.sb-notify.has-unread {
  color: var(--text);
}

.sb-user {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 5px;
  text-decoration: none;
  color: inherit;
}
.sb-user:hover { background: var(--surface-hover); text-decoration: none; }
.sb-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.sb-user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-user-name { font-size: 12px; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-email { font-size: 10px; color: var(--text-3); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user .btn { flex-shrink: 0; }

/* Page chrome */
.page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.page-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  height: var(--header-h);
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.page-bar > .page-title { flex-shrink: 0; }
.page-bar > .page-meta { min-width: 0; overflow: hidden; flex-shrink: 1; }
.page-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.page-crumb { color: var(--text-3); font-weight: 400; }
.page-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.page-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  display: flex; align-items: center; gap: 12px;
}
.page-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); }
.page-meta .dot.warn { background: var(--warn); }

.page-body {
  padding: var(--pad-page);
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

/* ── 4. Components ──────────────────────────────────────────────────────── */
/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  white-space: nowrap;
  height: 28px;
  letter-spacing: -0.005em;
  cursor: default;
}
.btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.btn:active { background: var(--surface-active); }
.btn .ico { width: 13px; height: 13px; }
.btn.primary {
  background: var(--text);
  color: var(--text-inv);
  border-color: var(--text);
}
.btn.primary:hover { background: #000; border-color: #000; }
[data-theme="dark"] .btn.primary { background: var(--text); color: #0a0a0a; }
[data-theme="dark"] .btn.primary:hover { background: #fff; }
.btn.accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-hover); border-color: transparent; }
.btn.danger { color: var(--danger-text); }
.btn.success { color: var(--success-text); }
.btn-sm { height: 24px; padding: 3px 8px; font-size: 11px; }
.btn-icon { width: 28px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 24px; }

.btn-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  padding: 2px;
  gap: 1px;
}
.btn-group .btn {
  border: 0; background: transparent; height: 24px; padding: 3px 8px;
  font-size: 11px;
  border-radius: 3px;
}
.btn-group .btn.on {
  background: var(--surface-active);
  color: var(--text);
  font-weight: 500;
}

/* Inputs */
.input {
  height: 28px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
  width: 100%;
}
.input:hover { border-color: var(--border-strong); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── a11y baseline (UI-A11Y) ───────────────────────────────────────────── */
/* Keyboard-visible focus for every interactive element; :focus-visible only,
   so mouse clicks don't paint outlines. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 1000;
  background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 13px;
}
.skip-link:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.input::placeholder { color: var(--text-3); }

.input-icon {
  position: relative;
}
.input-icon .ico {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--text-3);
  pointer-events: none;
}
.input-icon .input { padding-left: 28px; }

.select { appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; }

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-bottom-width: 1.5px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-3);
  background: var(--surface);
}

/* Chips / badges */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 500;
  border-radius: 4px;
  font-family: var(--mono);
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  color: var(--neutral-text);
  background: var(--neutral-soft);
}
.chip.line { background: transparent; border-color: var(--border); color: var(--text-2); }
.chip.accent { color: var(--accent-text); background: var(--accent-soft); }
.chip.success { color: var(--success-text); background: var(--success-soft); }
.chip.warn { color: var(--warn-text); background: var(--warn-soft); }
.chip.danger { color: var(--danger-text); background: var(--danger-soft); }
.chip.info { color: var(--info-text); background: var(--info-soft); }
.chip.solid-danger { background: var(--danger); color: white; }
.chip-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  font-size: 10px;
  border-radius: 3px;
  font-family: var(--mono);
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* Cards & panels */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.card-hd {
  padding: 12px 14px;
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title { font-weight: 600; font-size: var(--fs-md); }
.card-bd { padding: 12px 14px; }

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  align-items: stretch;
}
.tab {
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: -1px;
  cursor: default;
}
.tab:hover { color: var(--text-2); }
.tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.tab .count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.tab.active .count { color: var(--text-2); }

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th {
  text-align: left;
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}
.table td {
  padding: var(--row-pad-y) 12px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.table tr:hover td { background: var(--surface-hover); }
.table tr:last-child td { border-bottom: 0; }
.table .mono { font-family: var(--mono); font-size: 11.5px; }

/* Utilities */
.mono { font-family: var(--mono); }
.muted { color: var(--text-3); }
.dim   { color: var(--text-2); }
.ta-r  { text-align: right; }

/* Single-property utilities (R3 token sweep) — each replaces 10-116 identical literal
   inline styles. Literal-only inline styles that repeat are classes waiting to happen
   (UI-PATTERN-CATALOG.md); genuinely dynamic values stay inline. */
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.flex-1 { flex: 1; }
.p-0 { padding: 0; }
.mb-4  { margin-bottom: 4px; }
.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.ml-8  { margin-left: 8px; }
/* Form-control widths — the recurring compact input/select sizes. */
.w-80  { width: 80px; }
.w-90  { width: 90px; }
.w-100 { width: 100px; }
.w-110 { width: 110px; }
.w-120 { width: 120px; }
.w-130 { width: 130px; }
.w-140 { width: 140px; }
.w-150 { width: 150px; }
.w-160 { width: 160px; }
.w-180 { width: 180px; }
.bb-subtle { border-bottom: 1px solid var(--border-subtle); }

/* First-run workspace primer (Landscape, UX review D4) — a 3-step strip, not a tour. */
.primer {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-bottom: 12px;
}
.primer-steps {
  display: flex; flex: 1; gap: 8px; flex-wrap: wrap;
}
.primer-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0 8px;
  align-items: center;
  flex: 1; min-width: 180px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-2);
}
a.primer-step:hover { background: var(--surface-hover); text-decoration: none; }
.primer-step-n {
  grid-row: span 2;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 11px; font-weight: 600;
}
.primer-step.done .primer-step-n { background: var(--success-soft); color: var(--success-text); }
.primer-step-label { font-size: var(--fs-md); font-weight: 500; color: var(--text); }
.primer-step-sub { font-size: 11px; color: var(--text-3); }

/* /me/connections — stacked connection cards, one per channel plugin panel. */
.connections-list {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 640px;
}

/* Admin hub map (/admin) — grouped card sections mirroring the sidebar manifest. */
.admin-map {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.admin-map-card { padding: 14px 16px; }
.admin-map-entry {
  display: grid;
  grid-template-columns: 20px auto 1fr;
  gap: 2px 8px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-2);
}
.admin-map-entry:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.admin-map-entry-label { font-size: var(--fs-md); font-weight: 500; color: var(--text); white-space: nowrap; }
.admin-map-entry-desc { font-size: 11px; color: var(--text-3); }
@media (max-width: 720px) {
  .admin-map-entry { grid-template-columns: 20px 1fr; }
  .admin-map-entry-desc { grid-column: 2; }
}

/* Bulk-action bar — appears above a table when rows are selected (design bundle). */
.bulkbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  flex-wrap: wrap;
}

/* Side drawer for guided flows (cohort publish: Elect → Review → Result). */
.cohort-scrim {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10,10,12,.32);
}
[data-theme="dark"] .cohort-scrim { background: rgba(0,0,0,.55); }
.cohort-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0,0,0,.12);
}
.drawer-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cohort-steps { display: flex; border-bottom: 1px solid var(--border); }
.cohort-step {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 8px;
  font-size: 12px;
  color: var(--text-3);
  border-right: 1px solid var(--divider);
}
.cohort-step:last-child { border-right: 0; }
.cohort-step.on { color: var(--text); font-weight: 500; background: var(--surface-2); }
.cohort-step.done { color: var(--success-text); }
.cohort-step-n {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid; place-items: center;
  font-size: 10px; font-family: var(--mono);
}
.cohort-step.on .cohort-step-n { background: var(--accent); border-color: var(--accent); color: white; }
@media (max-width: 640px) { .cohort-drawer { width: 100vw; } }
.input-xs { font-size: 11px; height: 24px; }

/* Directory rich rows (Accounts list pane) — name-led with an avatar + meta line. */
.dir-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
}
.dir-row:hover { background: var(--surface-hover); }
.dir-row.active { background: var(--surface-active); }
.dir-row-name { font-weight: 500; font-size: 13px; }
.dir-row-meta {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 10.5px; margin-top: 2px;
}
.acct-avatar {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.row   { display: flex; align-items: center; gap: 8px; }
.col   { display: flex; flex-direction: column; }
.spacer{ flex: 1; }
.hr    { height: 1px; background: var(--border); border: 0; margin: 12px 0; }
.scroll{ overflow-y: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-wrap { white-space: nowrap; }
.uppercase-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* scrollbar */
.scroll::-webkit-scrollbar, .page-body::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb, .page-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid var(--bg); background-clip: content-box; }
.scroll::-webkit-scrollbar-thumb:hover, .page-body::-webkit-scrollbar-thumb:hover { background: var(--border-strong); border: 2px solid var(--bg); background-clip: content-box; }
.scroll::-webkit-scrollbar-track, .page-body::-webkit-scrollbar-track { background: transparent; }

/* command palette hint in header */
.cmdk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  background: var(--surface);
  min-width: 220px;
  height: 28px;
  cursor: default;
}
.cmdk:hover { border-color: var(--border-strong); }
.cmdk-kbd { margin-left: auto; display: flex; gap: 2px; }
@media (max-width: 1320px) {
  .cmdk { min-width: 0; }
  .cmdk > span:not(.cmdk-kbd):not(.kbd) { display: none; }
}
@media (max-width: 1100px) {
  .cmdk .cmdk-kbd { display: none; }
}

/* code block */
.code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
  gap: 8px;
}

.ico { display: inline-block; vertical-align: middle; }

/* toggle (used by plugins + tweaks) */
.toggle {
  display: inline-block;
  width: 30px; height: 18px; border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  position: relative; cursor: default;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--text-3);
  transition: left .15s, background .15s;
}
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle.on::after { left: 14px; background: white; box-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* ── 5. Page modules ────────────────────────────────────────────────────── */
/* Inbox */
.inbox-list {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.inbox-filters {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 6px; align-items: center;
}
.inbox-counts {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.inbox-count {
  flex: 1;
  padding: 8px 12px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
  cursor: default;
}
.inbox-count:hover { background: var(--surface-hover); }
.inbox-count.active { background: var(--surface); }
.inbox-count:last-child { border-right: 0; }
.inbox-count-n { font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.inbox-count-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.inbox-count.crit .inbox-count-n { color: var(--danger-text); }
.inbox-count.warn .inbox-count-n { color: var(--warn-text); }
.inbox-count.ok .inbox-count-n { color: var(--success-text); }
.inbox-count.info .inbox-count-n { color: var(--info-text); }

.inbox-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
  display: grid;
  /* 5 cols: bulk-checkbox · priority-rail · title-block · time · quick-action.
     The checkbox column was added for INBOX-BULK; without it the checkbox
     consumed the 3px rail column and shifted every row right. */
  grid-template-columns: auto 3px 1fr auto auto;
  column-gap: 10px;
  row-gap: 3px;
  position: relative;
  align-items: start;
  cursor: default;
}
.inbox-item:hover { background: var(--surface-hover); }
.inbox-item.active { background: var(--surface); }
.inbox-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--accent); border-radius: 1px;
}
.inbox-item-prio {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--border);
}
.inbox-item-prio.high { background: var(--danger); }
.inbox-item-prio.med  { background: var(--warn); }
.inbox-item-prio.low  { background: var(--text-3); }
.inbox-item-title {
  font-weight: 500;
  font-size: var(--fs-md);
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.3;
}
.inbox-item.read .inbox-item-title { font-weight: 400; color: var(--text-2); }
.inbox-item-meta {
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--mono);
  display: flex; gap: 6px; align-items: center;
  grid-column: 2 / 4;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.inbox-item-meta > .truncate { min-width: 0; }
.inbox-item-meta .sep { color: var(--border-strong); }
.inbox-item-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.inbox-item-time { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); align-self: start; white-space: nowrap; flex-shrink: 0; }

.inbox-detail { display: flex; flex-direction: column; min-height: 0; }
.inbox-detail-hd { padding: 16px 24px 12px; border-bottom: 1px solid var(--border); }
.inbox-detail-title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.inbox-detail-meta { display: flex; gap: 16px; font-size: 11px; color: var(--text-3); font-family: var(--mono); flex-wrap: wrap; }
.inbox-detail-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.inbox-detail-body { padding: 16px 24px; flex: 1; overflow-y: auto; }

/* per-source detail field rows (Jira/GitHub/Linear/… aggregate presenters) */
.fld-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--divider);
  font-size: 12px;
  align-items: baseline;
}
.fld-row:last-child { border-bottom: 0; }
.fld-row > .muted { font-size: 11px; }

/* The .fld-label / .fld-input pair the whole form layer is written against (GfField,
   SearchableSelect, StructuredEditorRenderer + 10 plugin pages — 133 references) was
   never defined: every one of them rendered as an unstyled browser-default control,
   and .ss-control-open's border-color applied to a border nothing declared. The
   control styling mirrors .input on purpose — same token set, same focus ring — so a
   .fld-input and an .input are indistinguishable. */
.fld-label { font-size: 12px; font-weight: 500; color: var(--text-2); }
.fld-input {
  height: 28px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
  width: 100%;
}
.fld-input:hover { border-color: var(--border-strong); }
.fld-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* A multi-line control must grow, not sit at the single-line height. */
textarea.fld-input { height: auto; padding: 6px 10px; line-height: 1.5; }
/* GfField's inline error: .fld-row is a GRID, so the component's flex-basis:100% put the
   message in the 140px label column. Span every column instead. */
.fld-error { grid-column: 1 / -1; font-size: 11px; color: var(--danger-text); }
/* Field hint — same full-width placement as the error; a hint squeezed under a 140px label is unreadable. */
.fld-help { grid-column: 1 / -1; font-size: 11px; color: var(--text-3); }

/* clickable id/link spans in the drill popup */
.drill-link {
  cursor: pointer;
  text-decoration: underline;
  color: var(--accent-text);
  font-size: 12px;
}
.drill-link:hover { color: var(--accent); }

/* Landscape */
.landscape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.session-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  min-height: 130px;
  cursor: default;
  text-decoration: none;
  color: inherit;
}
.session-card:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.session-card.active { border-color: var(--accent-border); }
.session-card.active::before {
  content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 2px;
  background: var(--accent); border-radius: 0 0 2px 2px;
}
.session-name {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 6px;
}
.session-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
}
.session-stat-n { font-family: var(--mono); font-size: var(--fs-md); font-weight: 500; }
.session-stat-l { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }

/* Agents — mission control */
.mc-rail {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0; background: var(--bg);
}
.mc-main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.mc-aside {
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0; background: var(--bg);
}
.mc-status {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  background: var(--bg);
}
.mc-status-item { display: flex; flex-direction: column; gap: 1px; }
.mc-status-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); font-weight: 600; }
.mc-status-v { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.mc-status-v.ok { color: var(--success-text); }
.mc-status-v.warn { color: var(--warn-text); }
.mc-agent {
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
  position: relative;
  cursor: default;
}
.mc-agent:hover { background: var(--surface-hover); }
.mc-agent.active { background: var(--surface); }
.mc-agent.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--accent);
}
.mc-agent-id { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--text); }
.mc-agent-meta { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin-top: 2px; }
.mc-agent-bar {
  margin-top: 8px;
  height: 3px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.mc-agent-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 2px;
}
.tl {
  padding: 16px 24px;
  overflow-y: auto;
  flex: 1;
}
.tl-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  position: relative;
  padding: 8px 0;
}
.tl-row::before {
  content: "";
  position: absolute;
  left: 102px;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}
.tl-row:last-child::before { display: none; }
.tl-time {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  text-align: right;
  padding-top: 2px;
}
.tl-marker {
  position: absolute;
  left: 98px;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  z-index: 1;
}
.tl-marker.tool { border-color: var(--info); }
.tl-marker.thinking { border-color: var(--accent); }
.tl-marker.synthesis { border-color: var(--success); background: var(--success); }
.tl-marker.error { border-color: var(--danger); background: var(--danger); }
.tl-content { padding-left: 24px; }
.tl-event-title {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.tl-event-body {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.tl-event-body.thinking { font-style: italic; color: var(--text-2); border-left: 2px solid var(--accent); }
.tl-event-body.tool {
  font-family: var(--mono);
  font-size: 11.5px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
}
.tl-event-body.synthesis {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--text);
}

/* Continuum */
.cont-canvas {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0/22px 22px;
  position: relative;
}
[data-theme="dark"] .cont-canvas {
  background:
    radial-gradient(circle at 1px 1px, #1a1a1d 1px, transparent 0) 0 0/22px 22px;
}
.cont-canvas-bar {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex; align-items: center; gap: 12px;
}
.cont-canvas-body { flex: 1; position: relative; overflow: hidden; }
.cont-result {
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
  position: relative;
  cursor: default;
}
.cont-result:hover { background: var(--surface-hover); }
.cont-result.active { background: var(--surface); }
.cont-result.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--accent);
}
.cont-result-key { font-family: var(--mono); font-size: 10.5px; color: var(--accent-text); font-weight: 500; }
.cont-result-title { font-size: var(--fs-sm); margin-top: 2px; letter-spacing: -0.005em; }
.cont-result-meta { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin-top: 4px; display: flex; gap: 8px; }
/* Plugin registry */
.plugin-row {
  display: grid;
  grid-template-columns: 220px 1fr 110px 80px 100px;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
}
.plugin-row:hover { background: var(--surface-hover); }
.plugin-name { font-weight: 500; }
.plugin-key { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.plugin-version { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.op-grid { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── 6. Blazor framework chrome ─────────────────────────────────────────── */
.blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
.blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4N0wyNjcuNTE4IDUzLjQ3OTJMMjg2LjcwNiA4Ny4yMzExQzI4Ny43MTEgODguNzUzMSAyODcuNTA2IDkwLjc3MTggMjg2LjIwNiA5Mi4wNzE4TDI4NS43NTcgOTIuNTIyNUwyODUuMjk2IDkyLjkwMjJMMjU1LjI5NiAxMTcuOTAyQzI1NC4xNzkgMTE4Ljg0NCAyNTIuNTYgMTE4Ljg0NCAyNTEuNDQzIDExNy45MDJMMjIxLjQ0MyA5Mi45MDIyQzIyMC4zMjcgOTEuOTYwNSAyMjAuMzI3IDkwLjM0MTUgMjIxLjQ0MyA4OS4zOTk4TDI1MS40NDMgNjQuMzk5OEMyNTIuNTYgNjMuNDU3OSAyNTQuMTc5IDYzLjQ1NzkgMjU1LjI5NiA2NC4zOTk4TDI2My41MDYgNzAuNzUwN0wyNjMuNTA2IDUxWiIgc3Ryb2tlPSIjRTAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiNGRkMxMDciLz48L2c+PC9zdmc+) no-repeat 1rem/1.8rem, #f7f7f7;
  padding: 1rem 1rem 1rem 3.7rem;
  color: black;
}

/* ── 7. Legacy helpers (MudBlazor-era — progressively displaced) ────────── */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.focus-workspace {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header" "content";
  gap: 0;
  height: 100vh;
}
.focus-header {
  grid-area: header;
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.focus-content { grid-area: content; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
/* Agent list panel inside the Inference tab */
.focus-inference-agents {
  width: 240px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.focus-content .mud-tabs { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.focus-content .mud-tabs-panels { flex: 1; overflow: hidden; min-height: 0; }
.focus-content .mud-tab-panel { height: 100%; display: flex; flex-direction: column; }
.focus-content .mud-tab-panel > div { flex: 1; min-height: 0; }

.agent-card-compact {
  padding: 8px 10px; margin-bottom: 4px; border-radius: 4px;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.agent-card-compact:hover { background: var(--surface-hover); border-left-color: var(--accent-border); }
.agent-card-compact.selected { background: var(--accent-soft); border-left-color: var(--accent); }

.focus-header-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--text-2); }

.drill-popup-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
  z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.drill-popup-content {
  width: 85%; max-width: 1000px; max-height: 85vh;
  overflow-y: auto;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .12);
  padding: 22px 24px;
}
.drill-popup-content .graph-canvas-popup {
  width: 100%; height: calc(85vh - 280px); min-height: 350px;
  border: 1px solid var(--border); border-radius: 4px; margin-top: 0.5rem; position: relative;
}
.drill-popup-content .graph-canvas-popup svg text { font-size: 11px; }

/* Inline mode — the drill detail rendered as a side panel (Continuum)
   rather than a modal: no scrim, no fixed positioning, fills its column. */
.drill-popup-overlay.inline {
  position: static;
  inset: auto;
  background: none;
  z-index: auto;
  display: block;
  padding: 0;
  height: 100%;
}
.drill-popup-overlay.inline .drill-popup-content {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cont-result.selected {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* ── Toast host (replaces MudBlazor's Snackbar) ───────────────────────── */
.toast-host {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1100;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 240px;
  max-width: 380px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  animation: gf-toast-in 0.18s ease-out;
}
.toast .icon { display: flex; margin-top: 1px; flex-shrink: 0; }
.toast.success { border-left-color: var(--success); }
.toast.warn,
.toast.warning { border-left-color: var(--warn); }
.toast.danger,
.toast.error { border-left-color: var(--danger); }
.toast.info { border-left-color: var(--info); }
@keyframes gf-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.inbox-row-title {
  font-size: 0.875rem; font-weight: 500; line-height: 1.25; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; word-break: break-word;
}
.inbox-row-summary {
  font-size: 0.78rem; line-height: 1.3; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; word-break: break-word;
}
.inbox-raw-payload {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); padding: 8px; border-radius: 4px;
  max-height: 400px; overflow: auto; font-size: 0.78rem;
  font-family: var(--mono); white-space: pre; margin: 0;
}

.graph-tooltip {
  position: absolute; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 10001;
  max-width: 300px; font-size: 13px; pointer-events: auto;
}
.graph-tooltip .graph-tooltip-meta { color: var(--text-2); font-size: 11px; }
.graph-tooltip a.graph-tooltip-drill { color: var(--accent-text); font-size: 12px; text-decoration: none; font-weight: 500; }
.graph-tooltip a.graph-tooltip-drill:hover { text-decoration: underline; }
.graph-node-center circle { stroke: #f59e0b; stroke-width: 3px; }

/* ── Graph legend (above the canvas) + edge tooltip ──────────────────── */
.graph-legend {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 10px; margin: 6px 0 8px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px; color: var(--text-2);
}
.graph-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.graph-legend-marker {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; flex-shrink: 0;
}
.graph-edge-tooltip {
  position: absolute; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18); z-index: 10000;
  max-width: 220px; font-size: 11px; line-height: 1.5;
  pointer-events: none;
}
.graph-edge-tooltip strong { color: var(--text); font-weight: 600; }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.status-dot.online { background-color: var(--success); }
.status-dot.offline { background-color: var(--danger); }
.status-dot.connecting { background-color: var(--warn); animation: pulse 1.5s ease-in-out infinite; }
.status-dot.inferring { background-color: var(--info); animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 6px rgba(59, 130, 246, 0.5); }

.agent-card {
  background: var(--surface-2); border-radius: 6px;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.agent-card:hover { background: var(--surface-hover); border-left-color: var(--accent-border); }
.agent-card-selected { background: var(--accent-soft); border-left-color: var(--accent); }

.inference-chat-header { padding: 12px 16px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.inference-chat-scroll { flex: 1; overflow-y: auto; padding: 8px 0; }
.chat-msg { padding: 10px 14px; margin: 6px 8px; border-radius: 6px; border-left: 3px solid transparent; }
.chat-msg-instruction { border-left-color: var(--accent); background: var(--accent-soft); }
.chat-msg-thinking { border-left-color: var(--text-3); background: var(--surface-2); }
.chat-msg-tool { border-left-color: var(--info); background: var(--info-soft); padding: 8px 14px; }
.chat-msg-response { border-left-color: var(--success); background: var(--success-soft); }
.chat-msg-synthesis { border-left-color: var(--success); background: var(--success-soft); border-left-width: 4px; }

.inference-runs-sidebar {
  width: 200px; min-width: 200px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.run-item { padding: 8px 12px; cursor: default; border-bottom: 1px solid var(--border); transition: background 0.15s ease; }
.run-item:hover { background: var(--surface-hover); }
.run-item-selected { background: var(--accent-soft); border-left: 3px solid var(--accent); padding-left: 9px; }

.loading-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: loading 1.5s ease-in-out infinite; border-radius: 4px;
}

/* ── Tweaks panel ───────────────────────────────────────────────────────── */
.twk-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 1200;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text); color: var(--text-inv);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  cursor: default;
}
.twk-fab:hover { transform: translateY(-1px); }
.twk {
  position: fixed; right: 16px; bottom: 60px; z-index: 1200;
  width: 264px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  overflow: hidden;
}
.twk-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
}
.twk-hd b { font-size: var(--fs-md); font-weight: 600; }
.twk-close {
  width: 22px; height: 22px; border-radius: 5px;
  color: var(--text-3); font-size: 12px; cursor: default;
}
.twk-close:hover { background: var(--surface-hover); color: var(--text); }
.twk-bd { padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.twk-sec {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-3); padding: 10px 0 2px;
}
.twk-line {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--text-2); min-height: 24px;
}
.twk-swatches { display: flex; gap: 6px; }
.twk-sw {
  width: 22px; height: 22px; border-radius: 6px; cursor: default;
  border: 1px solid rgba(0,0,0,.12);
}
.twk-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); }
.twk-seg {
  display: flex; padding: 2px; gap: 1px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.twk-seg button {
  flex: 1; padding: 4px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 500; color: var(--text-3);
  text-transform: capitalize; cursor: default;
}
.twk-seg button:hover { color: var(--text-2); }
.twk-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ── Form layouts (reused by admin pages) ─────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
}
.form-row:last-child { border-bottom: 0; }
.form-row .label { color: var(--text-2); font-weight: 500; }

.banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--info-soft);
  color: var(--info-text);
  font-size: 12px;
  border: 1px solid transparent;
  line-height: 1.5;
}
.banner.warn { background: var(--warn-soft); color: var(--warn-text); }
.banner.success { background: var(--success-soft); color: var(--success-text); }
.banner.danger { background: var(--danger-soft); color: var(--danger-text); }
.banner .icon { flex-shrink: 0; margin-top: 1px; }

/* ── Stat card ────────────────────────────────────────────────────────── */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.stat-l {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.stat-v {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-v.mono { font-family: var(--mono); }
.stat-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.stat.tone-accent  { border-color: var(--accent-border); background: var(--accent-soft); }
.stat.tone-accent .stat-l { color: var(--accent-text); }
.stat.tone-success { border-color: transparent; background: var(--success-soft); }
.stat.tone-success .stat-l, .stat.tone-success .stat-v { color: var(--success-text); }

/* ── Modal ────────────────────────────────────────────────────────────── */
.modal-scrim {
  position: fixed; inset: 0;
  background: rgba(15, 15, 18, 0.32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 100;
}
[data-theme="dark"] .modal-scrim { background: rgba(0,0,0,.55); }
.modal {
  width: min(420px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden;
}
.modal-hd {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; gap: 8px;
}
.modal-title { font-size: 14px; font-weight: 600; }
.modal-bd { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.modal-ft { padding: 12px 16px; border-top: 1px solid var(--divider); display: flex; gap: 6px; justify-content: flex-end; background: var(--surface-2); }

/* ── Code-ish row used by Source Replay ──────────────────────────────── */
.replay-item {
  padding: 6px 12px;
  border-bottom: 1px solid var(--divider);
  font-size: 12.5px;
  display: grid;
  grid-template-columns: 100px 130px 1fr 110px;
  gap: 12px;
  align-items: baseline;
}
.replay-item:last-child { border-bottom: 0; }
.replay-item .k { font-family: var(--mono); font-weight: 500; color: var(--text); font-size: 11.5px; }
.replay-item .ref { font-family: var(--mono); color: var(--text-3); font-size: 11px; }
.replay-item .t { color: var(--text-2); }
.replay-item .s { justify-self: end; }

/* ── Main layout: topbar shell ─────────────────────────────────── */
/* Exact viewport height (not min-height) so the page-main's overflow:auto
   is the only scroll region — the shell, topbar, and sidebar footer stay
   pinned; only the page content scrolls. Mirrors the pre-cutover .app
   pattern. */
.app-next { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app-next-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.app-next-topbar .brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.app-next-topbar .brand-logo { font-weight: 700; font-size: 14px; color: var(--accent-text); }
.app-next-topbar .brand-name { font-weight: 600; font-size: 13px; color: var(--text); }
.app-next-topbar .brand-tag { font-size: 11px; color: var(--text-3); }
/* min-width:0 — without it a flex item's min-width:auto refuses to shrink below the
   full pill row, so the mobile overflow-x:auto never engages and the row shoves
   .topbar-right off-screen instead of scrolling. */
.topnav { display: flex; gap: 4px; min-width: 0; }
.topnav-anchor {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  text-decoration: none; color: var(--text-2);
  font-size: 13px; white-space: nowrap;
  flex-shrink: 0;
}
.topnav-anchor:hover { background: var(--surface-hover); color: var(--text); }
.topnav-anchor.active { background: var(--surface-active); color: var(--text); font-weight: 600; }
/* The Apps ▾ menu-pill is a <button>; keep it visually identical to the <a> pills. */
button.topnav-anchor { border: 0; background: transparent; font: inherit; cursor: pointer; }
button.topnav-anchor.active { background: var(--surface-active); }

/* Apps ▾ menu-pill dropdown (≥4 apps — UX review D3). Anchored under the top bar. */
.topnav-apps-menu {
  position: absolute; top: 44px; z-index: 60;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 6px;
}

/* Mobile scope switcher button — hidden on desktop; the 860px @media swaps it in
   for the pill row (UX review D3: one button naming the current scope, a bottom
   sheet to switch; the hamburger stays within-scope nav — two levels, two gestures). */
.scope-btn {
  display: none;
  align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  min-width: 0;
}
.scope-sheet-scrim {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10,10,12,.32);
}
[data-theme="dark"] .scope-sheet-scrim { background: rgba(0,0,0,.55); }
.scope-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 121;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(0,0,0,.2);
}
.scope-sheet .sb-item { min-height: 42px; }

.topnav-badge {
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 1px 6px;
  font-size: 11px; font-weight: 600;
}
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.app-next-body { display: flex; flex: 1; min-height: 0; }
/* Sidebar is flex-column with .sb-scroll absorbing nav overflow so .sb-footer
   stays locked to the bottom regardless of how many menu items render. */
.app-next-side {
  width: 240px; flex-shrink: 0; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.sb-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.app-next-main { flex: 1; min-width: 0; overflow: auto; }
.otp-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px; background: var(--warn-soft);
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--warn-text);
}
.user-chip { display: flex; align-items: center; gap: 6px; }
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}

/* Landscape list-item styles (rendered inside .ld-list-scroll slot) */
.landscape-list-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: transparent;
  cursor: pointer; border-radius: 6px; margin: 2px 8px;
  width: calc(100% - 16px);
}
.landscape-list-item:hover { background: var(--surface-hover); }
.landscape-list-item.is-selected { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.landscape-list-key { font-size: 12px; font-weight: 600; color: var(--text); font-family: var(--mono); }
.landscape-list-meta { font-size: 11px; color: var(--text-2); display: flex; gap: 6px; margin-top: 2px; }
.landscape-list-title { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* ── Unified list-detail layout for the 4 canonical GF views ──── */
/* .page-full: a full-height flex column that pins PageBar at the top
   and lets .ld fill the rest. Height = viewport minus the topbar so
   the app-next-main scroll container does not double-scroll. */
.page-full {
    height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ld {
    display: grid;
    grid-template-columns: var(--ld-list-width, 400px) 1fr;
    flex: 1;
    min-height: 0;
    background: var(--surface);
}
.ld-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border);
    overflow: hidden;
}
/* Grid templates live here (not inline) so the component's inline style stays a
   constant `--ld-list-width`, which gf-splitter.js overrides without Blazor
   clobbering it on a detail toggle. Base .ld (above) = list + detail. */
/* Single-column mode (DetailVisible=false): list is full width; the pane-divider
   border would hang as a stray vertical line at the right edge — drop it too. */
.ld--single { grid-template-columns: 1fr; }
.ld--single .ld-list { border-right: none; }
/* Resizable mode: list + 7px divider column + detail. */
.ld--resizable { grid-template-columns: var(--ld-list-width, 400px) 7px 1fr; }
.ld--resizable .ld-list { border-right: none; } /* the divider draws the line */

/* Resizable divider (its own 7px grid column between list and detail). The
   1px visual line is the content-box; the 3px transparent borders widen the
   grab zone. */
.ld-divider {
    cursor: col-resize;
    background-color: var(--border);
    background-clip: content-box;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    transition: background-color .12s ease;
    touch-action: none; /* let the pointer drag own horizontal gestures */
}
.ld-divider:hover, .ld-divider:active { background-color: var(--accent, var(--text-2)); }

/* Mobile back affordance for the single-pane swap (see the ≤720px block).
   Rendered only by opted-in ListDetailLayout callers; hidden on desktop. */
.ld-back-row { display: none; }
.ld-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; margin: 8px 12px 0;
    font-size: 12px; font-weight: 500;
    color: var(--text-2);
    background: transparent; border: none; border-radius: 5px;
    cursor: pointer;
}
.ld-back:hover { background: var(--surface-hover); color: var(--text); }

/* Inbox list pager (footer under the rows when the filtered set exceeds one page). */
.inbox-pager {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 10px 12px; border-top: 1px solid var(--border);
    position: sticky; bottom: 0; background: var(--surface);
}
.inbox-pager-label { font-size: 11.5px; color: var(--text-3); min-width: 92px; text-align: center; }
.ld-list-header { flex-shrink: 0; padding: 12px; border-bottom: 1px solid var(--border); }
.ld-list-scroll { flex: 1; overflow-y: auto; min-height: 0; }
/* Generic sticky pager footer for a paged .ld-list-scroll (SQL Explorer object list). */
.ld-pager {
    position: sticky; bottom: 0;
    padding: 8px 10px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.ld-detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.ld-detail-header { flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ld-detail-scroll { flex: 1; overflow: auto; min-height: 0; min-width: 0; }
.ld-empty {
    padding: 64px 32px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--text-3);
}


/* GfMarkdown — rendered markdown for inbox/experience content (Wave 2) */
.gf-md { font-size: 12.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.gf-md.collapsed { overflow: hidden; position: relative; }
.gf-md.collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(transparent, var(--surface)); }
.gf-md p { margin: 0 0 8px; }
.gf-md h1, .gf-md h2, .gf-md h3, .gf-md h4 { font-size: 13px; font-weight: 600; margin: 10px 0 6px; }
.gf-md ul, .gf-md ol { margin: 4px 0 8px; padding-left: 20px; }
.gf-md li { margin: 2px 0; }
.gf-md code { font-family: var(--mono); font-size: 11.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.gf-md pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 6px 0 10px; }
.gf-md pre code { background: transparent; padding: 0; font-size: 11.5px; }
.gf-md blockquote { border-left: 3px solid var(--border); margin: 6px 0; padding: 2px 0 2px 10px; color: var(--text-2); }
.gf-md table { border-collapse: collapse; margin: 6px 0 10px; font-size: 12px; }
.gf-md th, .gf-md td { border: 1px solid var(--border); padding: 4px 8px; }
.gf-md a { color: var(--accent); }
.gf-md img { max-width: 100%; }
.gf-md hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }

/* ════════════════════════════════════════════════════════════════════════
   8. Responsive / mobile (0c sweep)
   Desktop (above the breakpoints) is byte-for-byte unchanged — every rule here
   lives behind a @media query or targets the mobile-only hamburger/scrim.
   Reuses the existing design tokens; introduces no parallel system.
   ════════════════════════════════════════════════════════════════════════ */

/* Mobile-only drawer toggle. Hidden on desktop; the @media below reveals it. */
.nav-hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  padding: 0; margin-right: 4px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-2); cursor: pointer;
  flex-shrink: 0;
}
.nav-hamburger:hover { background: var(--surface-hover); color: var(--text); }

/* Scrim behind the open drawer; only rendered (in markup) while open. */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(0,0,0,.32);
}
[data-theme="dark"] .drawer-scrim { background: rgba(0,0,0,.55); }

/* ── Off-canvas sidebar drawer + mobile table scroll ────────────────────── */
@media (max-width: 860px) {
  .nav-hamburger { display: inline-flex; }
  /* Scope switching on phones is the bottom sheet, not a scrollable pill row —
     off-screen pills don't exist for a back-office user (UX review D3). */
  .topnav { display: none; }
  .topbar-right .topnav-anchor { display: none; } /* Admin pill lives in the sheet */
  .scope-btn { display: inline-flex; }

  /* Tables scroll horizontally inside their card instead of clipping. Scoped to
     mobile (not desktop) on purpose: overflow-x:auto forces computed overflow-y
     from visible→auto per spec, which would clip an escaping dropdown/popover in
     a desktop table-card — so desktop stays byte-for-byte unchanged. Direct-child
     :has() so only cards wrapping a .table are affected; zero markup changes. */
  .card:has(> .table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .app-next-side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 90;
    width: min(280px, 84vw);
    height: 100vh; height: 100dvh;
    background: var(--surface);
    box-shadow: 2px 0 16px rgba(0,0,0,.18);
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .app-next-side--open { transform: translateX(0); }
}

/* ── List/detail collapses to a single pane on phones/small tablets ─────── */
@media (max-width: 720px) {
  .ld, .ld--resizable { grid-template-columns: 1fr; }
  .ld-list { border-right: none; }
  /* Hide the resize handle when single-pane — otherwise it's an orphaned full-width
     bar, and its touch-action:none would swallow vertical scroll gestures. */
  .ld-divider { display: none; }
  /* Single-pane swap (MOBILE-UI.md §1): callers that pass HasSelection get ONE pane
     at a time — the list until a row is selected, then the detail with a back button.
     Callers without the parameter have no data-mpane attribute and keep stacking. */
  .ld[data-mpane="detail"] .ld-list { display: none; }
  .ld[data-mpane="list"] .ld-detail { display: none; }
  .ld[data-mpane] .ld-back-row { display: block; flex-shrink: 0; }
  /* Release the fixed-viewport height so stacked panes scroll in app-next-main
     instead of clipping. Desktop keeps its fixed shell above this width. */
  .page-full { height: auto; overflow: visible; }
  .app-next-main { overflow-x: hidden; }
  /* Fixed-px content grids reflow to a single column. */
  .plugin-row { grid-template-columns: 1fr !important; }

  /* Labelled field rows stack: the fixed 140px label column left ~122px for the value
     on a 360px screen, which is narrower than the input's own min-width. */
  .fld-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Coarse pointer (touch): enlarge tap targets toward the ~44px guideline,
   hung off the existing density tokens so all density modes benefit. ────── */
@media (pointer: coarse) {
  :root { --row-h: 40px; }
  .sb-item { min-height: 40px; }
  .btn, .btn-icon { min-height: 40px; }
  .topnav-anchor { min-height: 40px; }
  .nav-hamburger { width: 44px; height: 44px; }

  /* Data-entry controls were omitted from this tier, so a touch user got 40px buttons
     sitting beside 24px inputs (.input-xs is height:24px). min-height wins over the
     declared height, so every control reaches the same floor without touching desktop. */
  .input, .fld-input, .ss-control, select, textarea { min-height: 40px; }
}

/* ── SearchableSelect (Components/Shared/SearchableSelect.razor) ──────────────
   Reusable type-to-search + virtualized combobox for large / hierarchical option
   sets. Theme-token driven (no hard-coded colors) so it is dark/light safe. The
   keyboard-active row (.ss-active) is intentionally identical to the mouse :hover
   row so the exact active row is always identifiable. ─────────────────────── */
.ss-root { position: relative; display: inline-block; }

/* Closed control — reuses the field look but must lay out label + affordances. */
.ss-control {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text);
}
.ss-control:disabled { cursor: not-allowed; opacity: 0.6; }
/* Two class tokens so this ties .fld-input:hover (0,2,0) and wins on source order. As a bare
   .ss-control-open (0,1,0) it lost to the hover border — and since clicking to open leaves the
   pointer ON the control, the open-state accent was suppressed in the one path everybody uses. */
.ss-control.ss-control-open { border-color: var(--accent); }
.ss-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-placeholder { color: var(--text-3); }
.ss-clear {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); cursor: pointer; border-radius: 3px; padding: 1px;
}
.ss-clear:hover { color: var(--text); background: var(--surface-hover); }
.ss-caret { display: inline-flex; align-items: center; color: var(--text-3); pointer-events: none; }

/* Transparent outside-click catcher behind the panel (no JS interop). */
.ss-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }

/* Dropdown panel. */
.ss-panel {
  position: absolute; z-index: 41; top: calc(100% + 4px); left: 0;
  min-width: 100%; width: max-content; max-width: 420px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.ss-search { padding: 6px; border-bottom: 1px solid var(--divider); }
.ss-search-input {
  width: 100%; height: 26px; padding: 0 8px; box-sizing: border-box;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  font-size: var(--fs-sm, 12px); outline: none;
}
.ss-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ss-search-input::placeholder { color: var(--text-3); }

/* Virtualized option list. */
.ss-list { max-height: 280px; overflow-y: auto; }
.ss-option {
  display: flex; align-items: baseline; gap: 8px;
  height: 28px; box-sizing: border-box;
  padding: 4px 10px 4px 8px;
  font-size: var(--fs-sm, 12px); color: var(--text);
  cursor: pointer; white-space: nowrap; overflow: hidden;
}
.ss-option-label { overflow: hidden; text-overflow: ellipsis; }
.ss-option-secondary { color: var(--text-3); font-size: 11px; }
/* Mouse hover and keyboard-active share ONE visual so the exact row is identified. */
.ss-option:hover,
.ss-option.ss-active { background: var(--surface-hover); }
.ss-empty { padding: 10px; font-size: var(--fs-sm, 12px); color: var(--text-3); text-align: center; }
