/* domain-monitor.css — component styles for the redesigned domain list.
   Every selector is prefixed `dm-` to avoid collision with MudBlazor's
   generic class space (.card, .chip, .pill). Severity colour comes from
   `--c`, set by `.dm-s-critical|warning|clear` modifier classes on the
   nearest ancestor — never reference `var(--critical)` etc. directly so
   the keystone abstraction survives. */

.dm-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-feature-settings: "tnum";
}

/* ── Primitives ──────────────────────────────────────────────────── */

.dm-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, var(--dm-text-3));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c, var(--dm-text-3)) 18%, transparent);
}

.dm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--c-soft);
  color: var(--c);
  border: 1px solid color-mix(in oklab, var(--c) 30%, transparent);
  white-space: nowrap;
}
.dm-pill.dm-pill-small {
  padding: 2px 6px;
  font-size: 10px;
}
.dm-pill.dm-pill-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-feature-settings: "tnum";
}

.dm-pass-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-feature-settings: "tnum";
  font-weight: 600;
  background: var(--c);
  color: #111;
  border: none;
  white-space: nowrap;
}
.dm-pass-badge.dm-sz-sm { padding: 3px 8px;  font-size: 11px; }
.dm-pass-badge.dm-sz-md { padding: 5px 11px; font-size: 13px; }
.dm-pass-badge.dm-sz-lg { padding: 7px 14px; font-size: 16px; }

.dm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  background: rgba(255,255,255,0.04);
  color: var(--dm-text-2);
  border: 1px solid var(--dm-border);
  text-transform: lowercase;
}
.dm-chip.dm-ok  { color: var(--clear);    border-color: color-mix(in oklab, var(--clear) 30%, transparent);    background: var(--clear-soft); }
.dm-chip.dm-mid { color: var(--warning);  border-color: color-mix(in oklab, var(--warning) 30%, transparent);  background: var(--warning-soft); }
.dm-chip.dm-bad { color: var(--critical); border-color: color-mix(in oklab, var(--critical) 30%, transparent); background: var(--critical-soft); }

.dm-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.dm-delta-up    { color: var(--clear); }
.dm-delta-down  { color: var(--critical); }
.dm-delta-flat  { color: var(--dm-text-3); }

.dm-progress {
  position: relative;
  height: 3px;
  background: var(--dm-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.dm-progress > span {
  display: block;
  height: 100%;
  background: var(--c);
  border-radius: inherit;
  transition: width 0.4s ease;
}

.dm-stat        { display: flex; flex-direction: column; gap: 2px; }
.dm-stat-value  { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-feature-settings: "tnum"; font-size: 18px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--dm-text); }
.dm-stat-value.dm-tone-pass { color: var(--clear); }
.dm-stat-value.dm-tone-fail { color: var(--critical); }
.dm-stat-label  { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dm-text-3); }

.dm-mini-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.dm-mini-stat > .dm-mini-v { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-feature-settings: "tnum"; font-size: 12px; }
.dm-mini-stat > .dm-mini-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dm-text-3); }

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

/* ── Layouts (basics, expanded in subsequent phases) ─────────────── */

.dm-page {
  padding: 0;
  /* Bottom rhythm so DomainList separates from the next section on /app/domains
     (TopSourcesSection) and gives a touch of end-of-page space elsewhere. Matches
     .dm-tier's own 24px bottom margin so spacing between stacked sections is uniform. */
  margin: 0 0 24px;
}

.dm-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--dm-bg-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
  padding: 8px 10px;
  margin: 0 0 16px;
}
.dm-toolbar-search {
  flex: 1 1 220px;
  min-width: 200px;
  background: transparent;
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r-sm);
  color: var(--dm-text);
  padding: 6px 10px;
  font: inherit;
}
.dm-toolbar-spacer { flex: 1; }

.dm-summary-pills { display: inline-flex; gap: 6px; }
.dm-summary-pills .dm-pill { cursor: pointer; user-select: none; }
.dm-summary-pills .dm-pill.dm-pill-off { background: transparent; color: var(--dm-text-3); border-color: var(--dm-border); }

.dm-seg {
  display: inline-flex;
  padding: 2px;
  gap: 1px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r-sm);
}
.dm-seg > button {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--dm-text-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 4px;
}
.dm-seg > button.dm-on { background: var(--dm-surface-2); color: var(--dm-text); }

/* Severity tier sections */
.dm-tier { margin: 0 0 24px; }
.dm-tier-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.dm-tier-title { display: inline-flex; align-items: center; gap: 6px; color: var(--c, var(--dm-text)); }
.dm-tier-count { color: var(--dm-text-3); font-weight: 500; }
.dm-tier-subtitle { color: var(--dm-text-3); font-size: 11.5px; font-weight: 400; }
.dm-tier-rule    { flex: 1; height: 1px; background: linear-gradient(to right, var(--dm-border), transparent); }
.dm-tier-toggle  {
  background: transparent;
  border: 1px solid var(--dm-border);
  color: var(--dm-text-2);
  padding: 2px 8px;
  border-radius: var(--dm-r-sm);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

/* Card primitives */
.dm-card {
  position: relative;
  background: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r-lg);
  padding: 16px 18px;
}
.dm-card.dm-has-accent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c);
  border-top-left-radius: var(--dm-r-lg);
  border-bottom-left-radius: var(--dm-r-lg);
}

