/* site1.erralert.com - minimal app stylesheet
 *
 * Theme variables: dark is the default; [data-theme="light"] overrides.
 * All colour references go through the var(--*) layer so flipping themes
 * doesn't touch any selectors.
 */

:root {
  /* ---- DARK (default) ---- */
  --bg:           #0f172a;
  --bg-elevated:  #1e293b;
  --bg-card:      #1e293b;
  --bg-input:     #1e293b;
  --fg:           #e2e8f0;
  --fg-strong:    #f1f5f9;
  --muted:        #94a3b8;
  --brand:        #3b82f6;
  --brand-hover:  #60a5fa;
  --brand-fg:     #ffffff;
  --border:       #334155;
  --row-hover:    #1e293b;
  --code-bg:      #1e293b;
  --code-fg:      #e2e8f0;
  --shadow:       rgba(0,0,0,0.35);

  /* Status colours - adjusted for legibility on dark bg */
  --st-ok-bg:    #064e3b;  --st-ok-fg:    #6ee7b7;
  --st-warn-bg:  #78350f;  --st-warn-fg:  #fde68a;
  --st-crit-bg:  #7f1d1d;  --st-crit-fg:  #fecaca;
  --st-error-bg: #7f1d1d;  --st-error-fg: #fecaca;
  --st-info-bg:  #1e3a8a;  --st-info-fg:  #bfdbfe;
  --st-none-bg:  #334155;  --st-none-fg:  #94a3b8;

  --banner-ok-bg:    #064e3b;  --banner-ok-fg:    #a7f3d0;
  --banner-warn-bg:  #78350f;  --banner-warn-fg:  #fde68a;
  --banner-err-bg:   #7f1d1d;  --banner-err-fg:   #fecaca;

  --mute-global-bg:  #7f1d1d;  --mute-global-fg:  #fecaca;
  --mute-personal-bg: #312e81; --mute-personal-fg: #c4b5fd;

  --sub-on-bg:  #064e3b;  --sub-on-fg:  #a7f3d0;  --sub-on-border:  #047857;
  --sub-off-bg: #78350f;  --sub-off-fg: #fde68a;  --sub-off-border: #b45309;

  --delivery-sent-bg:            #064e3b;  --delivery-sent-fg:            #6ee7b7;
  --delivery-failed-bg:          #7f1d1d;  --delivery-failed-fg:          #fecaca;
  --delivery-queued-bg:          #1e3a8a;  --delivery-queued-fg:          #93c5fd;
  --delivery-suppressed-bg:      #334155;  --delivery-suppressed-fg:      #94a3b8;
  --delivery-muted-bg:           #312e81;  --delivery-muted-fg:           #c4b5fd;
  --delivery-blocked-bg:         #78350f;  --delivery-blocked-fg:         #fde68a;

  --terminal-bg: #020617;
}

