/* ==========================================================================
   AURO Secure Web console - design system
   --------------------------------------------------------------------------
   One stylesheet, no external requests. Sections:

     1  Fonts                        12  Badges, status chips, role pill, chips
     2  Tokens (light, dark)         13  Alerts and flash messages
     3  Base and typography          14  Empty state, pagination, tabs, modal
     4  Icons                        15  Code, key-value lists
     5  App shell: top bar and nav   16  Progress, meters, bars, skeletons
     6  Page layout and footer       17  Stat cards and dashboard pieces
     7  Cards                        18  Sign-in and other public pages
     8  Layout utilities and grids   19  Legacy page components
     9  Tables                       19b Page components (second pass)
    10  Forms                        20  Utilities
    11  Buttons                      21  Reduced motion
                                     22  Print

   CLASS NAMES FOR TEMPLATES (new -> what it is). Legacy names on the right
   still work and are styled as the new component, so untouched templates
   keep rendering; prefer the new names when restyling a page.

     Layout     .page-header .page-title .page-subtitle .page-actions
                .section-title  .stack(-sm|-lg) .cluster .grid-2/3/4
                .grid-auto .split                  <- .request-page-header
     Card       .card .card-header .card-title .card-subtitle .card-body
                .card-footer .card-prominent .card-flush
                                                   <- .tile, .kpi-tile, .chart-tile
     Table      .table-wrap (scroll container) .table .table-sticky
                .table-compact .num (right/tabular) .is-selected
                                                   <- bare <table>, <div style="overflow-x:auto">
     Form       .field .label .help-text .field-error .is-invalid
                .input .select .textarea .checkbox .form-actions .form-grid
                                                   <- .request-field .request-hint .hint
     Button     .btn + .btn-primary | .btn-secondary | .btn-ghost | .btn-danger
                .btn-sm .btn-icon .btn-block
                bare <button>                      = .btn .btn-primary
                .cta-button                        = .btn .btn-primary (link)
                .btn-secondary .link-button button[class*="-cancel"]
                                                   = .btn .btn-secondary
                .btn-danger button[class*="delete-button"] .decide-deny-button
                                                   = .btn .btn-danger
     Status     .badge + .is-success | .is-warning | .is-danger | .is-info | .is-neutral
                .badge-count (navy count bubble)
                .status-chip + same .is-* tones (pill with dot, for live state)
                .badge.status-allow/success/popular/allowed_perm = .is-success
                .badge.status-warn/pending                       = .is-warning
                .badge.status-deny/block/failed/denied           = .is-danger
                .badge.status-closed                             = .is-info
                .badge.status-error/cancelled/reference          = .is-neutral
                .icon + .icon-ok|bad|warn|pending|neutral|closed|info (CSS glyphs)
     Alert      .alert + .is-*  .alert-title       <- .flash .flash-error|warning|success|info
                                                   <- .tile.warning, .tile.info
     Empty      .empty-state .empty-state-title .empty-state-text
     Paging     .pagination (links, [aria-current=page], .is-disabled)
     Tabs       .tabs > a (.tab-active | [aria-current=page] | [aria-selected=true])
     Modal      dialog.modal | .modal  .modal-header .modal-title .modal-body .modal-footer
     Code       code, kbd, pre, .code-block, .secret  <- .job-log
     Key-value  dl.kv (dt/dd pairs)
     Progress   progress.progress, .progress > .progress-bar,
                svg.meter-bar > rect.meter-bar-track + rect.meter-bar-fill.is-*
                                                   <- .meter-track/.meter-fill, .bar-track/.bar-fill, .hbar-*
     Loading    .skeleton .skeleton-text .spinner  <- .spinner-dot
     Stat       .stat-card .stat-head .stat-label .stat-icon .stat-value .stat-unit
                .stat-detail .stat-link            <- .stat-tile .stat-tile-label/-value/-unit/-detail/-row/-note/-link
     Utility    .visually-hidden .text-muted .text-meta .text-danger .nowrap .mono
                .tabular .truncate .mt-0 .mb-0 .no-print .preserve-lines
     Page bits  .page-back (link above a title)  .card-section-title
                .confirm-panel(.is-danger|.is-info) inline "are you sure" row
                .busy-panel (spinner + text + optional .job-log)
                .filter-form.is-stacked > .filter-grid > .field + .filter-footer
                .search-row > .field + .btn     .field-narrow .field-medium .input-xs
                th/td.actions + .cell-actions   td.empty-cell  .cell-sub  .check-col
                .policy-card .policy-grid .policy-part(-title)
                .domain-block-head .decide-panel .decide-actions .claim-row
                .kpi-row.is-auto .kpi-value.is-*  .donut-* .trend-* .legend-dot.is-*
                .user-menu-form + button.user-menu-item (POST sign-out)
     Scripts    Page behaviour lives in static/js/<page>.js (loaded with defer);
                shared: console.js (data-confirm on forms, menus, copy, reload),
                inline-confirm.js, domain-age.js, job-poll.js. No inline
                script, style or on* handlers, for a strict CSP.

   Contrast: every text/background pair meets WCAG AA (4.5:1, or 3:1 for
   large text). Two derived roles exist for that reason: --accent-ink (teal
   text on light surfaces; brand-teal itself is 3.9:1 on white, so it is
   used for dots, rings and active marks) and --danger-ink (error text).
   ink-faint is decorative only (hairline icons, disabled marks), never text.
   ========================================================================== */


/* 1  Fonts ================================================================ */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marcellus";
  src: url("fonts/marcellus-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* 2  Tokens =============================================================== */

:root {
  color-scheme: light;

  /* Brand (exact values - do not edit) */
  --brand-teal-strong: #12977e;
  --brand-teal: #0f9179;
  --brand-navy: #143a63;
  --brand-gradient: linear-gradient(165deg, #12977e 0%, #143a63 100%);
  --on-brand: #ffffff;

  /* Surfaces and ink */
  --surface: #ffffff;
  --surface-sunken: #f4f6f9;
  --surface-line: #e4e9ef;
  --surface-raised: #ffffff;
  --ink: #1b2733;
  --ink-muted: #66707c;
  --ink-faint: #9aa4b0;
  --bubble-sent: #dcf0ea;
  --danger: #c94a4a;

  /* Derived roles */
  --heading: var(--brand-navy);
  --accent: var(--brand-teal);
  --accent-ink: #0b7562;
  --link: var(--accent-ink);
  --link-hover: var(--brand-navy);
  --link-underline: rgba(11, 117, 98, 0.4);
  --focus-ring: var(--brand-teal);
  --field-border: #858f9b;
  --field-bg: #ffffff;
  --danger-ink: #a63a3a;
  --danger-hover: #b23f3f;
  --overlay: rgba(11, 27, 43, 0.48);

  /* Semantic tones: -bg (chip fill), -ink (text on bg and on surface),
     -line (border/dot). */
  --success-bg: #e2f4ee;
  --success-ink: #0a6b58;
  --success-line: #0f9179;
  --warning-bg: #fbf1dc;
  --warning-ink: #8a5a0a;
  --warning-line: #c99a3e;
  --danger-bg: #fbecec;
  --danger-line: #c94a4a;
  --info-bg: #e6eef7;
  --info-ink: #1d4f86;
  --info-line: #4f7fb5;
  --neutral-bg: #eef1f4;
  --neutral-ink: #4f5965;
  --neutral-line: #9aa4b0;

  /* Type */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-page-title: 24px;   --lh-page-title: 32px;
  --fs-wordmark: 21px;     --lh-wordmark: 26px;
  --fs-title: 15.5px;      --lh-title: 22px;
  --fs-body: 14px;         --lh-body: 20px;
  --fs-meta: 12px;         --lh-meta: 16px;
  --fs-label: 11px;        --lh-label: 14px;
  --fs-button: 14px;       --lh-button: 18px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;

  /* Radius */
  --radius-badge: 8px;
  --radius-field: 10px;
  --radius-bar: 10px;
  --radius-card: 18px;
  --radius-card-dense: 14px;
  --radius-full: 999px;

  /* Shadows (one per element, never stacked): hairline-and-soft, so cards
     read as layers without heavy drop shadows. */
  --shadow-card: 0 1px 2px rgba(16, 32, 52, 0.05), 0 12px 32px -16px rgba(16, 32, 52, 0.16);
  --shadow-card-subtle: 0 1px 2px rgba(16, 32, 52, 0.05);
  --shadow-field: 0 0 0 4px rgba(15, 145, 121, 0.16);
  --shadow-float: 0 1px 2px rgba(16, 32, 52, 0.08);
  --shadow-popover: 0 4px 6px -2px rgba(16, 32, 52, 0.05), 0 16px 32px -8px rgba(16, 32, 52, 0.2);

  /* Top bar and fixed footer: translucent surface over the page. */
  --bar-bg: rgba(255, 255, 255, 0.88);
  --bar-ink: var(--ink);
  --bar-ink-muted: #46525f;
  --bar-hover: #eef2f6;
  --bar-active-bg: #dcf0ea;
  --bar-active-ink: #0a6352;
  --footer-h: 40px;
  --footer-bg: rgba(255, 255, 255, 0.96);

  /* Primary buttons: solid, AA contrast with white text. */
  --btn-primary-bg: #0b7562;
  --btn-primary-hover: #095e4f;
  --btn-primary-ink: #ffffff;

  /* Layout */
  --page-max: 1600px;
  --topbar-h: 60px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

}

/* Dark theme: navy-based surfaces, teal accent. Applied when the toggle
   (or the OS, before a choice is saved) selects it. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bar-bg: rgba(16, 34, 52, 0.88);
  --footer-bg: rgba(16, 34, 52, 0.96);
  --bar-ink: #e6edf4;
  --bar-ink-muted: #b4c1cf;
  --bar-hover: #1d3a56;
  --bar-active-bg: #17423f;
  --bar-active-ink: #7fe0c4;
  --btn-primary-bg: #36b89b;
  --btn-primary-hover: #4fcfb2;
  --btn-primary-ink: #052019;
  --surface: #13283d;
  --surface-sunken: #0d1d2e;
  --surface-line: #22394f;
  --surface-raised: #1a3550;
  --ink: #e6edf4;
  --ink-muted: #a7b4c2;
  --ink-faint: #73859a;
  --bubble-sent: #17423f;
  --heading: #bcd4ee;
  --accent: #36b89b;
  --accent-ink: #4fcfb2;
  --link-hover: #bcd4ee;
  --link-underline: rgba(79, 207, 178, 0.45);
  --focus-ring: #4fcfb2;
  --field-border: #6a7f96;
  --field-bg: #0f2236;
  --danger-ink: #ef8f8f;
  --danger-hover: #d65a5a;
  --overlay: rgba(3, 10, 18, 0.66);
  --success-bg: #123a35;
  --success-ink: #6fd6b8;
  --success-line: #36b89b;
  --warning-bg: #392f1a;
  --warning-ink: #e9bf6b;
  --warning-line: #c99a3e;
  --danger-bg: #3b2128;
  --danger-line: #d65a5a;
  --info-bg: #163252;
  --info-ink: #93bfee;
  --info-line: #6c9fd6;
  --neutral-bg: #22384e;
  --neutral-ink: #b4c0cc;
  --neutral-line: #73859a;
  --surface-line: #24405a;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.5);
  --shadow-card-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-field: 0 0 0 4px rgba(79, 207, 178, 0.2);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-popover: 0 16px 32px -8px rgba(0, 0, 0, 0.55);
}
/* Same palette when JavaScript is off and the OS prefers dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bar-bg: rgba(16, 34, 52, 0.88);
    --footer-bg: rgba(16, 34, 52, 0.96);
    --bar-ink: #e6edf4;
    --bar-ink-muted: #b4c1cf;
    --bar-hover: #1d3a56;
    --bar-active-bg: #17423f;
    --bar-active-ink: #7fe0c4;
    --btn-primary-bg: #36b89b;
    --btn-primary-hover: #4fcfb2;
    --btn-primary-ink: #052019;
    --surface: #13283d;
    --surface-sunken: #0d1d2e;
    --surface-line: #22394f;
    --surface-raised: #1a3550;
    --ink: #e6edf4;
    --ink-muted: #a7b4c2;
    --ink-faint: #73859a;
    --bubble-sent: #17423f;
    --heading: #bcd4ee;
    --accent: #36b89b;
    --accent-ink: #4fcfb2;
    --link-hover: #bcd4ee;
    --link-underline: rgba(79, 207, 178, 0.45);
    --focus-ring: #4fcfb2;
    --field-border: #6a7f96;
    --field-bg: #0f2236;
    --danger-ink: #ef8f8f;
    --danger-hover: #d65a5a;
    --overlay: rgba(3, 10, 18, 0.66);
    --success-bg: #123a35;
    --success-ink: #6fd6b8;
    --success-line: #36b89b;
    --warning-bg: #392f1a;
    --warning-ink: #e9bf6b;
    --danger-bg: #3b2128;
    --danger-line: #d65a5a;
    --info-bg: #163252;
    --info-ink: #93bfee;
    --info-line: #6c9fd6;
    --neutral-bg: #22384e;
    --neutral-ink: #b4c0cc;
    --neutral-line: #73859a;
  }
}


/* 3  Base and typography ================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--space-4));
  /* Keeps a focused control from scrolling in under the fixed footer. */
  scroll-padding-bottom: calc(var(--footer-h) + var(--space-3));
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: var(--footer-h);
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; color: var(--heading); font-weight: 700; }
h1 {
  font-size: var(--fs-page-title);
  line-height: var(--lh-page-title);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-5);
}
h2 { font-size: var(--fs-title); line-height: var(--lh-title); margin: 0 0 var(--space-3); }
h3 { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); margin: var(--space-4) 0 var(--space-2); }
h4 {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
  margin: var(--space-4) 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
small { font-size: var(--fs-meta); line-height: var(--lh-meta); }
strong, b { font-weight: 700; }
ul, ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
li + li { margin-top: 2px; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--surface-line); margin: var(--space-5) 0; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--link-underline);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

