/*
  Industry v2 — Design tokens and component styles.
  Source of truth palette from design-reference.html.
  Geometry: hairline borders, square-dominant corners, compact spacing.
  Typography: Barlow Condensed / Barlow, bundled by styles/industry.css and
  served from /ui/assets. Barlow has no Cyrillic, so Golos Text sits behind it
  in the stack and picks up Russian by unicode-range.
*/

:root {
  /* Typography. Barlow carries the design's Latin and numerals; it ships no
     Cyrillic at all (latin / latin-ext / vietnamese only), so Golos Text stands
     behind it and picks up Russian by unicode-range. Both are bundled by
     styles/industry.css — naming a family here that the build does not ship
     would fall back silently to a system face and quietly lose the design. */
  --font-heading: "Barlow Condensed", "Barlow", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Barlow", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* Scale */
  --fs-xxs: 10px;
  --fs-xs: 11px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 34px;
  --lh: 1.5;

  /* Neutral ramp */
  --bg: #f2f2f3;
  --surface: #e9e9ea;
  --surface-hover: #dedee0;
  --border: #d6d6d8;
  --border-dim: #e0e0e2;
  --text: #1d1f20;
  --text-2: #5b5d61;
  --text-3: #929497;

  /* Accent — Industry blue */
  --accent: #5980a6;
  /* Accent ramp — ported from the offline reference, which uses the darker
     steps for solid fills and titles and the lightest for soft tints. A single
     flat accent made every emphasis identical and read flatter than the design. */
  --accent-100: #eef6ff;
  --accent-600: #597ea3;
  --accent-700: #416180;
  --accent-800: #2c455d;
  --accent-btn-text: #ffffff;
  --accent-hover: #4a6f91;
  --accent-2: #728fab;
  --accent-text: #ffffff;

  /* Role / status */
  --good: #2e804f;
  --good-bg: #e4f2e9;
  --warn: #b06d0f;
  --warn-bg: #fef3e0;
  --bad: #b8332d;
  --bad-bg: #f9e8e7;
  --idle: #6b6d71;
  --idle-bg: #e9e9ea;

  /* Geometry — blueprint/hairline, square-dominant */
  --r-xs: 0;
  --r-sm: 0;
  --r-md: 2px;
  --border-w: 1px;

  /* Spacing — compact */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-sm: 6px;
  --sp-md: 10px;
  --sp-lg: 14px;
  --sp-xl: 20px;
  --sp-2xl: 28px;

  /* Layout */
  --sidebar-w: 224px;
  --sidebar-compact: 68px;
  --topbar-h: 44px;

  --maxw: 1600px;
  --shadow-sm: 0 1px 2px rgba(29,31,32,0.14);
  --shadow-md: 0 3px 10px rgba(29,31,32,0.16);
  --shadow-lg: 0 12px 32px rgba(29,31,32,0.22);
  --shadow: var(--shadow-sm);
}

[data-theme="dark"] {
  --bg: #1a1c1e;
  --surface: #222427;
  --surface-hover: #292c2f;
  --border: #36393c;
  --border-dim: #2e3134;
  --text: #e3e4e6;
  --text-2: #9da0a4;
  --text-3: #6e7175;
  --accent: #6b93b5;
  /* The reference has no dark theme, so the ramp is re-derived here: tints go
     dark, solid steps go lighter, keeping contrast on a dark ground. */
  --accent-100: #1e2c38;
  --accent-600: #7ea4c2;
  --accent-700: #93b4cd;
  --accent-800: #b3ccdd;
  --accent-btn-text: #14202b;
  --accent-hover: #7ea4c2;
  --accent-2: #5a7d99;
  --accent-text: #1a1c1e;
  --good: #4ea86a;
  --good-bg: #1a2f1f;
  --warn: #d49934;
  --warn-bg: #3c2e0c;
  --bad: #d9655e;
  --bad-bg: #3c1f1d;
  --idle: #808386;
  --idle-bg: #2a2d30;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.32);
  --shadow-md: 0 3px 10px rgba(0,0,0,0.38);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.48);
  --shadow: var(--shadow-sm);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1c1e;
    --surface: #222427;
    --surface-hover: #292c2f;
    --border: #36393c;
    --border-dim: #2e3134;
    --text: #e3e4e6;
    --text-2: #9da0a4;
    --text-3: #6e7175;
    --accent: #6b93b5;
    --accent-100: #1e2c38;
    --accent-600: #7ea4c2;
    --accent-700: #93b4cd;
    --accent-800: #b3ccdd;
    --accent-btn-text: #14202b;
    --accent-hover: #7ea4c2;
    --accent-2: #5a7d99;
    --accent-text: #1a1c1e;
    --good: #4ea86a;
    --good-bg: #1a2f1f;
    --warn: #d49934;
    --warn-bg: #3c2e0c;
    --bad: #d9655e;
    --bad-bg: #3c1f1d;
    --idle: #808386;
    --idle-bg: #2a2d30;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.32);
    --shadow-md: 0 3px 10px rgba(0,0,0,0.38);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.48);
    --shadow: var(--shadow-sm);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