.dm-card-head     { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dm-card-domain   { font-weight: 600; color: var(--dm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-card-domain.dm-sz-hero  { font-size: 18px;   letter-spacing: -0.015em; }
.dm-card-domain.dm-sz-med   { font-size: 14.5px; letter-spacing: -0.01em; }
.dm-card-meta     { display: flex; align-items: center; gap: 8px; }

.dm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 18px;
  margin-top: 12px;
}
.dm-hero-grid .dm-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dm-hero-footer            { grid-column: 1 / -1; border-top: 1px solid var(--dm-border); padding-top: 10px; margin-top: 4px;
                              display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--dm-text-3); flex-wrap: wrap; }
.dm-hero-reason            { color: var(--dm-text-2); font-size: 12.5px; max-width: 320px; text-align: right; }
.dm-hero-actions           { display: inline-flex; gap: 8px; }

.dm-tier-grid {
  display: grid;
  gap: 12px;
}
.dm-tier-grid.dm-grid-hero   { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.dm-tier-grid.dm-grid-medium { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.dm-clear-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) auto 92px minmax(140px, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dm-border);
}
.dm-clear-row:last-child { border-bottom: 0; }
.dm-clear-list { background: var(--dm-bg-2); border: 1px solid var(--dm-border); border-radius: var(--dm-r); }

.dm-clear-strip {
  background: var(--dm-bg-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dm-clear-strip .dm-pill { font-size: 12.5px; padding: 5px 11px; gap: 8px; }
.dm-clear-strip .dm-pill .dm-mono { color: var(--dm-text-3); margin-left: 4px; }

.dm-btn {
  background: transparent;
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r-sm);
  color: var(--dm-text);
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.dm-btn:hover { background: var(--dm-surface-hover); }
.dm-btn-primary {
  background: var(--c);
  color: #111;
  border-color: var(--c);
}
.dm-btn-ghost  { color: var(--dm-text-2); }

.dm-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ── Grid layout (Phase 6) ───────────────────────────────────────── */
.dm-grid-uniform {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

/* ── Table layout (Phase 7) ──────────────────────────────────────── */
.dm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dm-bg-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
  overflow: hidden;
}
.dm-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dm-text-3);
  padding: 9px 14px;
  background: var(--dm-surface);
  border-bottom: 1px solid var(--dm-border);
  text-align: left;
  font-weight: 500;
}
.dm-table th.dm-num { text-align: right; }
.dm-table td {
  padding: 9px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--dm-border);
  vertical-align: middle;
}
.dm-table td.dm-num { text-align: right; }
.dm-table tr:hover td { background: var(--dm-surface-hover); }
.dm-table tr:last-child td { border-bottom: 0; }
.dm-table-accent {
  display: inline-block;
  width: 3px;
  height: 16px;
  vertical-align: middle;
  margin-right: 8px;
  background: var(--c);
  border-radius: 1.5px;
}

/* ── Heatmap layout (Phase 8) ────────────────────────────────────── */
.dm-heatmap-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  background: var(--dm-bg-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.dm-summary-stat { display: flex; flex-direction: column; gap: 2px; }
.dm-summary-v   { font-size: 18px; font-weight: 600; color: var(--c, var(--dm-text)); }
.dm-summary-l   { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dm-text-3); }
.dm-summary-sep { width: 1px; height: 26px; background: var(--dm-border-strong); }

.dm-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.dm-heatmap-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  min-height: 64px;
  border-radius: var(--dm-r);
  border: 1px solid var(--dm-border);
  background: var(--dm-surface);
  color: var(--dm-text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.dm-heatmap-tile:hover { transform: translateY(-1px); }
.dm-heatmap-tile.dm-s-critical {
  background: linear-gradient(135deg, var(--critical-bg), var(--dm-surface) 70%);
  border-color: color-mix(in oklab, var(--critical) 35%, var(--dm-border));
}
.dm-heatmap-tile.dm-s-warning {
  background: linear-gradient(135deg, var(--warning-bg), var(--dm-surface) 70%);
  border-color: color-mix(in oklab, var(--warning) 35%, var(--dm-border));
}
.dm-heatmap-tile.dm-expanded { grid-column: span 2; grid-row: span 2; min-height: 200px; }
.dm-heatmap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 500;
  gap: 8px;
  min-width: 0;
}
.dm-heatmap-mid      { display: flex; align-items: center; justify-content: center; flex: 1; }
.dm-heatmap-foot     { font-size: 10.5px; color: var(--dm-text-3); }
.dm-heatmap-expanded { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--dm-border); }

/* ── Domain Issues page (Phase 9 — Slice A/B/C) ────────────────────── */

.dm-issues-page { padding: 0; }
.dm-issues-header-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--c);
  color: #111;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.dm-issues-summary .dm-summary-frag {
  font-size: 11.5px;
  color: var(--dm-text-3);
  margin-left: 6px;
  vertical-align: middle;
}
.dm-issues-toolbar { margin-top: 12px; }

/* Per-row left accent stripe. The cell holding the stripe also holds the
   domain link; positioned absolutely so it doesn't push content. The .dm-table
   td has a 9-14 padding — the stripe sits inside the left padding. */
.dm-issues-table .dm-issues-domain {
  position: relative;
  padding-left: 18px;
  font-weight: 500;
}
.dm-issues-table .dm-issues-stripe {
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--c);
  border-radius: 1.5px;
}
.dm-issues-row-dim .dm-issues-stripe {
  width: 2px;
  opacity: 0.5;
}
.dm-issues-domain-link {
  color: var(--dm-text);
  text-decoration: none;
}
.dm-issues-domain-link:hover { text-decoration: underline; color: var(--dm-text); }