::selection { background: var(--bubble-sent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-field);
  box-shadow: var(--shadow-popover);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* 4  Icons ================================================================
   .i      sprite icon (base.html symbols), 20px line icon in currentColor.
   .icon   small CSS-drawn status glyph inside a circle (no images, so it
           works under a strict CSP); colour follows its tone or its badge. */

.i {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  vertical-align: -5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.i-sm { width: 18px; height: 18px; vertical-align: -4px; }
.i-md { width: 20px; height: 20px; }
.i-lg { width: 21px; height: 21px; }
.stat-icon { color: var(--accent-ink); margin-right: var(--space-2); }
h1 .i, h1 .stat-icon { width: 21px; height: 21px; margin-right: var(--space-2); vertical-align: -3px; }

.icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.4em;
  vertical-align: -0.18em;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  color: var(--neutral-ink);
}
.icon::before, .icon::after { content: ""; position: absolute; box-sizing: border-box; }
.icon-ok { color: var(--success-ink); }
.icon-ok::after {
  left: 50%; top: 44%;
  width: 0.24em; height: 0.46em;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.icon-bad { color: var(--danger-ink); }
.icon-bad::before, .icon-bad::after {
  left: 50%; top: 50%;
  width: 0.5em; height: 1.6px;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.icon-bad::after { transform: translate(-50%, -50%) rotate(-45deg); }
.icon-warn { color: var(--warning-ink); }
.icon-warn::before {
  left: 50%; top: 18%;
  width: 1.6px; height: 0.36em;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%);
}
.icon-warn::after {
  left: 50%; bottom: 16%;
  width: 1.9px; height: 1.9px;
  background: currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}
.icon-info { color: var(--info-ink); }
.icon-info::before {
  left: 50%; bottom: 18%;
  width: 1.6px; height: 0.34em;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%);
}
.icon-info::after {
  left: 50%; top: 16%;
  width: 1.9px; height: 1.9px;
  background: currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}
.icon-pending { color: var(--neutral-ink); }
.icon-pending::before {
  left: 50%; top: 18%;
  width: 1.6px; height: 0.34em;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%);
}
.icon-pending::after {
  left: calc(50% - 0.8px); top: calc(50% - 0.8px);
  width: 0.26em; height: 1.6px;
  background: currentColor;
  border-radius: 1px;
}
.icon-neutral { color: var(--neutral-ink); }
.icon-neutral::after, .icon-closed::after {
  left: 50%; top: 50%;
  width: 0.46em; height: 1.6px;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.icon-closed { color: var(--info-ink); }


/* 5  App shell: top bar and navigation ==================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
}
.topnav {
  position: relative;
  background: var(--bar-bg);
  color: var(--bar-ink);
  border-bottom: 1px solid var(--surface-line);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
/* The brand gradient, kept as a 3px band along the top edge. */
.topnav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-teal-strong), var(--brand-navy));
}
.topnav-inner {
  max-width: var(--page-max);
  height: var(--topbar-h);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-right: var(--space-4);
  color: var(--heading);
  text-decoration: none;
  border-radius: var(--radius-bar);
}
.brand:hover { color: var(--heading); }
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  flex: 0 0 auto;
}
.brand-wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-wordmark);
  line-height: var(--lh-wordmark);
  font-weight: 400;
  letter-spacing: 0.5px;
}
.brand-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  white-space: nowrap;
  color: var(--accent-ink);
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}
.nav-group { display: flex; align-items: center; gap: 2px; }
.nav-group + .nav-group {
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid var(--surface-line);
}
.nav-end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: 0 0 auto; }

/* Top-level items: plain links and dropdown triggers share one look. */
.topnav .nav-link,
.topnav .nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 var(--space-3);
  margin: 0;
  border: 0;
  border-radius: var(--radius-bar);
  background: transparent;
  box-shadow: none;
  color: var(--bar-ink-muted);
  font: 600 var(--fs-body)/var(--lh-body) var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
  max-width: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.topnav .nav-link:hover,
.topnav .nav-dropdown-trigger:hover,
.topnav .nav-dropdown-trigger[aria-expanded="true"] {
  background: var(--bar-hover);
  color: var(--bar-ink);
  transform: none;
}
.topnav .nav-link.active,
.topnav .nav-dropdown-trigger.active {
  background: var(--bar-active-bg);
  color: var(--bar-active-ink);
  font-weight: 700;
}
.topnav :focus-visible { outline-color: var(--focus-ring); }
.nav-dropdown-caret {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.75;
  transition: transform 0.15s var(--ease);
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret { transform: rotate(180deg); }

.nav-dropdown { position: relative; }
.nav-dropdown-menu-inner {
  min-width: 13rem;
  padding: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-card-dense);
  box-shadow: var(--shadow-popover);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown-item {
  display: block;
  padding: 9px var(--space-3);
  border-radius: var(--radius-field);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown-item:hover { background: var(--bubble-sent); color: var(--ink); }
.nav-dropdown-item.active {
  background: var(--bubble-sent);
  color: var(--heading);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Desktop: submenus float and open on hover or .is-open. The admin/support
   nav (.nav-full, nine items) needs 1280px; the end-user nav fits at 900px. */
@media (min-width: 900px) {
  .topnav:not(.nav-full) .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    padding-top: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0s linear 0.15s;
  }
  .topnav:not(.nav-full) .nav-dropdown:hover .nav-dropdown-menu,
  .topnav:not(.nav-full) .nav-dropdown-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  }
  .topnav:not(.nav-full) .nav-toggle { display: none; }
}
@media (min-width: 1280px) {
  .topnav.nav-full .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    padding-top: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0s linear 0.15s;
  }
  .topnav.nav-full .nav-dropdown:hover .nav-dropdown-menu,
  .topnav.nav-full .nav-dropdown-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  }
  .topnav.nav-full .nav-toggle { display: none; }
}

/* User menu */
.user-menu { position: relative; }
.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 10px 0 4px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-bar);
  background: transparent;
  box-shadow: none;
  color: var(--bar-ink);
  font: 600 var(--fs-body)/var(--lh-body) var(--font-sans);
  cursor: pointer;
}
.user-menu-trigger:hover,
.user-menu-trigger[aria-expanded="true"] { background: var(--bar-hover); color: var(--bar-ink); transform: none; }
.user-menu-caret { flex: 0 0 auto; width: 14px; height: 14px; opacity: 0.75; transition: transform 0.15s var(--ease); }
.user-menu-trigger[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--brand-gradient);
  color: var(--on-brand);
  font-weight: 700;
  font-size: var(--fs-body);
  flex: 0 0 auto;
}
.whoami { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 18rem; }
.whoami-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-bar);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  white-space: nowrap;
  background: var(--neutral-bg);
  color: var(--neutral-ink);
}
.topnav .role-pill { background: var(--bar-active-bg); color: var(--bar-active-ink); }
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 60;
  min-width: 15rem;
  padding: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-card-dense);
  box-shadow: var(--shadow-popover);
  color: var(--ink);
}
.user-menu-header {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-bottom: 4px;
  border-bottom: 1px solid var(--surface-line);
}
.user-menu-name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-role { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--ink-muted); }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px var(--space-3);
  border-radius: var(--radius-field);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.user-menu-item .i { color: var(--ink-muted); width: 18px; height: 18px; }
