/* ─── Reset & base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Colour tokens (v2.48.14) ──────────────────────────────────────────
   Every colour of the site is a token: light values on :root, dark values
   on :root[data-theme="dark"]. data-theme is set before any stylesheet loads
   by the inline boot script in <head> (src/theme.js). Print / save as PDF
   always renders light - the dark block applies to screens only. No colour
   literal anywhere else (ui-leak-guard.js checks it); contrast is checked by
   scripts/contrast-check.js. */
:root {
  /* Surfaces */
  --bg: #F4F5F7;
  --panel: #FFFFFF;
  --border: #DCE0E6;
  --input-border: #8C95A4;
  --surface-tint: rgba(21,24,29,0.03);
  --surface-tint-strong: rgba(21,24,29,0.07);

  /* Text */
  --text: #15181D;
  --text-secondary: #3B424E;
  --muted: #5A6371;
  --disabled: #626A79;

  /* Flags (location control / badge) - the same in both themes */
  --flag-eu-blue: #003399;
  --flag-eu-gold: #FFCC00;
  --flag-us-red: #B22234;
  --flag-us-blue: #3C3B6E;
  --flag-white: #FFFFFF;

  /* Accent */
  --accent: #5148E0;
  --accent-hover: #4038C4;
  --on-accent: #FFFFFF;
  --link: #4038C4;
  --accent-tint-faint: rgba(81,72,224,0.05);
  --accent-tint: rgba(81,72,224,0.12);
  --accent-tint-strong: rgba(81,72,224,0.35);
  --accent-text: #4038C4;
  --fix-bg: #F6F7F9;
  --backdrop: rgba(21,24,29,0.45);
  --menu-shadow: 0 8px 24px rgba(21,24,29,0.12), 0 1px 3px rgba(21,24,29,0.08);

  /* Severity (Critical / High / Medium / Info) */
  --critical-text: #B3261E;
  --critical-bg: rgba(179,38,30,0.08);
  --critical-border: rgba(179,38,30,0.7);
  --critical-tint: rgba(179,38,30,0.06);
  --high-text: #8F4C00;
  --high-bg: rgba(201,120,0,0.12);
  --high-border: rgba(143,76,0,0.75);
  --high-tint: rgba(201,120,0,0.08);
  --medium-text: #0A5C99;
  --medium-bg: rgba(10,92,153,0.08);
  --medium-border: rgba(10,92,153,0.75);
  --medium-tint: rgba(10,92,153,0.06);
  --info-text: #4A5260;
  --info-bg: rgba(74,82,96,0.06);
  --info-border: #8C95A4;
  /* v2.73.0: Low (Minor issues) - slate blue, apart from Info's grey */
  --low-text: #4C5F86;
  --low-bg: rgba(76,95,134,0.08);
  --low-border: rgba(76,95,134,0.7);

  /* Status (Tools table, chips, steps) */
  --status-fired: #0B7343;
  --status-server: #0A5C99;
  --status-detected: #7F5A00;
  --status-notfound: #6E7686;
  --fired-tint: rgba(11,115,67,0.08);
  --fired-tint-strong: rgba(11,115,67,0.12);
  --fired-border: rgba(11,115,67,0.75);
  --neutral-tint: rgba(74,82,96,0.08);
  --server-tint: rgba(10,92,153,0.10);
  --detected-tint-faint: rgba(127,90,0,0.04);
  --detected-tint: rgba(127,90,0,0.08);
  --detected-tint-strong: rgba(127,90,0,0.12);
  --detected-border: rgba(127,90,0,0.75);
  --detected-border-strong: rgba(127,90,0,0.85);

  color-scheme: light;

  --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --radius-card: 10px;
  --radius-input: 6px;
  --radius-pill: 999px;

  /* Spacing scale (v2.48.15) - every margin, padding and gap uses these. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --row-y: 14px;     /* table row padding (Tools table) */
  /* Below 420 px while the bot check shows: the form's side padding shrinks just
     enough for Turnstile's flexible minimum (300 px + its border), never under s1.
     A custom property, so 100% is the form's width where it is used. */
  --pad-turnstile: clamp(var(--s1), calc((100% - 302px) / 2), var(--s4));
  --card-pad: var(--s5);
  --card-pad-narrow: 20px;
  /* The Running screen's progress bar (v2.59.0: about twice the old 5 px). */
  --progress-h: 10px;
  --stage-gap: 2px;  /* the gaps between the bar's six segments */
}
@media screen {
  :root[data-theme="dark"] {
    /* Surfaces */
    --bg: #0E1014;
    --panel: #15181E;
    --border: #232833;
    --input-border: #646C7B;
    --surface-tint: rgba(255,255,255,0.02);
    --surface-tint-strong: rgba(255,255,255,0.08);

    /* Text */
    --text: #E6E8EC;
    --text-secondary: #C4CAD4;
    --muted: #9AA3B2;
    --disabled: #8F97A6;

    /* Accent */
    --accent: #8B85FF;
    --accent-hover: #A29CFF;
    --on-accent: #0E1014;
    --link: #A9A4FF;
    --accent-tint-faint: rgba(139,133,255,0.07);
    --accent-tint: rgba(139,133,255,0.12);
    --accent-tint-strong: rgba(139,133,255,0.45);
    --accent-text: #A9A4FF;
    --fix-bg: #1C2028;
    --backdrop: rgba(0,0,0,0.6);
    --menu-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);

    /* Severity (Critical / High / Medium / Info) */
    --critical-text: #FF8A7A;
    --critical-bg: rgba(255,107,94,0.14);
    --critical-border: rgba(255,107,94,0.65);
    --critical-tint: rgba(255,107,94,0.08);
    --high-text: #F5B14C;
    --high-bg: rgba(245,165,36,0.12);
    --high-border: rgba(245,165,36,0.6);
    --high-tint: rgba(245,177,76,0.08);
    --medium-text: #7CC4FF;
    --medium-bg: rgba(124,196,255,0.10);
    --medium-border: rgba(124,196,255,0.55);
    --medium-tint: rgba(124,196,255,0.08);
    --info-text: #B4BBC7;
    --info-bg: rgba(180,187,199,0.08);
    --info-border: #646C7B;
    --low-text: #8FA3C7;
    --low-bg: rgba(143,163,199,0.10);
    --low-border: rgba(143,163,199,0.6);

    /* Status (Tools table, chips, steps) */
    --status-fired: #5EE0A0;
    --status-server: #7CC4FF;
    --status-detected: #F5C451;
    --status-notfound: #6B7383;
    --fired-tint: rgba(94,224,160,0.12);
    --fired-tint-strong: rgba(94,224,160,0.16);
    --fired-border: rgba(94,224,160,0.6);
    --neutral-tint: rgba(180,187,199,0.1);
    --server-tint: rgba(124,196,255,0.14);
    --detected-tint-faint: rgba(245,196,81,0.035);
    --detected-tint: rgba(245,196,81,0.10);
    --detected-tint-strong: rgba(245,196,81,0.16);
    --detected-border: rgba(245,196,81,0.45);
    --detected-border-strong: rgba(245,196,81,0.55);

    color-scheme: dark;
  }
}


body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

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

.hidden { display: none !important; }
.muted { color: var(--muted); font-weight: 400; }
.mono { font-family: var(--mono); }

/* Build identifier — always visible so a stale/cached page or a stale
   running server is obvious at a glance instead of by guesswork. */
.build-footer {
  text-align: center;
  padding: var(--s3) 0 var(--s4);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--muted);
}

/* Shown when the server runs a newer build than this tab loaded. */
.stale-build {
  margin: var(--s3) var(--s4) 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--high-border);
  background: var(--high-bg);
  color: var(--text);
  border-radius: 8px;
  font-size: 14px;
}
.stale-build button {
  margin-left: var(--s2);
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--high-border);
  border-radius: 6px;
  padding: var(--s1) var(--s3);
  cursor: pointer;
}

/* Visible focus ring everywhere, keyboard-only */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Section label style (eyebrows, card labels) ─────────────────────── */
.eyebrow, .section-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ─── Top bar ──────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.topbar-title h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.topbar-subtitle { font-size: 12px; color: var(--muted); margin-top: var(--s1); }

/* ─── Colour theme switch (v2.48.14) ───────────────────────────────────── */
.topbar-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; justify-content: flex-end; }
.theme-switch {
  display: inline-flex;
  gap: var(--s1);
  padding: var(--s1);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  background: var(--bg);
}
.theme-option {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding: var(--s1) var(--s3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.theme-option:hover { color: var(--text); }
.theme-option[aria-checked="true"] { background: var(--panel); border-color: var(--accent); color: var(--text); }
.theme-option[aria-checked="true"] .theme-icon { color: var(--accent); }
.theme-icon { flex-shrink: 0; }
@media (max-width: 480px) {
  .topbar { padding: var(--s3) var(--s4); }
  .topbar .theme-label { display: none; }
  .theme-option { padding: var(--s1) var(--s2); }
  .topbar-actions { gap: var(--s2); }
}
@media print {
  .theme-switch, .footer-theme { display: none; }
}

/* ─── Layout ───────────────────────────────────────────────────────────── */
.layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  padding: var(--s5);
  max-width: 1440px;
  margin: 0 auto;
}
/* v2.61.0: the width never follows the content (min-width: 0) - with
   280px and the default min-width: auto the closed Options row (one line)
   made the sidebar 311.5 px and the open one 280.5, so opening Options moved
   the whole results column 31 px. 312 px fits the closed row.
   v2.76.0 (owner): 334 px - the form's content is then 300 px with its
   normal padding, the minimum width of the bot check's flexible widget. */
.sidebar { flex: 1 1 334px; max-width: 340px; min-width: 0; }
.results { flex: 999 1 560px; min-width: 0; }
/* Phone layout (owner, v2.77.0): "+ Test another site" over a report, the
   form closed behind it; the sign-up card and a link back to the form after
   the report (#layout-end - app.js moves the one card there). */
.layout .new-test-btn, .layout .back-to-form { display: none; }
.layout-end { display: none; }
@media (max-width: 599.98px) {
  .layout { gap: var(--s4); padding: var(--s4); }
  .layout-end { display: flex; flex: 1 1 100%; min-width: 0; flex-direction: column; gap: var(--s4); }
  .layout.is-running .layout-end { display: none; }
  .layout.has-report:not(.form-open) .sidebar { display: none; }
  .layout.has-report:not(.form-open) .new-test-btn { display: block; flex: 1 1 100%; width: 100%; }
  .layout.has-report .back-to-form { display: block; text-align: center; color: var(--accent-text); font-size: 14px; }
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */
button {
  font-family: var(--font);
  font-size: 14px;
}
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  border: none;
  border-radius: var(--radius-input);
  cursor: pointer;
  font-weight: 600;
  padding: var(--s3) var(--s4);
  min-height: 44px;
  transition: background 0.15s, opacity 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-block { width: 100%; margin-top: var(--s5); }
/* Cloudflare Turnstile: shown between the URL field and Run test only when it
   needs an interaction (v2.76.0, owner) - 14 px above and below it, the
   widget's own frame only (no border, background or padding of ours). */
.turnstile-box { margin: 0; padding: 0; border: 0; background: none; }
/* Turnstile's flexible size is at least 300 px wide (owner, 30 Oct 2026:
   flexible, no compact). On desktop the column fits it (.sidebar, 334 px);
   on a phone, while the check is on screen, the card's side padding shrinks
   just enough for it (never under 4 px). */
@media (max-width: 420px) {
  .sidebar form:has(#turnstile-box:not([hidden])) { padding-inline: var(--pad-turnstile); }
}
.field:has(+ .turnstile-box:not([hidden])) { margin-bottom: var(--row-y); }
.turnstile-box:not([hidden]) + .btn-block { margin-top: var(--row-y); }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--input-border);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--link); }
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }

/* ─── Form fields ──────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.field label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }

input[type="text"], input[type="url"], input[type="number"], input[type="email"] {
  background: var(--panel);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: var(--s2) var(--s3);
  width: 100%;
  min-height: 40px;
  transition: border-color 0.15s;
}
input:focus { border-color: var(--accent); }
input[type="number"] { width: 110px; }

.field-error {
  font-size: 12px;
  color: var(--critical-text);
}

.id-grid { display: flex; flex-direction: column; }
.id-grid .field:last-child { margin-bottom: 0; }

/* ─── Collapsible option groups ────────────────────────────────────────── */
.options-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: var(--s4);
  background: var(--panel);
  overflow: hidden;
}
.options-group summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: var(--s3) var(--s4);
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  gap: var(--s2);
}
.options-group summary::-webkit-details-marker { display: none; }
.options-group summary::before {
  content: '▸';
  display: inline-block;
  margin-right: var(--s2);
  color: var(--muted);
  transition: transform 0.15s;
}
.options-group[open] > summary::before { transform: rotate(90deg); }
.options-body { padding: var(--s1) var(--s4) var(--s4); border-top: 1px solid var(--border); }
.options-body.id-grid { padding-top: var(--s4); }


.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s1);
  min-height: 44px;
  cursor: pointer;
}
.toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: var(--s1);
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-text { display: flex; flex-direction: column; gap: 0; }
.toggle-label { font-size: 14px; color: var(--text); }
.toggle-sub { font-size: 12px; color: var(--muted); }

.utm-row {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: var(--s1) 0 var(--s3) var(--s6);
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg);
}
.utm-row .field { margin-bottom: 0; }

.wait-field { margin-top: var(--s1); }
.wait-input-row { display: flex; align-items: center; gap: var(--s2); }
.wait-input-row input { width: 100px; }
.wait-input-row .unit { color: var(--muted); font-size: 13px; }

/* ─── Results: empty / running states ─────────────────────────────────── */
.empty-note { color: var(--muted); font-size: 14px; padding: var(--s2) 0; }

.accept-fail-banner {
  background: var(--critical-bg);
  border: 1px solid var(--critical-border);
  color: var(--critical-text);
  border-radius: var(--radius-input);
  padding: var(--s3) var(--s4);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: var(--s3);
}

/* ─── Severity tokens (shared by tiles, badges, pills) ────────────────── */
.sev-critical { color: var(--critical-text); background: var(--critical-bg); border-color: var(--critical-border); }
.sev-high     { color: var(--high-text);     background: var(--high-bg);     border-color: var(--high-border); }
.sev-medium   { color: var(--medium-text);   background: var(--medium-bg);   border-color: var(--medium-border); }
.sev-info     { color: var(--info-text);     background: var(--info-bg);     border-color: var(--info-border); }
.sev-low      { color: var(--low-text);      background: var(--low-bg);      border-color: var(--low-border); }

/* ─── (b) Issues list ──────────────────────────────────────────────────── */
.issues-section { margin-bottom: var(--s5); }
.issues-list { display: flex; flex-direction: column; gap: var(--s3); }

.issue-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.issue-card.sev-P0 { border-left-color: var(--critical-text); }
.issue-card.sev-P1 { border-left-color: var(--high-text); }
.issue-card.sev-P2 { border-left-color: var(--medium-text); }
.issue-card.sev-P3 { border-left-color: var(--info-text); }
/* v2.73.0: Minor issues - the Needs attention card shape, Low colour. */
.finding-card.minor-card { border-color: var(--low-border); }
.minor-section .section-why, .rcard .section-why { color: var(--muted); font-size: 14px; margin: 0 0 var(--s3); }
.stat-minor { margin-left: var(--s2); font: 400 14px var(--font); color: var(--muted); letter-spacing: 0; white-space: nowrap; }


.sev-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: var(--radius-pill);
  padding: var(--s1) var(--s3);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.issue-title { font-weight: 600; font-size: 14px; }
.count-x { font-family: var(--mono); color: var(--muted); font-weight: 600; }

.impact-text { font-size: 13px; margin-bottom: var(--s2); overflow-wrap: anywhere; }

/* Grouped, expandable evidence (vendor · N hits to host/path · +Ns after load) */
.evidence-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  margin-bottom: var(--s2);
  padding: var(--s1) var(--s3);
}

/* Evidence table — every row is self-describing: # | What | When | Consent
   state | Key data | URL. Wrapped for horizontal scroll on narrow viewports
   above the stacking breakpoint below. */
.evidence-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--border);
  margin: var(--s1) 0 var(--s2);
}
.evidence-table {
  /* No width:100% — let the table size to its content and scroll
     horizontally inside .evidence-table-wrap instead of squeezing every
     column until labels wrap mid-word. */
  min-width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-secondary);
  white-space: nowrap;
}
.evidence-table th {
  text-align: left;
  font-family: var(--font);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: var(--s2) var(--s2);
  white-space: nowrap;
}
.evidence-table td {
  padding: var(--s1) var(--s2);
  vertical-align: top;
  border-top: 1px solid var(--border);
}
.evidence-table .ev-idx { color: var(--muted); width: 1%; white-space: nowrap; }
.evidence-table .ev-what strong { color: var(--text); font-weight: 600; }
.evidence-table .ev-when { white-space: nowrap; }
.evidence-table .ev-url { min-width: 220px; }
.evidence-table .ev-url code { overflow-wrap: anywhere; word-break: break-all; }

.phase-chip {
  display: inline-block;
  margin-left: var(--s1);
  padding: 0 var(--s2);
  border-radius: 3px;
  font-size: 10px;
  font-family: inherit;
  border: 1px solid var(--border);
}
.phase-chip.phase-before-choice { color: var(--high-text); border-color: var(--high-border); }
.phase-chip.phase-after-accept { color: var(--status-fired); border-color: var(--status-fired); }

.show-all-btn {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--s1) var(--s2);
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
}
.show-all-btn { margin: var(--s2) 0 var(--s2); }

/* Narrow screens: stack each row as a labelled block instead of scrolling a
   6-column table sideways. */

/* ─── (c) Insight cards: consent + server-side ────────────────────────── */
.insight-row { display: flex; flex-wrap: wrap; gap: var(--s5); margin-bottom: var(--s5); }
.insight-card {
  flex: 1 1 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s4);
  min-width: 0;
}
.insight-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.insight-subline { font-size: 12px; color: var(--muted); margin-bottom: var(--s4); word-break: break-word; }
.sst-entry:first-child { margin-top: 0; }
.sst-divider { border: none; border-top: 1px solid var(--border); margin: var(--s4) 0; }

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--s1) var(--s3);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
}
.pill-ok       { color: var(--status-fired); background: var(--fired-tint); border-color: var(--fired-border); }
.pill-warn     { color: var(--high-text);    background: var(--high-bg);        border-color: var(--high-border); }
.pill-critical { color: var(--critical-text); background: var(--critical-bg);   border-color: var(--critical-border); }
.pill-info     { color: var(--info-text);    background: var(--info-bg);        border-color: var(--info-border); }

/* Timeline */
.timeline { list-style: none; display: flex; flex-direction: column; gap: var(--s4); }
.timeline-step { display: flex; gap: var(--s3); align-items: flex-start; }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: var(--s1);
  flex-shrink: 0;
}
.dot-red   { background: var(--critical-text); }
.dot-amber { background: var(--high-text); }
.dot-green { background: var(--status-fired); }
.dot-grey  { background: var(--disabled); }
.timeline-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.timeline-text { font-size: 13px; margin-top: var(--s1); }

/* Key/value grid for server-side card */
.kv-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); font-size: 13px; }
.kv-grid dt { color: var(--muted); }
.kv-grid dd { color: var(--text); word-break: break-word; }

/* ─── (d) Tags table ───────────────────────────────────────────────────── */
.tags-section { margin-bottom: var(--s5); }
.table-scroll { overflow-x: auto; }
.tags-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.tags-table th, .tags-table td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.tags-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface-tint);
}
.tags-table tr:last-child td { border-bottom: none; }
.id-row { font-size: 12px; margin-bottom: var(--s1); }
.id-row:last-child { margin-bottom: 0; }

/* ─── (e) Live feed ────────────────────────────────────────────────────── */
.feed-details {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--panel);
  overflow: hidden;
}
.feed-details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: var(--s4) var(--s4);
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-secondary);
  gap: var(--s2);
}
.feed-details > summary::-webkit-details-marker { display: none; }
.feed-details > summary::before {
  content: '▸';
  color: var(--muted);
  transition: transform 0.15s;
}
.feed-details[open] > summary::before { transform: rotate(90deg); }

