/* =========================================================================
   RAVEN Audit Console — light theme (white panels, navy sidebar, blue accent)
   Typography: Inter for UI, system mono for data/IDs
   ========================================================================= */

:root {
  color-scheme: light;

  /* surfaces */
  --bg:          #f3f6fa;
  --panel:       #ffffff;
  --panel-soft:  #f7f9fc;
  --panel-tint:  #eef3fb;

  /* dark shell (sidebar) */
  --shell:       #111827;
  --shell-2:     #172033;
  --shell-3:     #1f2a40;
  --shell-line:  #263144;

  /* lines */
  --line:        #dbe3ee;
  --line-strong: #c7d2e0;

  /* type on light */
  --text:        #18202d;
  --text-2:      #2b3445;
  --muted:       #667285;
  --muted-2:     #8a95a6;
  --dim:         #a8b0bd;

  /* type on dark (sidebar) */
  --shell-text:  #edf2fb;
  --shell-muted: #aab5c6;
  --shell-dim:   #7a8499;

  /* signature accent */
  --accent:        #285ee8;
  --accent-deep:   #1f4fc8;
  --accent-soft:   #eaf0ff;
  --accent-rule:   rgba(40, 94, 232, 0.32);

  /* status */
  --ok:        #168354;
  --ok-soft:   #e7f7ef;
  --ok-rule:   rgba(22, 131, 84, 0.30);

  --warn:      #af7314;
  --warn-soft: #fff4d8;
  --warn-rule: rgba(175, 115, 20, 0.30);

  --err:       #c43d3d;
  --err-soft:  #ffebeb;
  --err-rule:  rgba(196, 61, 61, 0.30);

  --info:      #2563eb;
  --info-soft: #e8f0ff;
  --info-rule: rgba(37, 99, 235, 0.30);

  /* type stacks — Inter for UI, system mono for data */
  --font-sans:  Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: var(--font-sans); /* aliased so legacy serif references still resolve */
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* shape */
  --radius:     6px;
  --radius-lg:  10px;
  --shadow-card: 0 1px 0 rgba(17, 24, 39, 0.03), 0 10px 28px -22px rgba(17, 24, 39, 0.18);
  --shadow-deep: 0 30px 60px -24px rgba(17, 24, 39, 0.18);
}

/* ------------------------------------------------------------------ reset */

* { box-sizing: border-box; }
html, body { height: 100vh; overflow: hidden; }

/* Hide scrollbar chrome everywhere; scrolling still works via wheel / trackpad / keys. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; }
::selection { background: var(--accent); color: #ffffff; }

/* ------------------------------------------------------------------ body */

body {
  margin: 0;
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  display: flex;
  font-family: var(--font-sans);
  /* Fluid type: scales between 12px on small laptops and 14px on
     larger monitors so the layout adapts without the user manually
     zooming the browser. ``vw`` units alone are dangerous for type
     (no minimum); ``clamp()`` pins both floor and ceiling. */
  font-size: clamp(12px, 0.85vw + 7.5px, 14px);
  line-height: 1.5;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
}

/* very subtle paper texture so the page doesn't feel flat */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================ SIDEBAR */

.sidebar {
  /* Fluid sidebar: ~220px on 1280px laptops, ~268px on 1920px+.
     Below 980px the existing media query stacks the sidebar above
     the main column instead. */
  width: clamp(220px, 18vw, 268px);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--shell) 0%, var(--shell-2) 100%);
  color: var(--shell-text);
  padding: 24px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  overflow: hidden;
}
/* blue hairline running down the sidebar's right edge */
.sidebar::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  right: -1px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent-rule) 18%, var(--accent-rule) 82%, transparent);
  opacity: 0.6;
}

/* ---------- brand */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}

.brand-glyph {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #ffffff;
  border: 1px solid var(--shell-3);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #1a243a, #131b2c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.brand-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  color: #ffffff;
}

.brand-sub {
  color: var(--shell-muted);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
}
.brand-sub em {
  font-style: normal;
  color: #86a7ff;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ---------- nav */

.nav {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  min-height: 36px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--shell-muted);
  border-left: 2px solid transparent;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.nav-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.nav-item.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(40, 94, 232, 0.18), transparent 70%);
  border-left-color: #86a7ff;
}
.nav-item.active .nav-label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.sidebar-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--shell-3), transparent);
  margin: 4px 0;
}

/* ---------- settings */