.user-menu-item:hover { background: var(--bubble-sent); color: var(--ink); }
.user-menu-item.active { background: var(--bubble-sent); color: var(--heading); }

/* Icon buttons on the bar */
.theme-toggle,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  box-shadow: none;
  color: var(--bar-ink-muted);
  cursor: pointer;
}
.theme-toggle:hover,
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] { background: var(--bar-hover); color: var(--bar-ink); transform: none; }
.theme-toggle .i { opacity: 0.9; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: inline-block; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: inline-block; }

/* The long admin/support nav shows the avatar only (the name is in the
   user menu) and drops the product name below 1600px. */
.topnav.nav-full .whoami { display: none; }
.topnav.nav-full .user-menu-trigger { padding-right: 6px; }
@media (max-width: 1599.98px) {
  .topnav.nav-full .brand-text { display: none; }
  .topnav.nav-full .nav-link,
  .topnav.nav-full .nav-dropdown-trigger { padding: 0 10px; }
}
@media (max-width: 1099.98px) {
  .whoami { max-width: 10rem; }
}
@media (max-width: 640px) {
  .brand-text, .whoami { display: none; }
  .user-menu-trigger { padding-right: 6px; }
}

/* Narrow windows: the nav collapses behind a menu button (#nav-toggle). */
@media (max-width: 899.98px) {
  .topnav .topnav-inner { padding: 0 var(--space-3) 0 var(--space-4); }
  .topnav .brand { margin-right: 0; }
  .topnav .nav-primary {
    display: none;
    position: absolute;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--topbar-h) - var(--footer-h));
    overflow-y: auto;
    padding: var(--space-3) var(--space-4) var(--space-5);
    background: var(--surface-raised);
    color: var(--ink);
    border-bottom: 1px solid var(--surface-line);
    box-shadow: var(--shadow-popover);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .topnav .nav-primary.is-open { display: flex; }
  .topnav .nav-group { flex-direction: column; align-items: stretch; gap: 2px; }
  .topnav .nav-group + .nav-group {
    margin: 0;
    padding: var(--space-2) 0 0;
    border-left: 0;
    border-top: 1px solid var(--surface-line);
  }
  .topnav .nav-link,
  .topnav .nav-dropdown-trigger {
    width: 100%;
    height: 44px;
    justify-content: space-between;
    color: var(--ink);
    border-radius: var(--radius-field);
  }
  .topnav .nav-link:hover,
  .topnav .nav-dropdown-trigger:hover,
  .topnav .nav-dropdown-trigger[aria-expanded="true"] { background: var(--surface-sunken); color: var(--ink); }
  .topnav .nav-link.active,
  .topnav .nav-dropdown-trigger.active {
    background: var(--bubble-sent);
    color: var(--heading);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .topnav .nav-primary :focus-visible { outline-color: var(--focus-ring); }
  .topnav .nav-dropdown-menu { display: none; padding: 2px 0 var(--space-2) var(--space-3); }
  .topnav .nav-dropdown-menu.is-open { display: block; }
  .topnav .nav-dropdown-menu-inner {
    min-width: 0;
    padding: 0 0 0 var(--space-2);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--surface-line);
    border-radius: 0;
    box-shadow: none;
  }
}
@media (max-width: 1279.98px) {
  .topnav.nav-full .topnav-inner { padding: 0 var(--space-3) 0 var(--space-4); }
  .topnav.nav-full .brand { margin-right: 0; }
  .topnav.nav-full .nav-primary {
    display: none;
    position: absolute;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--topbar-h) - var(--footer-h));
    overflow-y: auto;
    padding: var(--space-3) var(--space-4) var(--space-5);
    background: var(--surface-raised);
    color: var(--ink);
    border-bottom: 1px solid var(--surface-line);
    box-shadow: var(--shadow-popover);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .topnav.nav-full .nav-primary.is-open { display: flex; }
  .topnav.nav-full .nav-group { flex-direction: column; align-items: stretch; gap: 2px; }
  .topnav.nav-full .nav-group + .nav-group {
    margin: 0;
    padding: var(--space-2) 0 0;
    border-left: 0;
    border-top: 1px solid var(--surface-line);
  }
  .topnav.nav-full .nav-link,
  .topnav.nav-full .nav-dropdown-trigger {
    width: 100%;
    height: 44px;
    justify-content: space-between;
    color: var(--ink);
    border-radius: var(--radius-field);
  }
  .topnav.nav-full .nav-link:hover,
  .topnav.nav-full .nav-dropdown-trigger:hover,
  .topnav.nav-full .nav-dropdown-trigger[aria-expanded="true"] { background: var(--surface-sunken); color: var(--ink); }
  .topnav.nav-full .nav-link.active,
  .topnav.nav-full .nav-dropdown-trigger.active {
    background: var(--bubble-sent);
    color: var(--heading);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .topnav.nav-full .nav-primary :focus-visible { outline-color: var(--focus-ring); }
  .topnav.nav-full .nav-dropdown-menu { display: none; padding: 2px 0 var(--space-2) var(--space-3); }
  .topnav.nav-full .nav-dropdown-menu.is-open { display: block; }
  .topnav.nav-full .nav-dropdown-menu-inner {
    min-width: 0;
    padding: 0 0 0 var(--space-2);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--surface-line);
    border-radius: 0;
    box-shadow: none;
  }
}


/* 6  Page layout and footer =============================================== */

main.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-6);
}
main.page:focus { outline: none; }
@media (max-width: 640px) {
  main.page { padding: var(--space-5) var(--space-4); }
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}
.page-header > :first-child { min-width: 0; }
.page-title {
  font-size: var(--fs-page-title);
  line-height: var(--lh-page-title);
  font-weight: 700;
  color: var(--heading);
  margin: 0;
}
.page-subtitle {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
  max-width: 70ch;
}
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.section-title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  color: var(--heading);
  margin: var(--space-6) 0 var(--space-3);
}
.eyebrow {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
  margin: 0 0 var(--space-1);
}

/* Fixed to the bottom of the window; body keeps --footer-h free for it. */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  height: var(--footer-h);
  display: flex;
  align-items: center;
  border-top: 1px solid var(--surface-line);
  background: var(--footer-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.site-footer p {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 500;
  color: var(--ink-muted);
}
.site-footer-sep { margin: 0 var(--space-2); }
@media (max-width: 640px) {
  .site-footer-sep, .site-footer-credit { display: none; }
}


/* 7  Cards ================================================================
   .card            dense data card (radius 20, subtle shadow)
   .card-prominent  feature/standalone card (radius 28, card shadow)       */

.card,
.tile {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-card-dense);
  box-shadow: var(--shadow-card-subtle);
  padding: var(--space-5);
  margin: 0 0 var(--space-4);
  min-width: 0;
}
/* Legacy tiles scroll their own overflow (bare wide tables inside). */
.tile { overflow-x: auto; }
.card > :last-child, .tile > :last-child { margin-bottom: 0; }
.card-prominent {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.card-flush { padding: 0; overflow: hidden; }
.card-flush > .card-header { padding: var(--space-5) var(--space-5) 0; }
.card-flush > .card-footer { padding: var(--space-3) var(--space-5); }
.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 700;
  color: var(--heading);
}
.card-title .i { color: var(--accent-ink); }
.card-subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 500;
  color: var(--ink-muted);
}
.card-body > :last-child { margin-bottom: 0; }
.card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-line);
}
.card > form + .card-section,
.card-section + .card-section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--surface-line);
}

/* Legacy tile variants */
.tile-accent { position: relative; }
.tile.warning, .tile.info {
  box-shadow: none;
  border-color: transparent;
  border-left: 4px solid var(--warning-line);
  background: var(--warning-bg);
  color: var(--ink);
}
.tile.info { border-left-color: var(--info-line); background: var(--info-bg); }
.warning { color: var(--warning-ink); }
.tile.warning { color: var(--ink); }
.job-status { border-left: 4px solid var(--neutral-line); }
.job-status-running { border-left-color: var(--warning-line); }
.job-status-queued { border-left-color: var(--info-line); }
.job-status-success { border-left-color: var(--success-line); }
.job-status-failed { border-left-color: var(--danger-line); }
.job-status-cancelled { border-left-color: var(--neutral-line); }


/* 8  Layout utilities and grids =========================================== */

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
.stack > *, .stack-sm > *, .stack-lg > * { margin-top: 0; margin-bottom: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster-lg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

.grid-2, .grid-3, .grid-4, .grid-auto,
.dashboard-grid, .dashboard-grid-wide, .analytics-grid, .user-dash-stats {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-auto > *,
.dashboard-grid > *, .dashboard-grid-wide > *, .analytics-grid > *, .user-dash-stats > * { margin-bottom: 0; min-width: 0; }
.grid-2, .dashboard-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3, .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4, .user-dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.analytics-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 1200px) {
  .grid-4, .user-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid-2, .grid-3, .dashboard-grid, .dashboard-grid-wide, .analytics-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid-4, .user-dash-stats { grid-template-columns: minmax(0, 1fr); }
}
.two-col { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.two-col > div { flex: 1 1 260px; min-width: 0; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }


/* 9  Tables ===============================================================
   Wrap wide tables in .table-wrap (horizontal scroll). Add .is-scroll to
   cap its height and get a sticky header. Mark number columns with .num. */

.table-wrap {
  position: relative; /* contains .visually-hidden header labels */
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-field);
}
.table-wrap.is-scroll { max-height: 70vh; overflow-y: auto; }
.table-wrap + .table-wrap, .table-wrap + p, .two-col + p { margin-top: var(--space-3); }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
table th,
table td {
  padding: 10px var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--surface-line);
}
table th {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
  white-space: nowrap;
}
/* Header cells: <thead> or a first row made only of <th>. Rows that mix a
   <th> label with <td> values are row headers and stay plain. */