.feed-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: 0 var(--s4) var(--s3);
  border-bottom: 1px solid var(--border);
}
.chip {
  border: 1px solid var(--input-border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  padding: var(--s2) var(--s4);
  min-height: 32px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.feed-body {
  font-family: var(--mono);
  font-size: 12px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--s3) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.feed-row { display: flex; gap: var(--s3); line-height: 1.5; align-items: baseline; flex-wrap: wrap; }

/* Filter chips hide rows by data-kind; "all" (the default, no attribute) shows
   everything. The consent divider (.feed-row-divider) always carries
   data-kind="consent" and is matched alongside .feed-row so it's hidden/shown
   the same way under every filter. */
.feed-body[data-filter="pixels"] .feed-row:not([data-kind="tracking"]),
.feed-body[data-filter="pixels"] .feed-row-divider { display: none; }
.feed-body[data-filter="consent"] .feed-row:not([data-kind="cmp"]):not([data-kind="consent"]) { display: none; }
.feed-body[data-filter="server-side"] .feed-row:not([data-kind="sst"]),
.feed-body[data-filter="server-side"] .feed-row-divider { display: none; }
.feed-body[data-filter="errors"] .feed-row:not([data-kind="error"]),
.feed-body[data-filter="errors"] .feed-row-divider { display: none; }
.feed-body[data-filter="site"] .feed-row:not([data-kind="site"]),
.feed-body[data-filter="site"] .feed-row-divider { display: none; }
.feed-time { color: var(--disabled); flex-shrink: 0; }
.feed-kind {
  border-radius: 3px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 0 var(--s1);
  text-transform: uppercase;
}
.feed-kind-status   { background: var(--accent-tint); color: var(--accent); }
.feed-kind-tracking { background: var(--fired-tint-strong); color: var(--status-fired); }
.feed-kind-error    { background: var(--critical-bg); color: var(--critical-text); }
.feed-kind-site     { background: var(--neutral-tint); color: var(--disabled); }
.feed-kind-note     { background: var(--neutral-tint); color: var(--muted); }
.feed-kind-page     { background: var(--neutral-tint); color: var(--muted); }
.feed-kind-cmp      { background: var(--high-bg); color: var(--high-text); }
.feed-kind-sst      { background: var(--medium-bg); color: var(--medium-text); }
.feed-kind-consent  { background: var(--high-bg); color: var(--high-text); }
.feed-text { color: var(--text); word-break: break-all; }
.feed-repeat-count { margin-left: var(--s1); padding: 0 var(--s1); border-radius: 3px; font-size: 10px; font-weight: 700; background: var(--surface-tint-strong); color: var(--muted); }

.feed-phase, .feed-routing, .feed-detected-badge {
  border-radius: 3px;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  padding: 0 var(--s1);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.feed-phase-pre  { background: var(--neutral-tint); color: var(--muted); }
.feed-phase-post { background: var(--fired-tint-strong); color: var(--status-fired); }
.feed-routing-client { background: var(--neutral-tint); color: var(--muted); }
.feed-routing-server { background: var(--server-tint); color: var(--status-server); }
.feed-detected-badge { background: var(--detected-tint-strong); color: var(--status-detected); cursor: help; }

.feed-row-divider {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s2) 0;
  color: var(--high-text);
}
.feed-row-divider::before, .feed-row-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--high-border);
}
.feed-divider-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ─── Narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .sidebar { max-width: none; flex-basis: 100%; }
}

/* ─── Running screen ───────────────────────────────────────────────────── */
.run-screen {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.run-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.run-title { flex: 1 1 200px; min-width: 0; }
.run-host { font-size: 20px; font-weight: 700; margin-top: var(--s1); overflow-wrap: anywhere; }
.run-time { font-size: 13px; color: var(--text-secondary); font-family: var(--mono); }

@keyframes spin { to { transform: rotate(360deg); } }

.chip-legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); font-size: 11px; }
.chip-key { padding-left: var(--s2); border-left: 3px solid; }
.chip-legend .chip-key { color: var(--muted); }
.chip-key.consent-before { border-color: var(--high-text); }
.chip-key.consent-cookieless { border-color: var(--medium-text); }
.chip-key.consent-after { border-color: var(--status-fired); }

/* ─── Verdict card ─────────────────────────────────────────────────────── */
.verdict-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s5);
  margin-bottom: var(--s5);
}
.verdict-meta { font-size: 12px; color: var(--muted); font-family: var(--mono); overflow-wrap: anywhere; }
.verdict-h1 { font-size: 24px; font-weight: 700; line-height: 1.3; margin: var(--s2) 0 var(--s3); }
.verdict-error { margin: 0 0 var(--s3); }
.verdict-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.verdict-chip { font-size: 12px; font-weight: 600; padding: var(--s1) var(--s3); border-radius: var(--radius-pill); border: 1px solid; }
.chip-ok   { color: var(--status-fired); background: var(--fired-tint); border-color: var(--fired-border); }
.chip-warn { color: var(--high-text); background: var(--high-bg); border-color: var(--high-border); }
.chip-dup  { color: var(--status-detected); background: var(--detected-tint); border-color: var(--detected-border); }
.chip-bad  { color: var(--critical-text); background: var(--critical-bg); border-color: var(--critical-border); }
.chip-info { color: var(--info-text); background: var(--info-bg); border-color: var(--info-border); }

/* ─── Section heads ────────────────────────────────────────────────────── */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.section-title { font-size: 16px; font-weight: 700; margin-bottom: var(--s3); }
.section-head .section-title { margin-bottom: 0; }
.sev-line { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.attention-section { margin-bottom: var(--s5); }

.evidence-lines { padding-left: var(--s4); margin-top: var(--s2); color: var(--text-secondary); overflow-wrap: anywhere; }
.evidence-lines li { margin-bottom: var(--s1); }
.link-btn { background: none; border: none; color: var(--link); cursor: pointer; font-size: 12px; padding: 0; margin-top: var(--s2); font-weight: 600; }
.link-btn:hover { text-decoration: underline; }
.evidence-tables { margin-top: var(--s3); }

/* ─── Duplicates ───────────────────────────────────────────────────────── */
.dup-section { margin-bottom: var(--s5); }
.dup-section .section-title { color: var(--status-detected); }
.dup-list { display: flex; flex-direction: column; gap: var(--s3); }
.dup-card {
  background: var(--detected-tint-faint);
  border: 1px solid var(--detected-border);
  border-left: 4px solid var(--status-detected);
  border-radius: var(--radius-card);
  padding: var(--s4) var(--s4);
}
.dup-card.sev-P1 { border-left-color: var(--high-text); }
.dup-title { font-weight: 600; }
.dup-text { font-size: 13px; margin-top: var(--s2); }
.quiet-line { font-size: 13px; color: var(--muted); margin: 0 0 var(--s5); }
.dup-badge {
  display: inline-block; margin-left: var(--s2); font-size: 11px; font-weight: 700; padding: 0 var(--s2);
  color: var(--status-detected); border: 1px solid var(--detected-border); border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ─── Routing card ─────────────────────────────────────────────────────── */
.route-list { list-style: none; display: flex; flex-direction: column; }
.route-row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--border); font-size: 13px; }
.route-row:first-child { border-top: none; padding-top: 0; }
.route-type { font-weight: 600; }
.route-host { color: var(--text-secondary); font-size: 12px; overflow-wrap: anywhere; }
.route-tools { color: var(--muted); }
.route-tools::before { content: '· '; }
.routing-none { font-weight: 600; margin-bottom: var(--s1); }

/* ─── Tools table extras ───────────────────────────────────────────────── */
.tool-name { font-weight: 600; white-space: nowrap; }
.events { color: var(--muted); }
.route-line { color: var(--status-server); }
.status-note { color: var(--muted); font-style: italic; }
.consent-before { color: var(--high-text); }
.consent-cookieless { color: var(--medium-text); }
.consent-after { color: var(--status-fired); }
.consent-expected { color: var(--muted); }
/* Loaded / set up in GTM but sent no data: amber, outlined so it never reads like "Before consent". */
.consent-notsending { color: var(--high-text); border: 1px solid var(--high-text); border-radius: 4px; padding: 0 var(--s2); font-weight: 600; white-space: nowrap; }
.not-sending-note { color: var(--muted); }
/* Tools table Status column (v2.48.8): did the tool send data at all. */
.status-cell { display: inline-block; font-weight: 600; white-space: nowrap; border-radius: 4px; padding: 0 var(--s2); border: 1px solid transparent; }
.status-sending { color: var(--status-fired); }
/* v2.54.0: why a tool sent nothing - Didn't fire amber (outlined); Waiting for
   consent and Not found neutral grey (outlined). */
.status-didnt-fire { color: var(--high-text); border-color: var(--high-text); }
.status-waiting, .status-not-found, .status-event-only, .status-conversion-only { color: var(--muted); border-color: var(--muted); }
/* Account IDs cell: the row's events behind a small muted toggle, collapsed. */
.events-toggle { margin-top: var(--s1); }
.events-toggle > summary { cursor: pointer; list-style: none; color: var(--muted); font-size: 12px; display: inline-flex; gap: var(--s1); align-items: center; }
.events-toggle > summary::-webkit-details-marker { display: none; }
.events-toggle .chev { display: inline-block; transition: transform 120ms ease; }
.events-toggle[open] .chev { transform: rotate(90deg); }
.events-toggle > .events { display: block; margin-top: var(--s1); font-size: 12px; }
.status-blocked { color: var(--critical-text); border-color: var(--critical-border); }
.status-loaded { color: var(--muted); font-weight: 400; }
.status-col .status-note, .status-col .consent-blocked-hosts { display: block; margin-top: var(--s1); font-size: 12px; }
/* Where an id comes from: "sent to …", "fbq('init') in page code", "in GTM-X tag N". */
.id-source { color: var(--muted); font-size: 12px; }
.id-more > summary { cursor: pointer; list-style: none; font-size: 12px; }
.id-more > summary::-webkit-details-marker { display: none; }
.id-more > summary::before { content: '\25B8\00A0'; }
.id-more[open] > summary::before { content: '\25BE\00A0'; }
.id-more .id-row { padding-left: var(--s4); }
.not-sending-note .finding-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; }
.req-cell { text-align: right; }