.settings {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding-top: 16px;
}

.settings h3 {
  margin: 0 0 4px;
  color: var(--shell-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.settings label {
  display: grid;
  gap: 4px;
  color: var(--shell-muted);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
}

.settings input {
  min-height: 34px;
  border: 1px solid var(--shell-3);
  background: #0c1220;
  color: #f8fafc;
  padding: 7px 10px;
  border-radius: var(--radius);
  outline: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.settings input::placeholder { color: var(--shell-dim); }
.settings input:focus {
  border-color: #86a7ff;
  background: #0e1426;
  box-shadow: 0 0 0 3px rgba(134, 167, 255, 0.18);
}

.hint {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--shell-muted);
  font-size: 11.5px;
  word-break: break-word;
}
.hint .hint-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shell-dim);
}
.hint.mono { font-family: var(--font-mono); font-size: 11px; }
.hint.mono #scope-label { color: #ffffff; }

.hint-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--shell-dim);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
}
.hint-dot.saved {
  background: #4cd197;
  box-shadow: 0 0 0 3px rgba(76, 209, 151, 0.18);
}

.sidebar-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--shell-dim);
  padding-top: 12px;
  border-top: 1px solid var(--shell-3);
}
.small { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.mono  { font-family: var(--font-mono); }

/* ============================================================ MAIN */

.main {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px 40px 40px;
  position: relative;
  overflow: hidden;
}

/* ---------- topbar */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-rule), transparent 30%);
}

.topbar-title { min-width: 0; }

.eyebrow,
.panel-eyebrow,
.audit-banner-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.topbar h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--text);
}

.subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 56ch;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.scope-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}
.scope-pill-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.scope-pill strong {
  color: var(--text);
  font-weight: 500;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted-2);
  box-shadow: 0 0 0 3px rgba(154, 161, 173, 0.16);
}
.live-pill[data-state="ok"] .live-dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
  animation: pulse 2.4s ease-in-out infinite;
}
.live-pill[data-state="ok"] .live-text { color: var(--ok); }
.live-pill[data-state="warn"] .live-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.live-pill[data-state="warn"] .live-text { color: var(--warn); }
.live-pill[data-state="err"]  .live-dot { background: var(--err);  box-shadow: 0 0 0 3px var(--err-soft); }
.live-pill[data-state="err"]  .live-text { color: var(--err); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ---------- buttons */

button.primary,
button.secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

button.primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 8px 22px -10px rgba(40, 94, 232, 0.45);
}
button.primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
}
button.primary:active { transform: translateY(0); }

button.secondary {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}
button.secondary:hover {
  background: var(--panel-soft);
  border-color: var(--line-strong);
}

.btn-glyph { font-size: 14px; line-height: 1; }

/* ---------- notice */

.notice {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-card);
}
.notice.error {
  border-left-color: var(--err);
  color: var(--err);
}
.notice.hidden { display: none; }

/* ---------- views */

.view {
  display: none;
  flex-direction: column;
  gap: 20px;
  animation: rise 320ms ease-out both;
}
.view.active {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  /* Allow vertical scrolling when content exceeds the viewport. The
     previous ``overflow: hidden`` clipped content below the fold and
     left no way to scroll into it — fine when each view had at most
     two panels, broken once Operations grew to three (Ops console +
     API keys + Vector indexes). */
  overflow-y: auto;
  overflow-x: hidden;
}

/* The last (largest) panel in each view fills the remaining vertical space
   and pushes scrolling into its inner lists instead of the page.

   Opt-outs: views that have multiple equal-priority panels (Operations
   has 4 — Ops console, API keys, Webhooks, Vector indexes — and the
   Guide page has 6 doc sections) instead lay each panel at natural
   height and let the whole view scroll vertically. */
.view.active > .panel:last-of-type {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}
#ops.view.active > .panel,
#guide.view.active > .panel:last-of-type {
  flex: none;
  min-height: 0;
}
/* Overview: KPI row + Log | Diagnostics side by side (no page scroll). */
#overview.view.active {
  overflow: hidden;
}
#overview.view.active > .kpi-grid {
  flex-shrink: 0;
}
#overview.view.active > .overview-columns {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
#overview.view.active > .overview-columns > .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
#overview.view.active > .overview-columns > .panel > #activity-list,
#overview.view.active > .overview-columns > .panel > #health-grid {
  flex: 1 1 0;
  min-height: 120px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#overview.view.active > .overview-columns > .panel > #activity-list::-webkit-scrollbar,