table thead th,
table tr:first-child:not(:has(td)) > th {
  background: var(--surface-sunken);
}
table thead tr:first-child th:first-child, table tr:first-child:not(:has(td)) > th:first-child { border-top-left-radius: var(--radius-field); }
table thead tr:first-child th:last-child, table tr:first-child:not(:has(td)) > th:last-child { border-top-right-radius: var(--radius-field); }
table tr:has(td) > th { color: var(--ink-muted); white-space: normal; width: 1%; min-width: 9rem; }
table tr:last-child > td { border-bottom: 0; }
table tbody tr:hover > td,
table tr:hover > td { background: var(--surface-sunken); }
table tr.is-selected > td { background: var(--bubble-sent); }
table tr:hover, table tr.is-selected { --ink-muted: #56606b; }
:root[data-theme="dark"] table tr:hover,
:root[data-theme="dark"] table tr.is-selected { --ink-muted: #b6c2ce; }
table td button { min-height: 32px; padding: 6px 12px; font-size: 13px; border-radius: var(--radius-field); }
.table-wrap.is-scroll thead th,
.table-wrap.is-scroll tr:first-child:not(:has(td)) > th,
table.table-sticky thead th { position: sticky; top: 0; z-index: 1; }
th.num, td.num, .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-striped tbody tr:nth-child(even) > td { background: var(--surface-sunken); }
.table-compact { width: auto; min-width: 20rem; max-width: 34rem; }
.table-compact th, .table-compact td { padding: 6px 10px; }
.domains-cell { max-width: 420px; white-space: normal; word-break: break-word; }
.job-history-table th, .job-history-table td { white-space: nowrap; }
.job-history-table td.job-message { white-space: normal; min-width: 16rem; }
.request-domains-table { width: auto; min-width: 40%; }
.nowrap-cell { white-space: nowrap; }
@media (max-width: 720px) {
  /* Bare legacy tables scroll on small screens. */
  main.page > table, .tile > table, .card > table { display: block; overflow-x: auto; }
}


/* 10  Forms =============================================================== */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); min-width: 0; }
.field > .help-text, .field > .field-error { margin: 0; }
.label,
.field > label,
.form-grid label {
  display: block;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.label-optional { font-weight: 500; color: var(--ink-muted); }
.help-text, .hint, .request-hint {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 500;
  color: var(--ink-muted);
  margin: var(--space-1) 0 var(--space-3);
}
.field-error, .error-text {
  display: flex;
  align-items: center;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  color: var(--danger-ink);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.form-grid > .field-full { grid-column: 1 / -1; }
.form-grid label.checkbox, .form-grid .checkbox { display: inline-flex; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; letter-spacing: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-5); }

input[type="text"], input[type="password"], input[type="number"], input[type="email"],
input[type="url"], input[type="search"], input[type="tel"], input[type="date"],
input[type="datetime-local"], input[type="time"], input:not([type]),
select, textarea, .input, .select, .textarea {
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  color: var(--ink);
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-field);
  min-height: 40px;
  padding: 9px var(--space-3);
  max-width: 100%;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
select, .select { padding-right: var(--space-2); cursor: pointer; }
select[multiple] { padding: 6px; min-height: 6rem; }
textarea, .textarea { min-height: 88px; resize: vertical; display: block; }
.input-block, .field input, .field select, .field textarea { width: 100%; }
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-muted); }
input:focus, select:focus, textarea:focus { outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus,
input[type="date"]:focus, input:not([type]):focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: var(--shadow-field);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  border-color: var(--surface-line);
  cursor: not-allowed;
}
.is-invalid, input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger) !important;
}
.is-invalid:focus, [aria-invalid="true"]:focus { outline-color: var(--danger); }
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  vertical-align: -3px;
  accent-color: var(--accent);
  cursor: pointer;
}
.checkbox, .filter-form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  cursor: pointer;
}
.checkbox input, .filter-form-checkbox input { margin: 0; }
input[type="file"] { font: inherit; color: var(--ink-muted); max-width: 100%; }
input[type="file"]::file-selector-button {
  font: 700 13px/18px var(--font-sans);
  margin-right: var(--space-3);
  padding: 6px 14px;
  border-radius: var(--radius-field);
  border: 1.5px solid var(--heading);
  background: transparent;
  color: var(--heading);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--bubble-sent); }
fieldset { border: 1px solid var(--surface-line); border-radius: var(--radius-field); padding: var(--space-4); margin: 0 0 var(--space-4); }
legend { padding: 0 var(--space-1); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.3px; }

.inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0; }
.inline-form input[type="text"] { width: 12rem; }
.inline-form + .inline-form { margin-left: var(--space-2); }

details > summary { cursor: pointer; }
@media (max-width: 640px) {
  /* 16px stops iOS zooming into focused fields. */
  input[type="text"], input[type="password"], input[type="number"], input[type="email"],
  input[type="url"], input[type="search"], input[type="date"], input:not([type]), select, textarea { font-size: 16px; }
}
details > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }


/* 11  Buttons =============================================================
   .btn base + one variant. A bare <button> renders as primary so untouched
   templates keep working. */

.btn,
button,
input[type="submit"],
input[type="button"],
.cta-button,
.link-button {
  --btn-bg: var(--btn-primary-bg);
  --btn-ink: var(--btn-primary-ink);
  --btn-border: transparent;
  --btn-shadow: var(--shadow-float);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 40px;
  padding: 10px 18px;
  margin: 0;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-bar);
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: var(--btn-shadow);
  font: 700 var(--fs-button)/var(--lh-button) var(--font-sans);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.cta-button:hover, .link-button:hover {
  color: var(--btn-ink);
  text-decoration: none;
}
/* Primary hover: only buttons that are primary (custom buttons set their
   own --btn-bg and keep it). */
.btn-primary:hover,
.btn:not([class*="btn-"]):hover,
button:not([class]):hover,
input[type="submit"]:not([class]):hover,
.cta-button:hover { --btn-bg: var(--btn-primary-hover); }
.btn:active, button:active, .cta-button:active, .link-button:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, button:disabled, input[type="submit"]:disabled, .btn.is-disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn .i, button .i, .cta-button .i { width: 18px; height: 18px; vertical-align: 0; }

/* Primary - solid brand teal */
.btn-primary,
.decide-approve-button, .decide-approve1h-button,
.decide-approve-confirm-button, .decide-approve1h-confirm-button { --btn-bg: var(--btn-primary-bg); --btn-ink: var(--btn-primary-ink); --btn-border: transparent; --btn-shadow: var(--shadow-float); }
.btn-primary:hover,
.decide-approve-button:hover, .decide-approve1h-button:hover,
.decide-approve-confirm-button:hover, .decide-approve1h-confirm-button:hover { --btn-bg: var(--btn-primary-hover); }

/* Secondary - outlined on the surface */
.btn-secondary,
button.btn-secondary,
.link-button,
button[class*="-cancel"],
a[class*="-cancel"],
input[type="button"] {
  --btn-bg: var(--surface);
  --btn-ink: var(--heading);
  --btn-border: var(--field-border);
  --btn-shadow: var(--shadow-float);
}
.btn-secondary:hover, button.btn-secondary:hover, .link-button:hover,
button[class*="-cancel"]:hover, a[class*="-cancel"]:hover, input[type="button"]:hover { --btn-bg: var(--bubble-sent); }

/* Ghost - text only */
.btn-ghost { --btn-bg: transparent; --btn-ink: var(--accent-ink); --btn-border: transparent; --btn-shadow: none; }
.btn-ghost:hover { --btn-bg: var(--bubble-sent); }

/* Danger - destructive actions only */
.btn-danger,
button.btn-danger,
button[class*="delete-button"],
button[class*="delete-confirm-button"],
.decide-deny-button {
  --btn-bg: var(--danger);
  --btn-ink: #ffffff;
  --btn-border: transparent;
  --btn-shadow: none;
}
.btn-danger:hover, button.btn-danger:hover, button[class*="delete-button"]:hover,
button[class*="delete-confirm-button"]:hover, .decide-deny-button:hover { --btn-bg: var(--danger-hover); }

/* Sizes and shapes */
.btn-sm, .chip-add-button, .domain-age-cell button {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: var(--radius-field);
}
.btn-icon {
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-full);
}
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Buttons that should look like text or controls, not buttons */
.btn-reset,
.log-group-toggle,
.ticket-expand-btn,
button.refresh-indicator,
.chip-remove,
.lookup-suggest-item,
.domains-toggle,
.dp-msdrop-toggle {
  --btn-bg: transparent;
  --btn-ink: inherit;
  --btn-border: transparent;
  --btn-shadow: none;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  font-weight: inherit;
  font-size: inherit;
  transform: none !important;
}
.log-group-toggle, .domains-toggle {
  --btn-ink: var(--link);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: normal;
}
.refresh-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
}
button.refresh-indicator {
  --btn-ink: var(--heading);
  --btn-border: var(--heading);
  min-height: 36px;
  padding: 6px 14px 6px 12px;
  border-radius: var(--radius-bar);
  font-size: 13px;
  font-weight: 700;
}
button.refresh-indicator:hover { --btn-bg: var(--bubble-sent); }
.refresh-indicator .i { width: 18px; height: 18px; }
.refresh-indicator.spinning .i { animation: auro-spin 0.7s linear infinite; }
@keyframes auro-spin { to { transform: rotate(360deg); } }


/* 12  Badges, status chips, role pill, chips ============================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px var(--space-2);
  border-radius: var(--radius-badge);
  background: var(--neutral-bg);
  color: var(--neutral-ink);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.badge .icon { margin-right: 0; width: 12px; height: 12px; color: inherit; font-size: 12px; }
.badge.is-success, .badge.status-allow, .badge.status-success, .badge.status-popular, .badge.status-allowed_perm {
  background: var(--success-bg); color: var(--success-ink);
}
.badge.is-warning, .badge.status-warn, .badge.status-pending {
  background: var(--warning-bg); color: var(--warning-ink);
}
.badge.is-danger, .badge.status-deny, .badge.status-block, .badge.status-failed, .badge.status-denied {
  background: var(--danger-bg); color: var(--danger-ink);
}
.badge.is-info, .badge.status-closed { background: var(--info-bg); color: var(--info-ink); }
.badge.is-neutral, .badge.status-error, .badge.status-cancelled, .badge.status-reference {
  background: var(--neutral-bg); color: var(--neutral-ink);
}
.badge.status-reference { font-style: italic; }
.badge-count {
  min-width: 22px;
  justify-content: center;
  padding: 2px 7px;
  background: var(--brand-navy);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
:root[data-theme="dark"] .badge-count { background: var(--heading); color: var(--surface-sunken); }

/* Status chip: pill with a leading dot for live states (service up/down). */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3) 3px 10px;
  border-radius: var(--radius-bar);
  background: var(--neutral-bg);
  color: var(--neutral-ink);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  white-space: nowrap;
}
.status-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-line);
  flex: 0 0 auto;
}
.status-chip.is-success { background: var(--success-bg); color: var(--success-ink); }
.status-chip.is-success::before { background: var(--success-line); }
.status-chip.is-warning { background: var(--warning-bg); color: var(--warning-ink); }
.status-chip.is-warning::before { background: var(--warning-line); }
.status-chip.is-danger { background: var(--danger-bg); color: var(--danger-ink); }
.status-chip.is-danger::before { background: var(--danger-line); }
.status-chip.is-info { background: var(--info-bg); color: var(--info-ink); }
.status-chip.is-info::before { background: var(--info-line); }