a { color: var(--accent); }
.muted { color: var(--text-3); font-size: var(--fs-xs); }
code { font-family: var(--font-mono); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ── Top bar ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: var(--border-w) solid var(--border);
  display: flex; align-items: center; gap: var(--sp-md);
  padding: 0 var(--sp-lg);
  box-shadow: var(--shadow);
}
.topbar-tenant { font-size: var(--fs-xxs); color: var(--text-3); padding: 1px 6px; background: var(--surface-hover); border-radius: var(--r-xs); }
.topbar-spacer { flex: 1; }
.topbar-identity { font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; gap: var(--sp-sm); }
.topbar-identity strong { color: var(--text); font-weight: 500; }
.topbar-updated { font-size: var(--fs-xxs); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ── Sidebar ── */
.sidebar {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 15;
  width: var(--sidebar-w); background: var(--surface);
  border-right: var(--border-w) solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  transition: width 0.2s ease;
}
.sidebar.compact { width: var(--sidebar-compact); }

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: var(--border-w) solid var(--border-dim);
}
.sidebar-brand { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.sidebar-brand strong {
  font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 600;
  letter-spacing: 0.04em; color: var(--accent-700); text-transform: uppercase; line-height: 1.1;
}
.sidebar-brand span {
  font-family: var(--font-heading); font-size: var(--fs-xxs); font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-3); text-transform: uppercase; line-height: 1.2;
}
.sidebar-head .sidebar-collapse { width: auto; padding: var(--sp-xs); flex-shrink: 0; }
.sidebar.compact .sidebar-head { justify-content: center; padding: var(--sp-md) var(--sp-xs); }
.sidebar.compact .sidebar-brand { display: none; }

.sidebar-section {
  padding: var(--sp-md) var(--sp-lg) var(--sp-xs);
  font-size: var(--fs-xxs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); font-family: var(--font-heading);
}
.sidebar.compact .sidebar-section { display: none; }

.sidebar-item {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg); color: var(--text-2);
  text-decoration: none; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-left: 2px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap; overflow: hidden;
}
.sidebar-item:hover { color: var(--text); background: var(--surface-hover); }
.sidebar-item.active { color: var(--accent-700); border-left-color: var(--accent); background: var(--accent-100); }
.sidebar-item .i { flex-shrink: 0; display: inline-flex; align-items: center; }
.sidebar.compact .sidebar-item { padding: var(--sp-sm) var(--sp-md); justify-content: center; }
.sidebar.compact .sidebar-item span.item-label { display: none; }

.sidebar-spacer { flex: 1; }

.sidebar-bottom { border-top: var(--border-w) solid var(--border-dim); padding: var(--sp-sm) 0; }
.sidebar-collapse {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg); color: var(--text-3);
  font-size: var(--fs-xs); cursor: pointer; background: none; border: none; width: 100%;
  font-family: var(--font-body);
}
.sidebar-collapse:hover { color: var(--text-2); }
.sidebar.compact .sidebar-collapse { justify-content: center; padding: var(--sp-sm) var(--sp-md); }
.sidebar.compact .sidebar-collapse .label { display: none; }

.sidebar-backdrop { display: none; }

/* ── Main content ── */
.main {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  padding: 24px 28px 48px;
  max-width: var(--maxw);
  min-width: 0;
  min-height: calc(100vh - var(--topbar-h));
}
.sidebar.compact ~ .main { margin-left: var(--sidebar-compact); }