/* ─── Site health (collapsed; the site's own JS, never styled as a finding) */
.site-health {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--panel);
  margin-bottom: var(--s3);
}
.site-health > summary {
  cursor: pointer; padding: var(--s4) var(--s4); font-size: 13px; color: var(--text-secondary);
  list-style: none; display: flex; gap: var(--s2);
}
.site-health > summary::-webkit-details-marker { display: none; }
.site-health > summary::before { content: '▸'; color: var(--muted); transition: transform 0.15s; }
.site-health[open] > summary::before { transform: rotate(90deg); }
.site-health-list { list-style: none; padding: 0 var(--s4) var(--s4); font-family: var(--mono); font-size: 11px; color: var(--muted); max-height: 280px; overflow-y: auto; }
.site-health-list li { padding: var(--s1) 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.site-kind { color: var(--disabled); text-transform: uppercase; font-size: 10px; margin-right: var(--s2); }
.site-health .empty-note { padding: 0 var(--s4) var(--s4); }

/* ─── Mockup alignment (v2.26.0) — overrides the v3 blocks above ──────── */
.topbar { padding: var(--s4) var(--s5); }
/* v2.56.0: the whole page is capped at 1440 px and centred - the header bar
   like the layout below it; the body background fills the rest. */
.topbar { max-width: 1440px; margin: 0 auto; }
.topbar-title { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.topbar-title h1 { font-size: 17px; }
.topbar-subtitle { margin-top: 0; font-size: 13px; }
/* v2.68.0: the wordmark links home - no underline, a slight fade on hover. */
.wordmark { color: inherit; text-decoration: none; }
.wordmark:hover { opacity: 0.75; text-decoration: none; }
.wordmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sidebar: one card holding the whole form */
/* v2.61.0: the scrollbar's space is always kept, so a scrollbar that comes
   or goes (a panel, a long report) never shifts the page sideways. */
html { scrollbar-gutter: stable; }
.sidebar form {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s4) var(--s4);
}
/* v2.61.0: Options is one row - "Options" left, what is on right, a chevron.
   Closed: "Options   Behaviour, banner on · change ▸"; open, the summary is
   hidden (it keeps its space) and the chevron turns. The whole row is the
   button (#options-toggle): hover tint (the location selector's), pointer,
   focus ring; click / Enter / Space. */
.options-row { margin: var(--s3) 0 0; border-top: 1px solid var(--border); }
.options-toggle {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-width: 0; min-height: 44px;
  padding: var(--s3) var(--s2); border: none; border-radius: var(--radius-input); background: none;
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.options-toggle:hover { background: var(--surface-tint-strong); }
.options-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.options-on { display: flex; gap: var(--s1); margin-left: auto; min-width: 0; white-space: nowrap; font-weight: 400; font-size: 13px; color: var(--muted); }
/* One line: the list gives way (ellipsis), "change" never does. */
#options-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.options-row .options-title { flex-shrink: 0; }
.options-change { color: var(--accent-text); font-weight: 600; }
.options-chevron { flex-shrink: 0; width: 16px; font-size: 16px; line-height: 1; color: var(--accent-text); text-align: center; }
.options-chevron::before { content: '▸'; display: inline-block; transition: transform 0.2s ease; }
.options-toggle[aria-expanded="true"] .options-on { visibility: hidden; }
.options-toggle[aria-expanded="true"] .options-chevron::before { transform: rotate(90deg); }
/* The panel expands inline (owner's mockup, 22 Oct 2026): an animated height,
   grid rows 0fr -> 1fr in 220 ms, pushing the sign-up card down; the inner box
   clips while it grows. None under reduced motion. */
.options-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; }
.options-panel[data-open="true"] { grid-template-rows: 1fr; }
.options-panel-inner { min-height: 0; overflow: hidden; }
.options-panel-inner > :first-child { margin-top: var(--s1); }
.options-panel-inner > :last-child { margin-bottom: var(--s2); }
@media (prefers-reduced-motion: reduce) {
  .options-panel, .options-chevron::before { transition: none; }
}
.btn-block { margin-top: var(--s4); }

/* Running: full-width centred card, no form sidebar */
.layout.is-running .sidebar { display: none; }
.layout.is-running .results { max-width: 900px; margin: 0 auto; }
.run-screen { padding: var(--s5); }
.run-eyebrow { font-size: 13px; color: var(--muted); }
.run-host { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.run-time { font-size: 14px; color: var(--text-secondary); }
/* A step 50% over its estimate (v2.48.8). */
#run-eta.eta-overrun { color: var(--high-text); }
/* Under the bar: the phase line (what the test is doing now) and the quip
   line, smaller and muted; both keep their height so nothing jumps. */

.nowrap { white-space: nowrap; }
/* v2.59.0 Running screen (variant A): six segments, the stage line, the quip,
   "Found so far". Values from the approved mockup. */
.stage-bar { display: flex; height: var(--progress-h); margin-top: var(--s5); border-radius: var(--radius-pill); overflow: hidden; background: var(--panel); }
.stage-seg { flex: 1 1 0; background: var(--border); min-width: 0; }
.stage-seg + .stage-seg { border-left: var(--stage-gap) solid var(--panel); }
.stage-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.6s ease; }
.stage-fill.no-anim { transition: none; }
.stage-seg[data-state="failed"] .stage-fill { background: var(--high-text); }
.stage-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.stage-of { margin-left: auto; white-space: nowrap; }
.stage-of { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
/* v2.70.0: a failed stage's sentence - one amber line directly under the
   bar, before the quip; the quip line keeps rotating. */
.stage-failed-line { margin: var(--s3) 0 0; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--high-text); }
.stage-failed-line[hidden] { display: none; }
/* v2.61.0: the quip is the one line under the bar. */
.run-quip { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--text); min-height: 1.3em; transition: opacity 0.3s; }
.run-quip.quip-failed { color: var(--high-text); }
.run-quip.quip-fade { opacity: 0; }
.run-found { margin-top: var(--s5); border: 1px solid var(--border); border-radius: var(--radius-input); padding: var(--row-y) var(--s4); }
.run-found .section-label { margin-bottom: var(--s2); }
.found-count { font-family: var(--mono); font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .stage-fill, .run-quip { transition: none; } }
.chip-legend { display: none; }
.dot-legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 12px; color: var(--muted); margin-top: var(--s3); }
.section-head .dot-legend { margin-top: 0; }
.dot-key::before { content: '●'; margin-right: var(--s1); }
.key-before::before { color: var(--high-text); }
.key-cookieless::before { color: var(--medium-text); }
.key-after::before { color: var(--status-fired); }
.key-notsending::before { content: '○'; color: var(--high-text); }

/* Collapsible cards: bold title, muted description, chevron on the right */
.feed-details > summary.card-summary, .site-health > summary.card-summary {
  font-family: var(--font); font-size: 14px; gap: var(--s3); padding: var(--s4) var(--s4); align-items: baseline;
}
.feed-details > summary.card-summary::before, .site-health > summary.card-summary::before { content: none; }
.card-summary::after { content: '›'; margin-left: auto; color: var(--muted); transition: transform 0.15s; }
details[open] > .card-summary::after { transform: rotate(90deg); }
.card-title { font-weight: 600; color: var(--text); white-space: nowrap; }
.card-sub { color: var(--muted); font-size: 13px; }
.site-health { margin-bottom: var(--s3); }

/* Verdict card */
.verdict-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s4); }
.verdict-host { font-family: var(--mono); font-size: 15px; color: var(--text-secondary); }
/* Entered vs landed address (v2.75.0): the host line muted, another domain highlighted (the exit-mismatch colour). */
.verdict-where { min-width: 0; }
.verdict-redirect { font-size: 13px; color: var(--muted); margin-top: var(--s1); overflow-wrap: anywhere; }
/* v2.80.0 (owner): any host change is a highlighted stripe under the site name, on the Running screen too. */
.verdict-redirect.redirect-stripe, .run-redirect { display: block; font-size: 15px; font-weight: 600; color: var(--text); background: var(--high-bg); border-left: 3px solid var(--high-border); border-radius: 6px; padding: var(--s2) var(--s3); margin: var(--s2) 0 0; overflow-wrap: anywhere; }
.run-redirect[hidden] { display: none; }
.verdict-meta { font-family: var(--font); font-size: 12px; }
.verdict-h1 { font-size: 22px; margin: var(--s3) 0 var(--s3); }
.verdict-chip { padding: var(--s1) var(--s3); }

/* Needs attention */
.attention-section .section-head { margin-bottom: var(--s3); }
.attention-section .section-label, .tags-section .section-label { margin: 0; }
.issue-card { border: 1px solid var(--border); border-left-width: 1px; }
.issue-card.sev-P0 { border-color: var(--critical-border); }
.issue-card.sev-P1 { border-color: var(--high-border); }
.issue-card.sev-P2 { border-color: var(--medium-border); }
.sev-badge { border-radius: 4px; font-family: var(--mono); font-weight: 600; padding: var(--s1) var(--s2); }
.impact-text { font-size: 14px; }
.link-btn { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

/* Duplicates: one amber container */
.dup-section {
  border: 1px solid var(--detected-border);
  background: var(--detected-tint-faint);
  border-radius: var(--radius-card);
  padding: var(--s4);
}
.dup-section .section-head { margin-bottom: var(--s4); }
.dup-section .section-title { margin: 0; }
.dup-card { background: var(--panel); border: 1px solid var(--border); border-left: 1px solid var(--border); }
.dup-card.sev-P1 { border-color: var(--high-border); }
.dup-id-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s1); }
.dup-id-box { border: 1px solid var(--border); border-radius: var(--radius-input); background: var(--bg); padding: var(--s3) var(--s3); min-width: 0; }
.dup-id-box .mono { font-size: 14px; overflow-wrap: anywhere; }
.dup-id-sub { font-size: 12px; color: var(--muted); margin-top: var(--s1); }

/* Consent timeline with a connecting line */
.timeline { gap: var(--s4); }
.timeline-step { position: relative; }
.timeline-step:not(:last-child)::after {
  content: ''; position: absolute; left: 4px; top: 18px; bottom: -18px; width: 2px; background: var(--border);
}
.timeline-title { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.timeline-text { color: var(--text-secondary); }
.timeline-text .timeline-title { display: inline; font-size: inherit; }
.timeline .timeline-step:not(:last-child)::after { top: 16px; bottom: calc(-1 * var(--s4)); }
/* v2.77.0 (owner, the mobile mockup): the Consent card's facts as label /
   value rows; the evidence lines sit under their value. */
.consent-facts { display: grid; gap: var(--s2); margin: var(--s3) 0 var(--s4); font-size: 14px; }
.consent-fact { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s2); }
.consent-fact dt { color: var(--muted); }
.consent-fact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.consent-fact dd .evidence-source, .consent-fact-sub { font-size: 13px; color: var(--text-secondary); margin: var(--s1) 0 0; overflow-wrap: anywhere; }
.consent-fact-sub.scenario-untested { color: var(--high-text); }
@media (max-width: 599.98px) { .consent-fact { grid-template-columns: 104px minmax(0, 1fr); } }
.routing-none-text { font-size: 13px; color: var(--text-secondary); }