/* Reports list — parallel rule group for the MudTable variant.
   The `dm-reports-table` class is applied to the MudTable wrapper <div> via
   `Class=`; the `td.` specificity beats MudBlazor's `.mud-table-cell` padding
   default so the stripe sits inside an 18px left pad. The Issues page's
   rules (above) are intentionally untouched — sharing the geometry across
   pages would couple them on a single global selector.

   The stripe colour is `var(--c)`, set by the row-level severity class
   (`dm-s-clear|warning|critical`) applied via RowClassFunc. Without one
   of those classes on the <tr>, `--c` is unset and the stripe renders
   transparent — the intended "no severity" state. */
.dm-reports-table td.dm-issues-domain {
  position: relative;
  padding-left: 18px;
  font-weight: 500;
}
.dm-reports-table td.dm-issues-domain .dm-issues-stripe {
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--c);
  border-radius: 1.5px;
}
.dm-reports-table tr.dm-issues-row-dim td.dm-issues-domain .dm-issues-stripe {
  width: 2px;
  opacity: 0.5;
}

/* Reports filter strip — flex children with explicit flex-basis per control
   (we drop MudGrid here because MudGrid collapses into a single flex item
   inside a flex parent — see plan §6). The `display: flex; flex-wrap: wrap`
   comes from the `dm-toolbar` base class composed on the same element. */
.reports-toolbar { padding: 12px; gap: 12px; }
.reports-toolbar-item     { flex: 1 1 180px; min-width: 0; }
.reports-toolbar-item-sm  { flex: 1 1 140px; }
.reports-toolbar-item-md  { flex: 1 1 200px; }
.reports-toolbar-item-lg  { flex: 2 1 240px; }

/* Muted-secondary text utility (global). Paired with dm-mono on dense-table
   cells to keep date ranges and similar metadata from competing for visual
   weight. Reusable on any text-bearing element despite living in the Reports
   block of this file. */
.dm-meta { color: var(--dm-text-2); font-size: 11.5px; }

.dm-issues-trend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 92px;
  --c: var(--critical);
}
.dm-issues-sources { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.dm-issues-last  { font-size: 11.5px; }
.dm-issues-actions { white-space: nowrap; }
.dm-issues-actions .dm-btn { padding: 3px 9px; font-size: 11.5px; margin-left: 4px; }

.dm-empty-filter {
  background: var(--dm-bg-2);
  border: 1px dashed var(--dm-border);
  border-radius: var(--dm-r);
  padding: 24px;
  text-align: center;
  margin-top: 12px;
}

/* Fail-rate pill — two tiers. Severe = solid critical; moderate = soft. */
.dm-fail-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-feature-settings: "tnum";
  font-weight: 600;
  font-size: 12px;
  padding: 3px 10px;
  white-space: nowrap;
}
.dm-fail-pill-severe {
  background: var(--critical);
  color: #111;
  border: none;
}
.dm-fail-pill-moderate {
  background: var(--critical-soft);
  color: var(--critical);
  border: 1px solid color-mix(in oklab, var(--critical) 30%, transparent);
}

/* Categorical issue chip — colour comes from a .dm-s-* modifier on the chip itself. */
.dm-issue-chip {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--c-soft, rgba(255,255,255,0.04));
  color: var(--c, var(--dm-text-2));
  border: 1px solid color-mix(in oklab, var(--c, var(--dm-border)) 30%, transparent);
  white-space: nowrap;
}
.dm-issue-chip-neutral {
  background: var(--dm-bg-2);
  color: var(--dm-text-2);
  border-color: var(--dm-border);
}

/* Source-IP chip with optional KSI badge and recurring-source dot. */
.dm-ip-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--dm-bg-2);
  color: var(--dm-text-2);
  border: 1px solid var(--dm-border);
  white-space: nowrap;
}
.dm-ip-chip-ksi {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.dm-ip-chip-icon { font-size: 10px; line-height: 1; }
.dm-ip-chip-recurring::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--dm-bg);
}

/* Last-report freshness colours, mapped to plan §7 thresholds. */
.dm-last-report-fresh   { color: var(--dm-text); }
.dm-last-report-stale   { color: var(--dm-text-2); }
.dm-last-report-warn    { color: var(--warning); }
.dm-last-report-crit    { color: var(--critical); }
.dm-last-report-missing { color: var(--dm-text-3); font-style: italic; }

/* "Page default" override chip — surfaced by DomainList.ShowOverrideChip via
   Toolbar. Uses the existing dm-pill primitive with an info-coloured variant,
   plus a minimal close button reset. The chip is *not* a MudChip — keeping
   the Toolbar free of MudBlazor matches the rest of the dm-* component
   vocabulary. */
.dm-pill.dm-pill-default {
  --c: var(--info, #58a6ff);
  --c-soft: color-mix(in oklab, var(--c) 16%, transparent);
  cursor: default;
  user-select: none;
}
.dm-pill .dm-pill-close {
  background: none;
  border: 0;
  padding: 0 0 0 2px;
  margin: 0 0 0 4px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
}
.dm-pill .dm-pill-close:hover,
.dm-pill .dm-pill-close:focus-visible { opacity: 1; }

/* ── Top Failing Sources section (Phase 10) ────────────────────────────
   Tier-styled section that supersedes the legacy MudTable. Per-row
   severity sets `--c` via .dm-s-critical|warning on the <tr>, so accent
   stripe, progress fill, and fail-rate readout all share that single
   colour. The section itself is fixed at critical at the section level
   for the title dot. */
.dm-tfs-section { margin-bottom: 16px; }
.dm-tfs-section .dm-tier-header { margin-bottom: 8px; }
.dm-tfs-table { width: 100%; }
.dm-tfs-table th, .dm-tfs-table td { white-space: nowrap; }

.dm-tfs-ip-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dm-tfs-ip-cell .dm-table-accent { margin-right: 0; }
.dm-tfs-recurring-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  white-space: nowrap;
}