/* ── Buttons ── */
button, .btn, button.sm {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
  color: var(--text); background: var(--surface);
  border: var(--border-w) solid var(--border); border-radius: var(--r-sm);
  min-height: 32px; padding: var(--sp-xs) var(--sp-md); cursor: pointer;
  transition: background 0.12s, border-color 0.12s; line-height: 1.4;
}
button:hover { background: var(--surface-hover); border-color: var(--text-3); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--accent-700); color: var(--accent-btn-text); border-color: var(--accent-700); }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.danger { color: var(--bad); border-color: var(--bad); }
button.danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover { background: var(--surface-hover); }
.toggle { display: inline-flex; align-items: center; gap: var(--sp-xs); cursor: pointer; font-size: var(--fs-xs); color: var(--text-2); }

/* Icons */
.i { display: inline-flex; align-items: center; }
.i svg { display: block; }

/* ── Cards ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-lg); margin-bottom: var(--sp-xl); }
.card { min-width: 0; background: transparent; border: var(--border-w) solid var(--border); border-radius: var(--r-sm); padding: var(--sp-md) var(--sp-lg); box-shadow: none; }
.card .value { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-heading); }
.card .label { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--sp-xxs); }
.card .card-label { display: block; color: var(--text-2); font-family: var(--font-heading); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.card > strong { display: block; margin-top: var(--sp-xs); font-family: var(--font-heading); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.card.alarm .value, .card.alarm strong { color: var(--bad); }
.card.watch .value, .card.watch strong { color: var(--warn); }

/* ── Panels & Tables ── */
.panel {
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow);
  margin-bottom: var(--sp-lg);
}
.panel-head {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-lg); border-bottom: var(--border-w) solid var(--border);
  background: var(--surface-hover);
}
.panel-head .title { font-weight: 600; font-size: var(--fs-sm); font-family: var(--font-heading); letter-spacing: 0.02em; }
.panel-head .spacer { flex: 1; }
.panel-head .muted { font-size: var(--fs-xxs); color: var(--text-3); }
.panel-head > input, .panel-head > select {
  min-height: 32px; max-width: 220px; padding: var(--sp-xs) var(--sp-sm);
  color: var(--text); background: var(--bg); border: var(--border-w) solid var(--border);
  border-radius: var(--r-xs); font: inherit; font-size: var(--fs-xs);
}
.panel-head > input:focus-visible, .panel-head > select:focus-visible { border-color: var(--accent); }
.scroll { max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
thead th {
  text-align: left; padding: var(--sp-xs) var(--sp-md); color: var(--text-2); font-weight: 600;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-heading);
  border-bottom: var(--border-w) solid var(--border); white-space: nowrap;
  position: sticky; top: 0; z-index: 1; background: var(--surface);
}
thead th.num, tbody td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
tbody td { padding: var(--sp-sm) var(--sp-md); border-bottom: var(--border-w) solid var(--border-dim); white-space: nowrap; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-hover); }
tbody tr.row-bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
tbody tr.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tbody tr.retired td { color: var(--text-2); }
td.domain-cell { font-weight: 600; font-family: var(--font-heading); letter-spacing: 0.01em; }
td.domain-cell a { color: inherit; text-decoration: none; }
td.domain-cell a:hover { color: var(--accent-700); }
td.num, .num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
td.mono, .mono { font-family: var(--font-mono); font-size: var(--fs-xs); }

[data-view="fleet"] .scroll > table,
[data-view="campaigns"] .scroll > table { min-width: 1120px; }
[data-view="audience"] .scroll > table { min-width: 860px; }
[data-view="templates"] .scroll > table,
[data-view="seeds"] .scroll > table { min-width: 760px; }

/* ── Operations inbox (UI-PORT-05) ── */
[data-view="operations"] .scroll > table { min-width: 640px; }
/* Seven facts instead of Fleet's six: auto-fit keeps every breakpoint (id
   specificity beats the .kpi-strip media rules further down) without a
   second set of column-count overrides. */
#ops-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Run expand */
tr.run-row { cursor: pointer; }
tr.run-row.open td { background: var(--surface-hover); }
tr.attempt-row td { background: var(--surface-hover); white-space: normal; }

/* ── Pills / Badges ── */
.pill { display: inline-block; padding: 1px 7px; border-radius: var(--r-xs); font-size: var(--fs-xxs); font-weight: 600; font-family: var(--font-heading); letter-spacing: 0.04em; text-transform: uppercase; }
.pill.good { color: var(--good); background: var(--good-bg); }
.pill.warn { color: var(--warn); background: var(--warn-bg); }
.pill.bad { color: var(--bad); background: var(--bad-bg); }
.pill.idle { color: var(--idle); background: var(--idle-bg); }