#overview.view.active > .overview-columns > .panel > #health-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
#overview.view.active #activity-list.empty,
#overview.view.active #health-grid.empty {
  min-height: 120px;
}
.view.active > .panel:last-of-type > header,
.view.active > .panel:last-of-type > .panel-titlebar,
.view.active > .panel:last-of-type > .query-form {
  flex-shrink: 0;
}
.view.active > .panel:last-of-type > .split,
.view.active > .panel:last-of-type > .table-wrap,
.view.active > .panel:last-of-type > .rows,
.view.active > .panel:last-of-type > .events,
.view.active > .panel:last-of-type > #query-results,
.view.active > .panel:last-of-type > #activity-list {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================ KPI / SUMMARY */

.kpi-grid,
.audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kpi,
.summary-card {
  position: relative;
  min-height: 124px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  align-content: space-between;
  gap: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.kpi::before,
.summary-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.summary-card.ok-tone   { border-color: var(--ok-rule); }
.summary-card.ok-tone   strong { color: var(--ok); }
.summary-card.warn-tone { border-color: var(--warn-rule); }
.summary-card.warn-tone strong { color: var(--warn); }

.kpi-label,
.summary-label {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.kpi-value,
.summary-card strong {
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.kpi-sub,
.summary-note {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ============================================================ PANEL */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.panel > header,
.panel-titlebar {
  min-height: 60px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-soft), var(--panel));
}

.panel-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.panel-heading.subtle .panel-eyebrow { color: var(--muted-2); }

.panel-heading h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text);
}

.panel-heading h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text);
}

.panel-titlebar p,
.panel-lede {
  margin: 8px 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  max-width: 62ch;
}
.panel-lede code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  background: var(--panel-tint);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
}
.panel-titlebar .controls {
  align-self: flex-start;
  margin-top: 2px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.controls input,
.controls select {
  min-height: 36px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 7px 11px;
  border-radius: var(--radius);
  font-size: 12.5px;
  outline: none;
  font-family: var(--font-sans);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.controls input::placeholder { color: var(--muted-2); }
.controls input:focus,
.controls select:focus,
.query-form input:focus,
.query-form textarea:focus,
.query-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(40, 94, 232, 0.14);
}

.audit-controls input { width: min(280px, 32vw); }

/* ============================================================ SPLIT */

.split {
  display: grid;
  grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1.35fr);
  min-height: 0;
}
.audit-workspace { min-height: 0; }

/* Inner list pane scrolls independently inside split views (visible thumb). */
.split > #jobs-list,
.split > #audit-list,
.split > #documents-list,
#query-results {
  overflow-y: auto;
  min-height: 0;
  /* Re-enable the visible scrollbar that the global ``* { scrollbar-width:
     none }`` rule strips elsewhere. Long lists (>500 rows) and long
     search-answer pages are unusable without a visible thumb to drag
     and a positional indicator. */
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}
.split > #jobs-list::-webkit-scrollbar,
.split > #audit-list::-webkit-scrollbar,
.split > #documents-list::-webkit-scrollbar,
#query-results::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  display: block;
}
.split > #jobs-list::-webkit-scrollbar-thumb,
.split > #audit-list::-webkit-scrollbar-thumb,
.split > #documents-list::-webkit-scrollbar-thumb,
#query-results::-webkit-scrollbar-thumb {
  background: var(--line-strong, #c5cad4);
  border-radius: 6px;
}
.split > #jobs-list::-webkit-scrollbar-thumb:hover,
.split > #audit-list::-webkit-scrollbar-thumb:hover,
.split > #documents-list::-webkit-scrollbar-thumb:hover,
#query-results::-webkit-scrollbar-thumb:hover {
  background: var(--text-2, #6a7180);
}
.split > #jobs-list::-webkit-scrollbar-track,
.split > #audit-list::-webkit-scrollbar-track,
.split > #documents-list::-webkit-scrollbar-track,
#query-results::-webkit-scrollbar-track {
  background: transparent;
}

/* Ops view scrolls vertically as a single column (panels are natural-sized
   per the opt-out above). The global ``* { scrollbar-width: none }`` rule
   hides the chrome by default — re-enable a visible thumb here so the
   operator can see they have more content below the fold. Same pattern
   applies to the Guide view which is also a long single-column read. */