.dm-tfs-domain-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  background: rgba(255,255,255,0.04);
  color: var(--dm-text-2);
  border: 1px solid var(--dm-border);
  white-space: nowrap;
}
.dm-tfs-domain-pill-link {
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.dm-tfs-domain-pill-link:hover {
  background: var(--dm-surface-hover);
  color: var(--dm-text);
}

.dm-tfs-sender-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  white-space: nowrap;
}
/* RECENTLY_REMOVED — same shape, warning tone (drives off --c). */
.dm-tfs-sender-chip.dm-s-warning {
  background: var(--c-soft);
  color: var(--c);
  border-color: color-mix(in oklab, var(--c) 30%, transparent);
}
.dm-tfs-sender-glyph { width: 12px; height: 12px; opacity: 0.85; flex-shrink: 0; }
.dm-tfs-sender-unknown {
  color: var(--dm-text-4);
  font-size: 12px;
}

.dm-tfs-fail-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.dm-tfs-fail-cell .dm-progress {
  width: 80px;
  flex-shrink: 0;
}
.dm-tfs-fail-readout {
  color: var(--c);
  font-weight: 500;
  min-width: 38px;
  text-align: right;
}

.dm-tfs-num-pass { color: var(--dm-text-2); }
.dm-tfs-num-fail { color: var(--critical); font-weight: 500; }

.dm-tfs-view-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: var(--dm-r-sm);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s;
}
.dm-tfs-view-link:hover {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}

/* Loading + empty primitives reused by other future dm- sections. */
.dm-skeleton-row td { padding: 12px 14px; }
.dm-skeleton-bar {
  display: block;
  height: 10px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--dm-surface) 0%,
    var(--dm-surface-hover) 50%,
    var(--dm-surface) 100%);
  background-size: 200% 100%;
  animation: dm-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes dm-skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.dm-empty {
  text-align: center;
  color: var(--dm-text-3);
  padding: 20px 14px;
  font-size: 12.5px;
}

/* ── Mobile DomainList ───────────────────────────────────────────────
   Rendered only when ViewportInfo.IsMobile (Breakpoint.Xs / <600 px).
   Severity colour comes from the same `--c` keystone as the desktop UI
   so chips/tier headers/cards all match the existing palette. */

.dm-mobile                    { display: flex; flex-direction: column; gap: 16px; }
.dm-mobile-filter             { position: sticky; top: 0; z-index: 2; background: var(--dm-bg); padding: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.dm-mobile-search             { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--dm-border); border-radius: var(--dm-r); background: var(--dm-surface); color: var(--dm-text); font: inherit; }
.dm-mobile-chips              { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }

.dm-mobile-chip               { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
                                border-radius: 999px; border: 1px solid var(--dm-border); background: var(--dm-surface);
                                color: var(--dm-text-2); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.dm-mobile-chip-on            { background: color-mix(in oklab, var(--c, var(--dm-text-3)) 18%, var(--dm-surface));
                                color: var(--c, var(--dm-text)); border-color: var(--c, var(--dm-border)); font-weight: 600; }
.dm-mobile-chip-count         { font-variant-numeric: tabular-nums; font-weight: 700; }

.dm-mobile-tier               { display: flex; flex-direction: column; gap: 10px; }
.dm-mobile-tier-header        { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c, var(--dm-text-2)); }
.dm-mobile-tier-count         { color: var(--dm-text-3); font-weight: 500; }

.dm-mobile-card               { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
                                background: var(--dm-surface); border: 1px solid var(--dm-border);
                                border-radius: var(--dm-r-lg); color: inherit; text-decoration: none;
                                position: relative; min-height: 44px; }