/* ── Bars ── */
.bar-wrap { display: inline-flex; align-items: center; gap: var(--sp-xs); }
.bar-track { display: inline-block; width: 48px; height: 5px; border-radius: var(--r-xs); background: var(--idle-bg); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: var(--r-xs); transition: width .3s ease; }

/* ── State messages ── */
.state-msg { min-height: 96px; padding: 32px var(--sp-lg); text-align: center; color: var(--text-2); display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; }
.state-error { color: var(--bad); background: var(--bad-bg); border: var(--border-w) solid var(--bad); }
.state-empty { min-height: 140px; color: var(--text-3); border: var(--border-w) dashed var(--border); }
.state-loading { min-height: 96px; display: flex; align-items: center; justify-content: center; gap: var(--sp-sm); padding: 32px var(--sp-lg); font-family: var(--font-heading); letter-spacing: 0.04em; text-transform: uppercase; }
.state-loading::after { content: ''; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.state-unavailable {
  padding: var(--sp-2xl); text-align: center; border: var(--border-w) dashed var(--border);
  border-radius: var(--r-sm); margin: var(--sp-xl) 0; background: var(--surface);
}
.state-unavailable .title { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--text-2); margin-bottom: var(--sp-xs); }
.state-unavailable .desc { font-size: var(--fs-sm); color: var(--text-3); }

/* ── View visibility ── */
.view { display: none; }
.view.active { display: block; }

/* ── Detail view ── */
.detail-head {
  display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg); background: var(--surface);
  border: var(--border-w) solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow);
  /* Defense in depth: the topbar is fixed, so any scroll-into-view (focus,
     anchor) that targets this header must not let the topbar cover it. */
  scroll-margin-top: var(--topbar-h);
}
.detail-head .back { color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.detail-head .back:hover { color: var(--accent); }
.detail-head h2 { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 600; letter-spacing: 0.02em; }
.detail-head .spacer { flex: 1; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--sp-sm); margin-bottom: var(--sp-lg); }

.detail-panel {
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--r-sm); padding: var(--sp-md) var(--sp-lg); box-shadow: var(--shadow);
}
.detail-panel h3 {
  font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.03em;
  color: var(--text-2); margin-bottom: var(--sp-md); display: flex; align-items: center; gap: var(--sp-sm);
}
.detail-panel h3 .act { margin-left: auto; font-weight: 400; }
.kv-list { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-xxs) var(--sp-lg); font-size: var(--fs-sm); }
.kv-list dt { color: var(--text-2); font-size: var(--fs-xs); }
.kv-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* Readiness summary: same facts as a kv-list, laid out as a wide compact row
   so the workspace's second tier reads as a scannable strip, not a dense
   two-column dump like the narrower Sender/DNS panels below it. */
.kv-list.kv-summary { grid-template-columns: repeat(4, auto minmax(0, 1fr)); column-gap: var(--sp-xl); }

[data-view="domain"] .scroll > table { min-width: 640px; }
[data-view="domain"] .attempts-scroll > table { min-width: 860px; }

.gate-list { margin: 0; padding: 0; }
.gate-list li { display: flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-sm); padding: 1px 0; list-style: none; }
.gate-list .pass { color: var(--good); }
.gate-list .fail { color: var(--bad); }

.preflight-list { display: flex; flex-direction: column; gap: var(--sp-xxs); }
.preflight-item { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-sm); }
.preflight-item .check-name { flex: 1; font-size: var(--fs-xs); color: var(--text-2); }

.prov-tabs { display: flex; gap: var(--sp-xxs); margin-bottom: var(--sp-sm); }
.prov-tabs button { padding: 1px 8px; font-size: var(--fs-xxs); border-radius: var(--r-xs); font-family: var(--font-heading); letter-spacing: 0.04em; }

.spark-wrap { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-xs) 0 var(--sp-sm); flex-wrap: wrap; }
.spark { display: block; }