:root[data-theme="light"] {
  --bg:           #ffffff;
  --bg-elevated:  #fafbfc;
  --bg-card:      #f9fafb;
  --bg-input:     #ffffff;
  --fg:           #1f2937;
  --fg-strong:    #111827;
  --muted:        #6b7280;
  --brand:        #2563eb;
  --brand-hover:  #1d4ed8;
  --brand-fg:     #ffffff;
  --border:       #e5e7eb;
  --row-hover:    #f9fafb;
  --code-bg:      #f3f4f6;
  --code-fg:      #1f2937;
  --shadow:       rgba(0,0,0,0.1);

  --st-ok-bg:    #d1fae5;  --st-ok-fg:    #065f46;
  --st-warn-bg:  #fef3c7;  --st-warn-fg:  #92400e;
  --st-crit-bg:  #fee2e2;  --st-crit-fg:  #991b1b;
  --st-error-bg: #fee2e2;  --st-error-fg: #991b1b;
  --st-info-bg:  #dbeafe;  --st-info-fg:  #1e40af;
  --st-none-bg:  #f3f4f6;  --st-none-fg:  #6b7280;

  --banner-ok-bg:    #d1fae5;  --banner-ok-fg:    #065f46;
  --banner-warn-bg:  #fef3c7;  --banner-warn-fg:  #92400e;
  --banner-err-bg:   #fee2e2;  --banner-err-fg:   #991b1b;

  --mute-global-bg:  #fee2e2;  --mute-global-fg:  #991b1b;
  --mute-personal-bg: #e0e7ff; --mute-personal-fg: #3730a3;

  --sub-on-bg:  #ecfdf5;  --sub-on-fg:  #065f46;  --sub-on-border:  #d1fae5;
  --sub-off-bg: #fef3c7;  --sub-off-fg: #92400e;  --sub-off-border: #fde68a;

  --delivery-sent-bg:            #d1fae5;  --delivery-sent-fg:            #065f46;
  --delivery-failed-bg:          #fee2e2;  --delivery-failed-fg:          #991b1b;
  --delivery-queued-bg:          #dbeafe;  --delivery-queued-fg:          #1e40af;
  --delivery-suppressed-bg:      #f3f4f6;  --delivery-suppressed-fg:      #4b5563;
  --delivery-muted-bg:           #ede9fe;  --delivery-muted-fg:           #5b21b6;
  --delivery-blocked-bg:         #fef3c7;  --delivery-blocked-fg:         #92400e;

  --terminal-bg: #1f2937;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }

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

.topbar {
  display: flex; align-items: center; gap: 1.5em;
  padding: 0.6em 1.25em;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.topbar-anon .anon-spacer { flex: 1; }
.brand { font-weight: 600; color: var(--fg-strong); display: inline-flex; align-items: center; gap: 0.5em; }
.brand-logo { height: 1.8em; width: auto; display: block; }
.topbar nav { display: flex; gap: 1em; flex: 1; align-items: center; }
/* Left nav grows to fill, pushing the menu/Admin/theme/logout cluster right. */
.nav-left { flex: 1; }
.nav-right { display: flex; align-items: center; gap: 1em; margin-left: auto; }

/* Hover/focus dropdown in the top bar (Probes/Channels/Alerts/Settings). */
.menu { position: relative; display: inline-flex; align-items: center; }
.menu-trigger {
  background: transparent; border: 0; color: var(--fg); cursor: pointer;
  font: inherit; font-size: 1.15em; line-height: 1; padding: 0.1em 0.35em;
}
.menu-trigger:hover { color: var(--fg-strong); }
.menu-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 0.25em;
  display: none; min-width: 11em;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 5px; padding: 0.3em 0; z-index: 50;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* Open on hover (mouse) or when a child/trigger has focus (keyboard). */
.menu:hover .menu-dropdown,
.menu:focus-within .menu-dropdown { display: block; }
.menu-dropdown a { display: block; padding: 0.45em 1.1em; white-space: nowrap; color: var(--fg); }
.menu-dropdown a:hover { background: var(--row-hover); text-decoration: none; }

/* Groups tree: collapsible nodes + inline objects */
.group-tree details > summary { cursor: pointer; }
.group-tree details > summary > a { margin-left: 0.2em; }
.group-objects { list-style: none; margin: 0.2em 0 0.4em; padding-left: 1.4em; }
.group-objects li { margin: 0.15em 0; display: flex; align-items: center; gap: 0.5em; }

/* Per-check runbook disclosure on the probe page */
.runbook-details > summary { cursor: pointer; color: var(--brand); font-size: 0.85em; }
.runbook-details .prewrap { margin-top: 0.3em; font-size: 0.85em; }

/* Maintenance window banner + small inline badge */
.banner-maint {
  margin: 0.75em 0; padding: 0.6em 0.9em; border-radius: 5px;
  background: var(--st-info-bg); color: var(--st-info-fg);
  border: 1px solid var(--border);
}
.badge-maint { background: var(--st-info-bg); color: var(--st-info-fg); padding: 0.05em 0.45em; border-radius: 3px; font-size: 0.85em; white-space: nowrap; }

/* Digest badge - entity set to hold alerts for the periodic digest */
.digest-badge { background: var(--st-info-bg); color: var(--st-info-fg); padding: 0.05em 0.45em; border-radius: 3px; font-size: 0.8em; white-space: nowrap; font-weight: 500; }

/* Muted checks - de-emphasised, with a speaker-off marker so they read as
   "silenced" at a glance (the rollup pills also carry a 🔇 N count). */
tr.is-muted { opacity: 0.6; }
.mute-flag { cursor: help; }

/* Admin dashboard - recent-failover log under the Sites panel */
.failover-log { margin-top: 1em; }
.failover-log table { margin-top: 0.4em; }
.failover-log th { text-align: left; font-weight: 600; color: var(--muted); font-size: 0.85em; border-bottom: 1px solid var(--border); }

/* Admin → Database (read-only viewer) */
.table-scroll { overflow-x: auto; max-width: 100%; }
.db-table { font-size: 0.9em; }
.db-table td, .db-table th { white-space: nowrap; max-width: 32em; overflow: hidden; text-overflow: ellipsis; }
td.num, th.num { text-align: right; }
.db-cell-null, .db-cell-binary, .db-cell-hidden { font-style: italic; opacity: 0.7; }

/* Row browser: a wide table that is also 50 rows tall. A plain overflow-x box
   puts its horizontal scrollbar at the bottom of the FULL table, i.e. off
   screen until you have scrolled past every row - so the columns off to the
   right are effectively invisible. Capping the box to the viewport keeps that
   scrollbar on screen the whole time you are reading, and the sticky header
   keeps the column names attached to the cells they label. */
.db-scroll {
  overflow: auto;
  max-height: calc(100vh - 13em);
  /* Contain HORIZONTAL overscroll only, so a trackpad swipe that runs off the
     end of the table does not trigger the browser's back gesture. Vertical
     chaining stays default: scrolling past the last row must still scroll the
     page, or the box's own bottom edge (and its scrollbar) could sit below the
     fold with no way to bring it up. */
  overscroll-behavior-x: contain;
}
.db-scroll thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-elevated);
  /* border-collapse drops a sticky cell's own border, so draw it as an inset
     shadow instead - otherwise the header runs straight into the first row. */
  box-shadow: inset 0 -1px 0 var(--border);
}

/* DNS records shown on the DMARC setup pages are the deliverable - they exist
   to be copied verbatim into a DNS host. .db-table truncates cells with an
   ellipsis, which would silently hand the user a BROKEN record, so record cells
   opt out of that and wrap instead. */