.dm-mobile-card:focus-visible { outline: 2px solid var(--dm-focus, #4b8bff); outline-offset: 2px; }
.dm-mobile-card.dm-has-accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
                                         background: var(--c, transparent); border-top-left-radius: var(--dm-r-lg);
                                         border-bottom-left-radius: var(--dm-r-lg); }

.dm-mobile-card-head          { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dm-mobile-card-domain        { font-weight: 600; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-mobile-card-pills         { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-mobile-card-stats         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dm-mobile-card-reason        { font-size: 12.5px; color: var(--dm-text-2); border-top: 1px solid var(--dm-border); padding-top: 8px; }
/* Issues mobile: meta row for last-report / freshness label below the
   stats grid. Not a pill — lives on its own row to keep dm-mobile-card-pills
   reserved for chip-style children. */
.dm-mobile-card-meta          { font-size: 12.5px; color: var(--dm-text-2); }

/* ── Mobile TopSourcesSection ────────────────────────────────────────
   Stacked-card variant rendered when ViewportInfo.IsMobile. Reuses the
   `--c` severity keystone, the desktop .dm-tfs-recurring-pill / .dm-tfs-
   sender-chip / .dm-progress primitives, and the .dm-skeleton-bar
   shimmer. Section header borrows the .dm-dot from dm-tier. */

.dm-tfs-mobile                 { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.dm-tfs-mobile-header          { display: flex; align-items: center; gap: 8px; color: var(--c, var(--dm-text-2));
                                 font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.dm-tfs-mobile-title           { color: var(--c, var(--dm-text)); }
.dm-tfs-mobile-count           { color: var(--dm-text-3); font-weight: 500; }

.dm-tfs-mobile-skeleton        { display: block; padding: 14px 16px; background: var(--dm-surface);
                                 border: 1px solid var(--dm-border); border-radius: var(--dm-r-lg); min-height: 44px; }

.dm-tfs-mobile-card            { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
                                 background: var(--dm-surface); border: 1px solid var(--dm-border);
                                 border-radius: var(--dm-r-lg); color: inherit; text-decoration: none;
                                 position: relative; min-height: 44px; border-left: 3px solid var(--c, var(--dm-border)); }
.dm-tfs-mobile-card:focus-visible { outline: 2px solid var(--dm-focus, #4b8bff); outline-offset: 2px; }

.dm-tfs-mobile-card-head       { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dm-tfs-mobile-card-ip         { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-tfs-mobile-card-failrate   { color: var(--c); font-weight: 600; font-size: 14px; }

.dm-tfs-mobile-card-pills      { display: flex; flex-wrap: wrap; gap: 6px; }

.dm-tfs-mobile-card-domain     { font-size: 12.5px; color: var(--dm-text-2); }

.dm-tfs-mobile-card-stats      { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* ── /app/domains v2 — Inventory band, Activity section, Recent activity ──
   Primitives added for the 2026-05-19 /app/domains refresh. Compose existing
   --dm-* / severity tokens only — no new colours, fonts, or radii. */

.dm-inv-band {
  background: var(--dm-bg-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
  margin: 0 0 12px;
}
.dm-inv-band-row {
  padding: 12px 14px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.dm-inv-band-row + .dm-inv-band-row {
  border-top: 1px solid var(--dm-border);
}
.dm-inv-band-dns { font-size: 12.5px; color: var(--dm-text-2); }
.dm-inv-band-dns-cell { display: inline-flex; align-items: center; gap: 6px; }

/* Activity — pass-rate strip */
.dm-act-passrate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: var(--dm-bg-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
  margin: 0 0 12px;
}
.dm-act-passrate-v {
  font: 500 28px ui-monospace, "SF Mono", Menlo, monospace;
  font-feature-settings: "tnum";
  color: var(--dm-text);
  line-height: 1;
}
.dm-act-passrate-meta { color: var(--dm-text-3); font-size: 11.5px; }
/* Renamed from .dm-stat-row to avoid collision with the .dm-hero-grid .dm-stat-row
   rule above; this one is scoped to the pass-rate strip's headline row. */
.dm-act-passrate-row { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; }

/* Activity — chart container, title, legend.
   Panel treatment (bg + border + radius + padding) matches .dm-act-passrate so the
   chart, disposition, reporter list and volume share read as a cohesive stack of
   cards under the Activity header rather than bare text floating on the page. */
.dm-chart {
  min-height: 180px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--dm-bg-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
}
.dm-chart-title  { font: 600 12px sans-serif; color: var(--dm-text-2); letter-spacing: 0.04em; margin: 0 0 6px; text-transform: uppercase; }
.dm-chart-legend { display: flex; gap: 14px; align-items: center; font-size: 11px; color: var(--dm-text-3); margin-top: 6px; flex-wrap: wrap; }
.dm-chart-legend .dm-mono { color: var(--dm-text); }

/* Activity — disposition stacked bar */
.dm-disposition {
  padding: 12px 14px;
  background: var(--dm-bg-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
}
.dm-stack-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--dm-surface-2);
}
.dm-stack-bar > span { display: block; height: 100%; }
.dm-stack-bar > span.s-clear    { background: var(--clear); }
.dm-stack-bar > span.s-warning  { background: var(--warning); }
.dm-stack-bar > span.s-critical { background: var(--critical); }
.dm-stack-bar-rows {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 6px 12px;
  align-items: center;
  font-size: 12px;
}

/* Activity — reporter list */
.dm-reporters {
  padding: 12px 14px;
  background: var(--dm-bg-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
}
.dm-reporter-list { display: flex; flex-direction: column; gap: 6px; }
.dm-reporter-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
}
.dm-reporter-row .dm-mono { color: var(--dm-text-2); }
.dm-reporter-more .dm-meta { color: var(--dm-text-3); }

/* Activity — volume by domain (neutral colour, not severity).
   margin-top breaks it off from the disposition/reporter row above; when this panel
   is hidden (DomainSummaries.Count <= 1) no extra gap is introduced. */
.dm-volume-share {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--dm-bg-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
}
.dm-volume-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
}
.dm-volume-row .dm-bar {
  height: 6px;
  background: var(--dm-text-2);
  border-radius: 999px;
  opacity: 0.55;
}
.dm-volume-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Activity — bottom two-column grid (Disposition + Reporter list) */
.activity-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1024px) {
  .activity-bottom { grid-template-columns: 1fr; }
}

/* Recent activity peek — single-line event rows */
.dm-recent-rows { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.dm-event-row {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--dm-r-sm);
  font-size: 13px;
  color: inherit;
  text-decoration: none;
  min-height: 44px;
}
.dm-event-row:hover { background: var(--dm-surface-hover); }
.dm-event-row .dm-event-when {
  font: 11.5px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--dm-text-3);
}

/* ============================================================
   Health Summary (Insights tab) — metric cards + hero
   Reuses the existing .dm-card primitive and its .dm-has-accent
   modifier (no separate accent rule needed).
   ============================================================ */

/* shared label (+ optional help glyph) */
.dm-health-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--dm-text-3);
}
.dm-help { width: 14px; height: 14px; color: var(--dm-text-3); opacity: 0.7; cursor: help; flex-shrink: 0; }
.dm-vs   { color: var(--dm-text-3); font-size: 12px; }

/* report-context strip (reporting period + policy) */
.dm-report-context {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--dm-bg);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r);
}
.dm-rc-period { display: flex; flex-direction: column; gap: 2px; }
.dm-rc-period .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dm-text-3); }
.dm-rc-period .r { font-size: 14px; color: var(--dm-text); }
.dm-rc-policy { display: flex; align-items: center; gap: 8px; }
.dm-rc-policy .note { font-size: 12px; color: var(--dm-text-3); }
/* neutral policy pill — .dm-pill base needs --c to render its colours */
.dm-pill.dm-pill-neutral { background: var(--dm-surface-2); color: var(--dm-text-2); border-color: var(--dm-border-strong); }

/* HERO — DMARC pass rate */
.dm-health-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 28px 40px; align-items: center;
  padding: 26px 30px; margin-bottom: 14px;
}
.dm-health-hero-main { display: flex; flex-direction: column; gap: 10px; }
.dm-health-hero-value {
  font-size: 56px; font-weight: 700; line-height: 0.95;
  letter-spacing: -0.02em; color: var(--c, var(--dm-text));
}
.dm-health-hero-value .unit { font-size: 30px; font-weight: 600; margin-left: 2px; }
.dm-health-hero-delta { display: flex; align-items: baseline; gap: 8px; }
.dm-health-hero-delta .dm-delta { font-size: 14px; }
.dm-health-hero-aside { display: flex; flex-direction: column; gap: 12px; }
.dm-health-hero .dm-progress { height: 8px; }
.dm-health-hero-sub { font-size: 13.5px; color: var(--dm-text-2); line-height: 1.5; }
.dm-health-hero-sub .dm-mono { color: var(--dm-text); font-weight: 600; }
.dm-health-hero-foot {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--dm-border);
}
.dm-mini { display: flex; flex-direction: column; gap: 1px; }
.dm-mini .v { font-size: 15px; font-weight: 600; color: var(--dm-text); }
.dm-mini .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dm-text-3); }