/* ── Dialogs ── */
dialog {
  border: var(--border-w) solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  padding: var(--sp-lg); max-width: 440px; width: calc(100% - 32px);
  max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  box-shadow: var(--shadow-lg); animation: dlg-in .15s ease;
}
dialog::backdrop { background: rgba(0,0,0,0.42); }
@keyframes dlg-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
dialog h2 { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 600; letter-spacing: 0.02em; margin: 0 0 var(--sp-md); }
.wide-dialog { max-width: 1120px; width: calc(100% - 32px); }
.delivery-recovery { margin-top: var(--sp-lg); border: var(--border-w) solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.delivery-toolbar { display: flex; align-items: end; gap: var(--sp-sm); flex-wrap: wrap; padding: var(--sp-sm) var(--sp-md); background: var(--surface-hover); border-bottom: var(--border-w) solid var(--border); }
.delivery-toolbar .field { margin: 0; min-width: 150px; }
.delivery-toolbar .field.reason { flex: 1; min-width: 240px; }
.delivery-toolbar .toggle { padding-bottom: var(--sp-xs); }
.delivery-table-wrap { max-width: 100%; max-height: min(420px, 48dvh); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.delivery-table { min-width: 980px; }
.delivery-table td.delivery-error { min-width: 240px; max-width: 420px; white-space: normal; }
.delivery-table td.delivery-error details summary { cursor: pointer; color: var(--text-2); }
.delivery-table td.delivery-error details div { margin-top: var(--sp-xs); font-family: var(--font-mono); font-size: var(--fs-xxs); overflow-wrap: anywhere; }
.delivery-message { display: inline-flex; align-items: center; gap: var(--sp-xxs); }
.delivery-pager { display: flex; align-items: center; gap: var(--sp-xs); padding: var(--sp-xs) var(--sp-md); border-top: var(--border-w) solid var(--border); }
.delivery-pager .spacer { flex: 1; }
.delivery-recovery-note { padding: var(--sp-xs) var(--sp-md); font-size: var(--fs-xs); color: var(--text-2); background: var(--warn-bg); }
.dlg-note { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--sp-md); }
.dlg-note b { font-weight: 600; color: var(--text); }
.dlg-err { color: var(--bad); font-size: var(--fs-sm); min-height: 1.2em; margin: 0 0 var(--sp-sm); }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--sp-xs); }
.field { display: flex; flex-direction: column; gap: var(--sp-xxs); margin-bottom: var(--sp-md); }
.field span { font-size: var(--fs-xs); color: var(--text-2); font-family: var(--font-heading); letter-spacing: 0.03em; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text);
  background: var(--bg); border: var(--border-w) solid var(--border); border-radius: var(--r-xs);
  min-height: 34px; padding: var(--sp-xs) var(--sp-md); width: 100%;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field textarea { font-family: var(--font-mono); resize: vertical; min-height: 80px; }
.field-row { display: flex; gap: var(--sp-xs); }
.field-row .field { flex: 1; }

/* ── Template ── */
.tpl-editor { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-md); }
.tpl-hint { font-size: var(--fs-xs); color: var(--text-3); }
.tpl-hint code { background: var(--surface-hover); padding: 1px 5px; border-radius: var(--r-xs); font-size: var(--fs-xxs); }
.tpl-out { padding: var(--sp-lg); border-top: var(--border-w) solid var(--border-dim); display: flex; flex-direction: column; gap: var(--sp-sm); }
.tpl-out-label { font-size: var(--fs-xxs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-family: var(--font-heading); }
.tpl-out-subject { font-weight: 600; color: var(--text); }
.tpl-out-body { white-space: pre-wrap; background: var(--bg); border: var(--border-w) solid var(--border-dim); border-radius: var(--r-xs); padding: var(--sp-md); margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); max-height: 320px; overflow: auto; }
.tpl-ok { color: var(--good); background: var(--good-bg); border-radius: var(--r-xs); padding: var(--sp-md); font-size: var(--fs-sm); }
.tpl-issues { color: var(--bad); background: var(--bad-bg); border-radius: var(--r-xs); padding: var(--sp-md); font-size: var(--fs-sm); }
.tpl-issues ul { margin: var(--sp-xs) 0 0; padding-left: var(--sp-xl); }
.tpl-out-preheader { font-size: var(--fs-xs); color: var(--text-2); font-style: italic; }
.tpl-html-frame { width: 100%; min-height: 320px; border: var(--border-w) solid var(--border-dim); border-radius: var(--r-xs); background: #fff; }

/* ── Monitoring (UI-PORT-06) ── */
.mon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-sm); }
.mon-list { margin: 0; padding: 0; list-style: none; }
.mon-list li { padding: 2px 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mon-list a { color: inherit; text-decoration: none; }
.mon-list a:hover { color: var(--accent); }
.mon-notice {
  padding: var(--sp-xs) var(--sp-md); margin-bottom: var(--sp-md);
  border: var(--border-w) solid var(--border); border-radius: var(--r-xs);
  font-size: var(--fs-xs); color: var(--text-2); background: var(--surface);
}
/* Five facts instead of Fleet's six: auto-fit keeps every breakpoint (id
   specificity beats the .kpi-strip media rules further down) without a
   second set of column-count overrides. */
#mon-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ── Checks (UI-PORT-06) ── */
[data-view="checks"] .scroll > table { min-width: 860px; }
@media (max-width: 820px) {
  /* Below the min-width, the table (and its lone colspan message row) is
     wider than the scroll region's initial viewport. Centering that message
     would place its text past the visible edge until the operator scrolls
     right first -- left-align it instead so empty/loading/error text is
     readable at scrollLeft 0, with no effect on populated-row layout or
     desktop, where the container is already wide enough that no scroll (and
     therefore no offscreen text) ever happens. */
  #checks-rows .state-msg { justify-content: flex-start; text-align: left; }
}

.aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--sp-sm); }