#ops.view.active,
#guide.view.active {
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}
#ops.view.active::-webkit-scrollbar,
#guide.view.active::-webkit-scrollbar {
  width: 10px;
  display: block;
}
#ops.view.active::-webkit-scrollbar-thumb,
#guide.view.active::-webkit-scrollbar-thumb {
  background: var(--line-strong, #c5cad4);
  border-radius: 6px;
}
#ops.view.active::-webkit-scrollbar-thumb:hover,
#guide.view.active::-webkit-scrollbar-thumb:hover {
  background: var(--text-2, #6a7180);
}
#ops.view.active::-webkit-scrollbar-track,
#guide.view.active::-webkit-scrollbar-track {
  background: transparent;
}

/* Jobs-view search input — sits beside the status dropdown in the panel
   header. Reuses the same height as the dropdown for vertical alignment. */
#job-search {
  height: 34px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-soft, #f4f6fa);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 220px;
  outline: none;
}
#job-search:focus {
  border-color: var(--accent, #4c6ef5);
  background: var(--panel, #ffffff);
}

.split > .panel-inner {
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  overflow: hidden;
}
.split > .panel-inner > #job-detail,
.split > .panel-inner > #audit-detail {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.split > .panel-inner > header {
  min-height: 52px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--panel-soft), var(--panel));
}

/* ============================================================ ROWS / LIST */

.rows {
  display: flex;
  flex-direction: column;
}

.rows.empty,
.events.empty,
.answer-block.empty {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.empty-state {
  max-width: 380px;
  margin: 0 auto;
  color: var(--muted);
  text-align: center;
}
.empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
}

.row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: var(--panel);
  transition: background-color 120ms ease, box-shadow 120ms ease;
  position: relative;
}
.row:hover {
  background: var(--panel-soft);
}
.row.selected {
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
  box-shadow: inset 2px 0 0 var(--accent);
}

.row-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.row-title {
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: 0;
}

.row-title.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.row-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 5px;
  word-break: break-word;
  letter-spacing: 0;
}
.controls .row-meta { margin-top: 0; }

.audit-metrics {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 11px;
}
.audit-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================ BADGES */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  white-space: nowrap;
  padding: 0 9px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  border: 1px solid transparent;
}
.badge.ok   { background: var(--ok-soft);   color: var(--ok);   border-color: var(--ok-rule); }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-rule); }
.badge.err  { background: var(--err-soft);  color: var(--err);  border-color: var(--err-rule); }
.badge.info { background: var(--info-soft); color: var(--info); border-color: var(--info-rule); }
.badge.gray { background: #edf1f6; color: var(--muted); border-color: var(--line); }

/* ============================================================ TABLE */

.table-wrap { overflow-x: auto; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.data-table th,
table.data-table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data-table th {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: var(--panel-soft);
}
table.data-table tbody tr:hover { background: var(--panel-soft); }
table.data-table tbody tr td strong {
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
}

.uri {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  word-break: break-word;
}

/* ============================================================ EVENTS / CITATIONS */

.empty { color: var(--muted); }

.events {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.event,
.citation,
.trace-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  background: var(--panel-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-2);
  position: relative;
}
.event strong,
.citation strong,
.trace-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
}

.event.done,         .citation.validated,    .trace-card.validated    { border-left-color: var(--ok); }
.event.warn,         .citation.unverified,   .trace-card.unverified   { border-left-color: var(--warn); }
.event.err,          .citation.hallucinated, .trace-card.hallucinated { border-left-color: var(--err); }

.event-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  margin: 2px 0 6px;
  letter-spacing: 0;
}

.citation { margin: 0; }

/* ============================================================ AUDIT BANNER (centerpiece signature) */

.audit-banner {
  position: relative;
  background:
    linear-gradient(135deg, var(--accent-soft) 0%, var(--panel) 60%, var(--panel-tint) 100%);
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.audit-banner::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(40, 94, 232, 0.10);
  border-radius: 3px;
  pointer-events: none;
}
.audit-banner-text { position: relative; max-width: 60ch; }
.audit-banner-eyebrow {
  color: var(--accent-deep);
  margin-bottom: 6px;
}
.audit-banner-text p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text);
}
.audit-banner-seal {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--accent-deep);
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: rgba(40, 94, 232, 0.06);
  white-space: nowrap;
  text-align: center;
}