.dns-record,
.db-table td.dns-record {
  white-space: normal;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;   /* break a long DKIM key rather than overflow */
}
.dns-record .codey { display: inline-block; line-height: 1.6; }
.dns-copy { margin-left: 0.5em; vertical-align: middle; }
.db-filters { display: flex; flex-wrap: wrap; gap: 0.6em 0.9em; align-items: flex-end; margin: 0.5em 0 1em; padding: 0.7em 0.9em; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
.db-filter { display: flex; flex-direction: column; gap: 0.2em; }
.db-filter-label { font-size: 0.78em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.db-filter select, .db-filter input { min-width: 9em; }
.db-filter-actions { display: flex; gap: 0.5em; }
.db-pager { display: flex; gap: 1em; align-items: center; margin-top: 1em; }
.btn.disabled { opacity: 0.4; pointer-events: none; }

/* Failover/standby warning strip (full-width, above content) */
.cluster-banner {
  padding: 0.55em 1em; text-align: center; font-size: 0.95em;
  background: var(--st-warn-bg); color: var(--st-warn-fg);
  border-bottom: 1px solid var(--border);
}

/* Host-metrics dashboard */
.host-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75em; margin: 1em 0; }
.host-card { padding: 0.7em 0.9em; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
.host-card-label { font-size: 0.78em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.host-card-val { font-size: 1.15em; font-weight: 600; margin-top: 0.15em; }
.meter { height: 6px; border-radius: 3px; background: var(--bg-elevated); border: 1px solid var(--border); overflow: hidden; margin-top: 0.35em; }
.meter-fill { height: 100%; }
.meter-ok   { background: var(--st-ok-fg); }
.meter-warn { background: var(--st-warn-fg); }
.meter-crit { background: var(--st-crit-fg); }
.mw-add > summary { cursor: pointer; color: var(--brand); margin-top: 0.5em; }
.mw-days { display: flex; flex-wrap: wrap; gap: 0.5em; }
.mw-day { display: inline-flex; align-items: center; gap: 0.25em; }

/* Round "?" help badge in the top bar */
.help-link, a.help-link:visited {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  border: 1px solid var(--border); color: var(--fg);
  font-weight: 600; text-decoration: none; line-height: 1;
}
.help-link:hover { background: var(--row-hover); color: var(--fg-strong); text-decoration: none; }

/* Help / documentation page */
.help-page h2 { margin-top: 1.8em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
.help-page h3 { margin-top: 1.2em; }
.help-page table { margin: 1em 0; }
.help-page .lede { font-size: 1.05em; }
.help-flow {
  display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center;
  margin: 1em 0; font-weight: 600;
}
.help-flow span { padding: 0.3em 0.7em; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elevated); }
.help-flow .arrow { border: 0; background: none; color: var(--muted); font-weight: 400; padding: 0; }
.logout-form, .theme-form { display: inline; margin: 0; }
.logout-form .link {
  background: none; border: 0; color: var(--brand);
  cursor: pointer; font: inherit; padding: 0;
}
.logout-form .link:hover { text-decoration: underline; }

.theme-toggle {
  background: transparent; border: 1px solid var(--border);
  color: var(--fg); cursor: pointer;
  padding: 0.25em 0.55em; border-radius: 4px;
  font-size: 1.1em; line-height: 1;
}
.theme-toggle:hover { background: var(--row-hover); }

main { max-width: 1400px; margin: 1.5em auto; padding: 0 1.25em; }
main.wide { max-width: 1700px; }
main.full-width { max-width: none; }

h1, h2, h3 { color: var(--fg-strong); }
h1 { margin-top: 0; }

.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  margin-bottom: 1em;
}

.muted { color: var(--muted); }
.codey {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.9em; background: var(--code-bg); color: var(--code-fg);
  padding: 0.1em 0.35em; border-radius: 3px;
}

.btn,
a.btn:visited {
  display: inline-block; padding: 0.5em 1em; border-radius: 5px;
  background: var(--brand); color: var(--brand-fg); border: 0; cursor: pointer;
  font: inherit;
}
.btn:hover, a.btn:visited:hover { background: var(--brand-hover); color: var(--brand-fg); text-decoration: none; }
.btn.secondary,
a.btn.secondary:visited {
  background: var(--bg-elevated); color: var(--fg); border: 1px solid var(--border);
}
.btn.secondary:hover, a.btn.secondary:visited:hover { background: var(--row-hover); color: var(--fg); }

form { margin: 0; }
form.narrow { max-width: 520px; }
/* Wider check form so the JSON-path picker + textareas have room, while plain
   single-line inputs stay a sensible width. */
form.form-check { max-width: 920px; }
form.form-check .field input[type=text], form.form-check .field input[type=number],
form.form-check .field select { max-width: 34em; }

.field { display: flex; flex-direction: column; gap: 0.25em; margin-bottom: 1em; }
.field .label { font-size: 0.85em; color: var(--muted); }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=tel], .field input[type=time],
.field input[type=url], .field input[type=search],
.field select, .field textarea {
  padding: 0.55em; font-size: 1em; border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit;
  background: var(--bg-input); color: var(--fg);
}
.field input[disabled] { opacity: 0.6; }
.field .help { font-size: 0.8em; color: var(--muted); margin-top: 0.1em; }
.field.checkbox { flex-direction: row; align-items: center; gap: 0.5em; }
.field.checkbox label { margin: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.55em 0.6em; border-bottom: 1px solid var(--border); }
th { font-size: 0.85em; color: var(--muted); font-weight: 500; }
tr:hover td { background: var(--row-hover); }

/* Sortable column headers: look like a header, hint clickability on hover. */
a.sort-th { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
a.sort-th:hover { color: var(--fg); text-decoration: underline; }
a.sort-th.is-active { color: var(--fg); font-weight: 600; }
a.sort-th .sort-caret { font-size: 0.8em; }

/* Status dashboard: section tabs + dense nameserver cell. */
.status-tabs { display: flex; gap: 1.4em; align-items: flex-end; margin: 0.25em 0 1em; border-bottom: 1px solid var(--border); }
.status-tabs a, .status-tabs span { text-decoration: none; padding-bottom: 0.5em; }
.status-tabs a { color: var(--muted); }
.status-tabs a:hover { color: var(--fg); }
.status-tabs a.is-active { color: var(--fg); font-weight: 600; border-bottom: 2px solid var(--fg); margin-bottom: -1px; }
.ns-cell { max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85em; }

/* Domains table subdomain rows: indented under their registrable-domain parent. */
tr.subrow > td.domcell { padding-left: 2.2em; }
.subrow-tick { color: var(--muted); }

/* Settings field with a fixed suffix (e.g. subdomain box → ".example.com"). */
.input-suffix-wrap { display: inline-flex; align-items: center; gap: 0.4em; flex-wrap: wrap; }
.input-suffix { color: var(--muted); }

/* 24h heartbeat ribbon (server-rendered SVG). Solid bars per 30-min slot. */
.hb { display: block; border-radius: 2px; }
.hb-ok    { fill: #16a34a; }
.hb-warn  { fill: #d97706; }
.hb-crit  { fill: #dc2626; }
.hb-error { fill: #dc2626; }
.hb-none  { fill: var(--border); }

/* "Not checked" inline form button, styled to read like a muted link. */
button.btn-link {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--muted); font: inherit; text-decoration: none; white-space: nowrap;
}
button.btn-link:hover { color: var(--fg); text-decoration: underline; }

/* Stale fact cell: the check stopped running, so dim its pill and flag it. */
.status.is-stale { opacity: 0.5; }
.stale-flag { font-size: 0.85em; cursor: help; opacity: 0.7; }

/* Status toolbar: intro text on the left, the Columns dropdown on the right. */
.status-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin: 0 0 1em; }
.col-menu { position: relative; flex: none; }
.col-menu > summary { list-style: none; cursor: pointer; }
.col-menu > summary::-webkit-details-marker { display: none; }
.col-menu-panel {
  position: absolute; right: 0; z-index: 20; margin-top: 0.35em; min-width: 12em;
  display: flex; flex-direction: column; gap: 0.4em;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.75em 0.9em; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.col-menu-panel label { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; white-space: nowrap; }
.col-menu-panel .btn { margin-top: 0.25em; align-self: flex-start; }

.status {
  display: inline-block; padding: 0.1em 0.5em; border-radius: 3px;
  font-size: 0.85em; font-weight: 600;
}
.status-ok    { background: var(--st-ok-bg);    color: var(--st-ok-fg);    }
.status-warn  { background: var(--st-warn-bg);  color: var(--st-warn-fg);  }
.status-crit  { background: var(--st-crit-bg);  color: var(--st-crit-fg);  }
.status-error { background: var(--st-error-bg); color: var(--st-error-fg); }
.status-info  { background: var(--st-info-bg);  color: var(--st-info-fg);  }
.status-none  { background: var(--st-none-bg);  color: var(--st-none-fg);  }

/* Per-object rollup pill - same colour palette as .status, but inline-
   blocked with extra breathing room since it carries the (X/Y/Z)
   breakdown on the same line. */
.status-rollup {
  display: inline-block; padding: 0.15em 0.6em; border-radius: 4px;
  font-size: 0.9em; font-weight: 600;
}
.status-rollup-ok      { background: var(--st-ok-bg);    color: var(--st-ok-fg);    }
.status-rollup-warn    { background: var(--st-warn-bg);  color: var(--st-warn-fg);  }
.status-rollup-crit    { background: var(--st-crit-bg);  color: var(--st-crit-fg);  }
.status-rollup-unknown { background: var(--st-none-bg);  color: var(--st-none-fg);  }
.status-rollup .muted-badge { margin-left: 0.4em; opacity: 0.85; }
.object-rollup { margin: 0.5em 0 1em; }

.errors {
  background: var(--banner-err-bg); color: var(--banner-err-fg);
  padding: 0.75em 1em; border-radius: 4px; margin: 1em 0;
}
.errors ul { margin: 0; padding-left: 1.25em; }
.ok-banner {
  background: var(--banner-ok-bg); color: var(--banner-ok-fg);
  padding: 0.75em 1em; border-radius: 4px; margin: 1em 0;
}

.module-list { list-style: none; padding: 0; margin: 1em 0; }
.module-list li {
  padding: 0.6em 0.8em; border: 1px solid var(--border); border-radius: 4px;
  margin-bottom: 0.5em;
  background: var(--bg-elevated);
}
.module-desc { margin-top: 0.35em; font-size: 0.9em; line-height: 1.4; }

/* JSON-path picker chips (capture.value) */
.path-picker { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; margin-top: 0.5em; max-height: 16em; overflow: auto; }
.path-picker-hint { font-size: 0.8em; width: 100%; }
.path-chip {
  display: inline-flex; gap: 0.5em; align-items: baseline; max-width: 26em;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--fg);
  border-radius: 5px; padding: 0.3em 0.6em; cursor: pointer; font: inherit; text-align: left;
}
.path-chip:hover { background: var(--row-hover); }
.path-chip.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.path-chip-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; font-size: 0.85em; }
.path-chip-val { color: var(--muted); font-size: 0.85em; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Generic small-text utility (font only - distinct from .btn.small sizing). */
.small { font-size: 0.85em; }

.auth-card { max-width: 380px; margin: 4em auto 1em; padding: 0 1em; }

/* Help block under the login form - wider than the card so prose breathes. */
.auth-help {
  max-width: 640px; margin: 0 auto 4em; padding: 0 1em;
  font-size: 0.95em; line-height: 1.55;
}
.auth-help h2 { font-size: 1.15em; margin: 1.5em 0 0.4em; color: var(--fg-strong); }
.auth-help h3 { font-size: 1em;    margin: 1.4em 0 0.3em; color: var(--fg-strong); }
.auth-help ul { padding-left: 1.2em; margin: 0.5em 0; }
.auth-help li { margin: 0.35em 0; }
.auth-help-beta {
  background: var(--banner-warn-bg); color: var(--banner-warn-fg);
  border-radius: 6px; padding: 0.7em 1em; margin-bottom: 1em;
  font-weight: 500;
}
/* Honeypot - visually hidden, kept in DOM so bots see it. */
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* Inline actions */
.actions { display: flex; gap: 0.5em; align-items: center; }
form.inline { display: inline; margin: 0; }
.btn.small { padding: 0.3em 0.6em; font-size: 0.85em; }
.row-actions { display: flex; gap: 0.3em; align-items: center; flex-wrap: wrap; }

/* Field rows and checkbox lists */
.field-row { display: flex; gap: 1em; }
.field-row .field { flex: 1; }
.checkboxes { display: flex; flex-wrap: wrap; gap: 0.5em 1em; padding: 0.25em 0; }
.checkline { display: flex; align-items: center; gap: 0.3em; cursor: pointer; }
.checkline input { margin: 0; }

/* Subscribe / unsubscribe banner */
.sub-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 0.7em 1em; border-radius: 5px; margin: 1em 0;
  border: 1px solid;
}
.sub-banner.sub-on  { background: var(--sub-on-bg);  color: var(--sub-on-fg);  border-color: var(--sub-on-border);  }
.sub-banner.sub-off { background: var(--sub-off-bg); color: var(--sub-off-fg); border-color: var(--sub-off-border); }

/* Mute badges */
.mute-badge {
  display: inline-block; padding: 0.2em 0.55em; border-radius: 3px;
  font-size: 0.8em; line-height: 1.35;
}
.mute-badge.global   { background: var(--mute-global-bg);   color: var(--mute-global-fg);   }
.mute-badge.personal { background: var(--mute-personal-bg); color: var(--mute-personal-fg); margin-top: 0.3em; }

/* Inline <details>/<summary> mute forms */
.inline-details { display: inline-block; }
.inline-details summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-block;
}
.inline-details summary::-webkit-details-marker { display: none; }
.inline-details[open] summary { background: var(--brand); color: var(--brand-fg); }
.mute-form {
  display: flex; gap: 0.3em; align-items: center; margin-top: 0.3em;
  padding: 0.4em; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px;
}
.mute-form input[type=text] { padding: 0.3em 0.5em; font-size: 0.85em; flex: 1; min-width: 8em; }

/* Alerts summary header */
.alert-summary {
  display: flex; align-items: center; gap: 1em; flex-wrap: wrap;
  margin: 1em 0;
  font-size: 0.9em;
}
.alert-summary .status { font-weight: 500; }

/* Delivery status pills */
.delivery-sent              { background: var(--delivery-sent-bg);       color: var(--delivery-sent-fg);       }
.delivery-failed            { background: var(--delivery-failed-bg);     color: var(--delivery-failed-fg);     }
.delivery-queued            { background: var(--delivery-queued-bg);     color: var(--delivery-queued-fg);     }
.delivery-suppressed_quiet  { background: var(--delivery-suppressed-bg); color: var(--delivery-suppressed-fg); }
.delivery-suppressed_flapping { background: var(--delivery-suppressed-bg); color: var(--delivery-suppressed-fg); }
.delivery-muted_personal    { background: var(--delivery-muted-bg);      color: var(--delivery-muted-fg);      }
.delivery-muted_optout      { background: var(--delivery-muted-bg);      color: var(--delivery-muted-fg);      }
.delivery-channel_unverified{ background: var(--delivery-blocked-bg);    color: var(--delivery-blocked-fg);    }
.delivery-blocked_no_credit { background: var(--delivery-blocked-bg);    color: var(--delivery-blocked-fg);    }

td.notes { max-width: 32em; word-break: break-word; font-size: 0.85em; }

/* Capture endpoint section */
.capture-config {
  display: grid; gap: 0.5em; margin: 1em 0;
  padding: 0.75em; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 5px;
}
.capture-row { display: grid; grid-template-columns: 180px 1fr; gap: 0.75em; align-items: baseline; }
.capture-label { font-size: 0.85em; color: var(--muted); }
.capture-url {
  font-size: 0.85em; word-break: break-all;
  background: var(--bg); padding: 0.3em 0.5em; border-radius: 3px; border: 1px solid var(--border);
}
/* URL + Copy-button row. The <code> grows to fill so every field's right
   edge lines up at the copy button, regardless of badge or URL length. */
.copy-field { display: flex; align-items: center; gap: 0.4em; }
.copy-field .capture-url { flex: 1 1 auto; min-width: 0; }
.copy-field .copy-btn { flex: 0 0 auto; white-space: nowrap; }
.severity-urls { display: grid; gap: 0.3em; }
.severity-urls .sev-badge { flex: 0 0 auto; min-width: 3.4em; text-align: center; }
.capture-actions { display: flex; gap: 0.5em; flex-wrap: wrap; margin: 1em 0; }
.capture-howto { margin: 1em 0; }
.capture-howto summary { cursor: pointer; padding: 0.4em 0; color: var(--brand); }
.capture-howto pre,
details pre {
  background: var(--terminal-bg); color: #e5e7eb;
  padding: 1em; border-radius: 5px; overflow-x: auto; font-size: 0.82em; line-height: 1.4;
}
.body-cell { max-width: 32em; }
.payload-body > summary { cursor: pointer; word-break: break-all; color: var(--muted); }
.payload-body[open] > summary { color: inherit; }
.payload-full {
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto;
  margin: 0.5em 0 0; padding: 0.6em 0.7em; font-size: 0.85em;
  background: var(--row-hover); border: 1px solid var(--border); border-radius: 4px;
}

/* History chart + range tabs */
.range-tabs { display: flex; gap: 0.4em; margin: 1em 0; }
.range-tab,
a.range-tab:visited {
  padding: 0.4em 0.9em; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--fg); text-decoration: none; font-size: 0.9em;
}
.range-tab:hover { text-decoration: none; background: var(--row-hover); }
.range-tab.active, .range-tab.is-active,
a.range-tab.active:visited,
a.range-tab.is-active:visited { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }

/* DMARC range strip: every window charted at once, and the range selector for
   the rest of the page - the panel you click is the window analysed below. */
.range-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.6em; margin: 1em 0 0.9em; }
.range-panel, a.range-panel:visited {
  display: block; padding: 0.6em 0.7em; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--fg); text-decoration: none;
}
.range-panel:hover { text-decoration: none; background: var(--row-hover); }
.range-panel.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.range-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4em; }
.range-panel-label { font-size: 0.78em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.range-panel-num { font-size: 1.15em; font-weight: 600; margin: 0.1em 0 0.3em; }
.range-panel-chart { line-height: 0; }
.range-panel-foot { margin-top: 0.35em; }
.trend-up   { color: var(--st-ok-fg); }
.trend-down { color: var(--st-crit-fg); }

/* Per-domain volume sparkline in the DMARC list. */
.spark-col { width: 130px; min-width: 90px; line-height: 0; }
.spark-col svg { display: block; }
.chart-wrap {
  border: 1px solid var(--border); border-radius: 5px;
  padding: 0.5em; background: var(--bg-card); margin: 1em 0;
}
.stat-chart { width: 100%; height: auto; display: block; }

/* Machine trend panels. auto-fit rather than a fixed column count so a wide screen
   gets two charts side by side and a phone gets one, without a breakpoint per layout.
   360px is the width below which the axis labels start colliding. */
/* Three across on a wide screen, and a FIXED count rather than auto-fit: auto-fit sizes
   by how many items there are, so a machine with one volume got a full-width chart and one
   with four got four narrow ones, and no two machines looked alike. Three fixed tracks mean
   a chart is the same size on every machine, and a lone volume sits in the first third. */
.trend-grid {
  display: grid; gap: 1.1em;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1500px) {
  .trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .trend-grid { grid-template-columns: 1fr; }
}
/* The headline figures above a chart. Tabular numerals so the digits do not shift as the
   value changes on reload, which makes a column of them look unstable. */
.chart-stats {
  margin: 0 0 0.4em; font-size: 0.9em; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* NetMon site timeline - one strip per target, all on one time axis.
   The strips are drawn with preserveAspectRatio="none" and a fixed pixel height so
   they stretch horizontally with the column while staying the same thickness however
   many targets a site has. Their left padding matches Chart::PAD_L, which is why the
   axis row below them lines up without any measurement here. */
.netmon-chart   { margin: 0.4em 0 0; }
.netmon-row     { display: flex; align-items: center; gap: 0.6em; }
.netmon-row + .netmon-row { margin-top: 2px; }
.netmon-row-label { flex: 0 0 11em; min-width: 0; overflow: hidden; }
.netmon-row-label strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netmon-row-plot  { flex: 1 1 auto; min-width: 0; }
.netmon-strip     { width: 100%; height: 68px; display: block; }
.netmon-axis      { width: 100%; height: 19px; display: block; }
.netmon-row-axis  { margin-top: 1px; }

@media (max-width: 700px) {
  .netmon-row       { display: block; }
  .netmon-row-label { flex: none; margin-bottom: 1px; }
}
table.dense th, table.dense td { padding: 0.35em 0.55em; font-size: 0.9em; }

/* Plan summary card on settings */
.plan-card {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 1em 1.25em; background: var(--bg-card); margin: 1em 0 1.5em;
}
.plan-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1em; margin-top: 0.75em;
}
.stat-big { font-size: 1.6em; font-weight: 600; line-height: 1.2; color: var(--fg-strong); }

/* Admin */
.admin-link,
a.admin-link:visited {
  background: var(--banner-warn-bg); color: var(--banner-warn-fg);
  padding: 0.1em 0.5em; border-radius: 3px;
}
.admin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75em; margin: 1em 0;
}
.admin-tile-alert { border-color: var(--st-crit-fg); background: var(--st-crit-bg); }