/* ── Passkeys ── */
.pk-list { margin: 0; padding: 0; list-style: none; }
.pk-list li { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-xs) 0; font-size: var(--fs-sm); }
.pk-list .pk-name { flex: 1; }

/* ── CSV Import ── */
.import-section { margin-bottom: var(--sp-xl); }
.import-form { display: flex; flex-direction: column; gap: var(--sp-sm); padding: var(--sp-lg); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--r-sm); }
.import-form h3 { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0.02em; }
.import-form .limits { font-size: var(--fs-xs); color: var(--text-3); }
.import-status { padding: var(--sp-md); border: var(--border-w) solid var(--border); border-radius: var(--r-sm); background: var(--bg); font-size: var(--fs-sm); margin-top: var(--sp-sm); display: flex; flex-direction: column; gap: var(--sp-xs); }
.import-status .counts { display: flex; gap: var(--sp-lg); flex-wrap: wrap; font-size: var(--fs-xs); }
.import-status .counts b { font-family: var(--font-mono); }

/* Segment filter toolbar */
.segment-toolbar {
  display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap;
  padding: var(--sp-sm) var(--sp-lg); border-bottom: var(--border-w) solid var(--border-dim);
  background: var(--bg);
}
.segment-toolbar select, .segment-toolbar input {
  font-family: var(--font-body); font-size: var(--fs-xs); color: var(--text);
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--r-xs); padding: 2px var(--sp-xs);
}
.segment-toolbar select:focus-visible, .segment-toolbar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.segment-toolbar .muted { font-size: var(--fs-xxs); color: var(--text-3); font-family: var(--font-heading); letter-spacing: 0.04em; text-transform: uppercase; }
.seg-hint {
  font-size: var(--fs-xxs); color: var(--text-3); padding: var(--sp-xs) var(--sp-lg);
  border-bottom: var(--border-w) solid var(--border-dim); background: var(--bg);
}

/* ── Toast ── */
.toast {
  position: fixed; bottom: var(--sp-xl); right: var(--sp-xl); z-index: 100;
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-sm) var(--sp-lg); box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  font-size: var(--fs-sm); animation: toast-in .2s ease; max-width: 360px;
}
.toast.err { border-color: var(--bad); color: var(--bad); }
.toast.ok { border-color: var(--good); color: var(--good); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ── Mobile hamburger ── */
.menu-btn { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: var(--sp-xs); }

/* ── Responsive ── */
@media (max-width: 820px) {
  html.drawer-open, html.drawer-open body { overflow: hidden; }

  .sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
    width: 240px; z-index: 25;
  }
  .sidebar.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.2s ease, visibility 0s linear 0s;
  }
  .sidebar.compact { width: 240px; }
  .sidebar.compact .sidebar-item { padding: var(--sp-sm) var(--sp-lg); justify-content: flex-start; }
  .sidebar.compact .sidebar-item span.item-label { display: inline; }
  .sidebar.compact .sidebar-section { display: block; }
  .sidebar.compact .sidebar-head { justify-content: space-between; padding: var(--sp-md) var(--sp-lg); }
  .sidebar.compact .sidebar-brand { display: flex; }
  .sidebar.compact .sidebar-collapse { justify-content: flex-start; padding: var(--sp-sm) var(--sp-lg); }
  .sidebar.compact .sidebar-collapse .label { display: inline; }

  .sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 24; background: rgba(0,0,0,0.3); }
  .sidebar.open + .sidebar-backdrop { display: block; }

  .main { margin-left: 0 !important; width: 100%; max-width: none; padding: var(--sp-lg); }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 var(--sp-md); }

  .cards { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .aud-grid { grid-template-columns: 1fr; }
  .kv-list.kv-summary { grid-template-columns: repeat(2, auto minmax(0, 1fr)); }
  dialog { max-width: calc(100% - var(--sp-lg)); width: calc(100% - var(--sp-lg)); max-height: calc(100dvh - var(--sp-lg)); padding: var(--sp-lg); }
  .wide-dialog { max-width: calc(100% - var(--sp-lg)); width: calc(100% - var(--sp-lg)); }
  .import-status .counts { gap: var(--sp-md); }
}