/* Tools found: one card */
.tags-section { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--s4) var(--s4); }
.tags-table { background: none; border: none; border-radius: 0; }
.tags-table th { background: none; padding: var(--s3) var(--s3) var(--s2) 0; }
.tags-table td { padding: var(--s3) var(--s3) var(--s3) 0; }
.tags-table th:last-child, .tags-table td:last-child { padding-right: 0; text-align: right; }
.consent-cell::before { content: '● '; }
.id-missing { color: var(--text-secondary); }
.events { font-size: 12px; }
.req-total { color: var(--text-secondary); }
.req-adtech { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.dup-badge { border-radius: 4px; background: var(--detected-tint); }

/* Info-level "possible duplicates" (configured, never sent) — muted, not counted */
.dup-info-list { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.dup-section-quiet { border-color: var(--border); background: none; }
.dup-section-quiet .quiet-line { margin: 0; }

.sev-filter-note { font-size: 12px; color: var(--muted); }
/* Expert review E3: a plain text link under the Needs attention cards. */
/* "Want this fixed?" (v2.80.0, owner): the card at the end of Needs attention -
   accent border and tint, solid accent button - and the one-line version at
   the end of the report; the form opens in place. */
.quote-card { margin: var(--s4) 0 0; border: 1px solid var(--accent); border-radius: var(--radius-card); background: var(--accent-tint); padding: var(--s4) var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.quote-card .quote-main { flex: 1 1 340px; min-width: 0; }
.quote-card .quote-open { flex: 0 0 auto; white-space: nowrap; }
.quote-card .quote-slot { flex: 1 1 100%; }
.quote-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.quote-text { margin: var(--s1) 0 0; font-size: 14px; color: var(--text-secondary); }
.quote-line { margin: var(--s4) 0 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); padding: var(--s3) var(--s4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.quote-line .quote-line-text { margin: 0; font-size: 15px; }
.quote-line .quote-line-sub { color: var(--muted); font-size: 13px; }
.quote-line .quote-open { font-weight: 600; white-space: nowrap; }
.quote-line .quote-slot { flex: 1 1 100%; }
.quote-line.quote-sent { display: block; }
.quote-slot:empty { display: none; }
.quote-form { display: grid; gap: var(--s3); border-top: 1px solid var(--border); padding-top: var(--s4); margin-top: var(--s2); }
.quote-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.quote-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quote-row input[type="email"] { flex: 1 1 220px; min-width: 0; }
.quote-check { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; color: var(--text); }
.quote-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.quote-required { color: var(--muted); }
.quote-note { margin: 0; font-size: 13px; color: var(--muted); }
.quote-status { margin: 0; font-size: 13px; color: var(--text); }
.quote-status:empty { display: none; }
.quote-print { display: none; }
.issues-list[data-filter="P0"] .issue-card:not(.sev-P0),
.issues-list[data-filter="P1"] .issue-card:not(.sev-P1),
.issues-list[data-filter="P2"] .issue-card:not(.sev-P2) { display: none; }
.passthrough-line { font-size: 12px; color: var(--text-secondary); margin: 0 0 var(--s3); cursor: help; }
.timeline-sub { font-size: 12px; color: var(--muted); margin-top: var(--s1); }
/* A consent run that measured nothing: "not tested", amber (v2.48.8). */
.timeline-sub.scenario-untested { color: var(--high-text); }
.site-info-detail { margin: var(--s1) 0 0 var(--s4); list-style: disc; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.verdict-landing { font-size: 12px; color: var(--muted); margin-top: var(--s1); overflow-wrap: anywhere; } .verdict-landing .mono { color: var(--text-secondary); }
.evidence-source { font-size: 12px; color: var(--text-secondary); margin: 0 0 var(--s3); overflow-wrap: anywhere; }

.consent-blocked-hosts { display: block; font-size: 11px; color: var(--text-secondary); margin-top: var(--s1); overflow-wrap: anywhere; }

.blocked-notice { border: 1px solid var(--border); border-left: 3px solid var(--critical-text); border-radius: 10px; padding: var(--s4) var(--s5); margin: var(--s4) 0; }
.blocked-notice p { margin: var(--s2) 0; }

.report-wrong-form { display: grid; gap: var(--s2); margin-top: var(--s3); max-width: 560px; }
.report-wrong-form textarea, .report-wrong-form input { width: 100%; box-sizing: border-box; padding: var(--s2); border-radius: 6px; border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; }
.report-wrong-form button { justify-self: start; }
.report-wrong-status { margin: 0; color: var(--text-secondary); }

.run-disclaimer { margin: var(--s5) 0 0; font-size: 13px; color: var(--text-secondary); }
.run-disclaimer a, .legal-footer a { color: inherit; }
.legal-footer { text-align: center; font-size: 12px; color: var(--text-secondary); margin: var(--s5) 0 var(--s1); padding: 0 var(--s4); }
/* v2.68.0: the credit is the footer's last line on every page - under the
   links and the build line, small and muted. */
.site-credit { text-align: center; font-size: 11px; color: var(--muted); margin: 0 var(--s4) var(--s5); }
.site-credit a { color: inherit; }

/* ─── Start page (intro) - same card style as the results ─────────────── */
.intro {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s5);
}
.intro-h1 { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0 0 var(--s3); }
/* v2.68.0 (owner): one sentence, no width cap - one line at 1280, wraps once at 390. */
.intro-sub { color: var(--text-secondary); font-size: 15px; line-height: 1.55; margin: 0 0 var(--s5); }
.intro-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.intro-stat { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--s3) var(--s4); background: var(--bg); display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.intro-stat-value { font-size: 26px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.intro-stat-label { font-size: 13px; color: var(--muted); }
.intro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.intro-block { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--s4) var(--s4); }
.intro-block h3 { font-size: 15px; font-weight: 600; margin: 0 0 var(--s2); color: var(--text); }
.intro-block p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--text-secondary); }
.intro-expect { font-size: 12px; color: var(--muted); margin: 0 0 var(--s4); }
@media (max-width: 640px) {
  .intro { padding: var(--s4) var(--s4); }
  .intro-h1 { font-size: 20px; }
  .intro-grid { grid-template-columns: 1fr; }
}


/* Low duplicate (installed twice, vendor ignores the copy) */
.dup-card.sev-P3 { border-left-color: var(--info-text); }

/* v2.48.8: Routing - browser + server pairs merged by event_id; Consent - a CMP's bot check. */
.route-dedup { display: block; width: 100%; font-size: 12px; color: var(--muted); margin-top: var(--s1); }
.bot-check-line .sev-badge { margin-right: var(--s2); }

/* ─── Result layout (v2.48.15): one section pattern, one spacing scale ─────
   Every result section is an .rcard: card padding --card-pad, a header row
   (uppercase title + count left, badge / legend / summary right; a chevron
   for collapsible cards), --s4, then the body. Cards are --s4 apart; the
   report header block (meta, headline, chips, stats) is --s6 above the first
   card. Inside a body: paragraphs --s3, list items --s2. No margin or padding
   literals anywhere (ui-leak-guard.js checks it). */
[hidden] { display: none !important; }
@media (max-width: 700px) { :root { --card-pad: var(--card-pad-narrow); } }

.results { display: flex; flex-direction: column; gap: var(--s4); }
.results > * { margin: 0; }
#results-static { display: flex; flex-direction: column; gap: var(--s6); }
#results-static > * { margin: 0; }
.report-cards { display: flex; flex-direction: column; gap: var(--s4); }
.report-cards > * { margin: 0; }

.rcard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  min-width: 0;
}
.rcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.rcard-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.rcard-aside { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: 0; font-size: 12px; color: var(--muted); }
.rcard-aside .dot-legend, .rcard-aside .sev-filter-note, .rcard-aside p { margin: 0; }
.rcard-body { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.rcard-body > * { margin: 0; }
.rcard-body ul, .rcard-body ol { display: flex; flex-direction: column; gap: var(--s2); }
.rcard-body p { margin: 0; }

/* Collapsible cards: the same header row, the chevron on the right. */
details.rcard > summary.rcard-head { cursor: pointer; list-style: none; flex-wrap: nowrap; }
details.rcard > summary.rcard-head::-webkit-details-marker { display: none; }
details.rcard > summary.rcard-head::before { content: none; }
/* The chevron is drawn, not text (the section's text stays the same). */
details.rcard > summary.rcard-head::after { content: '\203A'; margin-left: var(--s2); color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
details.rcard[open] > summary.rcard-head::after { transform: rotate(90deg); }
.rcard-head .rcard-sub { margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rcard-chevron { color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
details.rcard[open] > summary .rcard-chevron { transform: rotate(90deg); }
@media (max-width: 700px) { .rcard-head .rcard-sub { display: none; } }

/* Nested cards inside a section (issue cards, duplicate cards). */
.issues-list, .dup-list { display: flex; flex-direction: column; gap: var(--s4); }
.issue-card { margin: 0; }
.dup-card { padding: var(--s4); margin: 0; display: flex; flex-direction: column; gap: var(--s3); }
.dup-card > * { margin: 0; }
.dup-id-grid { margin: 0; gap: var(--s3); }

/* Duplicates: the warning border and tint when there are any. */
.dup-section { border-color: var(--detected-border); background: var(--detected-tint-faint); }
.dup-section-quiet { border-color: var(--border); background: var(--panel); }

/* Consent + Routing: one row, equal height; a one-line card goes full
   width, slim, below its partner instead. */
.insight-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: 0; }
@media (max-width: 700px) { .insight-row { grid-template-columns: minmax(0, 1fr); } }
.insight-card { flex: none; }
.rcard-slim .rcard-body { margin-top: var(--s3); }

/* Tools table rows: --row-y top and bottom on every row, top-aligned. */
.tags-table th, .tags-table td { padding: var(--row-y) var(--s3) var(--row-y) 0; vertical-align: top; }
.tags-table th:last-child, .tags-table td:last-child { padding-right: 0; }
.tags-section .table-scroll { margin: 0; }

/* Report header block: meta line, headline, chips, stats. */
.verdict-card { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: var(--card-pad); }
.verdict-card > * { margin: 0; }
.verdict-chips { margin: 0; }
.verdict-h1 { margin: 0; }
.run-id {
  font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: copy;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.run-id:hover { color: var(--text); }

/* Stats row (v2.56.0, the approved mockup's variant B): six compact tiles
   in one row when the row itself is >= 1100 px, three below, two below
   600 px (a container query on the verdict card - next to the New test
   column the row is ~820 px at 1280 and ~980 px at the 1440 cap, so 3 x 2
   there). Height from content (~96 px), no min-height. Label one line,
   number in the UI face with tabular figures, detail one line with the full
   text in its tooltip. Tint + a 3 px left border only for a non-zero number
   that is a problem (Issues, Before consent, Duplicates). */
.verdict-card { container: verdict / inline-size; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s2); }
@container verdict (min-width: 600px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container verdict (min-width: 1100px) { .stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* v2.68.0: a tile's label, number and detail are rows of the stat grid
   (subgrid), so a label that wraps to two lines at a narrow width keeps the
   numbers of the tiles beside it on one line. */
.stat-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--s1); align-content: start; min-width: 0; padding: var(--row-y) var(--s4); border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.stat-card > * { margin: 0; }
.stat-label { font-size: 11.5px; line-height: 1.2; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); overflow-wrap: anywhere; }
/* Two columns (a phone): a little less padding and letter-spacing so every label fits in two lines. */
@container verdict (max-width: 599.98px) { .stat-grid { gap: var(--s2); } .stat-card { padding-inline: var(--s3); } .stat-label { letter-spacing: 0.03em; } }
.stat-info { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: var(--s1); border: 1px solid currentColor; border-radius: 50%; font: 600 9px/1 var(--font); text-transform: none; letter-spacing: 0; vertical-align: middle; cursor: help; }
.stat-value { font: 600 28px/1.1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text); }
/* v2.77.0 (owner): the detail wraps - no ellipsis anywhere. */
.stat-sub { font-size: 13px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
/* Issues tile: one inline badge per non-zero severity (click = filter). */
.sev-badges { display: flex; flex-wrap: wrap; gap: var(--s1); }
.sev-badges .sev-filter { font: 600 11px/1 var(--font); padding: var(--s1) var(--s2); border: 1px solid; border-radius: 4px; cursor: pointer; }
.sev-badges .sev-filter:hover { text-decoration: underline; }
.sev-badge-critical { color: var(--critical-text); border-color: var(--critical-border); background: var(--critical-bg); }
.sev-badge-high     { color: var(--high-text); border-color: var(--high-border); background: var(--high-bg); }
.sev-badge-medium   { color: var(--medium-text); border-color: var(--medium-border); background: var(--medium-bg); }
.issues-card.issues-critical { background: var(--critical-tint); border-left: 3px solid var(--critical-text); }
.issues-card.issues-high     { background: var(--high-tint); border-left: 3px solid var(--high-text); }
.issues-card.issues-medium   { background: var(--medium-tint); border-left: 3px solid var(--medium-text); }
.issues-card.issues-critical .stat-value { color: var(--critical-text); }
.issues-card.issues-high .stat-value     { color: var(--high-text); }
.issues-card.issues-medium .stat-value   { color: var(--medium-text); }
.stat-card.stat-warn { background: var(--high-tint); border-left: 3px solid var(--high-text); }
.stat-card.stat-warn .stat-value { color: var(--high-text); }
.stat-card.stat-dup { background: var(--detected-tint); border-left: 3px solid var(--status-detected); }
.stat-card.stat-dup .stat-value { color: var(--status-detected); }

/* Summary rows (owner, 2 Nov 2026 - mockup 5iBm9PqMv2WAAScHRTZJqt): three
   labelled rows - Tracking, Problems, Consent - each a label column and its
   stats. A stat's 3 px stripe (no tint) only for a count above 0 that is a
   problem. Below 600 px the label sits above its stats, two per line. */
.summary-rows { display: grid; gap: var(--s2); margin-top: var(--s2); }
.summary-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); align-items: start; padding-top: var(--s3); border-top: 1px solid var(--border); }
.summary-row:first-child { padding-top: 0; border-top: 0; }
.summary-row-label { margin: 0; padding-top: var(--s2); font-size: 11px; line-height: 1.2; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.summary-row-sub { display: block; margin-top: var(--s1); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); min-width: 0; }
.summary-stat { display: block; grid-row: auto; padding: var(--s2) var(--s3); background: var(--bg); }
.summary-stat > * + * { margin-top: var(--s1); }
.summary-stat .stat-label { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.summary-stat .stat-value { font-size: 22px; line-height: 1.2; }
.stat-unit { margin-left: var(--s2); font: 500 12px var(--font); letter-spacing: 0; color: var(--muted); }
.summary-stat .stat-sub { font-size: 12.5px; }
.summary-stat .sev-filter { padding: 0; border: 0; background: none; font: 600 12.5px var(--font); cursor: pointer; }
.summary-stat .sev-filter:hover { text-decoration: underline; }
.summary-stat .sev-badge-critical { color: var(--critical-text); }
.summary-stat .sev-badge-high     { color: var(--high-text); }
.summary-stat .sev-badge-medium   { color: var(--medium-text); }
.summary-stat.issues-card, .summary-stat.issues-critical, .summary-stat.issues-high, .summary-stat.issues-medium,
.summary-stat.stat-warn, .summary-stat.stat-dup, .summary-stat.stat-low { background: var(--bg); }
.summary-stat.issues-critical { border-left: 3px solid var(--critical-text); }
.summary-stat.issues-high     { border-left: 3px solid var(--high-text); }
.summary-stat.issues-medium   { border-left: 3px solid var(--medium-text); }
.summary-stat.stat-warn       { border-left: 3px solid var(--high-text); }
.summary-stat.stat-dup        { border-left: 3px solid var(--status-detected); }
.summary-stat.stat-low        { border-left: 3px solid var(--low-border); }
.summary-stat .stat-value, .summary-stat.stat-warn .stat-value, .summary-stat.stat-dup .stat-value { color: var(--text); }
@container verdict (max-width: 599.98px) {
  .summary-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .summary-row-label { padding-top: 0; }
  .summary-row-sub { display: none; }
  .summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The observation line under line two (owner, 2 Nov 2026): quiet, one sentence. */
.verdict-observation { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* Header: one row at phone width. Below 600 px (owner, v2.77.0 mobile
   layout): labelled "Share" and "Report" buttons, the theme switch in the
   footer instead (a copy made by app.js). */
.dl-label-short { display: none; }
.footer-theme { display: none; }
@media (max-width: 599.98px) {
  .topbar { flex-wrap: nowrap; padding: var(--s3) var(--s4); }
  .topbar-subtitle { display: none; }
  .topbar-title h1 { white-space: nowrap; font-size: 17px; }
  .topbar-actions { flex-wrap: nowrap; gap: var(--s2); }
  .topbar .theme-switch { display: none; }
  #report-btn .dl-label { display: none; }
  #report-btn .dl-label-short { display: inline; }
  #report-btn, #share-btn { padding: var(--s2) var(--s3); min-height: 36px; font-size: 13px; gap: var(--s2); }
  .footer-theme { display: flex; justify-content: center; margin: var(--s3) 0 0; }
  .footer-theme .theme-label { display: inline; }
}

/* Share (v2.73.0): a small panel under the header's Share button; on a phone
   it spans the screen under the header. */
.share-wrap { position: relative; }
#share-btn { white-space: nowrap; }
.share-panel { position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 40; width: 360px; max-width: calc(100vw - 2 * var(--s4)); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text); box-shadow: var(--menu-shadow); display: flex; flex-direction: column; gap: var(--s3); text-align: left; }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.share-title { font-size: 15px; font-weight: 600; margin: 0; }
.share-close { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; padding: var(--s1); }
.share-label { font-size: 13px; color: var(--text-secondary); }
.share-row { display: flex; gap: var(--s2); }
.share-link { flex: 1 1 auto; min-width: 0; font: 13px var(--mono); padding: var(--s2); border: 1px solid var(--input-border); border-radius: 6px; background: var(--bg); color: var(--text); }
.share-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.share-email { text-decoration: none; display: inline-flex; align-items: center; }
.share-status { font-size: 13px; color: var(--muted); margin: 0; min-height: 1.2em; }
@media (max-width: 480px) {
  .share-panel { position: fixed; left: var(--s4); right: var(--s4); top: 56px; width: auto; max-width: none; }
}
/* The line under the header on a report: who can open it. */
.share-note { font-size: 13px; color: var(--muted); margin: 0; padding-top: var(--s3); border-top: 1px solid var(--border); }

/* Older section rules the card pattern replaces (summary padding, list and
   log insets): the card's own padding is the only inset. */
details.rcard > summary.rcard-head { padding: 0; min-height: 0; font-family: var(--font); font-size: 14px; color: var(--text); align-items: center; }
.rcard .site-health-list { padding: 0; max-height: 280px; }
.rcard .site-health-list li { padding: var(--s1) 0; }
.rcard.site-health .empty-note { padding: 0; }
.feed-details.rcard .feed-filters { padding: 0 0 var(--s3); }
.feed-details.rcard .feed-body { padding: 0; }
.rcard .dup-info-list { margin: 0; gap: var(--s2); }
.rcard .route-row { padding: var(--s2) 0; }
.rcard .route-row:first-child { padding-top: 0; }
.rcard .timeline { gap: var(--s4); }
.dup-warn { color: var(--status-detected); font-size: 14px; }

/* ─── Test location (v2.49.0; a dropdown since v2.62.0) ──────────────── */
.field-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.loc-dd { position: relative; }
.loc-trigger {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 44px;
  padding: var(--s2) var(--s3); border: 1px solid var(--input-border); border-radius: var(--radius-input);
  background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.loc-trigger:hover { background: var(--surface-tint-strong); }
.loc-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.loc-trigger[aria-expanded="true"] { border-color: var(--accent); }
.loc-trigger-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-chevron::before { content: '▾'; display: inline-block; font-size: 14px; color: var(--muted); transition: transform 0.2s ease; }
.loc-trigger[aria-expanded="true"] .loc-chevron::before { transform: rotate(180deg); }
.loc-flag { display: inline-flex; flex-shrink: 0; }
.loc-list {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--s1)); z-index: 30;
  margin: 0; padding: var(--s1); list-style: none; display: grid; gap: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-input); box-shadow: var(--menu-shadow);
}
.loc-list[hidden] { display: none; }
.loc-list:focus { outline: none; }
.loc-option {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: var(--s2); align-items: center;
  padding: var(--s2); border-radius: var(--radius-input); font-size: 14px; color: var(--text); cursor: pointer;
}
.loc-option.is-active { background: var(--surface-tint-strong); }
.loc-option[aria-selected="true"] { background: var(--accent-tint); }
.loc-option[aria-selected="true"].is-active { box-shadow: inset 0 0 0 2px var(--accent); }
.loc-option[aria-disabled="true"] { color: var(--muted); cursor: default; }
.loc-option[aria-disabled="true"] .loc-flag { opacity: 0.55; }
.loc-soon { cursor: pointer; }
.loc-tick { color: var(--accent-text); font-weight: 600; }
.loc-pill { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-tint); padding: 0 var(--s2); line-height: 1.8; border-radius: var(--radius-pill); white-space: nowrap; }
.loc-sub { grid-column: 2 / -1; font-size: 12.5px; color: var(--muted); }
.segmented {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding: var(--s1);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  background: var(--bg);
}
.seg-option {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  text-align: left;
  padding: var(--s1) var(--s2);
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
/* v2.59.0: hover, focus and selected states; the whole option is the button. */
.seg-option:not(:disabled) { cursor: pointer; }
.seg-option:not(:disabled):hover { background: var(--surface-tint-strong); color: var(--text); }
.seg-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg-option[aria-checked="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--text); }
.seg-option[aria-checked="true"]:not(:disabled):hover { background: var(--accent-tint); }
.seg-option:disabled { color: var(--disabled); cursor: not-allowed; }
.seg-option:disabled .flag { opacity: 0.5; }
.seg-text { display: flex; flex-direction: column; min-width: 0; }
.seg-reason { font-size: 12px; font-weight: 400; color: var(--muted); }
.seg-reason:empty { display: none; }
.seg-note { font-size: 12px; color: var(--muted); line-height: 1.45; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ─── Updates sign-up (v2.60.0; one card under New test since v2.61.0) ── */
.updates-line { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--s2); }
.updates-row { display: flex; gap: var(--s2); }
.updates-row input[type="email"] { flex: 1 1 auto; min-width: 0; }
.updates-row .btn-secondary { flex: 0 0 auto; }
.updates-msg { font-size: 12px; color: var(--text-secondary); margin: var(--s2) 0 0; }
.updates-msg:empty { display: none; }
.updates-msg.is-error { color: var(--critical-text); }
.updates-msg.is-ok { color: var(--status-fired); font-weight: 500; }
.updates-note { font-size: 12px; color: var(--muted); margin: var(--s1) 0 0; }
@media (max-width: 560px) {
  .updates-row { flex-direction: column; }
  .updates-row .btn-secondary { width: 100%; }
}
.loc-badge { white-space: nowrap; }
.flag { flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); vertical-align: -1px; }
.loc-badge .flag { margin-right: var(--s1); }
.location-field[hidden] { display: none; }
.verdict-rules-note { font-size: 13px; color: var(--text-secondary); }
/* v2.62.0: the two-line headline - line one answers "Is it tracking?", line
   two is the consent / issues headline; then the one exit-context note. */
.verdict-answer { margin: var(--s2) 0 0; font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--text); }
/* v2.80.0 (owner, option D): line one's consent part - its own line, same size, the High colour, "But" bolder. */
.verdict-answer .answer-health, .verdict-answer .answer-consent { display: block; }
.verdict-answer .answer-consent { color: var(--high-text); margin-top: var(--s1); }
.verdict-answer .answer-but { font-weight: 800; }
.verdict-answer + .verdict-h1 { margin: var(--s1) 0 0; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--text); }
/* v2.68.0: line two (the tracking summary) and the one consent line. */
.verdict-answer + .verdict-summary { margin: var(--s1) 0 0; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--text); max-width: 90ch; }
/* v2.72.0: the bullets under line two - same column, wrap, never cut. */
.verdict-bullets { margin: var(--s2) 0 0; padding: 0; list-style: none; max-width: 90ch; }
.verdict-bullets li { position: relative; padding-left: var(--s4); font-size: 16px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.verdict-bullets li::before { content: '-'; position: absolute; left: 0; color: var(--muted); }
.verdict-more { display: inline-block; margin-top: var(--s1); font-size: 16px; line-height: 1.45; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.verdict-more:hover { text-decoration-thickness: 2px; }
.verdict-consent { margin: var(--s2) 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.verdict-consent.consent-ok   { color: var(--status-fired); }
.verdict-consent.consent-warn { color: var(--high-text); }
.verdict-consent.consent-none { color: var(--text-secondary); font-weight: 500; }
/* v2.77.0: the consent line's second line - the accept failed. */
.verdict-consent-note { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text); }
.verdict-chips:empty { display: none; }
.verdict-consent + .verdict-chips, .verdict-note + .verdict-chips { margin-top: var(--s3); }
/* The consent headline, now in the Consent card, and its chips. */
.consent-headline { margin: 0 0 var(--s2); font-size: 15px; font-weight: 600; color: var(--text); }
.consent-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.verdict-note { margin: var(--s2) 0 0; font-size: 13px; color: var(--text-secondary); max-width: 90ch; }
.verdict-note .verdict-exit-note { color: var(--high-text); }
/* The blocked notice's "How to test anyway". */
.how-title { margin: var(--s3) 0 var(--s1); font-size: 14px; font-weight: 600; }
.how-list { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s1); }
.how-vendors-title { margin: var(--s3) 0 var(--s1); }
.how-vendors { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s1); }
.bot-token { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
/* Next to the Tested-from badge (v2.59.0): what a US run covers, and the
   exit that ran when it isn't the one picked. */
.verdict-loc-note { font-size: 13px; color: var(--text-secondary); margin-top: var(--s1); }
.verdict-exit-note, .run-location.run-location-mismatch { color: var(--high-text); }
.run-location { font-size: 13px; color: var(--muted); margin-top: var(--s1); }
@media (max-width: 480px) { .loc-badge { white-space: normal; } }

/* ─── v2.61.0: one finding card ─────────────────────────────────────────
   Issues, duplicates, Worth checking and Site health Info rows: one column,
   full width. Title row (severity, title, meta right), description, the
   Fix strip, the evidence (lines, then one table in one scroll container). */
.finding-list { display: flex; flex-direction: column; gap: var(--s3); }
.finding-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-card); margin: 0; overflow: hidden; }
.finding-card.sev-P0 { border-color: var(--critical-border); }
.finding-card.sev-P1 { border-color: var(--high-border); }
.finding-card.sev-P2 { border-color: var(--medium-border); }
.finding-card.dup-card { padding: 0; display: block; gap: 0; }
.finding-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); padding: var(--s4); min-height: 44px; }
summary.finding-head { list-style: none; cursor: pointer; user-select: none; }
summary.finding-head::-webkit-details-marker { display: none; }
.finding-title { flex: 1 1 280px; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.finding-meta { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.finding-head .chevron { color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
.finding-card[open] > .finding-head .chevron { transform: rotate(90deg); }
.finding-body { display: flex; flex-direction: column; gap: var(--s3); padding: 0 var(--s4) var(--s4); }
.finding-body > * { margin: 0; }
.finding-desc { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.fix-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; background: var(--fix-bg); border-left: 3px solid var(--accent); border-radius: var(--radius-input); padding: var(--s3) var(--s4); }
.fix-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); line-height: 1.6; }
.fix-text { margin: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.finding-body .evidence-lines { margin: 0; padding-left: var(--s4); font-size: 13px; }
.finding-body .dup-id-grid { margin: 0; }
.evidence-block { border: 1px solid var(--border); border-radius: var(--radius-input); overflow: hidden; }
.evidence-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s1) var(--s3); padding: var(--s2) var(--s4); background: var(--fix-bg); font-size: 13px; color: var(--muted); }
.evidence-head strong { color: var(--text); font-weight: 600; }
.evidence-block .evidence-group { border: none; border-radius: 0; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.evidence-block .evidence-tables { margin: 0; }
.evidence-block .evidence-table-wrap { overflow-x: auto; border-top: none; margin: 0; }
.evidence-block .evidence-table { width: 100%; min-width: 640px; font-size: 13px; }
.evidence-block .evidence-table th { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border); }
.evidence-block .evidence-table td { padding: var(--s2) var(--s4); border-top: none; border-bottom: 1px solid var(--border); }
.evidence-block .evidence-table tbody tr:last-child td { border-bottom: none; }
.evidence-block .evidence-table .ev-url { min-width: 0; color: var(--text-secondary); }
.evidence-block .evidence-table .ev-url code { overflow-wrap: normal; word-break: normal; }
.evidence-block .evidence-table .ev-what { white-space: normal; min-width: 180px; }
.evidence-block .evidence-table .ev-what strong { font-weight: 500; }
.evidence-table .ev-key { display: block; font-size: 11px; color: var(--muted); }
.evidence-block .phase-chip { margin: 0 var(--s1) 0 0; }
.evidence-block .show-all-btn { margin: var(--s2) var(--s4); }
.evidence-block .show-requests-btn { display: block; margin: 0; padding: var(--s2) var(--s4); font-size: 13px; border-top: 1px solid var(--border); width: 100%; text-align: left; }
.evidence-block .evidence-tables:not(.hidden) + .show-requests-btn { border-top: 1px solid var(--border); }
.issues-list[data-filter="P0"] .finding-card:not(.sev-P0),
.issues-list[data-filter="P1"] .finding-card:not(.sev-P1),
.issues-list[data-filter="P2"] .finding-card:not(.sev-P2) { display: none; }
@media (max-width: 600px) {
  .finding-meta { flex: 1 1 auto; margin-left: 0; white-space: normal; }
  .fix-strip { grid-template-columns: 1fr; gap: var(--s1); }
}