/* Activity filter bar */
.activity-filters { display: flex; flex-wrap: wrap; gap: 0.75em; align-items: flex-end; margin: 1em 0; }
.activity-filters .field { margin: 0; }
.activity-filters .field input, .activity-filters .field select { min-width: 9em; }
.activity-filter-actions { display: flex; gap: 0.5em; align-items: flex-end; }
.admin-tile {
  padding: 1em; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); text-decoration: none; color: var(--fg);
  display: flex; flex-direction: column; align-items: center; gap: 0.5em;
}
.admin-tile:hover { background: var(--row-hover); text-decoration: none; }
.admin-tile-num { font-size: 2em; font-weight: 600; color: var(--brand); }
form.search { display: flex; gap: 0.5em; margin: 1em 0; max-width: 480px; }
form.search input {
  flex: 1; padding: 0.55em; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; background: var(--bg-input); color: var(--fg);
}

/* Error page */
.error-page { max-width: 480px; margin: 4em auto; }

/* Scripts catalog */
.scripts-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1em; margin-top: 1.5em;
}
.scripts-cat-card {
  display: block; padding: 1em 1.25em;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); text-decoration: none; color: inherit;
}
.scripts-cat-card:hover { background: var(--row-hover); text-decoration: none; }
.scripts-cat-card h2 { margin: 0 0 0.4em; font-size: 1.1em; color: var(--fg-strong); }
.scripts-cat-card p  { margin: 0.4em 0; font-size: 0.9em; }
.scripts-cat-count   { font-size: 0.85em; color: var(--muted); margin-top: 0.8em; }
.scripts-list { display: flex; flex-direction: column; gap: 0.6em; margin-top: 1em; }
.scripts-list-card {
  display: block; padding: 0.8em 1em;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); text-decoration: none; color: inherit;
}
.scripts-list-card:hover { background: var(--row-hover); text-decoration: none; }
.scripts-list-head { display: flex; align-items: baseline; gap: 0.6em; }
.scripts-list-head h2 { margin: 0; font-size: 1em; color: var(--fg-strong); }
.scripts-lang {
  display: inline-block; font-size: 0.7em; font-weight: 600;
  padding: 0.15em 0.5em; border-radius: 3px;
  background: var(--bg-elevated); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.scripts-lang-powershell { background: #0078d7; color: #fff; }
.scripts-lang-bash       { background: #4caf50; color: #fff; }
.scripts-lang-batch      { background: #6c6c6c; color: #fff; }
.scripts-lang-xml        { background: #d97706; color: #fff; }

/* Per-status run breakdown: stacked ok/warn/crit badges inside a cell */
.runs-breakdown { white-space: nowrap; vertical-align: middle; }
/* General-purpose: force a cell or span onto a single line. CSP blocks
   inline style="white-space:nowrap" so we expose this as a class. */
.nowrap { white-space: nowrap; }
/* Preserve user-entered linebreaks (notes, multi-line metadata) - CSP
   blocks inline white-space styling, same reason as .nowrap above. */
.prewrap { white-space: pre-wrap; }
/* Compact metadata summary for an object's detail page - definition
   list with right-aligned terms. */
.object-summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.25em 1em; margin: 0.5em 0 1em; }
.object-summary dt { color: var(--muted); font-weight: 500; }
.object-summary dd { margin: 0; }

/* Loud "alerts are disabled" banner for the probe detail page while
   any of the probe's checks are in their post-creation warmup window.
   Red background + light text so it's unmissable; matches the .status-crit
   palette via the same CSS vars. */
.banner-warmup {
  background: var(--st-crit-bg);
  color: var(--st-crit-fg);
  padding: 0.9em 1.1em;
  border-radius: 6px;
  margin: 0.5em 0 1.25em;
  line-height: 1.45;
}
.banner-warmup code {
  background: rgba(255,255,255,0.18);
  padding: 0 0.3em;
  border-radius: 3px;
}

/* Softer "checks haven't run yet" banner - informational, not alarm.
   Uses the warn palette so it stands out without screaming. */
.banner-pending {
  background: var(--st-warn-bg);
  color: var(--st-warn-fg);
  padding: 0.7em 1em;
  border-radius: 6px;
  margin: 0.5em 0 1.25em;
  line-height: 1.45;
}

/* Inline probes row on the /objects list (Show probes toggle) - visually
   nested under its parent object row via:
   - a tinted background (--bg-elevated; clearly different in dark mode,
     subtle but present in light mode)
   - a thick brand-coloured left accent stripe so the nesting reads even
     when the bg-tint is subtle
   - inset padding so the inner table feels like a child block, not a
     sibling row. We pin the :hover background to the same tint so a
     mouseover doesn't make the row blend back into the parent's. */
tr.probes-inline > td {
  background: var(--bg-elevated);
  border-left: 4px solid var(--brand);
  padding: 0.7em 1em 0.9em 1.5em;
}
tr.probes-inline:hover > td { background: var(--bg-elevated); }
tr.probes-inline table.dense {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-top: 0.25em !important;
}
tr.probes-inline table.dense th,
tr.probes-inline table.dense td { background: transparent; }
tr.probes-inline table.dense tr:hover td { background: var(--row-hover); }
.runs-breakdown > div { line-height: 1.15; margin: 0.1em 0; }
.runs-breakdown .status {
  display: inline-block; min-width: 2.5em; text-align: right;
  padding: 0.05em 0.45em; font-variant-numeric: tabular-nums;
}

/* Object list with inline checks */
.object-list { display: flex; flex-direction: column; gap: 1.25em; }
.object-card {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); padding: 0.75em 1em;
}
.object-card-head { display: flex; align-items: baseline; gap: 0.75em; flex-wrap: wrap; margin-bottom: 0.4em; }
.object-card-head h2 { margin: 0; font-size: 1.15em; }
.object-checks-table { width: 100%; margin: 0.25em 0 0; }

/* Check-runs stat tiles */
.run-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75em; margin: 1em 0 1.5em;
}
.run-stat {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); padding: 0.75em 1em;
}
.run-stat-num { font-size: 1.4em; font-weight: 600; color: var(--fg-strong); line-height: 1.2; }
.run-stat-when { font-size: 0.95em; }
.run-stat-label { font-size: 0.85em; color: var(--muted); margin-top: 0.2em; }

/* Check-runs drilldown */
.runs-table .run-detail-row td { background: var(--bg-elevated); padding: 0; }
.runs-table details { padding: 0.5em 0.75em; }
.runs-table details summary { cursor: pointer; color: var(--muted); font-size: 0.85em; }
.run-detail {
  background: var(--bg-input); color: var(--fg);
  padding: 0.75em; border-radius: 4px;
  font-size: 0.8em; line-height: 1.4;
  max-height: 24em; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.status-row-crit  { background: color-mix(in srgb, var(--banner-crit-bg, transparent) 30%, transparent); }
.status-row-warn  { background: color-mix(in srgb, var(--banner-warn-bg, transparent) 25%, transparent); }
.status-row-error { background: color-mix(in srgb, var(--banner-crit-bg, transparent) 20%, transparent); }

/* Site footer (Terms / Help links) */
.site-footer { text-align:center; padding:1.6em 1em 2em; margin-top:2em; font-size:.85em; color:#888; border-top:1px solid rgba(127,127,127,.15); }
.site-footer a { color:inherit; }
.site-footer a:hover { text-decoration:underline; }

/* ===================== Global search ===================== */
/* Top-bar search box (left of the hamburger menu). */
.topsearch { position: relative; display: inline-flex; align-items: center; }
.topsearch-input {
  width: 13em; max-width: 40vw;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.34em 0.6em; font: inherit; font-size: 0.92em;
}
.topsearch-input:focus { outline: none; border-color: var(--brand); width: 17em; }
.topsearch-input::placeholder { color: var(--muted); }
@media (max-width: 640px) { .topsearch-input { width: 7.5em; } .topsearch-input:focus { width: 10em; } }

.topsearch-panel {
  position: absolute; top: calc(100% + 0.3em); right: 0;
  width: 26em; max-width: 80vw; max-height: 70vh; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 7px; padding: 0.25em; z-index: 60;
  box-shadow: 0 10px 28px var(--shadow);
}
.topsearch-item {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.4em 0.5em; border-radius: 5px; color: var(--fg);
}
.topsearch-item:hover, .topsearch-item.is-active { background: var(--row-hover); text-decoration: none; }
.topsearch-item-main { display: flex; flex-direction: column; min-width: 0; }
.topsearch-item-label { color: var(--fg-strong); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topsearch-item-sub { color: var(--muted); font-size: 0.82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topsearch-empty { padding: 0.6em 0.7em; color: var(--muted); font-size: 0.9em; }

/* Type badges (shared by the dropdown and the results page). */
.search-badge {
  flex: none; display: inline-block; min-width: 4.2em; text-align: center;
  padding: 0.1em 0.5em; border-radius: 4px; font-size: 0.72em;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
}
.search-badge-object { background: var(--st-info-bg);  color: var(--st-info-fg); }
.search-badge-probe  { background: var(--st-ok-bg);    color: var(--st-ok-fg); }
.search-badge-check  { background: var(--sub-on-bg);   color: var(--sub-on-fg); }
.search-badge-group  { background: var(--mute-personal-bg); color: var(--mute-personal-fg); }
.search-badge-ddns   { background: var(--st-warn-bg);  color: var(--st-warn-fg); }
.search-badge-backup { background: var(--sub-on-bg);   color: var(--sub-on-fg); }
.search-badge-page   { background: var(--st-none-bg);  color: var(--st-none-fg); }
.search-badge-help   { background: var(--brand);       color: var(--brand-fg); }

/* Results page. */
.search-form { margin: 0 0 1.2em; }
.search-row { display: flex; gap: 0.6em; margin-bottom: 0.7em; }
.search-q {
  flex: 1; background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.5em 0.7em; font: inherit;
}
.search-q:focus { outline: none; border-color: var(--brand); }
.search-filters { display: flex; flex-wrap: wrap; gap: 0.9em; }
.search-filters label { display: flex; flex-direction: column; font-size: 0.82em; color: var(--muted); gap: 0.25em; }
.search-filters select { font: inherit; padding: 0.3em 0.4em; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; }

.search-results { list-style: none; margin: 0.5em 0 0; padding: 0; }
.search-results li { border-bottom: 1px solid var(--border); }
.search-result { display: flex; align-items: center; gap: 0.8em; padding: 0.6em 0.4em; color: var(--fg); }
.search-result:hover { background: var(--row-hover); text-decoration: none; }
.search-result-main { display: flex; flex-direction: column; min-width: 0; }
.search-result-label { color: var(--fg-strong); font-weight: 500; }
.search-result-sub { color: var(--muted); font-size: 0.85em; }

/* Admin "search everything" box. */
.admin-search { display: flex; gap: 0.6em; margin: 0 0 1.4em; }

/* Generic notice banner (used by the cluster status page; also styles the
   pre-existing .banner.banner-warn usage). */
.banner { border-radius: 6px; padding: 0.7em 1em; margin: 0 0 1.1em; }
.banner-warn { background: var(--banner-warn-bg); color: var(--banner-warn-fg); }
.banner code { background: rgba(0,0,0,0.12); padding: 0 0.25em; border-radius: 3px; }

/* Admin: standby code-mirror box + success banner */
.banner-ok { background: var(--banner-ok-bg); color: var(--banner-ok-fg); }
.banner-crit { background: var(--banner-err-bg); color: var(--banner-err-fg); }
.mirror-box { border: 1px solid var(--border); border-radius: 6px; padding: 0.8em 1em; margin: 0 0 1.3em; background: var(--bg-card); }
.mirror-box code { font-size: 0.85em; word-break: break-all; }

/* Admin two-panel: standby mirror (left) + sites overview (right) */
.admin-split { width: 100%; border-collapse: separate; border-spacing: 1em 0; margin: 0 0 1.3em; table-layout: fixed; }
.admin-split > tbody > tr > td {
  vertical-align: top; width: 50%;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 0.8em 1em;
}
.sites-table { width: 100%; border-collapse: collapse; margin-top: 0.5em; font-size: 0.92em; }
.sites-table td { padding: 0.3em 0.5em; border-bottom: 1px solid var(--border); }
.sites-table tr:last-child td { border-bottom: 0; }
.you-badge { font-size: 0.7em; background: var(--brand); color: var(--brand-fg); padding: 0.05em 0.45em; border-radius: 3px; vertical-align: middle; }
.ok-dot  { color: var(--st-ok-fg); }
.bad-dot { color: var(--st-crit-fg); }
@media (max-width: 720px) {
  .admin-split, .admin-split > tbody, .admin-split > tbody > tr, .admin-split > tbody > tr > td { display: block; width: auto; }
  .admin-split > tbody > tr > td { margin-bottom: 1em; }
}

/* Fleet filter + customer grouping on /backups. */
.fleet-filters { display: flex; gap: 0.6em; align-items: center; flex-wrap: wrap; margin: 0 0 0.8em; }
.fleet-search {
  flex: 1 1 16em; min-width: 12em;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: 0.45em 0.7em;
}
.fleet-customer { flex: 0 0 auto; }
.fleet-count { flex: 0 0 auto; }
.fleet-table tr.fleet-group th {
  background: var(--bg-subtle, rgba(127,127,127,.10));
  font-size: 0.9em; letter-spacing: .02em; text-transform: uppercase;
  padding-top: .8em;
}

/* Backups: the DR manifest - what a job protects and where it writes to. */
.dr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75em; margin: 0.6em 0 1.4em; }
.dr-box { padding: 0.7em 0.9em; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
.dr-paths { margin: 0.35em 0 0; padding-left: 1.1em; }
.dr-paths li, .dr-uri, .dr-path {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.86em; word-break: break-all;
}
.dr-uri { margin: 0.35em 0 0.2em; }
.dr-cell { max-width: 22em; }

/* ---------------------------------------------------------------------------
   Scan verdict pills.

   Same shape as .status, but they get their own names because SCAN-API.md 9
   constrains what these colours are allowed to say, and a future edit to the
   generic status palette must not quietly change the meaning of a verdict:

     known-good  green   the ONLY positive statement the API makes
     undetected  grey    scanned, nothing recognised it. NOT green, ever - it
                         is equally true of malware on the day it ships
     suspicious  amber
     malicious   red
     unknown     violet  a real result (nobody upstream has ever seen it), and
                         deliberately distinct from both undetected and pending
     pending     blue    queued / analyzing: the absence of a result
     error       red-ish lookups failed, being retried
   --------------------------------------------------------------------------- */
.scan-v-known-good { background: var(--st-ok-bg);    color: var(--st-ok-fg);    }
.scan-v-undetected { background: var(--st-none-bg);  color: var(--st-none-fg);  }
.scan-v-suspicious { background: var(--st-warn-bg);  color: var(--st-warn-fg);  }
.scan-v-malicious  { background: var(--st-crit-bg);  color: var(--st-crit-fg);  }
.scan-v-unknown    { background: var(--mute-personal-bg); color: var(--mute-personal-fg); }
.scan-v-pending    { background: var(--st-info-bg);  color: var(--st-info-fg);  }
.scan-v-error      { background: var(--st-error-bg); color: var(--st-error-fg); }

/* Stat tiles on the files list double as filter links. */
a.run-stat { text-decoration: none; color: inherit; }
a.run-stat:hover { background: var(--row-hover); }