@media (max-width: 560px) {
  :root { --topbar-h: 48px; }

  .topbar { gap: var(--sp-sm); padding: 0 var(--sp-sm); }
  .topbar-tenant, .topbar-updated { display: none; }
  .topbar-identity { min-width: 0; font-size: var(--fs-xs); }
  .topbar-identity strong { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .toggle { white-space: nowrap; }

  .main { padding: var(--sp-lg) var(--sp-md) 40px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); }
  .card { padding: var(--sp-md); }
  .card .value { font-size: 28px; }

  .panel-head, .detail-head { align-items: flex-start; flex-wrap: wrap; }
  .panel-head .spacer, .detail-head .spacer { min-width: 1px; }
  .panel-head > input, .panel-head > select { flex: 1 1 140px; max-width: none; min-height: 36px; }
  .detail-head h2 { min-width: calc(100% - 72px); overflow-wrap: anywhere; }
  .grid-2, .aud-grid, .mon-grid { grid-template-columns: minmax(0, 1fr); }
  .kv-list { grid-template-columns: minmax(0, 1fr) auto; }
  .kv-list dd { overflow-wrap: anywhere; }
  .kv-list.kv-summary { grid-template-columns: minmax(0, 1fr) auto; }

  .field-row { flex-direction: column; gap: 0; }
  .segment-toolbar { align-items: stretch; padding: var(--sp-sm) var(--sp-md); }
  .segment-toolbar select, .segment-toolbar input, .segment-toolbar button { flex: 1 1 140px; min-height: 36px; }

  dialog, .wide-dialog { width: calc(100% - 12px); max-width: calc(100% - 12px); max-height: calc(100dvh - 12px); padding: var(--sp-lg); }
  .dlg-actions { flex-wrap: wrap; }
  .dlg-actions button { flex: 1 1 120px; min-height: 40px; justify-content: center; }
  .delivery-toolbar { align-items: stretch; }
  .delivery-toolbar .field, .delivery-toolbar .field.reason { flex: 1 1 100%; min-width: 0; }
  .delivery-toolbar .toggle { padding: var(--sp-xs) 0; }
  .delivery-toolbar > button { min-height: 40px; justify-content: center; }
  .delivery-pager { flex-wrap: wrap; }
  .delivery-pager .spacer { display: none; }
  .delivery-pager #delivery-action-status { flex-basis: 100%; overflow-wrap: anywhere; }

  .pk-list li { align-items: flex-start; flex-wrap: wrap; }
  .pk-list .pk-name { flex-basis: calc(100% - 46px); min-width: 0; overflow-wrap: anywhere; }
  .import-form { padding: var(--sp-md); }
  .import-status .counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .toast { left: var(--sp-md); right: var(--sp-md); bottom: var(--sp-md); max-width: none; }
}

@media (max-width: 390px) {
  .topbar-identity { display: none; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .detail-head h2 { min-width: 0; flex: 1 1 180px; }
  .import-status .counts { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Воронка кампании ── */
.funnel { display: grid; gap: 4px; padding: var(--sp-sm) 0; }
.funnel-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px 44px; gap: var(--sp-sm); align-items: center; }
.funnel-label { font-size: var(--fs-sm); }
.funnel-track { height: 10px; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--r-xs); overflow: hidden; }
.funnel-fill { display: block; height: 100%; background: var(--accent); }
.funnel-fill.good { background: var(--good); }
.funnel-fill.warn { background: var(--warn); }
.funnel-fill.bad { background: var(--bad); }
.funnel-fill.idle { background: var(--idle); }
.funnel-num, .funnel-pct { font-size: var(--fs-sm); }
.funnel-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-md); margin-top: var(--sp-sm); }
.funnel-sub { font-family: var(--font-heading); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin: var(--sp-sm) 0 var(--sp-xs); }
.funnel-note { font-size: var(--fs-xs); margin-top: var(--sp-sm); }
@media (max-width: 820px) {
  .funnel-row { grid-template-columns: 110px minmax(0, 1fr) 48px 40px; }
}