/* METRIC GRID */
.dm-health-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.dm-health-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; min-height: 132px;
}
/* default progress-fill colour — .dm-progress > span uses var(--c) with no
   intrinsic fallback, so a card progress bar without a .dm-s-* ancestor would
   render transparent. Scoped to .dm-progress (not the card root) so --c does
   not leak into other --c-consuming descendants. */
.dm-health-card .dm-progress { --c: var(--clear); }
.dm-health-value {
  font-size: 28px; font-weight: 600; line-height: 1;
  letter-spacing: -0.015em; color: var(--dm-text);
}
.dm-health-value .unit { font-size: 18px; font-weight: 500; color: var(--dm-text-2); margin-left: 1px; }
.dm-health-card .dm-delta { margin-top: auto; }
.dm-health-card-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
/* inline delta + "vs prior period" trailer row */
.dm-delta-row { display: inline-flex; align-items: baseline; gap: 6px; }

/* ============================================================
   DNS POSTURE PAGE (port of dns-styles.css; dm-dns-* namespace,
   --dm-* / --accent / severity tokens). Reuses dm-page / dm-toolbar /
   dm-seg / dm-btn / dm-pill / dm-chip / dm-dot / dm-mono primitives.
   ============================================================ */

/* page header */
.dm-dns-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.dm-dns-head-icon {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
}
.dm-dns-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--dm-text); }
.dm-dns-sub { font-size: 12.5px; color: var(--dm-text-3); margin-top: 2px; }
.dm-dns-head-actions { display: flex; align-items: center; gap: 10px; }
.dm-dns-sync-note { font-size: 11.5px; color: var(--dm-text-3); }

/* record chip — mono, status-toned. p=, SPF, MX, NS, alignment */
.dm-dns-rchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 5px;
  font-family: var(--dm-font-mono); font-size: 11px; font-feature-settings: "tnum";
  background: rgba(255,255,255,0.04); color: var(--dm-text-2);
  border: 1px solid var(--dm-border);
  white-space: nowrap; line-height: 1.5;
}
.dm-dns-rchip.ok   { color: var(--clear);    background: var(--clear-soft);    border-color: color-mix(in oklab, var(--clear) 32%, transparent); }
.dm-dns-rchip.bad  { color: var(--critical); background: var(--critical-soft); border-color: color-mix(in oklab, var(--critical) 32%, transparent); }
.dm-dns-rchip.warn { color: var(--warning);  background: var(--warning-soft);  border-color: color-mix(in oklab, var(--warning) 32%, transparent); }
.dm-dns-rchip.muted{ color: var(--dm-text-3); background: rgba(255,255,255,0.02); border-style: dashed; }
.dm-dns-rchip svg { flex: 0 0 auto; }

/* DKIM pips */
.dm-dns-dkim-pips { display: inline-flex; align-items: center; gap: 8px; }
.dm-dns-pips { display: inline-flex; gap: 3px; }
.dm-dns-pip { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dm-dns-pip.on  { background: var(--clear); box-shadow: 0 0 0 1px color-mix(in oklab, var(--clear) 40%, transparent); }
.dm-dns-pip.off { background: transparent; border: 1.5px solid var(--critical); box-shadow: 0 0 6px -1px color-mix(in oklab, var(--critical) 60%, transparent); }
.dm-dns-pip-count { font-size: 11.5px; color: var(--dm-text-2); }
.dm-dns-pip-count.bad { color: var(--critical); }

/* copy button */
.dm-dns-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; flex: 0 0 auto;
  background: transparent; border: 1px solid transparent;
  color: var(--dm-text-3); cursor: pointer; transition: all 0.12s;
}
.dm-dns-copy-btn:hover { color: var(--dm-text); background: rgba(255,255,255,0.06); border-color: var(--dm-border); }