/* Plain-text statuses (legacy) */
.status { display: inline-flex; align-items: center; font-weight: 600; }
.status-allowed_perm { color: var(--success-ink); font-weight: 600; }
.status-pending { color: var(--warning-ink); font-weight: 600; }
.status-denied { color: var(--danger-ink); font-weight: 600; }

/* Dots (legends, inline status) */
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: var(--space-2);
  background: var(--neutral-line);
  flex: 0 0 auto;
}
.dot-green, .dot.is-success { background: var(--success-line); }
.dot-red, .dot.is-danger { background: var(--danger-line); }
.dot.is-warning { background: var(--warning-line); }
.dot.is-info { background: var(--info-line); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: var(--space-2); vertical-align: -1px; }

/* Removable chips (policy pages) */
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 12px;
  border-radius: var(--radius-bar);
  background: var(--surface-sunken);
  border: 1px solid var(--surface-line);
  color: var(--ink);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  white-space: nowrap;
}
.chip-remove-form { display: inline-flex; margin: 0; }
.chip-remove {
  --btn-ink: var(--ink-muted);
  width: 22px;
  height: 22px;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: 700;
  line-height: 1;
}
.chip-remove:hover { --btn-bg: var(--danger-bg); --btn-ink: var(--danger-ink); }
.chip-add-panel {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-field);
}
.chip-add-panel label { margin-right: var(--space-1); }
.chip-empty { color: var(--ink-muted); font-style: italic; font-size: var(--fs-meta); }


/* 13  Alerts and flash messages =========================================== */

.flashes { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.alert,
.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-field);
  border: 1px solid transparent;
  border-left-width: 4px;
  background: var(--info-bg);
  border-color: var(--info-bg);
  border-left-color: var(--info-line);
  color: var(--ink);
}
.flashes .flash { margin: 0; }
.alert > .icon, .flash > .icon { margin: 2px 0 0; }
.alert-body { min-width: 0; }
.alert-body > :last-child { margin-bottom: 0; }
.alert-title { display: block; font-weight: 700; margin-bottom: 2px; }
.alert.is-success, .flash-success { background: var(--success-bg); border-color: var(--success-bg); border-left-color: var(--success-line); }
.alert.is-warning, .flash-warning { background: var(--warning-bg); border-color: var(--warning-bg); border-left-color: var(--warning-line); }
.alert.is-danger, .flash-error, .flash-danger { background: var(--danger-bg); border-color: var(--danger-bg); border-left-color: var(--danger-line); }
.alert.is-neutral { background: var(--surface-sunken); border-color: var(--surface-line); border-left-color: var(--neutral-line); }
.flash a, .alert a { color: inherit; text-decoration-color: currentColor; font-weight: 600; }
/* Legacy <p class="flash flash-error"> with no icon: keep text readable. */
p.flash { display: block; }


/* 14  Empty state, pagination, tabs, modal ================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  color: var(--ink-muted);
}
.empty-state .i {
  width: 21px;
  height: 21px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.empty-state-title { margin: var(--space-1) 0 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; color: var(--ink); }
.empty-state-text { margin: 0; max-width: 46ch; }
.empty-state.is-compact { padding: var(--space-4) var(--space-3); flex-direction: row; justify-content: center; text-align: left; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}
.pagination li { margin: 0; }
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-field);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { background: var(--bubble-sent); color: var(--ink); }
.pagination [aria-current="page"] { background: var(--brand-navy); color: #ffffff; }
:root[data-theme="dark"] .pagination [aria-current="page"] { background: var(--heading); color: var(--surface-sunken); }
.pagination .is-disabled { color: var(--ink-muted); opacity: 0.6; pointer-events: none; }
.pagination-meta { margin: 0 var(--space-2); color: var(--ink-muted); font-size: var(--fs-meta); }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 4px;
  margin: 0 0 var(--space-5);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-bar);
  width: fit-content;
  max-width: 100%;
}
.tabs a, .tabs button {
  --btn-bg: transparent;
  --btn-ink: var(--ink-muted);
  --btn-border: transparent;
  --btn-shadow: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px var(--space-4);
  border-radius: var(--radius-bar);
  color: var(--ink-muted);
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
  transform: none !important;
}
.tabs a:hover, .tabs button:hover { color: var(--ink); background: var(--surface-sunken); }
.tabs a.tab-active, .tabs a[aria-current="page"], .tabs [aria-selected="true"] {
  background: var(--brand-navy);
  color: #ffffff;
}
:root[data-theme="dark"] .tabs a.tab-active,
:root[data-theme="dark"] .tabs a[aria-current="page"],
:root[data-theme="dark"] .tabs [aria-selected="true"] { background: var(--heading); color: var(--surface-sunken); }

.modal,
dialog.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  overflow: auto;
}
dialog.modal::backdrop { background: var(--overlay); }
.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--space-4); background: var(--overlay); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
.modal-title { margin: 0; font-size: 18px; line-height: 24px; color: var(--heading); }
.modal-body { padding: var(--space-4) var(--space-6); }
.modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-6) var(--space-6); }


/* 15  Code, key-value lists =============================================== */

/* Free text people typed (a request's reason) keeps its line breaks. */
.preserve-lines { white-space: pre-line; overflow-wrap: anywhere; }

code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.92em; }
/* In tables, .mono marks addresses and ids: the UI face with tabular
   figures reads better than a system monospace fallback. */
td.mono, th.mono, td .mono, dd.mono, dd .mono { font-family: var(--font-sans); font-size: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-sunken);
  border: 1px solid var(--surface-line);
  color: var(--ink);
  word-break: break-word;
}
kbd {
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--field-border);
  border-bottom-width: 2px;
  background: var(--surface);
}
pre, .code-block, .job-log {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-field);
  background: #0f2236;
  color: #dce6ef;
  border: 1px solid #22394f;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 19px;
  overflow-x: auto;
  white-space: pre;
}
pre code, .code-block code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.job-log { max-height: 240px; overflow-y: auto; white-space: pre-wrap; }
.secret {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-field);
  background: var(--surface-sunken);
  border: 1px dashed var(--field-border);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.08em;
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}

dl.kv {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: 0;
  margin: 0 0 var(--space-3);
}
dl.kv dt, dl.kv dd {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-line);
}
dl.kv dt { padding-right: var(--space-5); color: var(--ink-muted); font-weight: 600; }
dl.kv dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
dl.kv dt:last-of-type, dl.kv dd:last-of-type { border-bottom: 0; }
@media (max-width: 560px) {
  dl.kv { grid-template-columns: minmax(0, 1fr); }
  dl.kv dt { border-bottom: 0; padding-bottom: 0; }
}


/* 16  Progress, meters, bars, skeletons =================================== */

progress.progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-line);
  color: var(--accent);
  overflow: hidden;
}
progress.progress::-webkit-progress-bar { background: var(--surface-line); border-radius: var(--radius-full); }
progress.progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-full); }
progress.progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-full); }
.progress:not(progress) { height: 8px; border-radius: var(--radius-full); background: var(--surface-line); overflow: hidden; }
.progress-bar { height: 100%; border-radius: inherit; background: var(--accent); }

/* SVG bar: width comes from the rect's width="NN%" attribute, so no inline
   style is needed (CSP friendly). */
svg.meter-bar { display: block; width: 100%; height: 8px; overflow: visible; }
.meter-bar-track { fill: var(--surface-line); }
.meter-bar-fill { fill: var(--accent); }
.meter-bar-fill.is-success { fill: var(--success-line); }
.meter-bar-fill.is-warning { fill: var(--warning-line); }
.meter-bar-fill.is-danger { fill: var(--danger-line); }
.meter-bar-fill.is-info { fill: var(--info-line); }
.meter-bar-fill.is-navy { fill: var(--heading); }

/* Legacy div bars (inline width) */
.meter-row { display: flex; flex-direction: column; gap: var(--space-3); }
.meter {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: var(--space-3);
}
.meter-label { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--ink-muted); }
.meter-value { font-size: var(--fs-meta); font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.meter-track, .bar-track, .hbar-track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-line);
  overflow: hidden;
}
.meter-fill, .bar-fill, .hbar-fill { height: 100%; border-radius: inherit; background: var(--accent); }
.meter-fill.meter-ok { background: var(--success-line); }
.meter-fill.meter-warning { background: var(--warning-line); }
.meter-fill.meter-danger { background: var(--danger-line); }
.bar-fill.gold { background: var(--accent); }
.bar-fill.red { background: var(--danger-line); }
.hbar-fill-blue { background: var(--info-line); }

.skeleton {
  display: block;
  border-radius: var(--radius-field);
  background: linear-gradient(90deg, var(--surface-line) 0%, var(--surface-sunken) 50%, var(--surface-line) 100%);
  background-size: 200% 100%;
  animation: auro-shimmer 1.3s ease-in-out infinite;
  min-height: 12px;
}
.skeleton-text { height: 12px; margin: 6px 0; border-radius: 6px; }
.skeleton-text:last-child { width: 60%; }
@keyframes auro-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--surface-line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: auro-spin 0.8s linear infinite;
  vertical-align: -4px;
}
.spinner-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  animation: auro-pulse 1s ease-in-out infinite;
}
@keyframes auro-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
.processing-note { color: var(--warning-ink); font-style: italic; }

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--space-3);
  padding: 2px 10px 2px 8px;
  border-radius: var(--radius-bar);
  background: var(--success-bg);
  color: var(--success-ink);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
}
.live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-line);
  animation: auro-live 1.6s ease-out infinite;
}
@keyframes auro-live {
  0% { box-shadow: 0 0 0 0 rgba(15, 145, 121, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(15, 145, 121, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 145, 121, 0); }
}


/* 17  Stat cards and dashboard pieces ===================================== */

.stat-card,
.stat-tile,
.stat-tile-wide {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.stat-head, .stat-tile-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 700;
  color: var(--ink);
}
.stat-head .i, .stat-tile-label .i {
  width: 20px;
  height: 20px;
  padding: 7px;
  box-sizing: content-box;
  border-radius: var(--radius-field);
  background: var(--bubble-sent);
  color: var(--accent-ink);
  margin: 0;
}
.stat-tile-label .icon { margin-right: 0; }
.stat-label { margin: 0; font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.stat-window, .stat-tile-window {
  margin-left: auto;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
}
.stat-value, .stat-tile-value {
  display: block;
  margin: 0 0 var(--space-1);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-unit, .stat-tile-unit {
  margin-left: 6px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0;
}
.stat-detail, .stat-tile-detail, .stat-tile-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 var(--space-1);
  color: var(--ink-muted);
}
.stat-note, .stat-tile-note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 500;
  color: var(--ink-muted);
}
.stat-tile-note.warning, .stat-note.is-warning { color: var(--warning-ink); }
.stat-list, .stat-tile-icon-list, .stat-tile-mini-list {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}
.stat-list li, .stat-tile-icon-list li, .stat-tile-mini-list li {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--surface-line);
}
.stat-list li:last-child, .stat-tile-icon-list li:last-child, .stat-tile-mini-list li:last-child { border-bottom: 0; }
.stat-list.is-top li { align-items: flex-start; }
.stat-list.is-top .icon { margin-top: 2px; }
.stat-list .stat-list-value { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-link, .stat-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: none;
  align-self: flex-start;
}
.stat-link .i { width: 16px; height: 16px; transition: transform 0.15s var(--ease); }
.stat-link:hover, .stat-tile-link:hover { color: var(--heading); text-decoration: underline; }
.stat-link:hover .i { transform: translateX(2px); }