/* ─── v2.61.0: the sign-up card under New test ─────────────────────────── */
.updates-card { margin-top: var(--s4); background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius-card); padding: var(--s4); text-align: left; }
.updates-heading { margin: 0 0 var(--s1); font-size: 16px; font-weight: 600; color: var(--text); }
.updates-card .updates-line { color: var(--muted); font-size: 14px; margin: 0 0 var(--s3); }
.updates-card .updates-row { flex-direction: column; }
.updates-card .updates-row .btn-secondary { width: 100%; }
.updates-card .updates-row input[type="email"] { width: 100%; }

/* ─── v2.61.0: Report this result - header button + dialog ─────────────── */
#report-btn { white-space: nowrap; }
.report-dialog { margin: auto; width: min(560px, calc(100vw - 2 * var(--s4))); max-height: calc(100vh - 2 * var(--s5)); padding: var(--s5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text); }
.report-dialog::backdrop { background: var(--backdrop); }
.report-dialog .report-wrong-form { margin: 0; max-width: none; }
.report-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.report-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }
.report-dialog-close { background: none; border: 1px solid var(--border); border-radius: var(--radius-input); color: var(--text-secondary); cursor: pointer; min-width: 32px; min-height: 32px; }
.report-dialog-sub { margin: 0 0 var(--s2); font-size: 13px; color: var(--muted); }
.report-dialog-attached { margin: 0 0 var(--s2); font-size: 12.5px; color: var(--muted); }
.report-dialog label { font-size: 13px; color: var(--text-secondary); }