/* freshness */
.dm-dns-freshness { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dm-text-3); }
.dm-dns-freshness.warn { color: var(--warning); }
.dm-dns-freshness.bad  { color: var(--critical); }
.dm-dns-freshness svg { opacity: 0.85; }

/* parsed DMARC */
.dm-dns-parsed { display: flex; flex-direction: column; gap: 1px; }
.dm-dns-parsed-tag {
  display: grid; grid-template-columns: 56px 1fr; align-items: baseline;
  gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--dm-border);
}
.dm-dns-parsed.dense .dm-dns-parsed-tag { padding: 4px 0; }
.dm-dns-parsed-tag:last-child { border-bottom: none; }
.dm-dns-pt-key { font-size: 12px; color: var(--accent); font-weight: 500; }
.dm-dns-pt-key.good { color: var(--clear); }
.dm-dns-pt-key.warn { color: var(--warning); }
.dm-dns-pt-key.bad  { color: var(--critical); }
.dm-dns-pt-val { font-size: 12.5px; color: var(--dm-text); grid-column: 2; word-break: break-word; }
.dm-dns-pt-desc { grid-column: 2; font-size: 11px; color: var(--dm-text-3); }
.dm-dns-parsed-empty { font-size: 12.5px; color: var(--critical); padding: 8px 0; }

/* raw record row */
.dm-dns-rec-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--dm-border); }
.dm-dns-rec-row:last-child { border-bottom: none; }
.dm-dns-rec-label { font-size: 11px; color: var(--dm-text-3); text-transform: uppercase; letter-spacing: 0.05em; min-width: 44px; flex: 0 0 auto; }
.dm-dns-rec-val { font-size: 12px; color: var(--dm-text-2); word-break: break-all; flex: 1; }
.dm-dns-rec-val.absent { color: var(--critical); font-style: italic; }

/* posture table */
.dm-dns-table-wrap { border: 1px solid var(--dm-border); border-radius: var(--dm-r); overflow: hidden; background: var(--dm-bg-2); margin-bottom: 16px; }
.dm-dns-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dm-dns-table th {
  text-align: left; font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--dm-text-3); padding: 9px 14px; border-bottom: 1px solid var(--dm-border);
  background: var(--dm-surface); white-space: nowrap;
}
.dm-dns-table td { padding: 10px 14px; border-bottom: 1px solid var(--dm-border); vertical-align: middle; }
.dm-dns-table tbody tr { cursor: pointer; }
.dm-dns-table tbody tr:hover td { background: var(--dm-surface); }
.dm-dns-domain-cell { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 13px; }
.dm-dns-acc { width: 3px; height: 16px; border-radius: 2px; background: var(--c, var(--dm-text-3)); flex: 0 0 auto; }
.dm-dns-why { color: var(--dm-text-3); font-size: 11.5px; margin-top: 2px; }
.dm-dns-cell-chips { display: flex; gap: 4px; flex-wrap: wrap; }

/* expanded detail row */
.dm-dns-detail-row td { background: var(--dm-bg) !important; padding: 0 !important; cursor: default; }
.dm-dns-detail-row:hover td { background: var(--dm-bg) !important; }
.dm-dns-detail { border-top: 1px solid var(--dm-border); }
.dm-dns-detail-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 28px; padding: 20px 22px 22px; }
.dm-dns-detail-col h5 { margin: 0 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dm-text-3); font-weight: 600; display: flex; align-items: center; }

.dm-dns-sel-list { display: flex; flex-direction: column; gap: 2px; }
.dm-dns-sel-row { display: grid; grid-template-columns: 10px auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--dm-border); }
.dm-dns-sel-row:last-child { border-bottom: none; }
.dm-dns-sel-row.missing { background: linear-gradient(to right, var(--critical-soft), transparent 60%); margin: 0 -8px; padding: 8px; border-radius: 6px; border-bottom: none; }
.dm-dns-sel-name { font-size: 12.5px; color: var(--dm-text); font-weight: 500; }
.dm-dns-sel-src { font-size: 11px; color: var(--dm-text-3); }
.dm-dns-sel-state { font-size: 11px; color: var(--clear); }
.dm-dns-sel-state.bad { color: var(--critical); }