/* Audit Trail — compact provenance banner + summary metrics (Overview KPIs unchanged). */
#audit.view.active > .audit-banner {
  padding: 14px 18px;
  gap: 14px;
}
#audit.view.active .audit-banner-text p {
  font-size: 13px;
  line-height: 1.45;
}
#audit.view.active .audit-banner-seal {
  padding: 6px 10px;
  font-size: 9.5px;
  letter-spacing: 0.24em;
}
.audit-summary-grid {
  gap: 10px;
}
.audit-summary-grid .summary-card {
  min-height: 0;
  padding: 10px 12px 11px;
  gap: 2px;
  align-content: start;
}
.audit-summary-grid .summary-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  line-height: 1.2;
}
.audit-summary-grid .summary-card strong {
  font-size: 22px;
  line-height: 1.1;
  margin: 2px 0;
}
.audit-summary-grid .summary-note {
  font-size: 11px;
  line-height: 1.25;
}

/* ============================================================ ANSWER DETAIL */

.answer-block {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Inline failure banner inside the Search Console results pane.
   Replaces the older top-of-page toast as the primary error surface —
   the user is looking at the results panel, not the toast bar. */
.query-error {
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(196, 61, 61, 0.08);
  border: 1px solid rgba(196, 61, 61, 0.30);
  color: var(--text, #18202d);
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.5;
}
.query-error > strong {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c43d3d;
}

.answer-text {
  white-space: pre-wrap;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text);
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
}
.answer-text.empty {
  color: var(--muted);
  background: var(--panel-soft);
  border-color: var(--line);
}

.detail-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.detail-card h4,
.trace-section h4 {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.detail-card > div:not(.detail-grid):not(.row-meta) {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.detail-stat {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px;
}

.detail-stat span {
  display: block;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.detail-stat strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.trace-section {
  display: grid;
  gap: 10px;
}

.trace-list {
  display: grid;
  gap: 10px;
}

details.trace-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 12px 14px;
}
details.trace-section summary {
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.trace-section summary::before {
  content: "▸";
  color: var(--accent);
  font-size: 11px;
  transition: transform 160ms ease;
}
details.trace-section[open] > summary::before { transform: rotate(90deg); }
details.trace-section summary::-webkit-details-marker { display: none; }

pre.json {
  background: #101624;
  border: 1px solid #202b3f;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #dce6f6;
  overflow-x: auto;
  margin: 0;
  line-height: 1.55;
}

/* ============================================================ QUERY FORM */

.query-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto auto auto;
  gap: 12px;
  align-items: end;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.query-form .full { grid-column: 1 / -1; }

.query-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.query-form label.check {
  min-height: 36px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--font-sans);
  font-size: 12px;
}
.query-form input[type="checkbox"] { accent-color: var(--accent); }

.query-form input,
.query-form textarea,
.query-form select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 9px 11px;
  border-radius: var(--radius);
  font-size: 13px;
  outline: none;
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
.query-form textarea {
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

#query-results {
  border-top: 0;
  padding: 18px;
}

/* ============================================================ FOOTER RULE */

.footer-rule {
  display: none;
}
.footer-rule::before,
.footer-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.rule-diamond {
  color: var(--accent);
  font-size: 10px;
  padding: 0 14px;
  opacity: 0.6;
}

/* ============================================================ APP SWITCHER + CHIPS */

.app-switch {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
}

/* Project row has no color dot — avoid reserving the 12px column. */
.app-switch--no-dot {
  grid-template-columns: 1fr auto;
}

.app-switch select {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--shell-3);
  background: #0c1220;
  color: #f8fafc;
  padding: 6px 9px;
  border-radius: var(--radius);
  outline: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  width: 100%;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--shell-muted) 50%),
                    linear-gradient(135deg, var(--shell-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 10px) 14px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 26px;
}
.app-switch select:focus {
  border-color: #86a7ff;
  box-shadow: 0 0 0 3px rgba(134, 167, 255, 0.18);
}

.app-switch .row-button {
  padding: 5px 10px;
  min-height: 34px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--shell-text);
  border-color: var(--shell-3);
  background: #0c1220;
}
.app-switch .row-button:hover {
  background: var(--shell-3);
  border-color: #86a7ff;
  color: #86a7ff;
}