/* Welcome panel (end-user dashboard) */
.welcome, .user-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
}
.welcome-text, .user-hero-text { flex: 1 1 320px; min-width: 0; }
.welcome-title, .user-hero-greeting {
  margin: 0 0 var(--space-1);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--heading);
}
.welcome-lede, .user-hero-lede { margin: 0; color: var(--ink-muted); max-width: 60ch; }
.user-hero-eyebrow { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.3px; color: var(--ink-muted); margin: 0 0 var(--space-1); }

/* Request rows with a mini timeline */
.request-card-list { display: flex; flex-direction: column; gap: var(--space-2); }
.request-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-field);
  background: var(--surface);
  transition: background-color 0.15s var(--ease);
}
.request-card-row:hover { background: var(--bubble-sent); --ink-muted: #56606b; }
:root[data-theme="dark"] .request-card-row:hover { --ink-muted: #b6c2ce; }
.request-card-main { flex: 1 1 200px; min-width: 0; }
.request-card-domain { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.request-card-meta { margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--ink-muted); }
.request-card-row .mini-timeline { flex: 0 0 auto; width: auto; margin-top: 0; }
.request-card-row .badge { flex: 0 0 auto; }
@media (max-width: 720px) {
  .request-card-row .mini-timeline { width: 100%; order: 3; }
}

.mini-timeline { display: flex; align-items: flex-start; gap: var(--space-1); margin-top: var(--space-2); min-width: 13rem; }
.mini-tl-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 4.1rem; }
.mini-tl-item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--surface-line);
}
.mini-tl-dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--neutral-line);
}
.mini-tl-dot.dot-done { background: var(--success-line); border-color: var(--success-line); }
.mini-tl-dot.dot-pending { background: var(--warning-line); border-color: var(--warning-line); }
.mini-tl-dot.dot-denied { background: var(--danger-line); border-color: var(--danger-line); }
.mini-tl-dot.dot-closed { background: var(--info-line); border-color: var(--info-line); }
.mini-tl-label {
  margin-top: 6px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
  text-align: center;
  white-space: nowrap;
}
.mini-tl-item.tl-current .mini-tl-label { color: var(--ink); font-weight: 700; }

/* Donut ring (traffic split) and gauge (security score) */
.traffic-split-card, .donut-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.traffic-split-ring { width: 128px; height: 128px; flex: 0 0 auto; transform: rotate(-90deg); }
.traffic-split-ring circle { fill: none; stroke-width: 3.6; }
.traffic-split-track { stroke: var(--surface-line); }
.traffic-split-allowed { stroke: var(--success-line); }
.traffic-split-blocked { stroke: var(--danger-line); }
.traffic-legend { flex: 1 1 180px; min-width: 0; }
.traffic-legend-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px 0;
  border-bottom: 1px solid var(--surface-line);
}
.traffic-legend-value { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.traffic-legend-total { border-bottom: 0; font-weight: 700; color: var(--heading); }

.gauge-wrap { display: flex; align-items: center; gap: var(--space-4); }
.gauge-ring { width: 88px; height: 88px; flex: 0 0 auto; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--surface-line); stroke-width: 3.4; }
.gauge-fill { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; }
.gauge-fill.gauge-good { stroke: var(--success-line); }
.gauge-fill.gauge-warn { stroke: var(--warning-line); }
.gauge-fill.gauge-bad { stroke: var(--danger-line); }
.gauge-center { flex: 1 1 auto; min-width: 0; }

/* Ranked bars (top sites) */
.bar-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bar-list li { margin: 0; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px var(--space-3);
}
.bar-row-domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bar-row-hits { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.bar-row > .bar-track, .bar-row > svg.meter-bar { grid-column: 1 / -1; }


/* 18  Sign-in and other public pages ====================================== */

main.page.auth-shell {
  max-width: none;
  padding: 0;
  display: flex;
}
.auth-split {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  width: 100%;
  min-height: calc(100vh - var(--footer-h));
}
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 44px 48px;
  background: var(--brand-gradient);
  color: var(--on-brand);
  overflow: hidden;
}
.auth-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--on-brand);
  text-decoration: none;
}
.auth-lockup .brand-mark { width: 44px; height: 44px; }
.auth-lockup .brand-wordmark { font-size: 28px; line-height: 34px; letter-spacing: 0.5px; }
.auth-lockup-product { display: block; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.auth-statement {
  max-width: 26rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  font-weight: 400;
  color: var(--on-brand);
}
.auth-statement-sub { max-width: 30rem; margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; color: var(--on-brand); }
.auth-brand-foot { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--on-brand); }

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px var(--space-5);
  background: var(--surface-sunken);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  margin: 0;
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.auth-card.is-wide { max-width: 560px; }
.auth-card > :last-child { margin-bottom: 0; }
.auth-card .flashes { margin-bottom: var(--space-4); }
.auth-title { margin: 0 0 var(--space-1); font-size: 22px; line-height: 28px; font-weight: 700; color: var(--heading); }
.auth-subtitle { margin: 0 0 var(--space-5); color: var(--ink-muted); }
.auth-card .field input { min-height: 44px; }
.auth-card .btn-block { min-height: 46px; margin-top: var(--space-2); }
.auth-foot {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--surface-line);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 500;
  color: var(--ink-muted);
}
.auth-foot .i { width: 18px; height: 18px; color: var(--accent-ink); }
.auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--bubble-sent);
  color: var(--accent-ink);
}
.auth-icon .i { width: 21px; height: 21px; }
.auth-icon.is-success { background: var(--success-bg); color: var(--success-ink); }
.auth-icon.is-warning { background: var(--warning-bg); color: var(--warning-ink); }

/* Login challenge box */
.challenge {
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-field);
  background: var(--surface-sunken);
  border: 1px solid var(--surface-line);
}
.challenge .field { margin-bottom: 0; }
.challenge-head { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-weight: 700; color: var(--heading); }
.challenge-head .i { width: 18px; height: 18px; color: var(--accent-ink); }

/* Certificate card (home) */
.cert-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-field);
  background: var(--surface-sunken);
  border: 1px solid var(--surface-line);
}
.cert-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--bubble-sent);
  color: var(--accent-ink);
  flex: 0 0 auto;
}
.cert-card-body { min-width: 0; flex: 1 1 auto; }
.cert-card-title { margin: 0 0 2px; font-weight: 700; color: var(--ink); }
.cert-card-text { margin: 0 0 var(--space-2); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); }
.cert-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; }
.cert-card-expiry { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--ink-muted); }
.cert-card .btn { margin-top: var(--space-1); }

/* Access denied */
.blocked-site {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-field);
  background: var(--surface-sunken);
  border: 1px solid var(--surface-line);
}
.blocked-site-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--warning-bg);
  color: var(--warning-ink);
  flex: 0 0 auto;
}
.blocked-site-text { min-width: 0; }
.blocked-site-name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.blocked-site-meta { margin-top: 2px; }
.steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; counter-reset: step; }
.steps li { position: relative; display: flex; gap: var(--space-3); margin: 0; padding: 0 0 var(--space-4); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--bubble-sent);
  color: var(--accent-ink);
  font-size: var(--fs-meta);
  font-weight: 700;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 30px;
  bottom: 4px;
  width: 2px;
  background: var(--surface-line);
}
.steps strong { display: block; color: var(--ink); }
.steps span { color: var(--ink-muted); }

/* MFA setup */
.qr-frame {
  display: inline-block;
  padding: 10px;
  line-height: 0;
  border-radius: var(--radius-field);
  background: #ffffff;
  border: 1px solid var(--surface-line);
}
.qr-frame svg { width: 180px; height: 180px; display: block; }
.qr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.qr-row > .stack-sm { flex: 1 1 200px; min-width: 0; }
.secret-sm { font-size: var(--fs-meta); line-height: 18px; letter-spacing: 0; margin-top: var(--space-2); }
.setup-steps { margin: 0 0 var(--space-4); padding-left: 1.3em; }
.setup-steps li { margin: 0 0 6px; color: var(--ink); }
.code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  list-style: none;
  border-radius: var(--radius-field);
  background: var(--surface-sunken);
  border: 1px dashed var(--field-border);
}
.code-grid li {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.04em;
  color: var(--ink);
  user-select: all;
}
@media (max-width: 420px) { .code-grid { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 899.98px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-brand { padding: var(--space-6) var(--space-5); gap: var(--space-5); }
  .auth-statement { font-size: 26px; line-height: 32px; }
  .auth-brand-foot { display: none; }
  .auth-panel { padding: var(--space-6) var(--space-4) 40px; align-items: flex-start; }
}
@media (max-width: 480px) {
  .auth-card { padding: var(--space-6) var(--space-5); }
}


/* 19  Legacy page components ==============================================
   Styled with the new tokens so pages that have not been restyled yet stay
   coherent. Grouped by the page that uses them. */

/* Page header used by request pages */
.request-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.request-lede { color: var(--ink-muted); max-width: 60ch; margin: var(--space-1) 0 var(--space-5); }

/* New request (request_new.html) */
.request-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  max-width: 1180px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-subtle);
  overflow: hidden;
}
.request-form-col { padding: 36px 40px; }
.request-form-col h1 { margin-top: 0; }
.request-field { margin-bottom: var(--space-5); }
.request-field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.request-required { color: var(--danger-ink); }
.request-field textarea { width: 100%; }
.request-form-col button[type="submit"] { margin-top: var(--space-1); }
.request-preview-col { padding: 36px 32px; background: var(--surface-sunken); border-left: 1px solid var(--surface-line); }
.request-preview-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
}
.request-preview-title:not(:first-child) { margin-top: var(--space-6); }
.request-chip-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.request-chip {
  padding: 4px var(--space-3);
  border-radius: var(--radius-bar);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  color: var(--ink);
}
.request-chip-placeholder { color: var(--ink-muted); font-style: italic; border-style: dashed; }
.request-chip-more { background: var(--bubble-sent); color: var(--accent-ink); border-color: transparent; }
.request-division-readout { margin: var(--space-3) 0 0; font-size: var(--fs-meta); color: var(--ink-muted); }
.request-division-readout strong { color: var(--ink); }
.request-sla-card {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-field);
  background: var(--surface);
  border: 1px solid var(--surface-line);
}
.request-sla-big { font-size: 24px; line-height: 30px; font-weight: 700; color: var(--heading); }
.request-sla-label { margin-top: var(--space-1); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); }
.request-timeline { display: flex; flex-direction: column; }
.request-tl-item { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); }
.request-tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--surface-line);
}
.request-tl-dot { width: 14px; height: 14px; margin-top: 2px; flex: 0 0 auto; border-radius: 50%; background: var(--surface); border: 2px solid var(--neutral-line); }
.request-tl-active .request-tl-dot { background: var(--accent); border-color: var(--accent); }
.request-tl-text { display: flex; flex-direction: column; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); }
.request-tl-text strong { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.request-policy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-field);
  background: var(--info-bg);
}
.request-policy-note .i { color: var(--info-ink); }
.request-policy-note p { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink); }
@media (max-width: 900px) {
  .request-split { grid-template-columns: minmax(0, 1fr); }
  .request-form-col, .request-preview-col { padding: var(--space-6) var(--space-5); }
  .request-preview-col { border-left: 0; border-top: 1px solid var(--surface-line); }
}