/* ── Fleet overview (UI-PORT-02) ── */
.kpi-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-lg); margin: var(--sp-xs) 0 var(--sp-xl);
  /* Same fixed-topbar defense as .detail-head, for the routes (Fleet) whose
     first visible element is this strip rather than a detail-head. */
  scroll-margin-top: var(--topbar-h);
}
.kpi-cell {
  min-width: 0;
  border: var(--border-w) solid var(--border); border-radius: var(--r-xs);
  background: transparent; padding: var(--sp-md) var(--sp-lg);
}
.kpi-value {
  display: block; font-family: var(--font-mono); font-size: var(--fs-2xl);
  font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.kpi-label {
  display: block; margin-top: var(--sp-xxs);
  font-family: var(--font-heading); font-size: var(--fs-xxs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-cell.dim .kpi-value { color: var(--text-3); }
.kpi-cell.alarm .kpi-value { color: var(--bad); }
.kpi-cell.watch .kpi-value { color: var(--warn); }
.kpi-strip[aria-busy="true"] .kpi-value { opacity: 0.45; }

.fleet-toolbar {
  display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap;
  margin-bottom: var(--sp-md);
}
.fleet-toolbar .spacer { flex: 1; }
.fleet-toolbar > input[type="search"] {
  min-height: 32px; width: 240px; max-width: 100%;
  padding: var(--sp-xs) var(--sp-md);
  color: var(--text); background: var(--surface);
  border: var(--border-w) solid var(--border); border-radius: var(--r-xs);
  font: inherit; font-size: var(--fs-sm);
}
.fleet-toolbar > input[type="search"]:focus-visible { border-color: var(--accent); }

.filter-chips { display: flex; flex-wrap: wrap; }
.filter-chips .chip {
  min-height: 32px; padding: var(--sp-xs) var(--sp-md);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-2); background: var(--surface);
  border: var(--border-w) solid var(--border); border-radius: var(--r-xs);
}
.filter-chips .chip + .chip { margin-left: calc(var(--border-w) * -1); }
.filter-chips .chip:hover { color: var(--text); background: var(--surface-hover); }
.filter-chips .chip:focus-visible, .filter-chips .chip.active { position: relative; z-index: 1; }
.filter-chips .chip.active {
  color: var(--accent-btn-text); background: var(--accent-700); border-color: var(--accent-700);
}
.filter-chips .chip .chip-n { color: var(--text-3); font-weight: 500; white-space: pre; }
.filter-chips .chip.active .chip-n { color: inherit; opacity: 0.8; }

.fleet-status[hidden] { display: none; }
.fleet-status {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-md); margin-bottom: var(--sp-md);
  border: var(--border-w) solid var(--border); border-radius: var(--r-xs);
  font-size: var(--fs-xs); overflow-wrap: anywhere;
}
.fleet-status.busy { color: var(--text-2); background: var(--surface); }
.fleet-status.stale { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
.fleet-status.error { color: var(--bad); background: var(--bad-bg); border-color: var(--bad); }

[data-view="fleet"] .st-bad { color: var(--bad); }
[data-view="fleet"] .st-warn { color: var(--warn); }

@media (max-width: 1160px) {
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-md); }
  .kpi-value { font-size: 26px; }
  .fleet-toolbar > input[type="search"] { flex: 1 1 100%; width: auto; min-height: 36px; }
  .filter-chips .chip { min-height: 36px; }
}
@media (max-width: 390px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  /* Pinning the domain column keeps a row identifiable while the rest of the
     dense Fleet table scrolls horizontally underneath it. */
  [data-view="fleet"] .scroll { position: relative; }
  [data-view="fleet"] thead th:first-child { position: sticky; left: 0; z-index: 3; }
  [data-view="fleet"] tbody td.domain-cell { position: sticky; left: 0; z-index: 2; background: var(--surface); }
  [data-view="fleet"] tbody tr:hover td.domain-cell { background: var(--surface-hover); }
}