.app-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--app-color, var(--smoke-2));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* compact chip used inside list rows */
.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app-chip-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--app-color, var(--smoke-2));
  flex-shrink: 0;
}
.app-chip strong {
  color: var(--text);
  font-weight: 600;
}
.app-chip .sep { color: var(--dim); margin: 0 1px; }

.row-meta-pair {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
}

/* Topbar scope pill gets a colored leading dot for the active app */
.scope-pill .app-color-dot {
  margin-right: 2px;
}

/* ============================================================ NAV TAG (admin badge) */

.nav-tag {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--shell-dim);
  border: 1px solid var(--shell-3);
  padding: 1px 6px;
  border-radius: 2px;
}
.nav-item.active .nav-tag {
  color: #86a7ff;
  border-color: rgba(134, 167, 255, 0.4);
}

/* ============================================================ INGEST view */

/* Intake forms (left) + Recent ingestions log (right). Catalog expand
   scrolls inside the intake column so the log panel does not jump. */
#ingest.view.active {
  overflow: hidden;
}
#ingest.view.active > .ingest-layout {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  gap: 20px;
  align-items: stretch;
}
#ingest.view.active > .ingest-layout > .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
#ingest.view.active .ingest-intake > header,
#ingest.view.active .ingest-log > header {
  flex-shrink: 0;
}
#ingest.view.active .ingest-intake > .ingest-grid,
#ingest.view.active .ingest-log > #ingest-recent {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#ingest.view.active .ingest-intake > .ingest-grid::-webkit-scrollbar,
#ingest.view.active .ingest-log > #ingest-recent::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
#ingest.view.active #ingest-recent.empty {
  min-height: 120px;
}
#ingest.view.active #ingest-catalog-list {
  max-height: min(240px, 28vh);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#ingest.view.active #ingest-catalog-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.ingest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.ingest-card {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--line);
}
.ingest-card:last-child { border-right: 0; }

.ingest-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.ingest-card p.row-meta { margin: -8px 0 0; }

/* ============================================================ PERSONAS view */

#personas.view.active {
  overflow: hidden;
}
#personas.view.active > .panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#personas.view.active > .panel > header {
  flex-shrink: 0;
}
#personas.view.active .persona-form {
  flex-shrink: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  border-right: 0;
  border-radius: 0;
}
#personas.view.active > .panel > #personas-list {
  flex: 1 1 0;
  min-height: 140px;
  overflow-y: auto;
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}
#personas.view.active > .panel > #personas-list::-webkit-scrollbar {
  width: 10px;
  display: block;
}
#personas.view.active > .panel > #personas-list::-webkit-scrollbar-thumb {
  background: var(--line-strong, #c5cad4);
  border-radius: 6px;
}
#personas.view.active > .panel > #personas-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-2, #6a7180);
}
#personas.view.active > .panel > #personas-list::-webkit-scrollbar-track {
  background: transparent;
}

#personas-list .row.persona-row {
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#personas-list .persona-row-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
#personas-list .persona-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#personas-list .persona-row-head .mono {
  font-size: 12px;
  color: var(--text);
}
#personas-list .persona-row-name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  flex-shrink: 0;
  max-width: 42%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#personas-list .persona-row-meta {
  margin: 0;
}
#personas-list .persona-row-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
#personas-list .persona-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ingest-card label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.ingest-card label.check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text);
  font-size: 12px;
}
.ingest-card label.check input { accent-color: var(--accent); }

.ingest-card input[type="text"] {
  min-height: 36px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 7px 11px;
  border-radius: var(--radius);
  font-size: 12.5px;
  outline: none;
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ingest-card input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(40, 94, 232, 0.14);
}

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 140px;
  background: var(--panel-soft);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 22px 18px;
  cursor: pointer;
  text-align: center;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.drop-zone.is-drag {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.drop-glyph {
  font-size: 28px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
.drop-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.drop-sub {
  font-size: 11px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.drop-summary {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-deep);
  text-transform: none;
  letter-spacing: 0;
  min-height: 14px;
}

.ingest-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

/* ============================================================ OPS view */

/* Long admin page: one vertical scroll on the view — no trapped inner panes. */
#ops.view.active {
  overflow-x: hidden;
  overflow-y: auto;
}
#ops.view.active > .kpi-grid {
  flex-shrink: 0;
}
#ops.view.active > .panel {
  flex: none;
  display: block;
}
#ops.view.active > .panel > header,
#ops.view.active > .panel > .panel-titlebar {
  display: flex;
}
/* Cancel generic ``last panel grows + inner .rows scroll`` for every ops section. */
#ops.view.active > .panel > .rows,
#ops.view.active > .panel:last-of-type > .rows,
#ops.view.active .ops-panel > .rows {
  flex: none;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