/* ─── Tools table below 600 px (owner, v2.77.0 - the mobile mockup) ─────
   One stacked row per tool: the consent dot, the short name and the status
   on the first line, IDs and the event count under them. No sideways
   scroll; the first eight rows, then "+ N more: <names>" opens the rest. */
.tn-short, .tool-dot, .tools-more-row { display: none; }
.rcard-count-note { font-weight: 600; }
@media (max-width: 599.98px) {
  .tags-section .table-scroll { overflow-x: visible; }
  .tags-table { min-width: 0; }
  .tags-table thead { display: none; }
  .tags-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
  .tags-table tbody tr:last-child { border-bottom: none; }
  .tags-table tbody td { display: block; padding: 0; border: 0; text-align: left; }
  .tags-table td.tool-name { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: var(--s2); white-space: normal; min-width: 0; }
  .tool-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
  .tool-dot.consent-before { background: var(--high-text); }
  .tool-dot.consent-cookieless { background: var(--medium-text); }
  .tool-dot.consent-after { background: var(--status-fired); }
  .tool-dot.consent-expected, .tool-dot.consent-notsending { background: var(--muted); }
  .tn-full { display: none; }
  .tn-short { display: inline; }
  .tags-table td.status-col { grid-column: 2; grid-row: 1; text-align: right; }
  .tags-table td.status-col .status-note, .tags-table td.status-col .consent-blocked-hosts { display: none; }
  .tags-table tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding-left: var(--s4); font-size: 12.5px; color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; }
  .tags-table td.consent-col, .tags-table td.req-cell { display: none; }
  .tags-table .tool-row-extra { display: none; }
  .tags-table.show-all .tool-row-extra { display: grid; }
  .tags-table .tools-more-row { display: block; }
  .tags-table.show-all .tools-more-row { display: none; }
  .tools-more-row td { display: block; }
  .tools-more { background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
  .tags-section .dot-legend { flex-wrap: wrap; }
}