/* My requests / request detail */
.request-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.request-id-badge {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: var(--radius-badge);
  background: var(--brand-navy);
  color: #ffffff;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 700;
  white-space: nowrap;
}
:root[data-theme="dark"] .request-id-badge { background: var(--heading); color: var(--surface-sunken); }
.request-meta-item { color: var(--ink-muted); white-space: nowrap; }
.request-meta-item strong { color: var(--ink); font-weight: 600; }
.request-reason { margin: 0 0 var(--space-3); color: var(--ink-muted); }
.request-envelope-card { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.request-envelope-card:target { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }

/* Truncated reason / URL cells (audit trail, logs) */
.reason-cell { max-width: 18rem; }
.url-cell { max-width: 320px; }
.reason-details > summary,
.url-details > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: default;
  color: var(--ink);
  font-weight: 400;
}
.url-details > summary { align-items: flex-start; }
.reason-details > summary::-webkit-details-marker,
.url-details > summary::-webkit-details-marker { display: none; }
.reason-details > summary::before,
.url-details > summary::before {
  content: "";
  flex: 0 0 auto;
  display: inline-block;
  transition: transform 0.15s var(--ease);
}
.reason-details.reason-truncated > summary,
.url-details.url-truncated > summary { cursor: pointer; color: var(--link); }
.reason-details.reason-truncated > summary::before,
.url-details.url-truncated > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(-45deg);
  margin: 0 2px;
}
.reason-details[open] > summary::before,
.url-details[open] > summary::before { transform: rotate(45deg); }
.reason-preview { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reason-full, .url-full { margin-top: 6px; white-space: normal; color: var(--ink); }
.reason-full { word-break: break-word; }
.url-full, .url-plain { word-break: break-all; }
.reason-plain { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.url-plain { display: block; color: var(--ink); }
.url-preview {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

/* Expandable ticket rows (audit trail) */
.ticket-expand-btn { --btn-ink: var(--link); padding: 4px 6px; line-height: 1; }
.ticket-expand-arrow { display: inline-block; transition: transform 0.15s var(--ease); }
.ticket-summary-row.ticket-expanded .ticket-expand-arrow { transform: rotate(90deg); }
.ticket-summary-row.ticket-expanded > td { background: var(--surface-sunken); }
.ticket-detail-row > td { padding: 0 0 var(--space-3) 36px; }
.ticket-detail-table { width: 100%; background: var(--surface-sunken); border-radius: var(--radius-field); }
.ticket-detail-table th { color: var(--ink-muted); background: transparent; }

/* Grouped log rows (logs, live tail) */
.log-group-summary-row td { padding-top: 2px; padding-bottom: 6px; }
.log-group-extra td { background: var(--surface-sunken); color: var(--ink-muted); }

/* Filter forms (logs, audit, reports) */
.filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.filter-form label { font-weight: 600; }
.filter-form-grouped { flex-direction: column; align-items: stretch; gap: var(--space-4); }
.filter-form-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.filter-form-fields label,
.filter-form-compact label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.filter-form-fields label input, .filter-form-fields label select,
.filter-form-compact label input, .filter-form-compact label select {
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: normal;
}
.filter-form-fields label input[type="text"], .filter-form-fields label select { width: 140px; }
.filter-form-fields label input[type="date"] { width: 150px; }
.filter-form-compact label input[type="text"], .filter-form-compact label select { width: 120px; }
.filter-form-compact label input.filter-date-input { width: 200px; }
.filter-form-divider { border-top: 1px solid var(--surface-line); }
.filter-form-sections { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.filter-form-sections-checks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.filter-form-sections-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.3px; color: var(--ink-muted); }
.filter-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Reports */
.reports-overview .exec-summary, .exec-summary {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-field);
  background: var(--surface-sunken);
  line-height: 21px;
}
.kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
@media (max-width: 1000px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-tile, .chart-tile {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-card-dense);
}
.kpi-label { margin-bottom: var(--space-1); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.3px; color: var(--ink-muted); }
.kpi-value { font-size: 24px; line-height: 30px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.kpi-sub { margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--ink-muted); }
.chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr); gap: var(--space-3); margin-bottom: var(--space-3); align-items: stretch; }
.chart-grid-2 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .chart-grid, .chart-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.chart-tile h3 { margin: 0 0 var(--space-3); color: var(--heading); }
.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-meta); color: var(--ink); }
.hbar-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 6px; font-size: var(--fs-meta); }
.hbar-label { width: 7.5rem; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.hbar-track { flex: 1 1 auto; height: 10px; }
.hbar-value { width: 4.5rem; flex: 0 0 auto; text-align: right; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Policy pages: multi-select dropdown, create row, ACL columns */
.dp-msdrop { position: relative; display: inline-block; vertical-align: top; }
.dp-msdrop-toggle {
  --btn-bg: var(--field-bg);
  --btn-ink: var(--ink);
  --btn-border: var(--field-border);
  position: relative;
  justify-content: flex-start;
  min-width: 220px;
  min-height: 40px;
  padding: 9px 34px 9px var(--space-3);
  border-width: 1px;
  border-radius: var(--radius-field);
  font-weight: 400;
  text-align: left;
}
.dp-msdrop-toggle::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid var(--ink-muted);
  border-width: 0 1.8px 1.8px 0;
  transform: translateY(-70%) rotate(45deg);
}
.dp-msdrop-toggle:disabled { --btn-bg: var(--surface-sunken); --btn-ink: var(--ink-muted); opacity: 1; }
.dp-msdrop-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 46; /* above the fixed footer (45), below the top bar (50) */
  min-width: 240px;
  max-height: 240px;
  margin-top: 6px;
  padding: 6px;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-field);
  box-shadow: var(--shadow-popover);
}
.dp-msdrop-option { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.dp-msdrop-option:hover { background: var(--bubble-sent); }
.dp-msdrop-option input { margin: 0; }
.dp-msdrop-empty { padding: 6px 10px; white-space: normal; max-width: 260px; }
.dp-create-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-1) 0 var(--space-3); align-items: start; }
.dp-create-col h3 { margin-top: 0; }
@media (max-width: 900px) { .dp-create-row { grid-template-columns: minmax(0, 1fr); } }
.acl-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.acl-col { margin-bottom: 0; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
.acl-row { min-width: 0; }
@media (max-width: 900px) { .acl-columns { grid-template-columns: minmax(0, 1fr); } }
.acl-col .inline-form { display: flex; width: 100%; }
.acl-col .inline-form input[type="text"], .acl-col .acl-search-form input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; }
.acl-col .acl-search-form { display: flex; gap: 6px; width: 100%; }
.acl-col textarea { width: 100%; }
.acl-row > .card-header { margin-bottom: var(--space-3); }
.acl-block { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--surface-line); }
.acl-block .field { margin-bottom: var(--space-3); }
.acl-block .help-text { margin: var(--space-2) 0 var(--space-3); }
.acl-block .alert { margin-top: var(--space-3); }
.dn-list { display: block; width: 100%; max-width: 32rem; height: 4.5rem; font-family: var(--font-mono); font-size: var(--fs-meta); }
.div-edit-form[hidden] { display: none; }

/* Lookup typeahead */
.lookup-typeahead { position: relative; display: inline-block; }
.field .lookup-typeahead { display: block; }
.lookup-suggest-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 46; /* above the fixed footer (45), below the top bar (50) */
  min-width: 260px;
  max-width: 420px;
  max-height: 240px;
  margin: 6px 0 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-field);
  box-shadow: var(--shadow-popover);
}
.lookup-suggest-item { --btn-ink: var(--ink); display: block; width: 100%; padding: 7px 10px; border-radius: 10px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.lookup-suggest-item:hover, .lookup-suggest-item.active { --btn-bg: var(--bubble-sent); }
.lookup-suggest-empty { padding: 7px 10px; color: var(--ink-muted); }
.lookup-candidate-list { display: flex; flex-direction: column; gap: var(--space-2); max-width: 560px; margin: 0 0 var(--space-4); }
.lookup-candidate-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-field);
  font-weight: 500;
  cursor: pointer;
}
.lookup-candidate-item:hover { background: var(--bubble-sent); }
.lookup-candidate-item:has(input:checked) { border-color: var(--accent); background: var(--bubble-sent); }
.member-summary { display: flex; flex-direction: column; gap: 4px; min-width: 14rem; }
.member-summary-label { font-weight: 600; color: var(--ink-muted); }


/* 19b  Page components (second pass) =======================================
   Shared pieces for the request, policy, log and report pages. */