.ops-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ops-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
}
.ops-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
}
.ops-panel:last-child { border-right: 0; }
.ops-panel-head {
  min-height: 48px;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-soft), var(--panel));
}

.tenant-row {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.tenant-row:hover { background: var(--panel-soft); }
.tenant-row .tenant-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tenant-row .tenant-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}
.tenant-row .tenant-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.action-bar {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.row-button {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.row-button:hover { background: var(--panel-soft); border-color: var(--line-strong); }
.row-button.danger { color: var(--err); border-color: var(--err-rule); }
.row-button.danger:hover { background: var(--err-soft); }
.row-button.accent { color: var(--accent); border-color: var(--accent-rule); }
.row-button.accent:hover { background: var(--accent-soft); }

/* ============================================================ DOCUMENT detail panel */

.documents-workspace { min-height: 0; }

.documents-workspace > #documents-list {
  overflow-y: auto;
  min-height: 0;
}
.documents-workspace > .panel-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.documents-workspace > .panel-inner > #document-detail {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.doc-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.doc-detail-grid .detail-stat span { letter-spacing: 0.14em; }

.source-card {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12px;
}
.source-card .uri { font-size: 11px; }
.source-card .row-meta { margin-top: 4px; }

/* ============================================================ RESPONSIVE */

/* Laptop-class viewport (13"–15" common widths). Tightens padding +
   shrinks the topbar headline so content fits without the user having
   to manually zoom out. The 1180px breakpoint below is where the KPI
   grid drops to 2 columns; this intermediate stop keeps 4 columns but
   makes them fit. */
@media (max-width: 1440px) {
  .main { padding: 22px 24px 26px; }
  .topbar h1 { font-size: 32px; }
  .panel > header,
  .panel-titlebar {
    padding: 14px 18px;
  }
  .kpi { padding: 14px 16px; }
}

@media (max-width: 1180px) {
  .kpi-grid,
  .audit-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .main { padding: 24px 28px 28px; }
  .topbar h1 { font-size: 34px; }
}

@media (max-width: 980px) {
  /* On narrow viewports, restore natural page scroll — stacking sidebar above
     the main column needs more height than the viewport can hold. */
  html, body { height: auto; overflow: auto; }
  body { flex-direction: column; }
  .main, .view.active { overflow: visible; min-height: auto; }
  .view.active > .panel:last-of-type { flex: 0 0 auto; min-height: auto; }
  .view.active > .panel:last-of-type > .split,
  .view.active > .panel:last-of-type > .table-wrap,
  .view.active > .panel:last-of-type > .rows,
  .view.active > .panel:last-of-type > .events,
  .view.active > .panel:last-of-type > #query-results,
  .view.active > .panel:last-of-type > #activity-list { overflow: visible; }
  #overview.view.active > .overview-columns {
    grid-template-columns: 1fr;
  }
  #overview.view.active > .overview-columns > .panel > #activity-list,
  #overview.view.active > .overview-columns > .panel > #health-grid {
    flex: none;
    max-height: min(360px, 42vh);
    overflow-y: auto;
  }
  .split > #jobs-list,
  .split > #audit-list,
  .split > .panel-inner,
  .split > .panel-inner > #job-detail,
  .split > .panel-inner > #audit-detail { overflow: visible; }
  .sidebar {
    width: 100%;
    padding: 18px;
    border-bottom: 1px solid var(--shell-3);
    overflow-y: visible;
  }
  .sidebar::after { display: none; }
  .nav {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    overflow-x: auto;
  }
  .nav-item.active .nav-label { font-size: 13px; }
  .settings {
    margin-top: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 10px;
  }
  .settings h3,
  .settings .hint { grid-column: 1 / -1; }
  .sidebar-foot { display: none; }

  .main { padding: 22px; gap: 18px; }

  .topbar,
  .panel > header,
  .panel-titlebar,
  .audit-banner {
    align-items: flex-start;
    flex-direction: column;
  }
  .topbar-actions, .controls { justify-content: flex-start; }
  .split { grid-template-columns: 1fr; }
  .split > .panel-inner {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .audit-controls input { width: min(100%, 360px); }
  .query-form { grid-template-columns: 1fr 1fr; }
  #ingest.view.active > .ingest-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(200px, 36vh);
  }
  #ingest.view.active .ingest-intake > .ingest-grid,
  #ingest.view.active .ingest-log > #ingest-recent {
    flex: none;
    max-height: min(420px, 45vh);
    overflow-y: auto;
  }
  .ingest-grid { grid-template-columns: 1fr; }
  .ingest-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .ingest-card:last-child { border-bottom: 0; }
  .ops-body { grid-template-columns: 1fr; }
  .ops-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .ops-panel:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .settings,
  .kpi-grid,
  .audit-summary-grid,
  .detail-grid,
  .query-form {
    grid-template-columns: 1fr;
  }
  .main { padding: 16px; }
  .topbar h1 { font-size: 28px; }
  .scope-pill, .live-pill,
  button.primary, button.secondary,
  .controls input, .controls select { width: 100%; }
  .audit-controls { width: 100%; }
  .audit-controls input { width: 100%; }
  .audit-banner-seal { align-self: flex-start; }
}