/* Needs attention group card (v2.77.1, owner): one row per tool - its name,
   what it did, its severity; stacked below 600 px. */
.group-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.group-row { display: grid; grid-template-columns: minmax(96px, 160px) minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: var(--s2) 0; border-top: 1px solid var(--border); font-size: 14px; }
.group-row:first-child { border-top: 0; }
.group-tool { font-weight: 600; color: var(--text); }
.group-what { color: var(--text-secondary); overflow-wrap: anywhere; }
@media (max-width: 599.98px) {
  .group-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); }
  .group-what { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
}
/* The tool's first request on the landing page (v2.77.1). */
.first-hit { font-size: 12px; color: var(--muted); margin-top: var(--s1); }

/* ─── Print / Save as PDF (expert review E4, owner 2 Nov 2026) ─────────────
   A4, one column, the report only: no form, buttons, sign-up, tiles grid or
   footer chrome. Sections flow on from each other with no forced break;
   only a finding card and a Tools row never split (owner, 2 Nov 2026, after
   the first PDFs). Everything prints expanded (app.js opens every <details>
   on beforeprint; the request tables and their extra rows show here) and no
   control prints - chevrons, toggles, "+ N more", Share / Report, the theme
   switch. The running header (site, date, link) and the page numbers are
   @page margin boxes; app.js fills their text before printing. Colours are
   the light theme's already (the dark tokens are screen-only). */
@page { size: A4; margin: 14mm 12mm 12mm; }
@media print {
  html, body { background: var(--panel); }
  .topbar, .sidebar, .layout-end, .new-test-btn, .back-to-form, .legal-footer, .site-credit, .build-footer,
  .updates-card, #updates-card, .share-note, .verdict-more, .show-requests-btn, .show-all-btn, .link-btn,
  .tags-table tr.tools-more-row, .tools-more, .sev-filter-note, .chevron, .chev, #feed-details,
  #share-btn, #report-btn, .share-panel, .theme-switch, .footer-theme { display: none !important; }
  details > summary::before, details > summary::after, details.rcard > summary.rcard-head::after { content: none !important; }
  .layout, #results-main, #results-static { display: block; padding: 0; max-width: none; }
  #results-static > * { margin-bottom: var(--s3); }
  /* Natural size (owner, 2 Nov 2026): body text 10.5 pt, request tables 9.5 pt; cards padded less. */
  #results-main { font-size: 10.5pt; }
  .finding-desc, .fix-text, .finding-body .evidence-lines, .group-row, .consent-facts, .rcard-body p, .rcard-body li { font-size: 10.5pt; }
  .rcard, .verdict-card { padding: var(--s4); }
  .finding-card .finding-body, .finding-card .finding-head { padding-left: var(--s3); padding-right: var(--s3); }
  /* Side-by-side cards (Consent + Routing) stack. */
  .insight-row, .report-cards { display: block; }
  .insight-row > *, .report-cards > * { margin-bottom: var(--s3); }
  .results { width: 100%; }
  .rcard, .verdict-card { box-shadow: none; break-inside: auto; page-break-inside: auto; }
  /* Only finding cards and Tools rows avoid splitting. */
  /* A finding card may split (owner, 2 Nov 2026): its title row and badges
     stay with the first two evidence lines (or request rows), and the Fix
     strip never leaves the line above it. Tools rows stay whole. */
  .tags-table tbody tr { break-inside: avoid; page-break-inside: avoid; }
  .finding-card { break-inside: auto; page-break-inside: auto; }
  .finding-head, .finding-when { break-inside: avoid; break-after: avoid; page-break-after: avoid; }
  .finding-body > .evidence-lines:first-of-type, .finding-body > .evidence-lines:first-of-type > li:nth-child(-n+2),
  .finding-body .evidence-block thead, .finding-body .evidence-block tbody tr:nth-child(-n+2) { break-before: avoid; page-break-before: avoid; break-inside: avoid; }
  .fix-strip { break-before: avoid; page-break-before: avoid; break-inside: avoid; }
  h2, h3, .rcard-head, .finding-head { break-after: avoid; page-break-after: avoid; }
  /* Expanded: the request tables with every row; a table with no rows prints nothing. */
  #results-main .evidence-tables.hidden { display: block !important; }
  #results-main .evidence-table tr.hidden { display: table-row !important; }
  .evidence-block:not(:has(.evidence-table tbody tr)) { display: none; }
  .evidence-table-wrap { overflow: visible; }
  .evidence-block .evidence-table { table-layout: fixed; width: 100%; min-width: 0; font-size: 9.5pt; }
  .evidence-block .evidence-table th, .evidence-table .ev-key { font-size: 9.5pt; }
  .evidence-block .evidence-table th, .evidence-block .evidence-table td { padding: var(--s1) var(--s2); overflow-wrap: anywhere; }
  .evidence-block .evidence-table th:nth-child(1) { width: 4%; }
  .evidence-block .evidence-table th:nth-child(2) { width: 36%; }
  .evidence-block .evidence-table th:nth-child(4) { width: 9%; }
  .evidence-block .evidence-table th:nth-child(5) { width: 19%; }
  .evidence-table .ev-url { min-width: 0; }
  .evidence-block .evidence-table .ev-url code { overflow-wrap: anywhere; word-break: break-all; }
  .evidence-table .ev-when { white-space: normal; }
  .evidence-table .phase-chip { display: inline-block; max-width: 100%; white-space: nowrap !important; }
  .evidence-block .evidence-table td, .evidence-table .phase-chip { white-space: normal; }
  .evidence-table .ev-key { display: inline; margin-left: var(--s1); }
  /* "Want this fixed?" (v2.80.0) - text with the address in brackets, no controls. */
  .quote-offer { border: 0; background: none; padding: 0; }
  .quote-offer > *:not(.quote-print) { display: none !important; }
  .quote-offer .quote-print { display: block; margin: var(--s2) 0 0; }
  /* Site health: rows only - the title and the first evidence line. */
  .site-health .finding-card { break-inside: auto; page-break-inside: auto; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: var(--s1) 0; margin: 0; background: none; }
  .site-health .finding-card .finding-head, .site-health .finding-card .finding-body { padding: 0; }
  .site-health .finding-list { gap: 0; }
  .site-health .evidence-lines { list-style: none; padding-left: 0; }
  .site-health .finding-desc, .site-health .fix-strip, .site-health .finding-when, .site-health .finding-meta,
  .site-health .evidence-block, .site-health .evidence-lines li:not(:first-child) { display: none !important; }
  .site-health .evidence-lines { margin: var(--s1) 0 0; }
  .site-health .evidence-lines, .site-health .evidence-lines *, #results-main code, .other-scripts * { font-size: 9.5pt; }
  .site-health .finding-title { font-size: 10.5pt; }
  .site-health .evidence-lines li:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  /* No tiles grid: one tile per line, label - number - detail. */
  .stat-grid { display: block; }
  .stat-grid .stat-card { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s1) 0; border: 0; border-bottom: 1px solid var(--border); background: none; grid-row: auto; }
  .stat-grid .stat-value { font-size: 14px; }
  .stat-grid .stat-sub { white-space: normal; }
  .summary-row { grid-template-columns: 30mm minmax(0, 1fr); break-inside: avoid; }
  .summary-row-sub { display: none; }
  .summary-stats { display: block; }
  .summary-stat, .summary-stat[class] { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s1) 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
  .summary-stat > * + * { margin-top: 0; }
  .summary-stat .stat-value { font-size: 10.5pt; }
  /* The Tools table as a plain table: every row and column. */
  .tags-table, .tags-table thead, .tags-table tbody { display: revert; }
  .tags-table tr, .tags-table .tool-row-extra { display: table-row !important; }
  .tags-table th, .tags-table td { display: table-cell !important; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--border); vertical-align: top; }
  .tags-table .tn-short, .tags-table .tool-dot { display: none !important; }
  .tags-table .tn-full { display: inline !important; }
  .table-scroll { overflow: visible; }
  /* Fixed columns: Consent fits "After consent" on one line, Requests wraps. */
  .tags-table { table-layout: fixed; min-width: 0; overflow: visible; }
  .tags-table th:nth-child(1) { width: 16%; }
  .tags-table th:nth-child(3) { width: 15%; }
  .tags-table th:nth-child(4) { width: 19%; }
  .tags-table th:nth-child(5) { width: 12%; }
  .tags-table td { overflow-wrap: anywhere; }
  .tags-table td.tool-name { white-space: normal; overflow-wrap: normal; }
  .tags-table .dup-badge { display: inline-block; margin-top: var(--s1); }
  .tags-table .req-adtech { white-space: normal; overflow-wrap: normal; font-family: var(--font); font-size: 9.5pt; }
  [data-print] { font-size: 0; }
  .tags-table td { font-size: 10.5pt; }
  [data-print]::after { content: attr(data-print); font-size: 10.5pt; }
  [data-print]::before { font-size: 10.5pt; }
  /* An opened events toggle reads "4 events:" with the list under it. */
  .events-toggle > .events { margin: 0; }
  .events-toggle > summary { gap: 0; }
  .events-toggle > summary::after { content: ":" !important; }
  a { color: inherit; text-decoration: none; }
}