.dm-dns-reality-rows { display: flex; flex-direction: column; gap: 2px; }
.dm-dns-reality-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--dm-border); font-size: 12.5px; }
.dm-dns-reality-row:last-child { border-bottom: none; }
.dm-dns-reality-row .k { color: var(--dm-text-3); }
.dm-dns-detail-issues { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.dm-dns-detail-issue { font-size: 12px; color: var(--dm-text-2); padding: 8px 10px; background: var(--dm-surface); border-radius: 7px; border-left: 2px solid var(--dm-text-4); line-height: 1.4; }
.dm-dns-detail-issue.bad { border-left-color: var(--critical); }
.dm-dns-detail-issue.warn { border-left-color: var(--warning); }

/* DKIM selector matrix */
.dm-dns-matrix-wrap { border: 1px solid var(--dm-border); border-radius: var(--dm-r); background: var(--dm-bg-2); padding: 16px; overflow-x: auto; margin-bottom: 16px; }
.dm-dns-matrix { border-collapse: separate; border-spacing: 4px; font-size: 12px; }
.dm-dns-matrix th { font-weight: 500; font-size: 10.5px; color: var(--dm-text-3); padding: 4px 8px; text-align: left; white-space: nowrap; }
.dm-dns-matrix th.sel { text-align: center; font-family: var(--dm-font-mono); }
.dm-dns-matrix td.domain { font-weight: 500; padding: 4px 10px 4px 4px; white-space: nowrap; }
.dm-dns-mx-cell { width: 40px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-family: var(--dm-font-mono); }
.dm-dns-mx-cell.pub { background: var(--clear-soft); color: var(--clear); border: 1px solid color-mix(in oklab, var(--clear) 26%, transparent); }
.dm-dns-mx-cell.missing { background: var(--critical-soft); color: var(--critical); border: 1px solid color-mix(in oklab, var(--critical) 40%, transparent); }
.dm-dns-mx-cell.na { background: rgba(255,255,255,0.02); border: 1px solid var(--dm-border); color: var(--dm-text-4); }
.dm-dns-matrix-legend { display: flex; gap: 16px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dm-border); font-size: 11.5px; color: var(--dm-text-3); }
.dm-dns-matrix-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.dm-dns-matrix-legend .sw { width: 14px; height: 14px; border-radius: 4px; }
.dm-dns-matrix-legend .sw.pub { background: var(--clear-soft); border: 1px solid color-mix(in oklab, var(--clear) 26%, transparent); }
.dm-dns-matrix-legend .sw.missing { background: var(--critical-soft); border: 1px solid color-mix(in oklab, var(--critical) 40%, transparent); }
.dm-dns-matrix-legend .sw.na { background: rgba(255,255,255,0.02); border: 1px solid var(--dm-border); }

/* summary band */
.dm-dns-summary { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; background: var(--dm-bg-2); border: 1px solid var(--dm-border); border-radius: var(--dm-r); }
.dm-dns-summary .sstat { display: flex; flex-direction: column; gap: 2px; }
.dm-dns-summary .sstat .v { font-family: var(--dm-font-mono); font-size: 20px; font-weight: 600; line-height: 1; }
.dm-dns-summary .sstat .v.critical { color: var(--critical); }
.dm-dns-summary .sstat .v.warning { color: var(--warning); }
.dm-dns-summary .sstat .v.clear { color: var(--clear); }
.dm-dns-summary .sstat .l { font-size: 10.5px; color: var(--dm-text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.dm-dns-summary .sep { width: 1px; height: 30px; background: var(--dm-border-strong); }
.dm-dns-summary .grow { flex: 1; }

/* attention strip */
.dm-dns-attn { background: var(--dm-bg-2); border: 1px solid var(--dm-border); border-radius: var(--dm-r); padding: 14px 16px 16px; margin-bottom: 16px; }
.dm-dns-attn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dm-dns-attn-title { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--dm-text); }
.dm-dns-attn-title svg { color: var(--critical); }
.dm-dns-alert-strip { display: flex; flex-direction: column; gap: 10px; }
.dm-dns-alert-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; background: var(--dm-surface); border: 1px solid var(--dm-border);
  border-radius: var(--dm-r); border-left: 3px solid var(--c, var(--critical));
  cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.dm-dns-alert-card:hover { background: var(--dm-surface-2); }
.dm-dns-alert-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--c-soft); color: var(--c); flex: 0 0 auto; }
.dm-dns-alert-body { min-width: 0; }
.dm-dns-alert-domain { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.dm-dns-alert-text { font-size: 12.5px; color: var(--dm-text-2); margin-top: 2px; line-height: 1.45; }
.dm-dns-alert-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* change feed */
.dm-dns-changes { margin-top: 22px; border: 1px solid var(--dm-border); border-radius: var(--dm-r); overflow: hidden; background: var(--dm-bg-2); }
.dm-dns-changes-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: var(--dm-surface); border: none; cursor: pointer; color: var(--dm-text-2); font-size: 12.5px; text-align: left; }
.dm-dns-changes-head:hover { background: var(--dm-surface-2); }
.dm-dns-changes-head .ch-title { font-weight: 600; color: var(--dm-text); font-size: 13px; }
.dm-dns-changes-body { display: flex; flex-direction: column; }
.dm-dns-change-row { display: grid; grid-template-columns: 20px minmax(150px, 1fr) auto 1.4fr auto; gap: 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--dm-border); font-size: 12.5px; }
.dm-dns-change-row .ch-sev { display: flex; justify-content: center; }
.dm-dns-change-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dm-text-3); }
.dm-dns-change-dot.crit { background: var(--critical); box-shadow: 0 0 0 3px var(--critical-soft); }
.dm-dns-change-row .ch-domain { color: var(--dm-text); font-weight: 500; }
.dm-dns-change-row .ch-field { justify-self: start; }
.dm-dns-change-row .ch-label { color: var(--dm-text-2); }
.dm-dns-change-row.dm-s-critical .ch-label { color: var(--dm-text); }
.dm-dns-change-row .ch-when { color: var(--dm-text-3); justify-self: end; }

@media (max-width: 720px) {
  .dm-dns-detail-grid { grid-template-columns: 1fr; gap: 18px; }
  .dm-dns-change-row { grid-template-columns: 16px 1fr auto; }
  .dm-dns-change-row .ch-label, .dm-dns-change-row .ch-when { grid-column: 2 / -1; }
}