/* ===================== Track D/E — degradation + lease badges ===================== */

.degraded-banner {
  border: 1px solid var(--warn, #c87f00);
  border-left-width: 4px;
  background: rgba(200, 127, 0, 0.06);
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.degraded-banner strong { color: var(--warn, #c87f00); }
.degraded-banner .row-meta { margin-top: 2px; opacity: 0.85; }

.lease-live   { color: var(--ok,   #2a8a3e); }
.lease-expired{ color: var(--err,  #b3261e); }

/* ===================== Track E — admin extensions ===================== */

.hidden { display: none !important; }

.row-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--accent, #285ee8);
  cursor: pointer;
  text-decoration: underline dotted;
  font-size: inherit;
  font-family: inherit;
}
.row-link:hover { text-decoration: underline; }

.row-button.warn {
  background: rgba(179, 38, 30, 0.08);
  color: var(--err, #b3261e);
  border-color: rgba(179, 38, 30, 0.3);
}
.row-button.warn:hover {
  background: rgba(179, 38, 30, 0.16);
}

.tenant-actions {
  margin-left: auto;
}
.tenant-row { display: flex; align-items: center; gap: 10px; }

/* ── Guide tab ─────────────────────────────────────────────────────── */
/* The Guide view stacks many panels of arbitrary height — opt out of
   the .view.active > .panel:last-of-type "fill remaining space" rule
   so the page scrolls normally and each panel sizes to its content. */
#guide.view.active {
  display: block;          /* not flex — let normal document flow apply */
  padding-bottom: 64px;    /* breathing room at the bottom of the scroll */
}
#guide.view.active > .panel,
#guide.view.active > .panel:last-of-type {
  display: block;
  flex: none;
  min-height: 0;
  margin-bottom: 24px;
}

.guide-body {
  /* Padding is set on the panel body explicitly — the existing console
     doesn't have a generic .panel-body rule and each view defines its
     own spacing. 24/32/28 matches the visual rhythm of the rest of
     the console. */
  padding: 24px 32px 28px;
  max-width: 880px;
  line-height: 1.7;
  font-size: 0.95rem;
  color: var(--text);
}
.guide-body > * + * { margin-top: 1rem; }
.guide-body > p + p { margin-top: 0.75rem; }
.guide-body h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.guide-body h3:first-child { margin-top: 0; }
.guide-body p { margin: 0.65rem 0; color: var(--text); }
.guide-body ol, .guide-body ul {
  padding-left: 1.5rem;
  margin: 0.6rem 0;
}
.guide-body li { margin: 0.4rem 0; }
.guide-body code {
  background: var(--panel-tint);
  border: 1px solid var(--line);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--text);
}
.guide-code {
  background: var(--panel-tint);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin: 0.85rem 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.55;
  color: var(--text);
}
.guide-mode {
  border-left: 3px solid var(--accent);
  padding: 0.5rem 0 0.5rem 1.1rem;
  margin: 1.25rem 0;
}
.guide-mode h3 { margin-top: 0; }
.guide-note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0 0;
  border-radius: 4px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
}
.guide-note strong { color: var(--text); }
.guide-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.85rem 0;
  font-size: 0.92rem;
  color: var(--text);
}
.guide-table th, .guide-table td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.guide-table th {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  border-bottom: 1px solid var(--line-strong);
  background: var(--panel-soft);
}