/* Back link above a page title */
.page-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
}
.page-back .i { width: 16px; height: 16px; transform: rotate(180deg); }
.page-back:hover { color: var(--heading); text-decoration: underline; }
.page-title .live-badge, .page-title .badge { margin-left: var(--space-2); vertical-align: 3px; }
.page-title .i { width: 21px; height: 21px; margin-right: var(--space-2); vertical-align: -3px; color: var(--accent-ink); }

/* Inline confirm panel: revealed in place of the button that opened it. */
.confirm-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-field);
  border-left: 4px solid var(--warning-line);
  background: var(--warning-bg);
  color: var(--ink);
  white-space: normal;
  text-align: left;
}
.confirm-panel > p { flex: 1 1 14rem; min-width: 0; margin: 0; }
.confirm-panel > form { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.confirm-panel.is-danger { border-left-color: var(--danger-line); background: var(--danger-bg); }
.confirm-panel.is-info { border-left-color: var(--info-line); background: var(--info-bg); }
td .confirm-panel { min-width: 17rem; }

/* Busy panel shown while a scan or job runs */
.busy-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-field);
  border-left: 4px solid var(--info-line);
  background: var(--info-bg);
  color: var(--ink);
}
.busy-panel > p { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.busy-panel .job-log { margin: 0; }
.job-log:empty { display: none; }
.domain-block > .card-section { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--surface-line); }

/* Table helpers */
th.actions, td.actions { width: 1%; text-align: right; white-space: nowrap; }
td.actions .confirm-panel { white-space: normal; }
.cell-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
@media (max-width: 640px) { .cell-actions { flex-wrap: wrap; } }
.cell-actions > form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
td.empty-cell { padding: var(--space-5) var(--space-3); text-align: center; color: var(--ink-muted); }
.cell-sub { display: block; margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--ink-muted); }
.wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }
/* Host names and URLs in table cells: room for a typical name before they
   wrap (the table scrolls sideways instead of breaking every name). */
td.wrap-anywhere { min-width: 11rem; }
td.url-cell { min-width: 16rem; }
.check-col { width: 1%; }
.check-col input { margin: 0; }
table .badge + .cell-sub { margin-top: 4px; }

/* Filter bar: a grid of .field blocks plus a footer row of actions. */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: var(--space-3) var(--space-4);
  align-items: end;
}
.filter-form.is-stacked { display: block; }
.filter-grid .field { margin: 0; }
.card-footer > .pagination { margin: 0; }
.filter-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--surface-line);
}
.filter-footer .help-text { margin: 0; }

/* Search row: one field and its button side by side. */
.search-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.search-row > .field { flex: 1 1 14rem; margin: 0; }
.search-row > .btn, .search-row > button { flex: 0 0 auto; }
.search-row > .field.field-type { flex: 0 1 12rem; }

/* Field widths */
.input-xs { width: 6.5rem !important; min-width: 0; }
.field-narrow { max-width: 24rem; }
.field-medium { max-width: 36rem; }

/* Domain block (request detail): one card per requested site. */
.domain-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.domain-block-title { margin: 0; font-size: 18px; line-height: 24px; color: var(--heading); overflow-wrap: anywhere; }
.decide-panel {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-field);
  background: var(--surface-sunken);
  border: 1px solid var(--surface-line);
}
.decide-panel .field textarea { min-height: 72px; }
.decide-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.decide-actions .confirm-panel { flex: 1 1 100%; margin: 0; }
.claim-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.claim-row > form { display: inline-flex; margin: 0; }

/* Section heading inside a card */
.card-section-title { margin: 0 0 var(--space-3); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; color: var(--heading); }
.card-section-title .i { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; color: var(--accent-ink); }

/* Approval domain list toggle */
.domains-toggle { margin-left: 4px; }

/* Request queue rows */
.queue-domains { max-width: 30rem; overflow-wrap: anywhere; }

/* Policy table: stacked add panels inside chip cells */
.chip-add-panel .field { margin-bottom: var(--space-3); }
.chip-add-panel .form-actions { margin-top: var(--space-2); }
.choice-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.choice-row > .checkbox { flex: 0 0 auto; }
.choice-row > select, .choice-row > input[type="text"] { flex: 1 1 10rem; min-width: 0; }
/* Policy cards: one per policy, with its parts side by side. */
.policy-card .card-header { margin-bottom: var(--space-3); }
.policy-card > .confirm-panel { margin: 0 0 var(--space-3); }
.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--space-4) var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--surface-line);
}
.policy-part { min-width: 0; }
.policy-part-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
}
.policy-part .chip-add-button { margin-top: 2px; }
.policy-part .inline-form { display: flex; width: 100%; }
.policy-part .inline-form input[type="text"] { flex: 1 1 8rem; width: auto; min-width: 0; }
.dp-create-col > .checkbox { margin: var(--space-2) 0; }
.dp-create-col .dp-msdrop { display: block; }
.dp-create-col .dp-msdrop-toggle { width: 100%; }
.dp-member-type + .dp-member-type { margin-top: var(--space-3); }
.chip a { color: var(--ink); text-decoration: none; }
.chip a:hover { color: var(--accent-ink); text-decoration: underline; }
.chip-remove .i { width: 14px; height: 14px; }
.toggle-state { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Ticket expand chevron (audit trail) */
.ticket-expand-btn .i { width: 16px; height: 16px; transition: transform 0.15s var(--ease); }
.ticket-expand-btn[aria-expanded="true"] .i { transform: rotate(90deg); }

/* Reports: KPI tones, donut, bars and trend line drawn without inline styles */
.kpi-row.is-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi-value.is-success { color: var(--success-ink); }
.kpi-value.is-warning { color: var(--warning-ink); }
.kpi-value.is-danger { color: var(--danger-ink); }
.donut-chart { width: 120px; height: 120px; flex: 0 0 auto; }
.donut-track, .donut-allowed, .donut-blocked { fill: none; stroke-width: 6; }
.donut-track { stroke: var(--surface-line); }
.donut-allowed { stroke: var(--success-line); }
.donut-blocked { stroke: var(--danger-line); }
.donut-total { fill: var(--heading); font-size: 6px; font-weight: 700; font-family: var(--font-sans); }
.donut-caption { fill: var(--ink-muted); font-size: 3.6px; font-family: var(--font-sans); }
.legend-dot.is-success { background: var(--success-line); }
.legend-dot.is-danger { background: var(--danger-line); }
.legend-dot.is-neutral { background: var(--neutral-line); }
.legend-dot.is-info { background: var(--info-line); }
.hbar-row > svg.meter-bar { flex: 1 1 0%; width: auto; min-width: 2rem; }
.trend-chart { display: block; width: 100%; max-width: 420px; height: 70px; }
.trend-line { fill: none; stroke: var(--info-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.trend-dot { fill: var(--info-line); }
.chart-tile .help-text { margin-bottom: 0; }

/* Manager approval page (public, no top bar) */
.gate-card { max-width: 640px; margin: 0 auto; }

/* MFA QR code (the server adds class="qr-svg" width/height 180) */
.qr-svg { display: block; width: 180px; height: 180px; }

/* Sign-out button in the user menu: looks like the menu links. */
.user-menu-form { margin: 0; }
button.user-menu-item {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-border: transparent;
  --btn-shadow: none;
  width: 100%;
  min-height: 0;
  justify-content: flex-start;
  border: 0;
  font: 600 var(--fs-body)/var(--lh-body) var(--font-sans);
  text-align: left;
}
button.user-menu-item:hover, button.user-menu-item:active { transform: none; }


/* Interactive Deep Scan (Phase 11): remote browser view and captured hosts */
.iscan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--space-5);
  align-items: start;
}
.iscan-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--surface-line);
}
.iscan-url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.iscan-url:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.iscan-url input {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  outline: none;
  box-shadow: none;
}
.iscan-url input[type="text"]:focus, .iscan-url input[type="text"]:hover { outline: none; box-shadow: none; border: 0; }
.iscan-viewport { background: var(--surface-sunken); line-height: 0; }
.iscan-viewport canvas { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; cursor: default; }
.iscan-viewport canvas:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.iscan-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--surface-line);
}
.iscan-footer .help-text { margin: 0; }
.iscan-hosts-note { padding: 0 var(--space-5); margin: 0 0 var(--space-3); }
.iscan-hosts .table-wrap { max-height: 560px; overflow-y: auto; }
@media (max-width: 1100px) {
  .iscan-layout { grid-template-columns: minmax(0, 1fr); }
}

/* 20  Utilities =========================================================== */

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.text-muted { color: var(--ink-muted); }
.text-meta { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--ink-muted); }
.text-danger { color: var(--danger-ink); }
.text-success { color: var(--success-ink); }
.text-heading { color: var(--heading); }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.divider-top { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--surface-line); }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-auto { margin-left: auto; }


/* 21  Reduced motion ====================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, button:hover, .cta-button:hover, .link-button:hover { transform: none; }
}


/* 22  Print (reports, audit pages) ======================================= */

@page { margin: 14mm 12mm; }

@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --surface: #ffffff;
    --surface-sunken: #f4f6f8;
    --surface-line: #d5dbe1;
    --surface-raised: #ffffff;
    --ink: #000000;
    --ink-muted: #3f4852;
    --heading: #143a63;
    --accent-ink: #0b7562;
    --bubble-sent: #ffffff;
    --success-bg: #ffffff; --warning-bg: #ffffff; --danger-bg: #ffffff; --info-bg: #ffffff; --neutral-bg: #ffffff;
    --success-ink: #0a6b58; --warning-ink: #6b4600; --danger-ink: #8f2f2f; --info-ink: #1d4f86; --neutral-ink: #333b44;
  }
  html, body { background: #ffffff !important; font-size: 11pt; }
  .topbar, .site-footer, .skip-link, .page-actions, .nav-toggle, .theme-toggle,
  .filter-form, .refresh-indicator, .flashes, .no-print,
  button, .btn, .cta-button, .link-button, form .form-actions { display: none !important; }
  main.page { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .card, .tile, .kpi-tile, .chart-tile, .stat-card {
    box-shadow: none !important;
    border: 1px solid #d5dbe1 !important;
    border-radius: 8px;
    break-inside: avoid;
    page-break-inside: avoid;
    overflow: visible !important;
  }
  .badge, .status-chip { border: 1px solid currentColor; }
  table { font-size: 9.5pt; }
  table th, table td { padding: 4px 6px; }
  thead { display: table-header-group; }
  tr, img, svg { break-inside: avoid; page-break-inside: avoid; }
  table tr:hover > td { background: transparent !important; }
  .table-wrap, .tile { overflow: visible !important; max-height: none !important; }
  .grid-2, .grid-3, .grid-4, .dashboard-grid, .dashboard-grid-wide, .chart-grid, .kpi-row { gap: 8px; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}