/* Theme toggle (shared widget) */
.theme-toggle {
  display: inline-flex; gap: 2px;
  padding: 2px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 6px;
}
[data-theme="light"] .theme-toggle { background: rgba(10,22,40,.04); }
.theme-toggle button {
  background: transparent; border: none;
  padding: 4px 9px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  font-family: inherit;
}
.theme-toggle button:hover { color: var(--text); }
* { box-sizing: border-box; }
/* Inline prose links.
   Scoped to a:not([class]) deliberately. A bare `a { color: … }` would be
   harmless (specificity 0,0,1 loses to any class rule), but `a:visited` is
   0,1,1 and WOULD override classed links like .btn-primary and the sidebar
   nav — turning buttons a different colour once clicked. Restricting to
   unclassed links touches exactly the 10 prose links that currently fall
   through to the browser default, and nothing that is already styled. */
a:not([class]),
a:not([class]):visited { color: var(--link); text-underline-offset: 2px; }
a:not([class]):hover   { color: var(--link-hover); }
a:not([class]):focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 3px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-feature-settings: "cv05" 1, "ss01" 1, "tnum" 1;
  background:
    radial-gradient(ellipse 80% 55% at 78% -10%, rgba(47,111,228,.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 8% 4%, rgba(34,211,238,.08) 0%, transparent 60%),
    var(--navy);
  color: var(--text);
  /* Grayscale smoothing is correct ONLY for light-on-dark, and this app
     DEFAULTS to dark — so body keeps it. The light theme is dark-on-white,
     where grayscale costs roughly a third of the stroke; it is switched back
     to `auto` below. Chrome (rail + topbar) is chrome-900 in BOTH themes, so
     it keeps grayscale either way. (Legibility pass, 2026-08-30.) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 420;   /* variable Inter: 400 is too thin for body at 14px */
}
[data-theme="light"] body {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
[data-theme="light"] .sidebar,
[data-theme="light"] .topbar { -webkit-font-smoothing: antialiased; }
/* Headings: Inter reads best with a touch of negative tracking at display sizes. */
.title, .section-head .title, .modal h3, .card h2 { letter-spacing: -0.02em; }
[data-theme="light"] body {
  background:
    radial-gradient(ellipse 80% 55% at 78% -10%, rgba(47,111,228,.06) 0%, transparent 60%),
    var(--navy);
}
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  background: rgba(7,14,26,.66); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 20;
}
[data-theme="light"] .topbar { background: rgba(255,255,255,.82); }
.logo-img { height: 36px; display: block; filter: drop-shadow(0 1px 4px rgba(87,168,232,0.18)); }
.product-tag {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  letter-spacing: .08em; border-left: 1px solid var(--border); padding-left: 12px;
}
.brand-fallback { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.brand-fallback .tri {
  width: 0; height: 0; border-left: 9px solid transparent;
  border-right: 9px solid transparent; border-bottom: 16px solid var(--yellow);
}
.brand-fallback .q { color: var(--yellow); }
.spacer { flex: 1; }
.btn-quiet {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 13px; font-size: 13px; cursor: pointer;
}
.btn-quiet:hover { border-color: var(--yellow); }
.wrap { padding: 32px 24px; max-width: 1180px; margin: 0 auto; }
.head { margin-bottom: 24px; }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--yellow); letter-spacing: .14em; margin-bottom: 8px;
}
.title { font-size: 24px; font-weight: 600; }
.meta { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.meta code { font-family: var(--font-mono); font-size: 12px; color: var(--text); }

.kpis { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.kpi {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; min-width: 130px;
  transition: transform .18s ease, border-color .18s;
}
.kpi:hover { transform: translateY(-2px); border-color: var(--border-bright); }
[data-theme="light"] .kpi { background: var(--card-bg); }
.kpi .n { font-size: 24px; font-weight: 700; font-family: var(--font-mono); }
.kpi .l { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.kpi.crit .n { color: var(--crit); }
.kpi.warn .n { color: var(--warn); }
.kpi.ok .n { color: var(--ok); }

/* Drill-down KPI tiles (machine-identity inventory). These are <button>s so the
   drill is keyboard-reachable; the reset below keeps them pixel-identical to the
   <div> tiles they replaced — a bare button would inherit the UA's 13.33px
   system font, centred text and `buttontext` colour. */
.kpi-drill {
  font: inherit; color: inherit; text-align: left;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.kpi-drill.is-active { border-color: var(--accent, var(--border-bright)); }
.kpi-drill:focus-visible { outline: 2px solid var(--accent, var(--border-bright)); outline-offset: 2px; }
.inv-focus-note { margin: -10px 0 18px; }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  border: 1px solid var(--border);
  border-radius: 14px; padding: 22px; margin-bottom: 22px;
  box-shadow: 0 12px 40px -24px rgba(0,0,0,.6);
}
[data-theme="light"] .card { background: var(--card-bg); }
.card h2 { font-size: 15px; margin: 0 0 14px; font-weight: 600; }
.card h2.collapse-h { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; }
.card h2.collapse-h .caret { font-size: 12px; color: var(--text-secondary); transition: transform .15s; }
.card h2.collapse-h.is-collapsed .caret { transform: rotate(-90deg); }
.count-badge { font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--navy-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 9px; }
/* .scroll-cap wraps a horizontally-wide table. macOS WebKit overlay-fades the
   real scrollbar when the OS pref is "Automatic", so a JS-driven yellow scrollbar
   sits below the table — always visible, draggable, mirrors scrollLeft. */
.scroll-affordance { position: relative; }
.custom-hbar {
  position: relative;
  height: 12px; margin: 8px 4px 4px 4px;
  background: var(--navy-2); border-radius: 6px;
  display: none;  /* JS un-hides only when the content actually overflows */
  cursor: pointer;
}
.custom-hbar.has-overflow { display: block; }
.custom-hbar-thumb {
  position: absolute; top: 1px; bottom: 1px;
  background: var(--yellow); border-radius: 5px;
  min-width: 24px;
  transition: background .12s;
}
.custom-hbar:hover .custom-hbar-thumb,
.custom-hbar.dragging .custom-hbar-thumb { background: var(--blue-hi); }
/* Sticky variant — injected below every .table-scroll (initTableScrollHbars).
   Long tables put the native horizontal scrollbar below the fold; sticky keeps
   the affordance pinned just above the viewport bottom while the table is in
   view, so "there's more to the right" is always visible. */
.custom-hbar.hbar-sticky {
  position: sticky; bottom: 8px; z-index: 4;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
[data-theme="light"] .custom-hbar.hbar-sticky { box-shadow: 0 1px 4px rgba(10,22,40,.12); }
.scroll-cap { overflow: auto; max-height: 320px; }
/* Style the real OS scrollbar too — when "Always" is set, both layers align. */
.scroll-cap, .x-scroll {
  scrollbar-color: var(--yellow) var(--navy-2);
  scrollbar-width: auto;
}
.scroll-cap::-webkit-scrollbar, .x-scroll::-webkit-scrollbar {
  height: 12px; width: 12px;
  -webkit-appearance: none;
}
.scroll-cap::-webkit-scrollbar-track, .x-scroll::-webkit-scrollbar-track {
  background: var(--navy-2); border-radius: 6px;
}
.scroll-cap::-webkit-scrollbar-thumb, .x-scroll::-webkit-scrollbar-thumb {
  background: var(--yellow); border-radius: 6px; border: 2px solid var(--navy-2);
}
.scroll-cap::-webkit-scrollbar-thumb:hover, .x-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--blue-hi);
}
/* Pin the right-most action column so the Ignore / Undo button is always
   reachable without horizontal scrolling. */
.cert-table td.action-cell, .cert-table th.action-cell {
  position: sticky; right: 0; background: var(--card-bg);
  box-shadow: -8px 0 8px -6px rgba(0,0,0,.45);
}
/* In light theme the heavy dark smear over the neighbouring column read as a
   rendering glitch (and half-hid the Risk column). A hairline + soft tint is
   enough of a "this column floats" cue on white. */
[data-theme="light"] .cert-table td.action-cell,
[data-theme="light"] .cert-table th.action-cell {
  box-shadow: -1px 0 0 var(--border), -10px 0 10px -8px rgba(10,22,40,.16);
}
.scanline { font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.scanline code { font-family: var(--font-mono); color: var(--text); }
.scan-rel { color: var(--text-caption); }
.scan-stale {
  margin-top: 10px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px;
  line-height: 1.5; color: var(--warn);
  background: var(--warn-wash); border: 1px solid var(--warn-bd);
}

.cert-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cert-table th, .cert-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cert-table th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--text-secondary); text-transform: uppercase;
}
.cert-table td { color: var(--text-secondary); }
.cert-table td.host { color: var(--text); font-weight: 600; white-space: normal; }
/* Wrapping prose cell (e.g. PQC "Recommended action"): without this the global
   nowrap makes long text overflow its squeezed column and render on top of the
   next cell's buttons. Give it a real width so the column sizes predictably. */
/* C2PA signers: a DN is a name (mono, strong) over its organisation (quiet
   sans), both allowed to wrap, so all six columns fit the card. */
.c2pa-signers th, .c2pa-signers td { padding-left: 10px; padding-right: 10px; }
.c2pa-signers td { vertical-align: top; }
.c2pa-signers td.c2pa-dn { white-space: normal; min-width: 150px; max-width: 280px; }
.c2pa-dn-cn {
  font-family: var(--font-mono); font-weight: 600; color: var(--text-1);
  line-height: 1.4; overflow-wrap: anywhere;
}
.c2pa-dn-sub {
  margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.c2pa-signers td.c2pa-alg { font-family: var(--font-mono); }
.c2pa-signers td.c2pa-dates { white-space: nowrap; }
.c2pa-signers td.c2pa-trust .c2pa-dn-sub { margin-top: 6px; }
.c2pa-rev { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 11.5px; }
.c2pa-rev-ok { color: var(--ok); }
.c2pa-rev-warn { color: var(--warn); }
.c2pa-rev-crit { color: var(--crit); }
.c2pa-signers td.c2pa-dates .c2pa-dn-cn { font-weight: 500; white-space: nowrap; }
.cert-table th.wrap-col { white-space: normal; width: 320px; }
.cert-table td.wrap-col { white-space: normal; min-width: 220px; max-width: 360px; line-height: 1.45; }
/* Premium horizontal scroll for wide tables — thin themed bar instead of the
   chunky OS default; the sticky action column keeps row actions reachable. */
/* Always-visible scrollbar (never overlay/auto-hide) so horizontal overflow is
   obvious at rest — a colored track+thumb only render when the table actually
   overflows. macOS overlay scrollbars auto-hide with a transparent track and
   left users unaware content was cut off. */
.table-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--text-secondary) var(--border); }
.table-scroll::-webkit-scrollbar { height: 10px; }
.table-scroll::-webkit-scrollbar-track { background: var(--border); border-radius: 999px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--text-secondary); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.table-scroll:hover::-webkit-scrollbar-thumb { background: var(--text); background-clip: padding-box; }
/* Ellipsis-truncate an opaque identifier cell; hover shows the full value. */
.cell-trunc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* cert-manager status under a Kubernetes certificate (PQC → discovered assets). */
.cell-trunc .cm-status { white-space: normal; font-size: 12px; line-height: 1.4; margin-top: 2px; color: var(--text-muted); }
.cell-trunc .cm-status.cm-bad { color: var(--warn); font-weight: 600; }
.pill {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
}
.pill.crit { color: var(--crit); border-color: rgba(220,60,60,.5); }
.pill.warn { color: var(--warn); border-color: rgba(233,185,73,.5); }
.pill.ok   { color: var(--ok);   border-color: rgba(95,200,143,.5); }
.pill.muted { color: var(--text-secondary); border-color: var(--border); }
.btn-link {
  background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 6px;
  cursor: pointer;
}
.btn-link:hover:not(:disabled) { border-color: var(--yellow); color: var(--text); }
.btn-link:disabled { cursor: progress; opacity: .5; }
/* Muted but still legible — .55 made ignored findings near-invisible on white. */
/* Muted rows keep the full text ramp — opacity would multiply against every
   token ratio and is how contrast silently regresses. Only the ink role steps
   down. (Legibility pass §7, 2026-08-30.) */
tr.is-acknowledged td { color: var(--text-secondary); }

/* ── Premium Add-ons (Settings) ─────────────────────────────────────────────
   Add-ons are the paid upsell surface, so the card reads "premium": each active
   add-on is a tile with a gold→cyan gradient hairline, a glowing gem glyph, a
   gold "Active" chip, and a hover lift — distinct from the plain list rows used
   elsewhere. Glyphs are monochrome so they inherit the gold gem color. */
.addon-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
/* DORA Trust Center — Register-of-Information editor grid + evidence rows */
.dora-roi-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dora-roi-field { display: flex; flex-direction: column; gap: 5px; }
.dora-roi-field.wide { grid-column: 1 / -1; }
.dora-roi-field label { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; }
.dora-roi-field input, .dora-roi-field textarea {
  padding: 9px 12px; background: rgba(14,26,46,.65);
  border: 1px solid var(--border-bright, rgba(255,255,255,.14)); border-radius: 6px;
  color: var(--text-primary, #e8edf6); font-size: 14px; font-family: inherit; width: 100%;
}
[data-theme="light"] .dora-roi-field input, [data-theme="light"] .dora-roi-field textarea {
  background: rgba(0,0,0,.03); color: var(--text);
}
.dora-roi-field textarea { resize: vertical; min-height: 64px; }
.dora-ev-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
.dora-ev-row:last-child { border-bottom: 0; }
.dora-ev-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.dora-ev-main { flex: 1 1 auto; min-width: 0; }
.dora-ev-art { font-size: 11.5px; color: var(--text-secondary); letter-spacing: .03em; }
.dora-ev-basis { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
  padding: 0 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.dora-ev-title { font-size: 14.5px; font-weight: 600; margin: 1px 0 3px; }
.dora-ev-head { font-size: 13px; color: var(--text-secondary); }
.dora-ev-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.dora-conc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dora-conc-card { border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 10px; padding: 14px; }
.dora-conc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.dora-conc-label { font-size: 14.5px; font-weight: 600; }
.dora-conc-headline { font-size: 12.5px; color: var(--text-secondary); margin: 4px 0 10px; }
/* Coverage qualifier under a concentration headline — the share above is over
   MEASURED units only, so this line states what is missing from the estate. */
.dora-conc-cov { font-size: 11.5px; color: var(--text-secondary); margin: -4px 0 10px; }
.dora-conc-cov.warn { color: var(--warn, #b8860b); }
.dora-prow { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12.5px; }
.dora-pname { flex: 0 0 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dora-pbar { flex: 1 1 auto; height: 7px; background: var(--track); border-radius: 4px; overflow: hidden; }
.dora-pbar > span { display: block; height: 100%; background: var(--yellow); }
.dora-ppct { flex: 0 0 78px; text-align: right; color: var(--text-secondary); }
.addon-tile {
  position: relative; border-radius: 14px; padding: 16px 16px 14px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(87,168,232,.06), rgba(87,168,232,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border: 1px solid var(--border);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
[data-theme="light"] .addon-tile {
  background:
    linear-gradient(180deg, rgba(14,111,191,.07), rgba(14,111,191,0) 55%),
    var(--card-bg);
}
.addon-tile::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--blue); opacity: .6;
}
.addon-tile:hover {
  transform: translateY(-2px); border-color: var(--border-bright);
  box-shadow: var(--card-shadow);
}
.addon-tile-head { display: flex; align-items: center; gap: 10px; }
.addon-gem {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  color: var(--blue);
  background: var(--blue-wash);
  border: 1px solid var(--blue-bd);
}
.addon-tile-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: .01em; }
/* "Active" is a status, so it wears the ok family — never the accent, and
   never the warn border it borrowed until 2026-10-06 (gold beside amber read
   as a warning on every add-on card). */
/* Self-serve add-on store (Settings → Add-ons, "Add more"; 2026-10-14). */
.addon-store-head { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin: 18px 0 10px; }
.addon-store-note, .addon-store-msg { font-size: 12.5px; color: var(--text-secondary); margin: 10px 0 0; }
.addon-tile.is-included { opacity: .72; }
.addon-included-note { margin-top: 8px; font-size: 13px; color: var(--ok); }
.addon-buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.addon-price { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.addon-price-note { font-weight: 400; color: var(--text-secondary); font-size: 12.5px; }
.addon-qty { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border, #cbd5e1); background: transparent; color: inherit; font: inherit; font-size: 13px; }
.addons-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.addons-total { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.addons-total strong { color: var(--text); font-weight: 600; }
.addon-headline { margin: 10px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text); }
/* Review sheet before every add-on Buy (2026-10-15). Rides on the confirm
   overlay's look; its own id so it never collides with #confirm-overlay. */
.addon-review-box { max-width: 460px; }
.ar-title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.ar-headline { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 14px; }
.ar-rows { border-top: 1px solid var(--border); margin: 0 0 12px; }
.ar-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; line-height: 1.45; }
.ar-row[hidden] { display: none; }
.ar-row > span:first-child { flex: none; color: var(--text-secondary); }
.ar-row > span:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.ar-row small { display: block; font-size: 12px; color: var(--text-caption); }
/* Add-ons release 3 (2026-10-16): Ask your admin, upgrading-is-cheaper note */
.addon-ask { margin-top: 10px; }
.addon-ask-note { font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 0; }
.addon-ask-note[hidden] { display: none; }
.addon-ask-note.is-error { color: var(--crit); }
.addon-upgrade-hint { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; line-height: 1.5; color: var(--text); }
.addon-upgrade-hint a { white-space: nowrap; }
.ar-note { font-size: 12.5px; line-height: 1.5; color: var(--text-caption); margin: 0 0 16px; }
.ar-err { font-size: 13.5px; color: var(--crit); margin: 0 0 14px; }
.ar-ok-line { font-size: 18px; font-weight: 600; color: var(--ok); margin: 0 0 6px; }
/* Add-ons page: "Recommended for you" strip + the offer beside a finding. */
.addons-reco { border-color: var(--blue-bd); }
.addons-reco-head { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin: 0 0 12px; }
.addons-reco-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.addons-reco-why { margin: 6px 0 0; font-size: 13.5px; color: var(--text); }
.addons-reco-what { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.addon-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--blue-bd); border-radius: 10px; background: var(--blue-wash); font-size: 13.5px; color: var(--text); }
.addon-offer-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--blue); cursor: pointer; }
.addon-offer-btn:hover { text-decoration: underline; }
.gated-upsell .gu-buy { margin-top: 10px; }
.gated-upsell .gu-buy-btn { display: inline-block; }
.addon-chip {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  color: var(--ok); background: var(--ok-bg);
  border: 1px solid var(--ok-bd);
}
.addon-unlocks { margin: 11px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.addon-where {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border);
  font-size: 11.5px; color: var(--text-caption);
}
.addon-where strong { color: var(--text-secondary); }
.addon-empty {
  border: 1px dashed var(--border); border-radius: 12px; padding: 20px 18px;
  text-align: center; color: var(--text-caption); font-size: 13px; line-height: 1.55;
}
/* Tab + filter pills (alerts, certs, DA) — visually quiet, single active state.
   Counts render inline; muted style for "0" so the operator's eye stays on
   non-empty buckets. */
.tab-bar, .pill-bar {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px;
}
.tab-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary); padding: 6px 12px; border-radius: 6px;
  font-family: inherit; font-size: 13px; cursor: pointer; line-height: 1.2;
}
.tab-btn:hover:not(:disabled) { border-color: var(--yellow); color: var(--text); }
.tab-btn.is-active {
  border-color: var(--yellow); color: var(--text);
  background: rgba(87,168,232,.08); font-weight: 600;
}
.tab-btn .ct { margin-left: 6px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); }
.tab-btn.is-active .ct { color: var(--yellow); }
.tab-btn.is-zero .ct { opacity: .45; }
.tab-btn.tab-grade-f.is-active { border-color: var(--crit); background: rgba(220,60,60,.08); }
.tab-btn.tab-grade-f.is-active .ct { color: var(--crit); }
.tab-btn.tab-ok.is-active { border-color: var(--ok); background: rgba(95,200,143,.08); color: var(--ok); }
/* F1/F2: DMARC sources filter bar */
.dms-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 10px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.dms-filter-group { display: flex; align-items: center; gap: 8px; }
.dms-filter-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--text-secondary); letter-spacing: .10em; text-transform: uppercase;
}
.dms-ip-input {
  margin-left: auto; padding: 5px 10px; font-size: 12px;
  background: rgba(0,0,0,.15); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); font-family: var(--font-mono);
  width: 160px;
}
.dms-ip-input:focus { outline: none; border-color: var(--yellow); }
[data-theme="light"] .dms-ip-input { background: rgba(10,22,40,.04); }
/* DMARC sub-tab navigation */
.dms-subtab-bar { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:18px; }
.dms-subtab-btn { padding:9px 18px; font-size:13px; font-weight:600; color:var(--text-secondary);
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  cursor:pointer; transition:color .12s,border-color .12s; }
.dms-subtab-btn.is-active { color:var(--text); border-bottom-color:var(--yellow); }
.dms-subtab-btn:hover:not(.is-active) { color:var(--text); }
[data-theme="light"] .dms-subtab-btn.is-active { border-bottom-color:var(--yellow-soft); }
/* ── PQC (Quantum readiness) tabbed layout ────────────────────────────────────
   Reuses the .dms-subtab-* look; the bar is sticky (below the app topbar) so it
   stays reachable while a long panel scrolls. Panels toggle via display. */
.pqc-subtab-bar {
  position: sticky; top: 60px; z-index: 4;
  background: var(--navy);
  flex-wrap: wrap; gap: 0 2px; padding-top: 4px;
}
.pqc-subtab-btn .ct {
  margin-left: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-caption);
}
.pqc-subtab-btn.is-active .ct { color: var(--yellow); }
[data-theme="light"] .pqc-subtab-btn.is-active .ct { color: var(--yellow-soft); }
.pqc-panel { animation: pqcFade .14s ease-out; }
@keyframes pqcFade { from { opacity: 0; } to { opacity: 1; } }
/* ── Readiness hero (premium): KPI strip + advisory card + exposure donut ───── */
#pqc-hero > .card { margin-bottom: 16px; }
/* KPI strip — score block on the left, metric tiles on the right. */
.pqc-kpi-strip {
  display: grid; grid-template-columns: minmax(280px, 0.9fr) 1.6fr;
  gap: 28px; align-items: center; padding: 24px 28px;
}
@media (max-width: 880px) { .pqc-kpi-strip { grid-template-columns: 1fr; gap: 22px; } }
.pqc-kpi-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em; color: var(--text-caption);
  margin-bottom: 8px;
}
.pqc-score-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pqc-score {
  font-size: 56px; font-weight: 700; line-height: .95;
  letter-spacing: -0.035em; font-feature-settings: "tnum" 1;
}
.pqc-score-suffix { font-size: 18px; font-weight: 600; color: var(--text-caption); }
.pqc-pill {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 10px; border-radius: 100px; border: 1px solid transparent;
  align-self: center; white-space: nowrap;
}
.pqc-pill.band-strong   { color: var(--ok);  background: rgba(52,211,153,.14);  border-color: rgba(52,211,153,.4); }
.pqc-pill.band-moderate { color: var(--risk-med);  background: rgba(234,179,8,.13);   border-color: rgba(234,179,8,.4); }
.pqc-pill.band-limited  { color: var(--risk-high); background: rgba(249,115,22,.13);  border-color: rgba(249,115,22,.4); }
.pqc-pill.band-at_risk  { color: var(--risk-red); background: rgba(242,107,98,.14); border-color: rgba(242,107,98,.45); }
.pqc-pill.band-no_data  { color: var(--text-caption); background: rgba(150,165,195,.1); border-color: var(--border); }
.pqc-score-trend { font-size: 12.5px; margin-top: 10px; min-height: 16px; color: var(--text-secondary); }
/* Gradient readiness bar — red (low) → amber → green (high); thumb marks score. */
.pqc-score-bar {
  position: relative; height: 7px; border-radius: 100px; margin-top: 14px;
  background: linear-gradient(90deg, var(--risk-red) 0%, var(--risk-high) 38%, var(--risk-med) 58%, var(--ok) 100%);
}
.pqc-score-bar > i {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px;
  border-radius: 50%; background: var(--text); border: 3px solid var(--card-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.45); transform: translate(-50%, -50%);
  transition: left .45s cubic-bezier(.22,.61,.36,1);
}
.pqc-kpi-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px;
  border-left: 1px solid var(--border); padding-left: 28px;
}
@media (max-width: 880px) { .pqc-kpi-metrics { border-left: none; padding-left: 0;
  border-top: 1px solid var(--border); padding-top: 20px; } }
.pqc-kpi .v { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1; }
.pqc-kpi .k { font-size: 12px; color: var(--text-caption); margin-top: 6px;
  letter-spacing: .01em; line-height: 1.3; }
/* Advisory + exposure grid. */
.pqc-hero-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: stretch; }
@media (max-width: 1040px) { .pqc-hero-grid { grid-template-columns: 1fr; } }
.pqc-advisory { display: flex; flex-direction: column; gap: 22px; padding: 26px 28px; }
.pqc-advisory-main { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.pqc-advisory-glyph { color: var(--risk-red); filter: drop-shadow(0 0 14px rgba(242,107,98,.35)); }
.pqc-advisory-glyph svg { width: 56px; height: 56px; display: block; }
.pqc-advisory-title { margin: 6px 0 10px; font-size: 21px; font-weight: 600; line-height: 1.25; }
.pqc-advisory-copy { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-secondary); max-width: 64ch; }
.pqc-advisory-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.pqc-chip {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  background: var(--navy-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px;
}
.pqc-advisory-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.pqc-advisory-actions { border-top: 1px solid var(--border); padding-top: 20px; }
.pqc-rec-head {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-caption); margin-bottom: 12px;
}
.pqc-rec-list { display: flex; flex-direction: column; }
.pqc-rec-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: none; border-top: 1px solid var(--border);
  padding: 12px 4px; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background .12s, padding-left .12s;
}
.pqc-rec-row:first-child { border-top: none; }
.pqc-rec-row:hover { background: rgba(87,168,232,.05); padding-left: 8px; }
.pqc-rec-ico { color: var(--yellow); font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
[data-theme="light"] .pqc-rec-ico { color: var(--yellow-soft); }
.pqc-rec-txt { flex: 1; min-width: 0; }
.pqc-rec-ct {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-secondary);
  background: var(--navy-2); border: 1px solid var(--border); border-radius: 8px; padding: 1px 8px;
}
.pqc-rec-arrow { color: var(--text-caption); font-size: 16px; flex-shrink: 0; }
/* Exposure donut card. */
.pqc-exposure { display: flex; flex-direction: column; padding: 22px 24px; }
.pqc-donut-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 18px; }
.pqc-donut-chart { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.pqc-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.pqc-donut-center .tot { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.pqc-donut-center .lab { font-size: 11px; color: var(--text-caption); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
.pqc-donut-legend { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.pqc-legend-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-secondary); }
.pqc-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pqc-legend-item .lct { margin-left: auto; font-family: var(--font-mono); font-weight: 600; color: var(--text); }
/* ── Migration wizard — clear, scannable section blocks ──────────────────────
   Each block leads with a bold accented label so THE PROBLEM / BUSINESS IMPACT /
   etc. read instantly; body copy is set larger with generous line-height. */
#pqc-wizard-overlay .modal { max-width: 660px; padding: 28px 30px; }
.wiz-head {
  font-size: 15px; line-height: 1.5; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.wiz-head .ep { font-weight: 700; color: var(--text); }
.wiz-block { margin-bottom: 22px; }
.wiz-block:last-of-type { margin-bottom: 0; }
.wiz-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--yellow); margin-bottom: 8px;
}
[data-theme="light"] .wiz-label { color: var(--yellow-soft); }
.wiz-label::before {
  content: ""; width: 14px; height: 2px; border-radius: 2px;
  background: var(--yellow); opacity: .8; flex-shrink: 0;
}
[data-theme="light"] .wiz-label::before { background: var(--yellow-soft); }
.wiz-body { font-size: 14.5px; line-height: 1.65; color: var(--text); }
.wiz-body ol, .wiz-body ul { margin: 0; padding-left: 20px; }
.wiz-snip { margin-top: 10px; }
.wiz-snip pre { margin: 4px 0 0; padding: 8px 10px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px;
  white-space: pre; background: var(--surface-sub); }
.wiz-body li { margin: 7px 0; color: var(--text-secondary); }
.wiz-note {
  font-size: 12px; line-height: 1.6; color: var(--text-caption);
  border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px;
}
/* PQC Assistant (2026-10-14): fix actions + "assign this step" in the wizard,
   and the Tasks tab. Tokens only, so both themes follow. */
.pqc-fix-row {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.pqc-fix-row:first-child { border-top: none; padding-top: 0; }
.pqc-fix-main { min-width: 0; }
.pqc-fix-title { font-weight: 600; color: var(--text); font-size: 13.5px; }
.pqc-fix-note { color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; margin-top: 3px; }
.pqc-fix-row.is-off .pqc-fix-title { color: var(--text-secondary); }
.pqc-fix-row .btn-primary, .pqc-fix-row .btn-quiet { flex-shrink: 0; white-space: nowrap; }
.pqc-assign { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.pqc-assign .pw-field { margin: 0; }
.pqc-assign .pqc-assign-wide { grid-column: 1 / -1; }
.pqc-assign input, .pqc-assign select { width: 100%; }
@media (max-width: 640px) { .pqc-assign { grid-template-columns: 1fr; } }
.pqc-task-row {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 12px 2px; border-top: 1px solid var(--border);
}
.pqc-task-row:first-child { border-top: none; }
.pqc-task-main { min-width: 0; }
.pqc-task-title { font-weight: 600; color: var(--text); font-size: 13.5px; }
.pqc-task-row.is-done .pqc-task-title { color: var(--text-secondary); text-decoration: line-through; }
.pqc-task-meta { color: var(--text-secondary); font-size: 12.5px; margin-top: 3px; word-break: break-word; }
.pqc-task-check { font-size: 12.5px; margin-top: 4px; color: var(--text-secondary); }
.pqc-task-btns { display: flex; gap: 6px; flex-shrink: 0; }
.pqc-assistant-steps { margin: 6px 0 0; padding-left: 20px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; }
.pqc-assistant-steps li { margin: 3px 0; }
.pqc-assistant-steps strong { color: var(--text); }
/* Recommended-actions list — readable rows: risk badge + endpoint + action. */
.pqc-actions-list { display: flex; flex-direction: column; }
.pqc-action-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 2px; border-top: 1px solid var(--border);
}
.pqc-action-row:first-child { border-top: none; }
.pqc-action-body { min-width: 0; }
.pqc-action-ep { font-weight: 600; color: var(--text); font-size: 13px; word-break: break-word; }
.pqc-action-txt { color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; margin-top: 3px; }
/* Strong, consistent risk badges — solid tint + high-contrast text, both themes.
   At risk / Critical / Quantum-vulnerable / HNDL-exposed all use these. */
.risk-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; padding: 2px 9px; border-radius: 100px; white-space: nowrap;
  line-height: 1.4; flex-shrink: 0;
}
.risk-badge.crit { background: rgba(242,107,98,.15);  color: var(--risk-red); border: 1px solid rgba(242,107,98,.45); }
.risk-badge.high { background: rgba(249,115,22,.15); color: var(--risk-high); border: 1px solid rgba(249,115,22,.45); }
.risk-badge.med  { background: rgba(234,179,8,.14);  color: var(--risk-med);  border: 1px solid rgba(234,179,8,.42); }
.risk-badge.low  { background: rgba(70,167,88,.15);  color: var(--risk-low);  border: 1px solid rgba(70,167,88,.42); }
/* DMARC overview layout: chart left, top-sources right */
.dms-ov-grid { display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start; }
@media (max-width:800px) { .dms-ov-grid { grid-template-columns:1fr; } }
.dms-chart-legend { display:flex; gap:16px; margin-bottom:10px; flex-wrap:wrap; }
.dms-legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); }
.dms-legend-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.dms-top-sources-table { width:100%; border-collapse:collapse; font-size:12px; }
.dms-top-sources-table th { font-size:10px; font-weight:700; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.08em; padding:0 6px 8px; }
.dms-top-sources-table td { padding:5px 6px; border-top:1px solid var(--border); vertical-align:middle; }
.dms-vol-bar { display:flex; gap:2px; align-items:center; }
.dms-vol-track { flex:1; height:6px; background:var(--navy-2); border-radius:3px; overflow:hidden;
  display:flex; gap:0; }
.dms-vol-seg-ok  { background:var(--ok); }
.dms-vol-seg-bad { background:var(--crit); }
/* Expandable detail row (DA) — full-width, monospace blob for raw records. */
tr.da-expandable { cursor: pointer; }
tr.da-expandable:hover td { background: rgba(87,168,232,.04); }
tr.da-detail td {
  background: rgba(14,26,46,.55); border-bottom: 1px solid var(--border);
  white-space: normal; padding: 14px 18px;
}
/* The dark navy wash above is a dark-theme design; on white it rendered as a
   muddy grey slab with grey text (the "unreadable remediations" complaint).
   Light theme gets a barely-there tint instead — text keeps full contrast. */
[data-theme="light"] tr.da-detail td { background: rgba(14,26,46,.035); }
.da-detail-block { display: grid; grid-template-columns: 1fr; gap: 10px; }
.da-detail-block h4 {
  margin: 0 0 4px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); letter-spacing: .06em; text-transform: uppercase;
}
.da-detail-block code {
  display: block; padding: 8px 10px; border-radius: 4px;
  background: rgba(0,0,0,.35); color: var(--text);
  border: 1px solid rgba(255,255,255,.07);
  font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap;
  word-break: break-all;
}
[data-theme="light"] .da-detail-block code {
  background: rgba(10,22,40,.05); border-color: var(--border);
}
.da-detail-block ul { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 13px; }
.da-detail-block li { margin-bottom: 4px; }
.da-detail-block .da-meta {
  margin-top: 4px; font-size: 12px; color: var(--text-secondary);
}
.da-detail-block table.da-mini {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.da-detail-block table.da-mini th, .da-detail-block table.da-mini td {
  text-align: left; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.06);
}
[data-theme="light"] .da-detail-block table.da-mini th,
[data-theme="light"] .da-detail-block table.da-mini td { border-bottom-color: var(--border); }
.da-detail-block table.da-mini th {
  color: var(--text-secondary); font-weight: 500; text-transform: uppercase;
  font-size: 10px; letter-spacing: .06em;
}
.da-detail-block table.da-mini code {
  display: inline; padding: 0; background: transparent;
}
/* Remediation cards (Email-auth expand 2026-06-19). The "Remediations"
   section is the visual lede of the expand; raw records sit below as
   debugging context. */
.da-rem-section { margin-bottom: 18px; }
.da-raw-section h4 {
  /* Same look as h4 in da-detail-block but visually demoted from the
     remediation-heading. */
  opacity: .7;
}
.da-raw-section h5 {
  margin: 0 0 4px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); letter-spacing: .06em; text-transform: uppercase;
}
.da-raw-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  padding-top: 6px; border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 6px;
}
[data-theme="light"] .da-raw-grid { border-top-color: var(--border); }
.da-rem-empty {
  font-size: 13px; color: var(--text-secondary);
  padding: 10px 12px; background: rgba(60,170,90,.05);
  border: 1px solid rgba(60,170,90,.18); border-radius: 4px;
}
.da-rem-card {
  /* A real card surface (not a faint tint over the detail-row wash) so the
     remediation copy sits on full-contrast ground in BOTH themes. */
  margin: 10px 0; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
[data-theme="light"] .da-rem-card { box-shadow: 0 1px 3px rgba(10,22,40,.06); }
.da-rem-card:first-child { margin-top: 4px; }
.da-rem-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.da-rem-title {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.da-rem-why {
  font-size: 13px; color: var(--text-secondary); line-height: 1.6;
  margin-bottom: 10px;
}
.da-rem-step {
  font-size: 13px; line-height: 1.6; color: var(--text); margin: 6px 0;
}
.da-rem-rec { margin: 6px 0 8px; }
.da-rem-rec-meta {
  font-size: 11px; color: var(--text-secondary);
  margin: 4px 0 2px; font-family: var(--font-mono); letter-spacing: .03em;
}
.da-rem-rec-meta code {
  display: inline; padding: 1px 5px; background: rgba(0,0,0,.25);
  border-radius: 3px; font-size: 11px; color: var(--text);
}
[data-theme="light"] .da-rem-rec-meta code {
  background: rgba(10,22,40,.06); border: 1px solid var(--border);
}
.da-rem-rec-label {
  text-transform: uppercase; opacity: .7; font-size: 10px;
  letter-spacing: .08em; margin-right: 4px;
}
.status-msg { font-size: 14px; color: var(--text-secondary); padding: 20px 0; }
.error-box {
  display: none; background: rgba(220,60,60,.12); border: 1px solid rgba(220,60,60,.4);
  color: var(--crit); font-size: 13px; border-radius: 8px; padding: 12px 14px; margin-bottom: 18px;
}

/* Platform notices (maintenance / incident / announcement banners) */
#notice-banner { display: flex; flex-direction: column; gap: 8px; }
#notice-banner:not(:empty) { margin-bottom: 16px; }
.notice-banner {
  display: flex; align-items: flex-start; gap: 10px; border: 1px solid;
  border-radius: 8px; padding: 11px 14px; font-size: 13px; color: var(--text);
}
.notice-banner .nb-main { flex: 1; min-width: 0; }
.notice-banner .nb-title { font-weight: 600; margin-right: 6px; }
.notice-banner .nb-when { color: var(--text-secondary); font-size: 12px; margin-top: 3px; }
.notice-banner .nb-dismiss {
  cursor: pointer; background: none; border: 0; color: inherit; opacity: .6;
  font-size: 16px; line-height: 1; padding: 0 2px; flex: none;
}
.notice-banner .nb-dismiss:hover { opacity: 1; }
.notice-banner.sev-info { background: rgba(60,130,220,.12); border-color: rgba(60,130,220,.40); }
.notice-banner.sev-warning { background: var(--warn-wash); border-color: var(--warn-bd); }
.notice-banner.sev-critical { background: rgba(220,60,60,.14); border-color: rgba(220,60,60,.50); }

/* Toast notifications (non-blocking, auto-dismiss) */
#toast-stack {
  position: fixed; top: 18px; right: 18px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px; max-width: 360px; pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  background: var(--card-bg); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.28); opacity: 0; transform: translateX(12px);
  transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { border-left-color: var(--ok); }
.toast.error   { border-left-color: var(--crit); }
.toast.info    { border-left-color: var(--yellow); }
.toast .toast-ico { font-size: 15px; line-height: 1.3; }
.toast.success .toast-ico { color: var(--ok); }
.toast.error   .toast-ico { color: var(--crit); }
.toast.info    .toast-ico { color: var(--yellow); }
.toast .toast-msg { flex: 1; line-height: 1.4; }
.toast .toast-x {
  cursor: pointer; color: var(--text-secondary); background: none; border: none;
  font-size: 15px; line-height: 1; padding: 0; margin-left: 2px;
}
.toast .toast-x:hover { color: var(--text); }
@media (max-width: 600px) { #toast-stack { left: 12px; right: 12px; max-width: none; } }

/* Inline confirm dialog (replaces window.confirm) */
.confirm-overlay {
  display: none; position: fixed; inset: 0; z-index: 1100;
  background: rgba(4,8,18,.55); align-items: center; justify-content: center; padding: 20px;
}
.confirm-overlay.show { display: flex; }
.confirm-box {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px 22px 18px; max-width: 420px; width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.confirm-msg { font-size: 14px; color: var(--text); line-height: 1.5; margin-bottom: 18px; white-space: pre-wrap; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-box.danger .btn-primary { background: var(--crit); border-color: var(--crit); color: #fff; }

/* Command palette */
.palette-overlay {
  display: none; position: fixed; inset: 0; z-index: 1200;
  background: rgba(4,8,18,.5); justify-content: center; align-items: flex-start; padding: 12vh 16px 16px;
}
.palette-overlay.show { display: flex; }
.palette-box {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  width: 100%; max-width: 540px; box-shadow: 0 18px 50px rgba(0,0,0,.45); overflow: hidden;
}
.palette-input {
  width: 100%; border: none; border-bottom: 1px solid var(--border); background: transparent;
  color: var(--text); font-size: 15px; padding: 16px 18px; outline: none;
}
.palette-results { max-height: 360px; overflow-y: auto; padding: 6px; }
.palette-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px;
  cursor: pointer; font-size: 13px; color: var(--text);
}
.palette-item .pi-kind { font-size: 10px; color: var(--text-secondary); margin-left: auto; text-transform: uppercase; letter-spacing: .05em; }
.palette-item.active, .palette-item:hover { background: rgba(87,168,232,.10); }
[data-theme="light"] .palette-item.active, [data-theme="light"] .palette-item:hover { background: rgba(184,134,11,.10); }
.palette-empty { padding: 18px; color: var(--text-secondary); font-size: 13px; text-align: center; }
/* Group headers (Trust Slate: Frame D) — non-interactive; keyboard nav
   queries only .palette-item, so these never take focus. */
.palette-ghead {
  padding: 8px 10px 4px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.palette-ghead:first-child { padding-top: 4px; }
/* Action Center inline triage buttons (Ack / Verify). */
.ac-act {
  padding: 3px 9px; margin-left: 6px; border: 1px solid var(--border);
  border-radius: 7px; background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.ac-act:hover { border-color: var(--yellow); }
.ac-act:disabled { opacity: .5; cursor: default; }
/* Palette deep-link landing flash — draws the eye to the card just navigated to. */
.flash-target { animation: flash-target 1.8s ease-out; }
@keyframes flash-target {
  0%   { box-shadow: 0 0 0 3px rgba(87,168,232,.75); }
  60%  { box-shadow: 0 0 0 3px rgba(87,168,232,.35); }
  100% { box-shadow: 0 0 0 3px rgba(87,168,232,0); }
}
/* Data-retention window meter (Settings → Organization). */
.ret-meter {
  height: 8px; border-radius: 999px; background: var(--navy-2);
  border: 1px solid var(--border); overflow: hidden; margin: 8px 0 4px; max-width: 420px;
}
.ret-meter-fill {
  height: 100%; border-radius: 999px; min-width: 6px;
  background: var(--yellow);
}
.palette-foot {
  display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border);
  font-size: 10px; color: var(--text-secondary);
}

/* change-password */
details.pw { margin-top: 6px; }
details.pw summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
details.pw summary:hover { color: var(--yellow); }
.pw-form { margin-top: 16px; max-width: 360px; }
.pw-field { margin-bottom: 12px; }
.pw-field label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; }
.pw-field input {
  width: 100%; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--navy-2); color: var(--text); font-size: 13px;
}
.pw-field input:focus { outline: none; border-color: var(--yellow); }
.btn-primary {
  background: var(--yellow); color: #1a1300; border: none; font-weight: 600;
  border-radius: 8px; padding: 10px 16px; font-size: 13px; cursor: pointer;
}
.btn-primary:disabled { opacity: .6; cursor: default; }
.pw-msg { font-size: 12px; margin-top: 8px; }
.pw-msg.ok { color: var(--ok); }
.pw-msg.err { color: var(--crit); }

/* First-scan walkthrough — only shown to a tenant with 0 domains who hasn't
   dismissed it. Three-step state machine: add → scanning → done. */
.welcome-card {
  border: 1px solid rgba(87,168,232,.30);
  background:
    linear-gradient(135deg, rgba(87,168,232,.06) 0%, transparent 55%),
    var(--card-bg);
  box-shadow: 0 12px 28px -16px rgba(87,168,232,.20);
}
.welcome-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.welcome-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--yellow); letter-spacing: .14em; text-transform: uppercase;
}
[data-theme="light"] .welcome-eyebrow { color: var(--yellow-soft); }
.welcome-title { font-size: 19px; font-weight: 700; margin: 6px 0 18px; }
.welcome-steps {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;
}
.welcome-step {
  display: grid; grid-template-columns: 32px 1fr; gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--navy-2);
  border: 1px solid var(--border);
  opacity: .55;
  transition: opacity .15s, border-color .15s;
}
.welcome-step.active { opacity: 1; border-color: rgba(87,168,232,.45); }
.welcome-step.done   { opacity: 1; }
.welcome-step.done .welcome-step-mark {
  background: var(--ok); color: #0A1628; border-color: var(--ok);
}
.welcome-step-mark {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  background: var(--card-bg); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.welcome-step.active .welcome-step-mark {
  background: var(--yellow); color: var(--yellow-text); border-color: var(--yellow);
}
.welcome-step strong { font-size: 14px; color: var(--text); }
.welcome-step-sub {
  font-size: 13px; color: var(--text-secondary);
  margin-top: 4px; line-height: 1.5;
}
.welcome-step-sub code {
  font-family: var(--font-mono); font-size: 12px; color: var(--text);
  background: rgba(255,255,255,.04); padding: 1px 5px; border-radius: 3px;
}
[data-theme="light"] .welcome-step-sub code { background: rgba(10,22,40,.06); }
.welcome-pulse {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow); margin-right: 6px;
  animation: welcome-pulse 1.2s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes welcome-pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.welcome-dismiss { font-family: var(--font-mono); }

/* Latest-scan card header — flex so the Scan now button sits to the right. */
.scan-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}

/* Bulk-import preview modal (copied from admin.html — app.html had no modal
   styles before). Same .overlay / .modal idiom; identical look + feel so a
   user moving between admin + app surfaces sees consistent UX. */
.overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
  align-items: flex-start; justify-content: center; padding: 60px 20px; z-index: 50;
}
.overlay.open { display: flex; }
.modal {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px; width: 100%; max-width: 560px;
  max-height: calc(100vh - 120px); overflow-y: auto;
  color: var(--text);
}
.modal h3 { margin: 0 0 4px; font-size: 17px; }
.modal .sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; }
.modal-foot {
  display: flex; justify-content: flex-end; align-items: center;
  margin-top: 18px; gap: 10px;
}
.import-list {
  margin: 10px 0; padding: 10px 12px; max-height: 200px; overflow-y: auto;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 6px; font-family: var(--font-mono); font-size: 12px;
  color: var(--text-secondary);
}
[data-theme="light"] .import-list { background: rgba(10,22,40,.03); }
.import-list code { display: block; line-height: 1.6; }
.import-counts { display: flex; gap: 18px; font-size: 13px; margin: 12px 0; flex-wrap: wrap; }
.import-counts strong { color: var(--text); }
.import-mode { margin: 14px 0 4px; font-size: 13px; }
.import-mode label { display: inline-flex; gap: 6px; align-items: center; margin-right: 16px; cursor: pointer; }
.import-mode input[type="radio"] { accent-color: var(--yellow); }
.btn-quiet {
  padding: 10px 16px; background: transparent;
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); cursor: pointer; font-family: inherit; font-size: 14px;
}
.btn-quiet:hover { background: rgba(255,255,255,.04); }
[data-theme="light"] .btn-quiet:hover { background: rgba(10,22,40,.04); }
.btn-quiet.is-active {
  border-color: var(--yellow); color: var(--yellow);
  background: rgba(255,193,7,.06);
}
.btn-primary-yellow {
  padding: 10px 16px; background: var(--yellow); color: var(--yellow-text);
  border: none; border-radius: 6px; font-weight: 600; cursor: pointer;
  font-family: inherit; font-size: 14px;
}
.btn-primary-yellow:disabled { opacity: .5; cursor: not-allowed; }
.lang-pick {
  padding: 9px 8px; background: transparent;
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 13px;
  cursor: pointer; margin-right: 4px;
}
.lang-pick:hover { background: rgba(255,255,255,.04); }
[data-theme="light"] .lang-pick:hover { background: rgba(10,22,40,.04); }

/* ── App shell (sidebar + main panel) ────────────────────────────────────────
   Refactor 2026-06-17: 12 cards → 10 sidebar sections. Sections are wrapped
   in `.route-section[data-route="X"]` and shown one (or one group) at a time
   via hash routing — `#/overview`, `#/domains`, … Existing card IDs + JS
   handlers are untouched; only the surrounding layout changed. */
.app-shell {
  display: grid;
  grid-template-columns: 224px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bot) 100%);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  padding: 18px 0 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(87,168,232,.06);
}
.sidebar-brand {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 18px 16px;
}
.sidebar-brand::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--yellow) 0%, transparent 100%);
}
.sidebar-brand .sb-logo { height: 30px; }
/* Product name — title-case + bold, never uppercased (owner requirement:
   the descriptor tag). Reads on the dark sidebar in both themes. */
.sidebar-brand .sb-tag {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  color: var(--sidebar-text-active); letter-spacing: .01em;
}
.sidebar-tenant {
  margin: 0 12px 16px;
  padding: 11px 12px;
  background: var(--sidebar-tenant-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 9px;
  color: var(--sidebar-text);
  line-height: 1.4;
}
.sidebar-tenant .lab {
  display: block; font-family: var(--font-mono); font-size: 10px; color: var(--sidebar-muted);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px;
}
/* Tenant name — prominent, wraps cleanly (break-word, not break-all). */
.sidebar-tenant .name {
  display: block; font-size: 14px; font-weight: 700;
  color: var(--sidebar-text-active); word-break: break-word; line-height: 1.25;
}
/* Role on its own line, readable (no longer 10px mono cramped). */
.sidebar-tenant .role {
  display: block; font-size: 12px; color: var(--sidebar-text);
  margin-top: 4px; word-break: break-word;
}
.sidebar-group { padding: 10px 0 2px; }
.sidebar-group-label {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--sidebar-muted);
  padding: 15px 18px 7px;
}
/* Collapsible outcome groups (#4). The label doubles as a disclosure button;
   collapsing hides the group's items so novices see ~5 scannable headers. */
.sidebar-group-toggle {
  display: flex; align-items: center; gap: 7px;
  width: 100%; border: 0; background: transparent; cursor: pointer;
  text-align: left;
}
.sidebar-group-toggle:hover { color: var(--sidebar-text-active); }
.sidebar-group-toggle .sb-caret {
  font-size: 8px; line-height: 1; flex: none; /* glyph, not text — exempt from the 10px type floor */
  transition: transform .15s ease; transform: rotate(0deg);
}
.sidebar-group.is-collapsed .sidebar-group-toggle .sb-caret { transform: rotate(-90deg); }
/* :not(.nav-item--parent) is load-bearing. Monitor/Protect/Operate toggle via a
   .sidebar-group-label, which this rule never matched. The Integrations subgroup
   toggles via a row that IS a .nav-item — so without the exclusion, collapsing it
   hid its own toggle and the whole group vanished with nothing left to click,
   permanently (the collapse persists in localStorage). */
.sidebar-group.is-collapsed .nav-item:not(.nav-item--parent) { display: none; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 18px 10px 16px;
  /* Size/weight are re-set in the final sidebar block (~line 2340), which wins.
     Kept in sync here so the two never disagree if that block is removed. */
  font-size: 14.5px;
  font-weight: 500;
  color: var(--sidebar-text);
  cursor: pointer;
  border-left: 3px solid transparent;
  text-decoration: none;
  user-select: none;
  transition: color .12s, background .12s, border-left-color .12s;
}
.nav-item:hover {
  color: var(--sidebar-text-active);
  background: linear-gradient(90deg, rgba(87,168,232,.07) 0%, transparent 100%);
}
.nav-item:hover .nav-icon { color: var(--yellow); }
.nav-item.is-active {
  color: var(--sidebar-text-active);
  background: var(--sidebar-active-bg);
  border-left-color: var(--yellow);
  font-weight: 650;
}
.nav-item.is-active .nav-icon { color: var(--yellow); }
.nav-item .nav-icon {
  display: inline-block; width: 18px; text-align: center;
  font-size: 15px;
  color: var(--sidebar-icon);
  transition: color .12s;
}
.nav-item .nav-badge {
  margin-left: auto;
  background: rgba(232,115,107,.18);
  color: var(--crit);
  font-size: 10px; font-weight: 600;
  padding: 1px 7px; border-radius: 9px;
  display: none;
}
.nav-item .nav-badge.has-count { display: inline-block; }
.sidebar-foot { margin-top: auto; padding: 12px; }

/* ── Main panel ───────────────────────────────────────────────────────────── */
.app-main { min-width: 0; }
.app-topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  background: linear-gradient(180deg,
    rgba(13,20,38,.92) 0%,
    rgba(13,20,38,.78) 100%);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* ── Premium "Soft Slate" header treatment (light mode) ───────────────────── */
[data-theme="light"] .app-topbar {
  background: #F6F8FB;
  border-bottom: 1px solid #CBD5E1;
}
/* Search: lift it off the header with the secondary surface so it's clearly a
   control, not blank space. */
[data-theme="light"] .app-topbar .topbar-search {
  background: #E7ECF3; border-color: #CBD5E1; color: #64748B;
}
[data-theme="light"] .app-topbar .topbar-search:hover { border-color: #94A3B8; color: #0F172A; }
[data-theme="light"] .app-topbar .topbar-search .palette-kbd { border-color: #CBD5E1; color: #64748B; }
/* Theme toggle + account chip sit on the same secondary surface. */
[data-theme="light"] .app-topbar .theme-toggle { background: #E7ECF3; border: 1px solid #CBD5E1; }
[data-theme="light"] .app-topbar .acct { background: #E7ECF3; border-color: #CBD5E1; }
[data-theme="light"] .app-topbar .acct.acct-trigger:hover,
[data-theme="light"] .acct-menu.open .acct.acct-trigger { border-color: #94A3B8; }
[data-theme="light"] .app-topbar .acct .acct-nm { color: #0F172A; }
[data-theme="light"] .app-topbar .acct .acct-rl { color: #64748B; }
[data-theme="light"] .app-topbar .acct.acct-trigger::after { color: #2563EB; opacity: 1; }
/* Avatar uses the primary accent blue in light mode. */
[data-theme="light"] .app-topbar .acct .acct-pic { background: #2563EB; }

/* Data-freshness chip (topbar). Quiet while current; amber once the view is
   older than the plan's scan cadence. Always clickable to refresh on demand. */
.fresh-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1;
  color: var(--text-secondary); background: transparent;
  border: 1px solid var(--border);
  transition: color .15s, border-color .15s, background .15s;
}
.fresh-chip:hover { color: var(--text); border-color: var(--text-caption); }
.fresh-chip .fc-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--ok, #10B981);
}
.fresh-chip.is-stale {
  color: var(--warn-strong, #b45309);
  border-color: rgba(87,168,232,.45); background: rgba(87,168,232,.10);
}
.fresh-chip.is-stale .fc-dot { background: var(--warn); }
[data-theme="light"] .fresh-chip { border-color: #CBD5E1; color: #64748B; }
[data-theme="light"] .fresh-chip:hover { border-color: #94A3B8; color: #0F172A; }
@media (max-width: 720px) { .fresh-chip { display: none !important; } }
/* Dropdown panel + separators on the Soft Slate palette. */
[data-theme="light"] .acct-dropdown { border-color: #CBD5E1; }
[data-theme="light"] .acct-sep { background: #CBD5E1; }
.app-topbar #who {
  font-size: 12px; color: var(--text-secondary);
  margin: 0; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.app-topbar #who code { color: var(--text); }

/* ── Route sections ──────────────────────────────────────────────────────── */
.route-section { display: none; }
.route-section.is-active { display: block; }

/* Consolidated-dashboard sub-tab bar (#4 option B). Sits above the active
   section; only shown for routes that belong to a SUBNAV family. */
.subnav-bar { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 0 0 20px; }
.subnav-tab {
  padding: 8px 14px; font-size: 13px; color: var(--text-secondary);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.subnav-tab:hover { color: var(--text); }
.subnav-tab.is-active { color: var(--text); border-bottom-color: var(--yellow); font-weight: 600; }

/* Gated-feature PLG teaser: a non-entitled operator sees the cluster sub-tabs
   plus this upsell instead of the (403-ing) real section content. One reusable
   node injected into the active gated section; hide the section's own children. */
.route-section.is-gated > *:not(.gated-upsell) { display: none !important; }
.gated-upsell { max-width: 520px; margin: 44px auto; text-align: center; }
.gated-upsell .gu-icon { font-size: 32px; line-height: 1; }
.gated-upsell h2 { margin: 12px 0 8px; }
.gated-upsell p { color: var(--text-secondary); margin: 0 0 12px; }
.gated-upsell .gu-need { font-size: 12.5px; }
.gated-upsell .btn-primary { display: inline-block; margin-top: 4px; }

.route-section[data-route="settings"] .card { max-width: 720px; }
.sso-f { display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--text-secondary,#AEBBD6); }
.sso-f input, .sso-f select { padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:13px; font-weight:400; }
.sso-f input:focus, .sso-f select:focus { outline:none; border-color:var(--accent,#4f8cff); }

/* ── Profile / Account hub (Phase 3) ─────────────────────────────────────────
   Left rail of sections + a content column showing one panel at a time. */
.profile-hub { display: grid; grid-template-columns: 232px 1fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .profile-hub { grid-template-columns: 1fr; gap: 14px; } }
.prof-rail { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 860px) { .prof-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; } }
.prof-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 9px;
  font-size: 13.5px; color: var(--text-secondary); cursor: pointer;
  border: 1px solid transparent; text-align: left; background: transparent;
  transition: background .14s, color .14s, border-color .14s; width: 100%;
}
.prof-nav-item:hover { color: var(--text); background: var(--surface-2); }
.prof-nav-item.is-active { color: var(--text); background: var(--card-bg); border-color: var(--border); font-weight: 600; }
.prof-nav-item .pi { width: 17px; text-align: center; opacity: .85; }
[data-theme="light"] .prof-nav-item.is-active { background: var(--card-bg); }
.prof-content { min-width: 0; }
.prof-panel { display: none; }
.prof-panel.is-active { display: block; }
.prof-content .card { max-width: 640px; }
/* Identity rows in Personal information */
.prof-id { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; font-size: 13.5px; }
.prof-id .k { color: var(--text-secondary); }
.prof-id .v { color: var(--text); word-break: break-word; }
.prof-id .v code { font-family: var(--font-mono); font-size: 12.5px; }
.prof-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.prof-pref-row .hint { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

.section-head {
  position: relative;
  margin: 4px 0 22px;
  padding-bottom: 16px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
/* Premium hairline — a divider that fades out to the right, cleanly separating
   the page header from its content cards. Theme-aware via --border. */
.section-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, var(--border) 32%, transparent 100%);
}
.section-head .heading { min-width: 0; }
.section-head .eyebrow { margin-bottom: 6px; }
.section-head .title { font-size: 22px; font-weight: 600; }
.section-head .lede { font-size: 13px; color: var(--text-secondary); margin-top: 6px; max-width: 56ch; }
.section-head .head-cta { display: flex; gap: 8px; align-items: center; }

.placeholder-card { text-align: center; padding: 60px 24px; color: var(--text-secondary); }
.placeholder-card .ph-icon {
  font-size: 28px; color: var(--yellow); display: block; margin-bottom: 12px;
}
[data-theme="light"] .placeholder-card .ph-icon { color: var(--yellow-soft); }
.placeholder-card h3 { font-size: 17px; color: var(--text); margin: 0 0 8px; }
.placeholder-card .ph-list {
  text-align: left; display: inline-block;
  margin: 14px auto 0; padding: 0; list-style: none;
  font-size: 13px;
}
.placeholder-card .ph-list li { padding: 4px 0; }
.placeholder-card .ph-list li::before {
  content: "→ "; color: var(--yellow); font-family: var(--font-mono);
}
[data-theme="light"] .placeholder-card .ph-list li::before { color: var(--yellow-soft); }

.issue-row {
  display: flex; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--border);
}
.issue-row:first-child { border-top: none; padding-top: 0; }
.issue-row .issue-sev {
  flex-shrink: 0; width: 3px; border-radius: 2px;
}
.issue-row .issue-sev.crit { background: var(--crit); }
.issue-row .issue-sev.warn { background: var(--warn); }
.issue-row .issue-sev.ok { background: var(--ok); }
.issue-row .issue-body { flex: 1; min-width: 0; }
.issue-row .issue-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.issue-row .issue-meta { font-size: 12px; color: var(--text-secondary); }
.issue-row .issue-meta .tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  color: var(--text-secondary); background: var(--navy-2);
  padding: 1px 6px; border-radius: 3px; margin-right: 5px;
}
.issue-row .issue-act {
  flex-shrink: 0; align-self: center; padding-left: 8px;
}
.issue-row .issue-act .btn-link { font-size: 12px; padding: 4px 8px; }

.sb-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border);
  color: var(--text); padding: 6px 9px; border-radius: 6px;
  font-size: 16px; cursor: pointer; line-height: 1;
}
@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 64px 1fr; }
  .sidebar-brand span:not(.sb-logo-fb), .sidebar-tenant,
  .sidebar-group-label, .nav-item .nav-label,
  .nav-item .nav-badge, .sidebar-foot { display: none !important; }
  .nav-item { justify-content: center; padding: 10px 0; }
  .nav-item .nav-icon { width: auto; font-size: 16px; }
  .sidebar-brand { align-items: center; padding: 0 0 12px; }
  /* Icon rail: group toggles are hidden with the labels, so a group collapsed
     on desktop must NOT hide its icons here (nothing to un-collapse it with).
     Children are excluded: they have no icon to shrink to, and this rule
     out-specifies the .nav-item--child hide below, so including them rendered
     blank 64x40 rows. */
  .sidebar-group.is-collapsed .nav-item:not(.nav-item--child) { display: flex !important; }
}
@media (max-width: 720px) {
  /* Off-canvas drawer shows labels + toggles when open — honor collapse again. */
  .sidebar.is-open .sidebar-group.is-collapsed .nav-item:not(.nav-item--parent) { display: none !important; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 30;
    transform: translateX(-100%); transition: transform .2s ease-out;
    width: 224px;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar.is-open .sidebar-brand span:not(.sb-logo-fb),
  .sidebar.is-open .sidebar-tenant,
  .sidebar.is-open .sidebar-group-label,
  .sidebar.is-open .nav-item .nav-label,
  .sidebar.is-open .nav-item .nav-badge,
  .sidebar.is-open .sidebar-foot { display: revert !important; }
  .sidebar.is-open .nav-item { justify-content: flex-start; padding: 8px 18px; }
  .sidebar.is-open .nav-item .nav-icon { width: 16px; }
  .sidebar.is-open .sidebar-brand { justify-content: flex-start; padding: 0 18px 16px; }
  .sb-toggle { display: inline-block; }
  .app-topbar { padding: 12px 16px; }
  .wrap { padding: 22px 16px; }
  /* New components — touch-friendly on small screens (2026-06-20 UX pass). */
  .palette-kbd { display: none; }                 /* no keyboard hint on touch */
  .palette-overlay { padding: 8vh 10px 10px; }
  .palette-box, .confirm-box { max-width: 100%; }
  .toast { font-size: 12px; }
}
@media (max-width: 600px) {
  .app-topbar { gap: 8px; flex-wrap: wrap; }
  .app-topbar #who { flex-basis: 100%; order: 3; }  /* identity drops to its own row */
  .ov-hero-kpis { gap: 10px; width: 100%; }
  .ov-kpi { min-width: 0; flex: 1 1 64px; }
  .ov-posture { max-width: none !important; }
  #ov-setup-steps li { flex-wrap: wrap; }
  /* Wide data tables: let them scroll rather than overflow the viewport. */
  .cert-table { min-width: 560px; }
}

/* ── Overview v2 — premium redesign ─────────────────────────────────────────
   Trust Score hero + Module Risk Grid + Remediation Center / scan side-by-side.
   Uses only existing design tokens (--navy, --card-bg, --border, --yellow,
   --text, --text-secondary, --crit, --warn, --ok, --font-mono). */

/* Trust Score hero card */
.ov-hero {
  display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: stretch;
  padding: 28px; margin-bottom: 22px;
}
@media (max-width: 1040px) { .ov-hero { grid-template-columns: 1fr; } }

/* Value ledger */
/* auto-fit, not a fixed 3: the "Verified fix" tile only appears once the tenant
   has one, so this row is 3 or 4 wide depending on the account. */
.ov-ledger-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; }
@media (max-width: 560px) { .ov-ledger-tiles { grid-template-columns: 1fr; } }
.ov-ledger-tile {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px;
}
.ov-ledger-tile .n { font-size: 26px; font-weight: 700; font-family: var(--font-mono); line-height: 1.1; }
.ov-ledger-tile .l { font-size: 11px; color: var(--text-secondary); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
.ov-ledger-tile.detected .n { color: var(--text); }
.ov-ledger-tile.resolved .n { color: var(--ok); }
.ov-ledger-tile.open .n { color: var(--warn); }
.ov-ledger-tile.verified .n { color: var(--accent); }
.ov-ledger-tile.verified { border-color: var(--accent); }
/* Muted findings — deliberately the quietest tile: it is what makes the
   row reconcile (detected = resolved + open + muted), not a call to act. */
.ov-ledger-tile.muted .n { color: var(--text-secondary); }
.ov-ledger-cat .cat-nums .muted-n { color: var(--text-secondary); }
.ov-ledger-cat {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.ov-ledger-cat:last-child { border-bottom: 0; }
.ov-ledger-cat .cat-main { flex: 1 1 auto; min-width: 0; }
.ov-ledger-cat .cat-label { font-size: 13px; font-weight: 600; color: var(--text); }
.ov-ledger-cat .cat-blurb { font-size: 11.5px; color: var(--text-caption); margin-top: 1px; }
.ov-ledger-cat .cat-nums { flex: 0 0 auto; font-size: 12px; font-family: var(--font-mono); color: var(--text-secondary); text-align: right; white-space: nowrap; }
.ov-ledger-cat .cat-nums b { color: var(--text); font-size: 14px; }
.ov-ledger-cat .cat-nums .res { color: var(--ok); }

/* Module Risk Grid */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.ov-module {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s;
  text-decoration: none;
}
.ov-module:hover {
  border-color: var(--yellow);
  box-shadow: 0 4px 16px rgba(87,168,232,.08);
  transform: translateY(-2px);
}
.ov-module .mod-icon { font-size: 22px; margin-bottom: 10px; line-height: 1; }
.ov-module .mod-name {
  font-size: 14.5px; font-weight: 700; color: var(--text);
  letter-spacing: -.01em; margin-bottom: 6px;
}
.ov-module .mod-val {
  font-size: 24px; font-weight: 700; font-family: var(--font-mono); line-height: 1;
  color: var(--text);
}
.ov-module .mod-val.crit { color: var(--crit); }
.ov-module .mod-val.warn { color: var(--warn); }
.ov-module .mod-val.ok  { color: var(--ok); }
.ov-module .mod-sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.ov-module .mod-badge {
  margin-top: 10px; display: inline-block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.ov-module .mod-badge.crit { background: rgba(232,115,107,.15); color: var(--crit); }
.ov-module .mod-badge.warn { background: rgba(233,185,73,.15);  color: var(--warn); }
.ov-module .mod-badge.ok   { background: rgba(95,200,143,.15);  color: var(--ok); }

/* Bottom row: Remediation Center + Latest Scan */
.ov-bottom {
  display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start;
}
@media (max-width: 860px) { .ov-bottom { grid-template-columns: 1fr; } }
.ov-bottom > .card { margin-bottom: 0; }

/* Remediation Center — stacked-bar chart by module */
#remediation-chart { margin-bottom: 18px; }
.rc-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; height: 26px; margin-bottom: 6px;
}
.rc-row .rc-label {
  width: 130px; flex-shrink: 0;
  color: var(--text-secondary); text-align: right;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-row .rc-bar {
  flex: 1; height: 14px;
  background: var(--navy-2);
  border-radius: 7px; overflow: hidden;
  display: flex;
}
[data-theme="light"] .rc-row .rc-bar { background: #EEF1F6; }
.rc-row .rc-bar .seg {
  height: 100%; transition: width .35s ease-out;
}
.rc-row .rc-bar .seg.crit { background: var(--crit); }
.rc-row .rc-bar .seg.warn { background: var(--warn); }
.rc-row .rc-count {
  width: 44px; flex-shrink: 0;
  color: var(--text);
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600;
  text-align: right;
}
.rc-row .rc-count .ct-crit { color: var(--crit); }
.rc-row .rc-count .ct-warn { color: var(--warn); }
.rc-empty {
  color: var(--ok); font-size: 13px; padding: 8px 0;
  display: flex; align-items: center; gap: 8px;
}
.rc-empty::before {
  content: "✓"; font-size: 16px; color: var(--ok);
}
.rc-divider {
  height: 1px; background: var(--border);
  margin: 4px 0 12px;
}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM REFRESH v3 (2026-06-21) — tasteful, additive polish layer.
   Keyed ONLY to existing selectors; no markup / JS / id changes.
   Self-contained so it can be reviewed or reverted as one block.
   ════════════════════════════════════════════════════════════════════ */



/* Module tiles: turn the bare emoji into a refined rounded icon tile and
   tighten the hover into a calmer, more expensive-feeling lift. */
.ov-module .mod-icon {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border-radius: 11px; margin-bottom: 13px; color: var(--blue);
  background: var(--blue-bg); border: 1px solid var(--blue-bd);
}
.ov-module .mod-icon svg { width: 21px; height: 21px; display: block; }
.ov-module:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.ov-module .mod-badge.crit { background: var(--crit-bg); border: 1px solid var(--crit-bd); }
.ov-module .mod-badge.warn { background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.ov-module .mod-badge.ok   { background: var(--ok-bg);   border: 1px solid var(--ok-bd); }

/* The Export-report CTA is a SECONDARY action — v3 keeps a single gold primary
   (the adjacent "Publish email auth records"). It renders from its .btn-quiet
   class (card surface + blue text) so it stays legible in both themes; the old
   #ov-download-report override painted a blue fill under near-black ink, which
   fell to ~1.4:1 contrast in light mode. */

/* Quiet buttons: smoother hover. */
.btn-quiet { transition: border-color .15s, background .15s, transform .12s; }
.btn-quiet:hover { transform: translateY(-1px); }

/* Top-bar: premium search pill + account chip (replaces the plain
   "Signed in as <email> · tenant … · role …" text line). */
.app-topbar { gap: 12px; }
.topbar-search {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--card-bg); border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 11px;
  padding: 8px 12px; font-family: inherit; font-size: 13px; cursor: pointer;
  max-width: 380px; transition: border-color .15s, background .15s, color .15s;
}
.topbar-search:hover { border-color: var(--border-bright); color: var(--text); }
.topbar-search .ts-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search .palette-kbd {
  margin-left: 6px; font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; opacity: .8;
}
.acct {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 11px 5px 6px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--card-bg); box-shadow: var(--shadow-1);
  max-width: 240px;
}
.acct .acct-pic {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center; font-weight: 700; font-size: 12.5px;
  color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan));
}
.acct .acct-meta { min-width: 0; line-height: 1.2; }
.acct .acct-nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct .acct-rl { font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .topbar-search .ts-txt { display: none; }
  .acct .acct-meta { display: none; }
  .acct { max-width: none; padding: 5px; }
}

/* ── Account dropdown menu (Profile / Preferences / Sign out) ── */
.acct-menu { position: relative; display: inline-flex; }
.acct.acct-trigger {
  cursor: pointer; font: inherit; text-align: left; color: var(--text);
  transition: border-color .15s, background .15s;
}
.acct.acct-trigger:hover { border-color: var(--border-bright); }
.acct.acct-trigger::after {
  content: "▾"; margin-left: 4px; font-size: 14px; line-height: 1; font-weight: 700;
  color: var(--text); opacity: .85; transition: transform .15s; flex: 0 0 auto;
}
.acct.acct-trigger:hover::after { opacity: 1; }
.acct-menu.open .acct.acct-trigger::after { transform: rotate(180deg); }
.acct-menu.open .acct.acct-trigger { border-color: var(--border-bright); }
.acct-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 208px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: var(--shadow-2, 0 18px 50px -20px rgba(0,0,0,.6)); padding: 7px;
  display: none; flex-direction: column; gap: 2px; z-index: 60;
}
.acct-menu.open .acct-dropdown { display: flex; }
.acct-mi {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 500;
  text-align: left; cursor: pointer; transition: background .12s, color .12s;
}
.acct-mi:hover { background: var(--hover-bg, rgba(255,255,255,.06)); }
.acct-mi .ami-ic { font-size: 14px; width: 18px; text-align: center; flex: 0 0 auto; opacity: .9; }
.acct-mi-danger { color: var(--crit, #e5484d); }
.acct-mi-danger:hover { background: rgba(229,72,77,.12); }
.acct-sep { height: 1px; background: var(--border); margin: 5px 4px; }
[data-theme="light"] .acct-mi:hover { background: rgba(10,22,40,.05); }

/* Module cards: plain-language description + action footer (prototype parity).
   Flex column so every card's footer aligns to the bottom of the row. */
.ov-module { display: flex; flex-direction: column; }
.ov-module .mod-desc {
  font-size: 11.5px; color: var(--text-secondary); line-height: 1.45;
  margin-top: 9px; flex: 1;
}
.ov-module .mod-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border);
}
.ov-module .mod-foot .mod-badge { margin-top: 0; }
.ov-module .mod-action {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 3px;
}
.ov-module:hover .mod-action { color: var(--yellow); }
[data-theme="light"] .ov-module:hover .mod-action { color: var(--yellow-soft); }

/* Wider module cards (prototype proportions) give descriptions + footers room;
   the footer wraps gracefully instead of spilling past the card edge. */
.ov-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.ov-module .mod-badge { white-space: nowrap; }
.ov-module .mod-foot { flex-wrap: wrap; row-gap: 6px; }
.ov-module .mod-action { margin-left: auto; }

/* Header row: icon + title side-by-side instead of stacked (both themes). */
.ov-module .mod-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.ov-module .mod-head .mod-icon { margin-bottom: 0; flex: 0 0 auto; }
.ov-module .mod-head .mod-name { margin-bottom: 0; }

/* ── Priority Remediation Center — ranked cards (prototype parity) ── */
#top-issues-list { display: flex; flex-direction: column; gap: 12px; }
.rem-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
  padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card-bg); box-shadow: var(--shadow-1);
}
.rem-card .rem-rank {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 700; font-size: 12px; margin-top: 1px;
  background: var(--crit-bg); color: var(--crit); border: 1px solid var(--crit-bd);
}
.rem-card .rem-rank.r-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.rem-card .rem-title { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rem-sev { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
.rem-sev.sev-crit { background: var(--crit-bg); color: var(--crit); }
.rem-sev.sev-warn { background: var(--warn-bg); color: var(--warn); }
.rem-impact { font-size: 12px; color: var(--text-secondary); margin-top: 7px; line-height: 1.5; }
.rem-impact b, .rem-fix b { color: var(--text); font-weight: 600; }
.rem-fix {
  font-size: 12px; color: var(--text); margin-top: 8px; line-height: 1.45;
  padding: 8px 11px; border-radius: 9px; background: var(--blue-bg); border: 1px solid var(--blue-bd);
}
.rem-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rem-score {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1;
  color: var(--ok); white-space: nowrap; cursor: help;
  background: var(--ok-bg); border: 1px solid var(--ok-bd); padding: 5px 11px; border-radius: 9px;
}
.rem-score .rs-pts { font-size: 13px; font-weight: 700; }
.rem-score .rs-lbl { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }

.rem-viewfix {
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: var(--yellow); color: #1a1303; border: none; border-radius: 9px; padding: 7px 14px;
  box-shadow: 0 6px 16px -8px rgba(87,168,232,.5); transition: transform .12s, filter .15s;
}
.rem-viewfix:hover { transform: translateY(-1px); filter: brightness(1.05); }
.rem-dismiss { font-size: 11.5px; color: var(--text-secondary); background: none; border: none; cursor: pointer; }
.rem-dismiss:hover { color: var(--text); }
/* Locked-remediation CTA — shown to Free (preview) / Starter (explanations)
   in place of the gated fix detail. Never blurs the finding itself. */
.rem-lock {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 9px 12px; border-radius: 10px;
  background: var(--glass, rgba(255,255,255,.04));
  border: 1px dashed var(--border, rgba(255,255,255,.16));
  font-size: 12.5px; color: var(--text-secondary);
}
.rem-lock .lk-txt { flex: 1; min-width: 140px; }
.rem-lock .lk-pill {
  font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--yellow-text);
  background: var(--yellow); border-radius: 6px; padding: 2px 7px;
}
.rem-unlock {
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: var(--yellow); color: #1a1303; border: none; border-radius: 9px; padding: 6px 12px;
  transition: transform .12s, filter .15s;
}
.rem-unlock:hover { transform: translateY(-1px); filter: brightness(1.05); }
@media (max-width: 560px) {
  .rem-card { grid-template-columns: auto 1fr; }
  .rem-right { flex-direction: row; grid-column: 1 / -1; justify-content: flex-end; align-items: center; }
}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM REFRESH v4 (2026-07-14) — readability + card-presence pass.
   Additive like v3: keyed only to existing selectors (plus the new bulk
   toolbars), self-contained, reviewable/revertible as one block.
   ════════════════════════════════════════════════════════════════════ */


/* Cards & tiles: premium border + inner top highlight ("lit from above"). */
.card, .ov-module, .kpi { border-color: var(--card-bd); }
.card { box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.05); }
.ov-module, .kpi { box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.04); }
.ov-module:hover { border-color: var(--card-bd-hover); }
[data-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(10,22,40,.07), 0 10px 28px -20px rgba(10,22,40,.14);
}
[data-theme="light"] .ov-module,
[data-theme="light"] .kpi { box-shadow: 0 1px 3px rgba(10,22,40,.06); }

/* Sidebar polish: product descriptor breathes; group labels track wider;
   the active item's gold wash reads as a confident selection, not a tint. */
.sidebar-brand .sb-tag { letter-spacing: .02em; }
.sidebar-group-label { font-size: 10.5px; letter-spacing: .16em; }

/* Bulk-select toolbars (alerts / CT / inventory / lookalike) share one
   quiet glass treatment so multi-select feels like part of the system. */
#alerts-bulkbar, #ct-bulkbar, #inv-bulkbar, #lookalike-bulkbar {
  background: var(--glass);
  border-color: var(--card-bd);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}


.cert-table tbody tr:hover td { background: var(--glass); }

/* ════════════════════════════════════════════════════════════════════════
   TRUST SLATE v2 (2026-07-14) — premium elevation layer.

   A pure token + surface reskin: same IA, same routes, same data, same
   metric values. It redefines the shared tokens and re-keys the existing
   component selectors, so every screen (light AND dark) inherits the lift
   without per-page edits.

   Principles: restraint + depth (layered shadows, whitespace, ONE accent
   per view), readability first (card meta/status lines move off the faint
   caption grey onto --text-2 at weight 500), and Inter for all chrome —
   mono is reserved for DATA (scores, domains, CNs, timestamps, counts).
   ════════════════════════════════════════════════════════════════════════ */


/* ── Typography ─────────────────────────────────────────────────────────
   Inter for every label, heading and nav item. Mono ONLY for data: scores,
   domains/CNs, timestamps, IDs, counts. Killing mono on the section heads
   and nav labels does most of the premium lift on its own. */
.sidebar-group-label,
.product-tag,
.btn-link,
.pill,
.mod-badge,
.status-msg,
.tab-btn,
.subnav-tab { font-family: var(--font-sans); }

.sidebar-group-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  color: var(--sidebar-muted); text-transform: uppercase;
}
h1, .title, .section-head .title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text-1); }
.card h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
/* Readability rule: every lede, card subtitle, status line and description
   sits on --text-2 at weight 500 — never the faint --text-3. */
.section-head .lede,
.scanline,
.status-msg,
.help,
.meta,
.ov-hero-tagline,
.ov-hero-sub,
.ov-module .mod-sub,
.ov-module .mod-desc,
.rem-impact {
  color: var(--text-2); font-weight: 500; font-size: 13.5px; line-height: 1.6;
}
.section-head .lede { font-size: 14.5px; max-width: 62ch; }
.ov-module .mod-sub { font-size: 12.5px; }
/* --text-3 survives only on eyebrow-scale labels + unit suffixes. */
.kpi .l, .ov-kpi .l, .tab-btn .ct, .score-of, .ov-ring-of { color: var(--text-3); }

/* Data stays mono. */
.cert-table td.host,
.mod-val, .kpi .n, .ov-kpi .n, .ov-ring-num, .score-n { font-family: var(--font-mono); }
.cert-table td.host { font-weight: 600; color: var(--text-1); }
.score-n { font-weight: 600; color: var(--text-1); }
.score-of { font-size: .85em; }

/* ── Cards ──────────────────────────────────────────────────────────────
   White (or dark-paper) surface, 16px radius, hairline, soft layered lift.
   Generous padding. No gradient fills. */
.card, .ov-module, .kpi, .rem-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
/* Hero stat tiles. They sit INSIDE the hero card, so they get a quiet
   sub-surface + hairline rather than a second full card shadow (no
   card-in-card). They carry no padding of their own in the base sheet — a
   bare border would sit flush against the label and read as clipped text. */
.ov-kpi {
  background: var(--glass);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-ctl);
  padding: 10px 14px;
  box-shadow: none;
}
.ov-kpi .l { white-space: nowrap; }
.card { padding: 24px; }
.ov-module { padding: 20px; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.ov-module:hover { border-color: var(--card-bd-hover); box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.ov-hero { padding: 30px 32px; }
/* Hairline divider before a card footer caption. */
.ov-module .mod-foot {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px; margin-top: 14px;
}
.ov-module .mod-icon {
  width: 38px; height: 38px; border-radius: var(--radius-ctl);
  background: var(--blue-bg); border: 1px solid var(--blue-bd);
  color: var(--blue); display: grid; place-items: center;
}
.ov-module .mod-val { font-size: 26px; font-weight: 700; }
.ov-module .mod-name { font-size: 15px; font-weight: 600; color: var(--text-1); }
.ov-module .mod-action { color: var(--blue); font-weight: 600; }
.ov-module:hover .mod-action,
[data-theme="light"] .ov-module:hover .mod-action { color: var(--blue-700); }

/* ── Status pills ───────────────────────────────────────────────────────
   Soft tint bg + 1px same-family line + DARKER same-family text + a leading
   dot. Never plain grey text on a tint. */
.pill, .mod-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
  background: var(--neutral-bg); border: 1px solid var(--neutral-bd); color: var(--neutral);
}
.pill.ok,   .mod-badge.ok   { background: var(--ok-bg);   border-color: var(--ok-bd);   color: var(--ok); }
.pill.warn, .mod-badge.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.pill.crit, .mod-badge.crit { background: var(--crit-bg); border-color: var(--crit-bd); color: var(--crit); }
.pill.muted { background: var(--neutral-bg); border-color: var(--neutral-bd); color: var(--text-3); opacity: 1; }
.pill.ok::before, .pill.warn::before, .pill.crit::before,
.mod-badge.ok::before, .mod-badge.warn::before, .mod-badge.crit::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* ── Grade chips (A–F) ──────────────────────────────────────────────────
   Circular, ringed, mono letter. A green · B blue · C amber · D orange ·
   F red. Rendered by adding data-grade to the existing grade pill. */
.pill[data-grade] {
  width: 30px; height: 30px; padding: 0;
  justify-content: center; border-width: 1.5px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
.pill[data-grade]::before { content: none; }
.grade-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.grade-legend .pill[data-grade] { width: 22px; height: 22px; font-size: 11px; }
.pill[data-grade="A"] { background: var(--ok-bg);   border-color: var(--ok-bd);   color: var(--ok); }
.pill[data-grade="B"] { background: var(--blue-bg); border-color: var(--blue-bd); color: var(--blue); }
.pill[data-grade="C"] { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.pill[data-grade="D"] { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); filter: saturate(1.35) hue-rotate(-12deg); }
.pill[data-grade="F"] { background: var(--crit-bg); border-color: var(--crit-bd); color: var(--crit); }

/* ── Tables ─────────────────────────────────────────────────────────────
   Mono uppercase heads, roomy rows, soft dividers, sub-surface hover. */
.cert-table th {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  padding: 11px 10px; border-bottom: 1px solid var(--line);
}
.cert-table td {
  padding: 13px 10px; border-bottom: 1px solid var(--line-soft);
  color: var(--text-2); font-size: 13.5px;
}
.cert-table tbody tr { transition: background .12s ease; }
.cert-table tbody tr:hover td { background: var(--surface-sub); }
[data-theme="light"] .cert-table tbody tr:hover td { background: var(--surface-sub); }
/* Findings prose: readable measure, key terms lifted to --text-1. The
   min-width matters — the roomier row padding + wider status pills push the
   table wide, and without a floor the prose column collapses into a
   one-word-per-line ribbon. */
.cert-table td.wrap-col, .cert-table td[style*="max-width:340px"] {
  font-size: 13px; line-height: 1.6; color: var(--text-2);
  min-width: 230px; max-width: 340px;
}
/* Grade chips are the widest thing in their column — shrink the cell to fit. */
.cert-table td:has(> .pill[data-grade]) { width: 1%; }
.cert-table td b, .cert-table td strong { color: var(--text-1); font-weight: 600; }

/* ── Buttons ────────────────────────────────────────────────────────────
   Secondary is the default: surface + hairline + subtle lift, blue label.
   Gold is reserved for the ONE primary action per view. */
.btn-link, .btn-quiet {
  background: var(--card-bg); border: 1px solid var(--line); color: var(--blue);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-ctl);
  box-shadow: 0 1px 2px rgba(14,27,46,.04);
  transition: border-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.btn-link:hover:not(:disabled), .btn-quiet:hover {
  border-color: var(--card-bd-hover); color: var(--blue-700);
  box-shadow: var(--shadow-card);
}
.btn-link:disabled { opacity: .55; cursor: progress; }

/* ── Filter chips / segmented controls ──────────────────────────────────
   Pill filters; active = soft gold tint. Counts stay mono + --text-3. */
.tab-btn {
  border-radius: 999px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  background: transparent; border: 1px solid var(--line);
  transition: color .14s, background .14s, border-color .14s;
}
.tab-btn:hover:not(:disabled) { color: var(--text-1); border-color: var(--card-bd-hover); background: var(--surface-sub); }
.tab-btn .ct { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }

/* "Save 20%" on the annual billing-period chip. Green because it reads as a
   gain, not a warning — and it keeps the gold reserved for the active-chip
   state it sits inside. Stays sans: it's a label, not a data value. */
.save-badge {
  margin-left: 7px; padding: 1px 6px; border-radius: 999px;
  background: var(--ok-bg); border: 1px solid var(--ok-bd); color: var(--ok);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.subnav-tab { font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.subnav-tab.is-active { color: var(--text-1); font-weight: 600; }

/* Inputs + selects share the control geometry and the focus treatment. */
input[type="text"], input[type="search"], input[type="email"], select, textarea {
  border-radius: var(--radius-ctl);
}

/* ── Sidebar (stays dark in both themes) ────────────────────────────────
   Blue-tinted active row + a 3px gold left accent. Labels stay light —
   only the light content area needed darkening, not the navigation. */
.sidebar-brand .sb-tag { color: var(--sidebar-text-active); letter-spacing: .01em; }

/* ── Topbar ─────────────────────────────────────────────────────────────
   64px, translucent + blur. Search reads as a real input pill; the avatar
   is a rounded-square in brand blue. */
.app-topbar {
  min-height: 64px; padding: 0 28px;
  background: rgba(10,16,28,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .app-topbar {
  background: rgba(244,247,251,.72); border-bottom: 1px solid var(--line);
}
.app-topbar .topbar-search {
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; color: var(--text-3);
  box-shadow: 0 1px 2px rgba(14,27,46,.04);
}
[data-theme="light"] .app-topbar .topbar-search {
  background: #FFFFFF; border-color: var(--line); color: var(--text-3);
}
.app-topbar .topbar-search:hover,
[data-theme="light"] .app-topbar .topbar-search:hover {
  border-color: var(--card-bd-hover); color: var(--text-1); box-shadow: var(--shadow-card);
}
.app-topbar .acct .acct-pic,
[data-theme="light"] .app-topbar .acct .acct-pic {
  background: var(--blue); border-radius: 9px; color: #FFFFFF; font-weight: 600;
}
.app-topbar .acct, [data-theme="light"] .app-topbar .acct {
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
}

/* Bulk toolbars adopt the control geometry. */
#alerts-bulkbar, #ct-bulkbar, #inv-bulkbar, #lookalike-bulkbar {
  background: var(--surface-sub); border: 1px solid var(--line);
  border-radius: var(--radius-ctl); box-shadow: none;
}

/* ── Quality floor ──────────────────────────────────────────────────────*/
:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .ov-module:hover { transform: none; }
}
@media (max-width: 720px) {
  .card { padding: 18px; border-radius: var(--radius-card); }
  .section-head .title, .title { font-size: 27px; }
  .cert-table th, .cert-table td { padding: 12px 12px; }
  .app-topbar { padding: 0 16px; }
  /* Two per row rather than four squeezed onto one — the base sheet's
     `flex: 1 1 64px` would shrink the tile below "Monitored assets". */
  .ov-hero-kpis { gap: 10px; }
  .ov-kpi { flex: 1 1 calc(50% - 10px); min-width: 0; padding: 9px 12px; }
}

/* phase-5 de-inline: hidden-init carrier. Elements that were style="display:none"
   now carry `data-h`; this hides them pre-JS with no flash. csp-inline.js then
   converts each to an inline CSSOM display:none and removes the attribute, so the
   app's `.style.display = ''` reveal idiom keeps working unchanged. !important so
   it wins over any element's own display class during the brief pre-JS window. */
[data-h] { display: none !important; }
/* phase-5 de-inline (app.html) */
.lg-ph1 { margin-left:auto; }
.lg-ph2 { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.lg-ph3 { margin-bottom:2px; }
.lg-ph4 { font-size:11px; color:var(--text-secondary); }
.lg-ph5 { height:6px; border-radius:3px; background:var(--border); overflow:hidden; margin-bottom:14px; }
.lg-ph6 { display:block; height:100%; width:0%; background:var(--ok); transition:width .4s; }
.lg-ph7 { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lg-ph8 { align-items:center; gap:10px; margin-top:8px; cursor:pointer; }
.lg-ph9 { font-size:11px; color:var(--text-caption); white-space:nowrap; }
.lg-ph10 { overflow:visible; }
.lg-ph11 { font-size:12px; font-weight:700; white-space:nowrap; color:var(--text-primary); }
.lg-ph12 { font-size:11px; font-weight:600; white-space:nowrap; }
.lg-ph13 { font-size:11px; color:var(--text-caption); }
.lg-ph14 { font-size:12px; }
.lg-ph15 { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lg-ph16 { margin:0; }
.lg-ph17 { display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; margin-bottom:10px; }
.lg-ph18 { overflow-x:auto; }
.lg-ph19 { min-width:320px; max-width:100%; }
.lg-ph20 { margin-top:14px; }
.lg-ph21 { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:0; }
.lg-ph22 { font-size:11px; font-weight:400; color:var(--text-caption); }
.lg-ph23 { font-size:13px; color:var(--text-secondary); margin-bottom:14px; }
.lg-ph24 { margin-top:16px; display:flex; flex-direction:column; gap:2px; }
.lg-ph25 { margin-top:14px; font-size:11px; color:var(--text-caption); }
.lg-ph26 { margin-top:0; }
.lg-ph27 { margin-bottom:12px; }
.lg-ph28 { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.lg-ph29 { align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.lg-ph30 { margin-top:12px; font-size:12.5px; }
.lg-ph31 { padding:8px 0 0; }
.lg-ph32 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:0; }
.lg-ph33 { margin-left:auto; font-size:11px; font-weight:400; color:var(--text-caption); }
.lg-ph34 { margin:2px 0 18px; padding:13px 15px; border:1px solid var(--yellow); border-radius:10px; background:rgba(87,168,232,.06); }
.lg-ph35 { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-bottom:4px; }
.lg-ph36 { font-size:12px; line-height:1.55; color:var(--text-secondary); margin-bottom:10px; }
.lg-ph37 { border:1px solid var(--yellow); border-radius:8px; padding:7px 12px; }
.lg-ph38 { font-size:12px; color:var(--text-caption); margin-top:8px; }
.lg-ph39 { font-size:12px; color:var(--danger, #ef4444); margin-top:8px; }
.lg-ph40 { font-size:12px; color:var(--text-caption); margin-bottom:10px; }
.lg-ph41 { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.lg-ph42 { display:flex; gap:8px; }
.lg-ph43 { flex:1; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--card-bg); color:inherit; }
.lg-ph44 { margin-bottom:10px; }
.lg-ph45 { margin-bottom:14px; }
.lg-ph46 { display:flex; gap:26px; flex-wrap:wrap; }
.lg-ph47 { margin-top:14px; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.lg-ph48 { flex:1; min-width:220px; padding:10px 12px; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:6px; color:var(--text); font-size:14px; font-family:inherit; }
.lg-ph49 { padding:10px 16px; background:var(--yellow); color:var(--yellow-text); border:none; border-radius:6px; font-weight:600; cursor:pointer; font-family:inherit; }
.lg-ph50 { color:#F87171; flex-basis:100%; }
.lg-ph51 { margin-top:10px; align-items:center; gap:10px; font-size:13px; color:var(--text-secondary); }
.lg-ph52 { padding:6px 12px; font-size:13px; }
.lg-ph53 { font-size:12px; color:var(--text-secondary); }
.lg-ph54 { flex-basis:100%; margin-top:6px; }
.lg-ph55 { gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.lg-ph56 { padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card-bg); color:var(--text); font-family:inherit; font-size:13px; }
.lg-ph57 { flex:1; min-width:180px; max-width:320px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card-bg); color:var(--text); font-family:inherit; font-size:13px; }
.lg-ph58 { font-size:12px; color:var(--text-caption); }
.lg-ph59 { gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; }
.lg-ph60 { font-size:12.5px; }
.lg-ph61 { width:26px; }
.lg-ph62 { font-size:11px; }
.lg-ph63 { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.lg-ph64 { display:flex; align-items:center; gap:16px; }
.lg-ph65 { font-size:40px; font-weight:800; line-height:1; width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:12px; border:2px solid var(--border-bright); }
.lg-ph66 { font-size:13px; color:var(--text-caption); }
.lg-ph67 { font-size:22px; font-weight:700; }
.lg-ph68 { font-size:12px; color:var(--text-caption); margin-top:2px; }
.lg-ph69 { display:flex; flex-wrap:wrap; gap:8px; }
.lg-ph70 { font-size:13px; flex:1; min-width:220px; line-height:1.5; }
.lg-ph71 { white-space:nowrap; }
.lg-ph72 { font-size:12.5px; margin-top:12px; padding:10px 12px; border-radius:8px; border:1px solid #F59E0B; background:rgba(245,158,11,.08); line-height:1.5; }
.lg-ph73 { font-size:12px; color:var(--text-caption); margin-top:10px; }
.lg-ph74 { margin-top:10px; }
.lg-ph75 { margin-left:auto; font-size:13px; padding:6px 12px; }
.lg-ph76 { display:flex; flex-wrap:wrap; gap:14px; font-size:11px; color:var(--text-secondary); margin:0 0 12px; }
.lg-ph77 { color:var(--text-secondary); opacity:.8; }
.lg-ph78 { font-size:10px; vertical-align:middle; background:rgba(240,192,64,.25); color:var(--yellow,#f0c040); border-radius:3px; padding:1px 4px; font-weight:700; letter-spacing:.04em; }
.lg-ph79 { font-size:10px; vertical-align:middle; background:rgba(220,60,60,.2); color:#dc3c3c; border-radius:3px; padding:1px 4px; font-weight:700; letter-spacing:.04em; }
.lg-ph80 { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.lg-ph81 { display:flex; gap:4px; }
.lg-ph82 { background:rgba(95,200,143,.7); }
.lg-ph83 { background:rgba(220,60,60,.6); }
.lg-ph84 { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-secondary); letter-spacing:.10em; text-transform:uppercase; margin-bottom:10px; }
.lg-ph85 { margin-top:12px; font-size:12px; color:var(--text-secondary); }
.lg-ph86 { margin-left:8px; }
.lg-ph87 { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.lg-ph88 { margin-left:6px; }
.lg-ph89 { margin-left:auto; display:flex; gap:8px; }
.lg-ph90 { font-size:12px; padding:5px 10px; }
.lg-ph91 { padding:32px 0; text-align:center; }
.lg-ph92 { font-size:28px; margin-bottom:10px; }
.lg-ph93 { font-weight:700; font-size:15px; margin-bottom:6px; }
.lg-ph94 { color:var(--text-secondary); font-size:13px; max-width:420px; margin:0 auto; }
.lg-ph95 { margin-bottom:12px; border-radius:6px; overflow:hidden; }
.lg-ph96 { display:flex; gap:16px; align-items:center; margin-bottom:14px; flex-wrap:wrap; font-size:11px; color:var(--text-secondary); }
.lg-ph97 { font-weight:700; }
.lg-ph98 { display:inline-block; width:10px; height:10px; border-radius:50%; background:#5fc88f; vertical-align:middle; margin-right:4px; }
.lg-ph99 { display:inline-block; width:10px; height:10px; border-radius:50%; background:#f0c040; vertical-align:middle; margin-right:4px; }
.lg-ph100 { display:inline-block; width:10px; height:10px; border-radius:50%; background:#e67830; vertical-align:middle; margin-right:4px; }
.lg-ph101 { display:inline-block; width:10px; height:10px; border-radius:50%; background:#dc3c3c; vertical-align:middle; margin-right:4px; }
.lg-ph102 { margin-left:8px; color:var(--text-secondary); }
.lg-ph103 { font-size:12px; color:var(--text-secondary); margin-bottom:12px; }
.lg-ph104 { font-size:12px; padding:5px 14px; }
.lg-ph105 { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:18px; padding:14px 0; border-bottom:1px solid var(--border); }
.lg-ph106 { margin-left:auto; text-align:right; }
.lg-ph107 { padding:24px 0; text-align:center; color:var(--text-secondary); font-size:13px; }
.lg-ph108 { font-size:22px; display:block; margin-bottom:8px; }
.lg-ph109 { margin-top:14px; font-size:11px; color:var(--text-secondary); }
.lg-ph110 { font-size:13px; margin-bottom:10px; }
.lg-ph111 { font-size:12px; color:var(--text-secondary); border-top:1px solid var(--border); padding-top:10px; margin-top:4px; }
.lg-ph112 { margin-top:16px; }
.lg-ph113 { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.lg-ph114 { margin-left:auto; padding:5px 10px; font-size:12px; border:1px solid var(--border); border-radius:6px; background:var(--input-bg,var(--card-bg)); color:var(--text); width:180px; }
.lg-ph115 { color:var(--text-secondary); font-size:13px; padding:20px 0; text-align:center; }
.lg-ph116 { max-width:min(860px,92vw); width:100%; padding:0; border-radius:12px; border:1px solid var(--border); background:var(--card-bg); color:var(--text); }
.lg-ph117 { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.lg-ph118 { font-family:var(--font-mono); font-size:13px; font-weight:700; }
.lg-ph119 { display:flex; gap:10px; align-items:center; }
.lg-ph120 { font-size:12px; padding:5px 12px; }
.lg-ph121 { background:none; border:none; color:var(--text-secondary); font-size:20px; cursor:pointer; line-height:1; }
.lg-ph122 { padding:16px 20px; overflow:auto; max-height:65vh; }
.lg-ph123 { margin:0; font-family:var(--font-mono); font-size:11.5px; line-height:1.6; white-space:pre-wrap; word-break:break-all; color:var(--text); }
.lg-ph124 { font-size:11px; margin-left:6px; }
.lg-ph125 { display:flex; gap:24px; flex-wrap:wrap; margin:14px 0; }
.lg-ph126 { color:var(--text-secondary); font-size:13px; line-height:1.6; }
.lg-ph127 { display:inline-block; margin-top:6px; }
.lg-ph128 { display:flex; gap:24px; flex-wrap:wrap; margin-bottom:16px; }
.lg-ph129 { font-size:13px; border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:14px; }
.lg-ph130 { margin:0 0 12px; }
.lg-ph131 { font-size:13px; }
.lg-ph132 { display:flex; gap:24px; flex-wrap:wrap; }
.lg-ph133 { margin:8px 0; gap:8px; align-items:center; flex-wrap:wrap; }
.lg-ph134 { font-size:13px; color:var(--text-secondary); min-width:100px; }
.lg-ph135 { font-size:13px; padding:5px 14px; }
.lg-ph136 { width:32px; padding:6px; }
.lg-ph137 { font-size:12px; color:var(--text-secondary); margin-bottom:6px; }
.lg-ph138 { margin-left:8px; font-size:11px; }
.lg-ph139 { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.lg-ph140 { padding:9px 15px; background:var(--yellow); color:var(--yellow-text); border:none; border-radius:6px; font-weight:600; cursor:pointer; font-family:inherit; }
.lg-ph141 { font-size:13px; opacity:.85; }
.lg-ph142 { gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.lg-ph143 { font-size:12px; font-weight:600; }
.lg-ph144 { font-size:12px; opacity:.7; }
.lg-ph145 { font-weight:600; font-size:14px; margin:2px 0 2px; }
.lg-ph146 { font-size:12px; color:var(--text-secondary); margin-bottom:10px; }
.lg-ph147 { margin-top:20px; }
.lg-ph148 { background:none; border:none; color:var(--text); font-weight:600; font-size:14px; cursor:pointer; padding:6px 0; display:flex; align-items:center; gap:6px; }
.lg-ph149 { display:inline-block; width:1em; }
.lg-ph150 { margin-left:4px; }
.lg-ph151 { margin-top:8px; }
.lg-ph152 { margin-bottom:16px; }
.lg-ph153 { margin-left:10px; }
.lg-ph154 { gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px; }
.lg-ph155 { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.lg-ph156 { margin-top:12px; }
.lg-ph157 { cursor:pointer; }
.lg-ph158 { margin-top:10px; font-size:12px; opacity:.6; }
.lg-ph159 { margin-top:14px; padding:14px 16px; border:1px solid var(--border); border-radius:10px; }
.lg-ph160 { font-weight:700; margin-bottom:8px; }
.lg-ph161 { margin-top:12px; padding:12px; border:1px solid var(--accent,#caa); border-radius:8px; }
.lg-ph162 { font-size:12px; opacity:.8; margin-bottom:6px; }
.lg-ph163 { word-break:break-all; display:block; margin-bottom:8px; }
.lg-ph164 { font-size:11px; vertical-align:middle; }
.lg-ph165 { margin-top:18px; padding:16px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-2); }
.lg-ph166 { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.lg-ph167 { font-size:15px; }
.lg-ph168 { margin-left:auto; font-size:12px; padding:5px 12px; }
.lg-ph169 { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:14px; }
.lg-ph170 { margin-bottom:8px; font-size:13px; }
.lg-ph171 { margin-bottom:12px; font-size:13px; }
.lg-ph172 { font-size:13px; margin-bottom:14px; }
.lg-ph173 { font-size:13px; margin-bottom:8px; }
.lg-ph174 { display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.lg-ph175 { flex:1; min-width:200px; padding:9px 12px; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:6px; color:var(--text); font-size:13px; font-family:inherit; }
.lg-ph176 { padding:9px 12px; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:6px; color:var(--text); font-size:13px; font-family:inherit; }
.lg-ph177 { font-size:13px; padding:9px 14px; }
.lg-ph178 { flex-basis:100%; }
.lg-ph179 { margin-top:18px; }
.lg-ph180 { margin:0 0 10px; font-size:15px; }
.lg-ph181 { flex:1; min-width:180px; padding:10px 12px; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:6px; color:var(--text); font-size:14px; font-family:inherit; }
.lg-ph182 { padding:10px 12px; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:6px; color:var(--text); font-size:14px; font-family:inherit; }
.lg-ph183 { padding:10px 14px; font-size:13px; }
.lg-ph184 { width:140px; padding:10px 12px; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:6px; color:var(--text); font-size:14px; font-family:inherit; }
.lg-ph185 { margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; }
.lg-ph186 { color:var(--text-secondary); }
.lg-ph187 { font-size:13px; padding:6px 12px; }
.lg-ph188 { text-align:right; }
.lg-ph189 { font-size:13px; padding:8px 14px; }
.lg-ph190 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lg-ph191 { margin-left:auto; font-size:13px; padding:8px 14px; }
.lg-ph192 { margin:0 0 6px; font-size:14px; }
.lg-ph193 { font-weight:400; color:var(--text-caption); }
.lg-ph194 { margin-top:14px; align-items:center; gap:12px; flex-wrap:wrap; }
.lg-ph195 { font-size:13px; padding:9px 14px; text-decoration:none; }
.lg-ph196 { margin-top:16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.lg-ph197 { display:flex; align-items:center; gap:10px; }
.lg-ph198 { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:14px; }
.lg-ph199 { display:flex; flex-direction:column; gap:4px; }
.lg-ph200 { padding:8px; border-radius:6px; border:1px solid var(--border); background:transparent; color:inherit; }
.lg-ph201 { padding:9px 14px; }
.lg-ph202 { display:flex; flex-wrap:wrap; gap:10px; }
.lg-ph203 { margin-top:14px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.lg-ph204 { padding:9px 12px; border:1px solid var(--border); border-radius:6px; background:var(--card-bg); color:var(--text); font-family:inherit; }
.lg-ph205 { margin-top:14px; padding:14px; border:1px solid var(--border); border-radius:8px; background:var(--card-bg); }
.lg-ph206 { font-weight:600; margin-bottom:6px; }
.lg-ph207 { display:block; word-break:break-all; padding:8px; background:var(--surface-2); border-radius:6px; font-size:12px; }
.lg-ph208 { display:grid; gap:12px; grid-template-columns:1fr 1fr; align-items:end; margin-bottom:18px; }
.lg-ph209 { grid-column:1/3; font-size:13px; }
.lg-ph210 { display:block; width:100%; margin-top:4px; padding:9px 12px; border:1px solid var(--border); border-radius:6px; background:var(--card-bg); color:var(--text); font-family:inherit; }
.lg-ph211 { grid-column:1/3; gap:12px; grid-template-columns:1fr 1fr; }
.lg-ph212 { opacity:.6; }
.lg-ph213 { grid-column:1/3; font-size:11px; opacity:.7; }
.lg-ph214 { display:block; margin-top:4px; font-size:11px; color:var(--text-secondary); }
.lg-ph215 { grid-column:1/3; font-size:13px; display:flex; align-items:flex-start; gap:8px; }
.lg-ph216 { margin-top:3px; }
.lg-ph217 { grid-column:1/3; justify-self:start; padding:10px 16px; background:var(--yellow); color:var(--yellow-text); border:none; border-radius:6px; font-weight:600; cursor:pointer; font-family:inherit; }
.lg-ph218 { align-items:center; margin-bottom:10px; }
.lg-ph219 { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-secondary,#AEBBD6); cursor:pointer; white-space:nowrap; }
.lg-ph220 { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.lg-ph221 { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.lg-ph222 { padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--card-bg); color:var(--text); font-family:inherit; }
.lg-ph223 { font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:6px; cursor:pointer; }
.lg-ph224 { margin-left:auto; font-size:12px; color:var(--text-secondary); }
.lg-ph225 { align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.lg-ph226 { display:flex; align-items:center; gap:8px; margin:0; cursor:pointer; }
.lg-ph227 { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px; }
.lg-ph228 { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.lg-ph229 { margin-left:auto; font-size:12px; opacity:0.6; align-self:center; }
.lg-ph230 { margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.lg-ph231 { margin:0 0 6px; }
.lg-ph232 { margin-left:8px; font-size:11px; font-weight:400; color:var(--text-caption); }
.lg-ph233 { margin:10px 0; padding:10px 12px; border:1px solid var(--border); border-radius:8px; max-height:220px; overflow:auto; font-size:11.5px; }
.lg-ph234 { margin:0; white-space:pre-wrap; }
.lg-ph235 { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.lg-ph236 { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.lg-ph237 { margin:0; flex:1; min-width:220px; }
.lg-ph238 { margin:0; flex:1; min-width:240px; }
.lg-ph239 { display:flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; }
.lg-ph240 { width:auto; }
.lg-ph241 { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.lg-ph242 { font-size:12px; font-weight:600; margin-bottom:6px; }
.lg-ph243 { font-size:11.5px; color:var(--text-caption); }
.lg-ph244 { margin:0; min-width:200px; }
.lg-ph245 { margin:0; flex:1; min-width:260px; }
.lg-ph246 { margin:0; min-width:160px; }
.lg-ph247 { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.lg-ph248 { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px; }
.lg-ph249 { margin:0 0 8px; font-size:13px; }
.lg-ph250 { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.lg-ph251 { display:block; margin-top:6px; color:var(--text-caption); }
.lg-ph252 { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.lg-ph253 { margin-top:10px; font-size:12.5px; }
.lg-ph254 { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
.lg-ph255 { padding:0; }
.lg-ph256 { margin-top:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; }
.lg-ph257 { user-select:all; word-break:break-all; display:block; margin-top:6px; }
.lg-ph258 { display:flex; gap:14px; flex-wrap:wrap; }
.lg-ph259 { font-weight:600; font-size:13px; margin-bottom:6px; }
.lg-ph260 { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-top:8px; }
.lg-ph261 { font-size:13px; color:var(--text-secondary); line-height:1.55; margin:0 0 14px; }
.lg-ph262 { display:flex; gap:10px; flex-wrap:wrap; }
.lg-ph263 { font-weight:600; color:var(--text); white-space:nowrap; }
.lg-ph264 { margin:0; font-size:13.5px; line-height:1.6; }
.lg-ph265 { text-decoration:none; margin-right:8px; }
.lg-ph266 { text-decoration:none; }
.lg-ph267 { padding-top:0; }
.lg-ph268 { width:120px; padding:9px 11px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2,var(--card)); color:var(--text); font-size:14px; }
.lg-ph269 { color:var(--text-secondary); font-size:13px; }
.lg-ph270 { display:flex; align-items:center; gap:10px; cursor:pointer; }
.lg-ph271 { margin-left:8px; font-size:12px; opacity:.7; }
.lg-ph272 { padding-top:10px; }
.lg-ph273 { text-align:center; margin-bottom:8px; }
.lg-ph274 { font-size:12px; word-break:break-all; opacity:.75; }
.lg-ph275 { display:block; margin-top:4px; }
.lg-ph276 { margin:0 0 10px; }
.lg-ph277 { max-width:280px; }
.lg-ph278 { color:#e5484d; }
.lg-ph279 { font-weight:600; margin:0 0 6px; }
.lg-ph280 { font-size:12px; opacity:.75; margin:0 0 8px; }
.lg-ph281 { background:var(--surface-2); color:var(--text); padding:10px; border-radius:6px; font-size:13px; white-space:pre-wrap; }
.lg-ph282 { margin-top:18px; border-top:1px solid var(--border,#2a2a2a); padding-top:14px; }
.lg-ph283 { font-size:12px; opacity:.7; margin:6px 0 0; }
.lg-ph284 { padding:6px 2px 2px; }
.lg-ph285 { font-size:12.5px; color:var(--text-secondary); line-height:1.55; margin:2px 0 12px; }
.lg-ph286 { margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lg-ph287 { flex:1; min-width:180px; padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:13px; }
.lg-ph288 { display:block; margin-top:8px; }
.lg-ph289 { display:flex; flex-direction:column; gap:11px; max-width:560px; }
.lg-ph290 { display:flex; flex-direction:column; gap:11px; }
.lg-ph291 { flex-direction:column; gap:11px; }
.lg-ph292 { font-size:11.5px; opacity:.7; line-height:1.5; padding:9px 11px; border:1px solid var(--border); border-radius:7px; background:var(--surface-2); }
.lg-ph293 { opacity:.6; font-weight:400; }
.lg-ph294 { padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:12px; font-family:monospace; resize:vertical; }
.lg-ph295 { padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:13px; font-family:monospace; resize:vertical; }
.lg-ph296 { font-size:11px; opacity:.6; margin:-4px 0 0; }
.lg-ph297 { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; }
.lg-ph298 { font-size:11.5px; opacity:.7; margin:-4px 0 0; }
.lg-ph299 { margin-top:2px; }
.lg-ph300 { font-size:12.5px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.lg-ph301 { display:flex; flex-direction:column; gap:6px; font-size:13px; }
.lg-ph302 { margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lg-ph303 { margin-left:2px; }
.lg-ph304 { font-size:11.5px; opacity:.65; margin:10px 0 0; }
.lg-ph305 { margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
.lg-ph306 { font-size:13.5px; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
.lg-ph307 { font-size:12.5px; color:var(--text-secondary); line-height:1.55; margin:2px 0 12px; max-width:560px; }
.lg-ph308 { cursor:text; }
.lg-ph309 { font-size:11.5px; opacity:.7; margin:0; }
.lg-ph310 { opacity:.6; font-weight:400; color:#f5a623; }
.lg-ph311 { cursor:text; font-family:monospace; }
.lg-ph312 { font-weight:600; }
.lg-ph313 { margin-top:12px; border:1px solid var(--ok,#34d399); border-radius:9px; padding:12px 14px; background:rgba(52,211,153,.08); }
.lg-ph314 { font-size:12px; color:var(--text-secondary); margin:0 0 8px; }
.lg-ph315 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.lg-ph316 { flex:1; min-width:220px; word-break:break-all; background:var(--surface-2); color:var(--text); padding:8px 10px; border-radius:6px; font-size:12.5px; }
.lg-ph317 { flex:1; min-width:200px; padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:13px; }
.lg-ph318 { padding:8px 10px; border-radius:7px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:13px; }
.lg-ph319 { gap:8px; margin-bottom:14px; }
.lg-ph320 { opacity:.7; font-size:12.5px; margin-top:12px; }
.lg-ph321 { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.lg-ph322 { min-width:170px; padding:8px 10px; border-radius:8px; border:1px solid var(--border,#cbd5e1); background:transparent; color:inherit; font:inherit; }
.lg-ph323 { flex:1; min-width:200px; padding:8px 10px; border-radius:8px; border:1px solid var(--border,#cbd5e1); background:transparent; color:inherit; font:inherit; }
.lg-ph324 { padding-top:8px; font-size:13px; }
.lg-ph325 { max-width:420px; }
.lg-ph326 { margin-top:6px; max-width:none; }
.lg-ph327 { justify-content:space-between; }
.lg-ph328 { margin-top:12px; font-size:12px; }
.lg-ph329 { max-width:660px; }
.lg-ph330 { max-width:520px; }
.lg-ph331 { opacity:.7; }
.lg-ph332 { opacity:.9; margin-top:2px; padding:8px 10px; border-left:3px solid var(--warn,#e0b341); background:rgba(224,179,65,.08); font-size:12px; line-height:1.5; }
.lg-ph333 { max-width:640px; }
.lg-ph334 { margin-top:14px; max-height:55vh; overflow-y:auto; }
.lg-ph335 { max-width:560px; }
.lg-ph336 { font-size:12.5px; line-height:1.6; padding:10px 12px; border-radius:8px; background:var(--panel-bg,rgba(255,255,255,.03)); border:1px solid var(--border); margin-bottom:14px; }
.lg-ph337 { opacity:.85; }
.lg-ph338 { font-size:11px; word-break:break-all; }
.lg-ph339 { display:flex; gap:8px; align-items:flex-start; font-weight:400; margin-top:4px; }
.lg-ph340 { display:flex; gap:8px; align-items:flex-start; font-weight:400; margin-top:8px; }
.lg-ph341 { margin-top:14px; font-family:var(--mono, monospace); font-size:13px; }
.lg-ph342 { margin-top:16px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2,var(--card)); }
.lg-ph343 { font-weight:600; font-size:13.5px; margin-bottom:6px; }
.lg-ph344 { font-size:12.5px; color:var(--text-secondary); line-height:1.5; margin-bottom:10px; }
.lg-ph345 { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12.5px; color:var(--text-secondary); cursor:pointer; }
.lg-ph346 { opacity:0.7; }

/* phase-5 de-inline (app-main.js) */
.lg-pm1 { color:var(--ok); font-weight:700; }
.lg-pm2 { color:var(--text-secondary); }
.lg-pm3 { margin-left:auto; font-size:12px; }
.lg-pm4 { font-size:10px; color:var(--text-secondary); }
.lg-pm5 { white-space:normal; }
.lg-pm6 { text-align:right; white-space:nowrap; }
.lg-pm7 { color:var(--text-secondary); margin-left:8px; }
.lg-pm8 { margin-top:10px; font-size:12.5px; color:var(--text); }
.lg-pm9 { color:var(--text); }
.lg-pm10 { margin-top:10px; font-size:12.5px; color:var(--text-secondary); }
.lg-pm11 { opacity:.8; }
.lg-pm12 { font-size:12px; }
.lg-pm13 { opacity:.6; }
.lg-pm14 { opacity:.55; }
.lg-pm15 { font-size:10px; }
.lg-pm16 { font-size:10px; opacity:.7; }
.lg-pm17 { font-size:11px; padding:4px 10px; }
.lg-pm18 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid var(--border); }
.lg-pm19 { flex:1; min-width:200px; }
.lg-pm20 { font-size:13px; color:var(--text); font-weight:600; }
.lg-pm21 { font-size:11.5px; color:var(--text-secondary); }
.lg-pm22 { max-height:320px; overflow-y:auto; }
.lg-pm23 { padding:8px 0; }
.lg-pm24 { margin-top:10px; font-size:12px; }
.lg-pm25 { max-height:280px; overflow-y:auto; margin-top:6px; border-top:1px solid var(--border); }
.lg-pm26 { flex:1; min-width:180px; }
.lg-pm27 { color:var(--accent); font-weight:600; }
.lg-pm28 { font-size:11px; color:var(--text-secondary); font-weight:400; }
.lg-pm29 { opacity:.65; }
.lg-pm30 { margin-left:auto; }
.lg-pm31 { min-width:96px; }
.lg-pm32 { flex:1; }
.lg-pm33 { font-weight:600; font-size:13.5px; }
.lg-pm34 { font-size:12.5px; color:var(--text-secondary); margin-top:3px; line-height:1.5; }
.lg-pm35 { white-space:nowrap; }
.lg-pm36 { padding:4px 9px; }
.lg-pm37 { font-size:26px; font-weight:700; }
.lg-pm38 { font-size:13px; color:var(--text-secondary); }
.lg-pm39 { font-size:13px; }
.lg-pm40 { display:flex; align-items:center; gap:10px; font-size:12.5px; margin-bottom:6px; }
.lg-pm41 { width:110px; flex:none; }
.lg-pm42 { font-size:11.5px; }
.lg-pm43 { width:48px; flex:none; text-align:right; white-space:nowrap; }  /* the Fix link and its empty-row spacer share this slot, so every bar ends at the same x */
.lg-pm44 { font-size:12px; color:var(--text-caption); margin-bottom:8px; }
.lg-pm45 { opacity:.75; min-width:140px; }
.lg-pm46 { text-align:right; }
.lg-pm47 { font-weight:600; border-top:1px solid var(--border-bright,rgba(255,255,255,.18)); }
.lg-pm48 { color:var(--text-secondary); font-weight:400; }
.lg-pm49 { font-size:12px; padding:5px 12px; }
.lg-pm50 { font-size:22px; font-weight:600; }
.lg-pm51 { font-size:12px; color:var(--text-secondary); }
.lg-pm52 { margin:6px 0 0; padding-left:18px; }
.lg-pm53 { margin-top:4px; color:var(--text-secondary); }
.lg-pm54 { width:100%; border-collapse:collapse; font-size:13px; }
.lg-pm55 { text-align:left; color:var(--text-secondary); border-bottom:1px solid var(--border); }
.lg-pm56 { padding:6px 8px; }
.lg-pm57 { border-bottom:1px solid var(--border); }
.lg-pm58 { color:var(--text-secondary); font-size:12px; }
.lg-pm59 { padding:6px 8px; color:var(--text-secondary); }
.lg-pm60 { padding:6px 8px; white-space:nowrap; }
.lg-pm61 { font-size:11px; padding:3px 8px; }
.lg-pm62 { flex-basis:100%; font-size:12px; color:var(--text-secondary); margin-top:4px; }
.lg-pm63 { color:var(--text-secondary,#AEBBD6); font-size:11px; }
.lg-pm64 { color:var(--yellow); border-color:var(--yellow); font-size:11px; vertical-align:middle; }
.lg-pm65 { opacity:.5; font-size:12px; }
.lg-pm66 { color:var(--crit,#F26B62); font-size:11px; max-width:280px; }
.lg-pm67 { color:var(--ok,#34D399); }
.lg-pm68 { color:var(--crit,#F26B62); }
.lg-pm69 { color:var(--text-secondary,#AEBBD6); }
.lg-pm70 { color:var(--crit,#F26B62); font-weight:600; }
.lg-pm71 { font-size:10px; margin-right:4px; background:var(--card-bg); border:1px solid var(--border); }
.lg-pm72 { font-size:11px; padding:3px 8px; margin:1px 3px 1px 0; }
.lg-pm73 { padding:8px 10px; width:26px; }
.lg-pm74 { padding:8px 10px; }
.lg-pm75 { padding:8px 10px; color:var(--text-secondary); }
.lg-pm76 { padding:8px 10px; white-space:nowrap; }
.lg-pm77 { width:100%; border-collapse:collapse; }
.lg-pm78 { text-align:left; }
.lg-pm79 { font-size:11px; opacity:.6; }
.lg-pm80 { opacity:.6; font-size:12px; }
.lg-pm81 { color:var(--crit,#F26B62); font-size:11px; }
.lg-pm82 { font-size:12px; color:var(--crit,#F26B62); }
.lg-pm83 { font-size:11px; opacity:.7; }
.lg-pm84 { font-size:12.5px; }
.lg-pm85 { font-size:12px; color:var(--text-secondary,#AEBBD6); }
.lg-pm86 { font-size:11px; }
.lg-pm87 { font-size:12px; line-height:1.5; padding:8px 10px; border-left:3px solid var(--warn,#e0b341); background:rgba(224,179,65,.08); margin-bottom:6px; }
.lg-pm88 { color:var(--text-secondary,#AEBBD6); border-color:var(--text-secondary,#AEBBD6); font-size:10px; }
.lg-pm89 { text-align:right; white-space:nowrap; vertical-align:top; }
.lg-pm90 { font-size:12.5px; line-height:1.45; }
.lg-pm91 { color:var(--text-crit,#e5484d); font-weight:600; }
.lg-pm92 { color:var(--yellow); font-weight:600; }
.lg-pm93 { opacity:.62; }
.lg-pm94 { color:var(--crit); }
.lg-pm95 { color:var(--text-caption); }
.lg-pm96 { color:var(--bad,#c62828); font-weight:600; }
.lg-pm97 { flex:1; min-width:260px; }
.lg-pm98 { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
.lg-pm99 { padding:2px 0; }
.lg-pm100 { font-size:11px; padding:2px 8px; }
.lg-pm101 { cursor:help; }
.lg-pm102 { white-space:normal; max-width:340px; }
.lg-pm103 { display:flex; gap:8px; align-items:center; margin:6px 0; font-family:Menlo,Consolas,monospace; font-size:12px; padding:8px 12px; border:1px solid var(--border); border-radius:4px; background:rgba(87,168,232,.04); }
.lg-pm104 { flex:1; word-break:break-all; }
.lg-pm105 { color:var(--text-crit); }
.lg-pm106 { color:var(--text-secondary); font-size:.85em; }
.lg-pm107 { margin-top:8px; }
.lg-pm108 { padding:2px 6px; }
.lg-pm109 { padding:2px 6px; color:var(--text-secondary); font-size:.85em; }
.lg-pm110 { border:1px solid var(--border); border-radius:8px; padding:10px; }
.lg-pm111 { margin-bottom:6px; }
.lg-pm112 { border-collapse:collapse; margin-bottom:8px; }
.lg-pm113 { font-family:monospace; font-size:.82em; background:var(--bg-subtle,rgba(0,0,0,.04)); padding:6px 8px; border-radius:6px; word-break:break-all; }
.lg-pm114 { font-size:11px; padding:2px 7px; margin-left:8px; }
.lg-pm115 { margin:8px 0 0; padding-left:18px; color:var(--text-secondary); font-size:.82em; }
.lg-pm116 { font-size:11px; font-weight:600; cursor:help; }
.lg-pm117 { color:var(--text-secondary); font-size:13px; }
.lg-pm118 { color:var(--text-secondary); font-size:13px; margin-bottom:8px; }
.lg-pm119 { width:55%; max-width:320px; margin-right:8px; padding:6px 8px; }
.lg-pm120 { font-weight:700; }
.lg-pm121 { margin-right:6px; display:inline-block; }
.lg-pm122 { display:inline-block; width:14px; }
.lg-pm123 { font-size:11px; color:var(--text-secondary); }
.lg-pm124 { width:32px; padding:6px; text-align:center; }
.lg-pm125 { color:var(--risk-red); font-weight:600; }
.lg-pm126 { opacity:.5; }
.lg-pm127 { font-size:10px; opacity:.5; }
.lg-pm128 { padding:3px 10px; font-size:12px; }
.lg-pm129 { opacity:.4; font-size:12px; }
.lg-pm130 { font-size:12.5px; color:var(--text-secondary); }
.lg-pm131 { color:var(--text-secondary); font-size:11px; }
.lg-pm132 { opacity:.4; }
.lg-pm133 { color:#46a758; }
.lg-pm134 { display:flex; gap:8px; margin:6px 0; font-size:13px; }
.lg-pm135 { flex:0 0 auto; }
.lg-pm136 { font-weight:600; }
.lg-pm137 { opacity:.7; }
.lg-pm138 { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.lg-pm139 { font-weight:600; font-size:15px; }
.lg-pm140 { opacity:.55; font-size:12px; margin-left:6px; }
.lg-pm141 { opacity:.7; font-size:12.5px; margin:4px 0 10px; }
.lg-pm142 { height:6px; border-radius:3px; background:var(--border); overflow:hidden; margin-bottom:8px; }
.lg-pm143 { list-style:none; margin:0; padding:0; }
.lg-pm144 { color:var(--risk-red); font-weight:600; margin-left:10px; }
.lg-pm145 { font-weight:600; color:var(--text); }
.lg-pm146 { padding:3px 10px; font-size:12px; color:#e5484d; }
.lg-pm147 { opacity:.6; font-size:11px; }
.lg-pm148 { margin-bottom:12px; }
.lg-pm149 { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono,monospace); font-size:12px; }
.lg-pm150 { min-width:150px; max-width:260px; }
.lg-pm151 { margin:0; }
.lg-pm152 { padding:2px 9px; font-size:11px; margin-left:6px; }
.lg-pm153 { font-family:var(--mono,monospace); font-size:12px; word-break:break-all; }
.lg-pm154 { margin-bottom:8px; }
.lg-pm155 { margin-bottom:8px; color:var(--risk-red); }
.lg-pm156 { margin-bottom:10px; }
.lg-pm157 { margin:0 0 10px 18px; padding:0; line-height:1.5; }
.lg-pm158 { margin-bottom:8px; color:var(--text-caption); }
.lg-pm159 { margin-bottom:4px; font-weight:600; }
.lg-pm160 { margin:0; padding:10px 12px; border:1px solid var(--border); border-radius:8px; overflow:auto; font-family:var(--mono,monospace); font-size:11.5px; line-height:1.45; max-height:230px; }
.lg-pm161 { padding:3px 10px; font-size:12px; color:#f5a524; }
.lg-pm162 { font-family:var(--mono,monospace); font-size:12px; }
.lg-pm163 { font-size:10px; margin-right:6px; }
.lg-pm164 { font-size:12px; padding:4px 10px; }
.lg-pm165 { color:var(--ok); }
.lg-pm166 { white-space:pre-wrap; word-break:break-all; font-size:12px; padding:8px; background:rgba(0,0,0,.04); border-radius:4px; margin:6px 0; }
.lg-pm167 { margin:14px 0; padding:14px; border:1px solid var(--border); border-radius:6px; }
.lg-pm168 { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.lg-pm169 { font-family:Menlo,Consolas,monospace; font-weight:600; font-size:14px; }
.lg-pm170 { font-size:13px; line-height:1.6; }
.lg-pm171 { width:100%; height:auto; display:block; }
.lg-pm172 { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg-pm173 { font-family:var(--font-mono); font-size:11px; margin-left:6px; min-width:30px; }
.lg-pm174 { font-family:var(--font-mono); font-size:11px; }
.lg-pm175 { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-secondary); letter-spacing:.10em; text-transform:uppercase; margin-bottom:8px; }
.lg-pm176 { display:flex; flex-wrap:wrap; gap:8px; }
.lg-pm177 { display:flex; gap:8px; align-items:center; margin:4px 0; }
.lg-pm178 { flex:1; word-break:break-all; font-size:11px; padding:6px 10px; border:1px solid var(--border); border-radius:4px; background:rgba(87,168,232,.04); }
.lg-pm179 { font-size:11px; padding:4px 10px; white-space:nowrap; }
.lg-pm180 { font-weight:700; font-size:13px; margin-bottom:10px; }
.lg-pm181 { margin:0; padding-left:20px; font-size:13px; line-height:1.6; color:var(--text-secondary); }
.lg-pm182 { margin-bottom:4px; }
.lg-pm183 { margin-top:12px; padding:8px 12px; border-radius:4px; background:rgba(87,168,232,.06); font-size:11px; color:var(--text-secondary); }
.lg-pm184 { margin-top:8px; font-size:11px; color:var(--ok); min-height:14px; }
.lg-pm185 { font-size:11px; font-family:var(--font-mono); white-space:nowrap; }
.lg-pm186 { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-secondary); letter-spacing:.10em; text-transform:uppercase; }
.lg-pm187 { width:100%; }
.lg-pm188 { text-align:right; font-family:var(--font-mono); font-size:12px; color:var(--risk-red,#e5484d); }
.lg-pm189 { display:flex; gap:24px; flex-wrap:wrap; }
.lg-pm190 { font-family:var(--font-mono); font-size:12px; color:var(--ok); }
.lg-pm191 { margin:8px 0; }
.lg-pm192 { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-secondary); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.lg-pm193 { display:flex; gap:8px; align-items:center; }
.lg-pm194 { color:var(--text-secondary); line-height:1.6; margin-top:0; }
.lg-pm195 { margin-top:6px; font-size:11px; color:var(--ok); min-height:14px; }
.lg-pm196 { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lg-pm197 { font-size:12px; min-height:14px; }
.lg-pm198 { font-size:26px; font-weight:700; color:var(--risk-red,#e5484d); }
.lg-pm199 { font-size:11px; font-family:var(--font-mono); }
.lg-pm200 { font-size:11px; font-family:var(--font-mono); word-break:break-all; }
.lg-pm201 { font-family:var(--font-mono); font-size:12px; }
.lg-pm202 { width:100%; height:auto; display:block; border-radius:6px; }
.lg-pm203 { font-size:13px; white-space:nowrap; }
.lg-pm204 { color:var(--text-secondary); font-size:10px; font-family:var(--font-mono); }
.lg-pm205 { color:var(--crit,#dc3c3c); }
.lg-pm206 { display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--border); }
.lg-pm207 { flex:1; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-pm208 { font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); }
.lg-pm209 { font-family:var(--font-mono); font-size:12px; min-width:64px; text-align:right; }
.lg-pm210, .cert-table td.lg-pm210 { max-width:260px; white-space:normal; }
.lg-pm211 { font-weight:400; color:var(--text-secondary); white-space:nowrap; }
.lg-pm212 { font-size:12px; margin-top:2px; }
.lg-pm213 { display:inline-block; max-width:160px; vertical-align:bottom; }
.lg-pm214 { font-weight:400; color:var(--text-secondary); font-size:12px; }
.lg-pm215 { display:flex; align-items:center; gap:8px; margin:4px 0; }
.lg-pm216 { margin:2px 4px 2px 0; }
.lg-pm217 { width:26px; }
.lg-pm218 { opacity:.5; font-size:11px; }
.lg-pm219 { font-size:13px; font-weight:600; }
.lg-pm220 { flex:1; min-width:220px; }
.lg-pm221 { font-size:11.5px; color:var(--text-caption); }
.lg-pm222 { padding:3px 0; }
.lg-pm223 { font-size:11.5px; margin-top:8px; }
.lg-pm224 { font-size:12px; color:var(--text-caption); }
.lg-pm225 { font-size:10.5px; color:var(--text-caption); border:1px solid var(--border); border-radius:4px; padding:1px 5px; }
.lg-pm226 { padding:2px 8px; font-size:11px; margin-left:6px; }
.lg-pm227 { color:var(--bad,#dc2626); font-size:11px; }
.lg-pm228 { font-size:12.5px; color:var(--bad,#dc2626); }
.lg-pm229 { font-size:12.5px; color:var(--good,#16a34a); }
.lg-pm230 { margin:6px 0 2px; font-size:12px; }
.lg-pm231 { font-size:12px; margin-left:4px; }
.lg-pm232 { font-size:11.5px; color:var(--warn,#e0a23a); margin-top:6px; }
.lg-pm233 { font-size:11px; color:var(--text-caption); margin-top:6px; }
.lg-pm234 { margin-top:9px; }
.lg-pm235 { font-weight:400; font-size:11px; color:var(--text-caption); }
.lg-pm236 { font-size:12px; color:var(--text-caption); margin:4px 0 8px; }
.lg-pm237 { color:var(--bad,#dc2626); }
.lg-pm238 { color:var(--good,#16a34a); }

/* ════════════════════════════════════════════════════════════════════════
   TRUST SLATE v3 (2026-08-09) — THE token source.

   This block is authoritative: it declares the v3 palette, then aliases
   every legacy var name onto it. It sits at the END of the sheet on
   purpose — equal-specificity :root / [data-theme] declarations resolve
   by source order.

   Phase-C status (corrected 2026-08-29 — the note below had gone stale
   and pointed at work that no longer exists): the legacy TOKEN halves are
   ALREADY GONE. This is the only :root in the sheet; the "base :root",
   the PREMIUM v3/v4 token sets, TRUST SLATE v2\x27s token set and the
   "sidebar :root at ~2358" no longer declare anything (verified: zero
   --var declarations above this block). What REMAINS of Phase C is the
   era RULE blocks — PREMIUM v3 (~1480), PREMIUM v4 (~1684), TRUST SLATE
   v2 (~1719) — which are live styling keyed to selectors, not superseded
   aliases.

   DO NOT DELETE THEM. Owner decision 2026-08-29, after the question was
   settled by measurement rather than by which document you read: those
   three blocks run to the current-era block below and are ~1,110 lines /
   815 rules, about 28% of this file, and 686 of their 758 distinct
   selectors appear NOWHERE ELSE in the sheet. Deleting them removes
   styling nothing else provides, this-file-only selectors included:
   *::before / *::after, .acct (top-bar account chip), #top-issues-list,
   and all four #*-bulkbar selection bars. A handoff had described them as
   "dead" and that word was the entire case for the work; it was wrong.
   The only defensible version, if it is ever reopened, is the ~72
   selectors that ARE redefined later, deleted one at a time and only
   where a specificity check proves the later rule wins, gated on an
   automated computed-style diff across 25 routes x 2 themes — worth about
   2% of the file.

   The <14px type tail was AUDITED 2026-08-29 rather than left as a vague
   debt: a 10px TEXT floor is now applied (the six sub-10px text
   declarations were raised; the 8px .sb-caret is a glyph and exempt).
   Everything from 10px up was classified before being left: it is
   deliberate typographic furniture — mono badges, uppercase letterspaced
   micro-labels, chart scales/axis notes, palette kind-tags — nearly all
   at weight 600+, which preserves legibility at that size. Re-scaling it
   further is a DESIGN decision, not a legibility defect, and belongs to
   the same owner visual pass as the era-rule deletion above.

   Rules this block enforces:
   · Gold appears in exactly two places per screen: the rail identity
     thread and ONE .btn-gold/.btn-primary action. Never states, badges,
     nav accents, borders or scores.
   · Semantic colour is diagnostic (severity-derived), never decorative.
   · No neutral greys — every neutral carries the ~212° blue hue.
   · Inter for prose; JetBrains Mono (self-hosted) for every measured
     value. `.mono` is the one-import utility for rule 4.
   · One elevation level: cards sit on canvas via --card-shadow; nothing
     stacks a shadow on a card.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (variable, latin subset — same files the old
      Google hotlink served, so glyph coverage is unchanged) ─────────── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/space-grotesk-normal-300-700-latin.woff2?v=20260922b') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/static/fonts/dm-sans-normal-100-1000-latin.woff2?v=20260922b') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/dm-mono-normal-400-latin.woff2?v=20260922b') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/static/fonts/dm-mono-normal-500-latin.woff2?v=20260922b') format('woff2');
}

/* ── Tokens: three tiers (Trust Slate: Chrome, 2026-08-27) ──────────────
   Tier 1 — spec-named canonical tokens (chrome / canvas / ink / gold /
   viz). Tier 2 — the v3 names (--ink-1, --line, --crit, --rail-*, …)
   re-pointed as aliases so every v3-era rule keeps resolving. Tier 3 —
   the pre-v3 legacy alias table, unchanged, chaining through v3.
   Chrome is THEME-INVARIANT: the frame is identical in light and dark
   (Halo 2026-09-22: the frame is skyqon.com's hero navy #03090F with a
   cyan accent; the light canvas keeps its print-audited ink and viz tokens
   — only info-blue moved to the Halo link blue, mirrored in pdf_theme.py) (the same decision as the old "rail is ink in both themes").
   Light values are the Chrome-spec block verbatim, except where a spec
   value failed its own contrast floor — each deviation is commented,
   following the v3 "deepened from spec for AA" precedent. */
:root {
  /* Chrome (frame — theme-invariant) */
  /* The chrome is built from the logo blue (#3068B0 in skyqon-logo-2026.png),
     not black (2026-10-06, owner: "match the logo, it need not be black").
     Same values in both themes — the frame never flips. */
  --chrome-900: #0F2A4F;   /* rail + top bar background: logo blue at ~25% lightness; white 12.6:1 */
  --chrome-800: #163A68;   /* wells (search, account chip), hover, tenant card */
  --chrome-600: #1E4F8C;   /* rail active-row fill */
  --chrome-500: #2F68B2;   /* the logo blue itself: avatar, badge, workspace initials */
  --chrome-on: #FFFFFF;
  --chrome-on-muted: #D3E0EF;  /* near-white rail text: 10.7:1 on chrome-900, 8.5:1 on chrome-800, 6.1:1 on chrome-600 (owner 2026-10-13) */
  --chrome-hair: #1C3F6E;
  --chrome-ok: #9CCB8C;    /* state colour that must read on chrome (freshness dot) */
  --chrome-warn: #ECA96B;  /* state colour that must read on chrome (rail meter at cap); orange — the rail's gold link may sit beside it */
  --chrome-crit: #F0A296;  /* state colour that must read on chrome (nav badges) */

  /* Canvas (dark) — indigo-tinted so canvas and chrome share a hue axis */
  --canvas: #FFFFFF;         /* spec: the canvas reads as white paper inside the chrome */
  --surface: #FFFFFF;
  --surface-sunken: #F6F7FA;
  --border: #E2E5EC;
  --border-strong: #C8CDD8;
  --tint-info: #EDF5FF;

  /* Ink (dark) */
  --ink-900: #14161C;
  --ink-700: #1C2637;
  --ink-500: #2F3A4D;
  --ink-300: #98A0B0;   /* disabled + hairlines ONLY (2.6:1) */

  /* Brand */
  --gold: #B98A22;      /* mark + the ONE primary action; 3.1:1 — never as text */
  --gold-hover: #A2761A;
  --gold-on: #1A1204;

  /* Viz — diagnostic, never decorative. In dark the fill values are
     already AA as text, so -text == fill; light deepens them. */
  --viz-critical: #A34A38;  --viz-critical-text: #A34A38;  /* 5.8:1 — its own text variant */
  --viz-warn: #B87333;      /* spec #BFA23F is 2.5:1 AND reads as gold — re-hued to copper, 3.8:1 */
  --viz-ok: #6F9A5E;        --viz-ok-text: #41703A;        /* fill 3.3:1 · text 5.8:1 */
  --viz-neutral: #8A93A8;   --viz-neutral-text: #5D6675;   /* fill 3.1:1 · text 5.8:1 */
  --viz-info: #3069B3;      --viz-info-text: #3069B3;      /* 6.8:1 */
  --blue-hi: #255A9E;

  /* Washes / boundaries (dark: translucent over surface) */
  --crit-wash: #F6ECE9;  --crit-bd: #E5C7BF;
  --warn-wash: #F9EFE2;  --warn-bd: #EAD7BC;
  --ok-wash:   #ECF3E9;  --ok-bd:   #CFDFC8;
  --unk-wash:  #EFF1F5;  --unk-bd:  #D6DBE4;
  --blue-bd: #BFD3F7;

  --card-shadow: 0 1px 2px rgba(16,24,40,.05);   /* spec: one quiet elevation level */
  --pop-shadow: 0 1px 2px rgba(16,24,40,.06), 0 18px 40px -12px rgba(16,24,40,.18);
  /* Raised surfaces (2026-10-13 premium pass): the page behind the cards is a
     cool off-white so white cards lift off it; --surface/--canvas stay as they
     are because the PDFs and the shared sheet mirror them. */
  --app-canvas: #F4F6FA;
  --surface-raised: #FFFFFF;
  --raised-bd: var(--border);
  --raised-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px -16px rgba(16,24,40,.16);

  /* Shape — card/chip/tile 4 (Chrome spec) · control 6 (4px buttons read harsh) */
  --radius-ctl: 10px;
  --radius-card: 14px;
  --radius-chip: 8px;
  --radius-tile: 12px;
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px;

  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── Tier 2: v3 names → canonical ─────────────────────────────────── */
  --surface-2: var(--surface-sunken);
  --track: var(--surface-sunken);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --ink-1: var(--ink-900);
  --ink-2: var(--ink-700);
  --ink-3: var(--ink-500);
  --blue: var(--viz-info);
  --blue-wash: var(--tint-info);
  --gold-fill: #FCCE19;          /* logo yellow — the one primary action, both themes (ink 11.9:1 on it) */
  --cta-on: #03090F;             /* dark ink on the yellow CTA, both themes */
  --cta: var(--gold-fill);
  --cta-hover: #FDD84A;          /* logo yellow, lifted */
  /* Text roles get the AA-safe variants; fill-only selectors (chart
     segments, dots, meters) reference --viz-* directly. */
  --crit: var(--viz-critical-text);
  --warn: var(--viz-warn-text);
  --ok:   var(--viz-ok-text);
  --unk:  var(--viz-neutral-text);

  /* Rail → chrome */
  --rail-bg: var(--chrome-900);
  --rail-fg: var(--chrome-on);
  --rail-muted: var(--chrome-on-muted);
  --rail-faint: var(--chrome-on-muted);
  --rail-hair: var(--chrome-hair);
  --rail-hover: var(--chrome-800);
  --rail-active-bg: var(--chrome-600);
  --rail-active-fg: var(--chrome-on);
  --rail-accent: #F8D018;   /* the logo yellow — on the chrome it marks the active row and nothing else */
  --rail-card: var(--chrome-800);

  /* ── Tier 3: legacy alias table (79-name inventory, 2026-08-09) ────── */
  --navy: var(--canvas);
  --canvas-top: var(--canvas);
  --canvas-bot: var(--canvas);
  --navy-2: var(--surface-2);
  --surface-sub: var(--surface-2);
  --glass: var(--surface-2);
  --bg-subtle: var(--surface-2);
  --hover-bg: var(--surface-2);
  --input-bg: var(--surface-2);
  --card-bg: var(--surface);
  --card: var(--surface);
  --panel-bg: var(--surface);
  --line-soft: var(--line);
  --card-bd: var(--line);
  --border-bright: var(--line-strong);
  --card-bd-hover: var(--line-strong);
  --text: var(--ink-1);
  --text-1: var(--ink-1);
  --text-primary: var(--ink-1);
  --text-secondary: var(--ink-2);
  --text-2: var(--ink-2);
  --text-caption: var(--ink-3);
  --text-3: var(--ink-3);
  --text-muted: var(--ink-3);
  --crit-bg: var(--crit-wash);
  --warn-bg: var(--warn-wash);
  --ok-bg: var(--ok-wash);
  --blue-bg: var(--blue-wash);
  --bad: var(--crit);
  --danger: var(--crit);
  --risk-red: var(--viz-critical);
  --text-crit: var(--crit);
  --warn-strong: var(--warn);
  --warn-bold: var(--warn);
  --risk-high: var(--viz-warn);
  --risk-med: var(--viz-warn);
  --good: var(--ok);
  --risk-low: var(--viz-ok);
  --neutral: var(--unk);
  --neutral-bg: var(--unk-wash);
  --neutral-bd: var(--unk-bd);
  /* Gold discipline: the old yellow accents (scrollbar, active tabs,
     eyebrows, focus tints, checkbox accent) all become system blue. Gold
     is applied explicitly, only by identity chrome + .btn-gold. */
  --yellow: var(--blue);
  --yellow-soft: var(--blue);
  /* Ink to sit ON a --yellow (now blue) fill. Dark theme's --blue is light
     (#97A0DC), so near-navy ink reads; light theme re-declares this to white
     because its --blue is dark (#4A55A2). */
  --yellow-text: #FFFFFF;   /* --blue is dark here → white ink on a --yellow fill */
  --cyan: var(--blue);
  --accent: var(--blue);
  --link: var(--blue);
  --blue-700: var(--blue-hi);
  --link-hover: var(--blue-hi);
  --mono: var(--font-mono);
  --shadow-card: var(--card-shadow);
  --shadow-1: var(--card-shadow);
  --shadow-2: var(--card-shadow);
  --shadow-pop: var(--pop-shadow);
  /* Sidebar → rail → chrome */
  --sidebar-bg-top: var(--chrome-900);
  --sidebar-bg-bot: var(--chrome-900);
  --sidebar-text: var(--rail-fg);
  --sidebar-text-active: var(--rail-active-fg);
  --sidebar-muted: var(--rail-muted);
  --sidebar-icon: var(--rail-muted);
  --sidebar-active-bg: var(--rail-active-bg);
  --sidebar-border: var(--rail-hair);
  --sidebar-tenant-bg: var(--rail-card);
  /* tokens that only the light theme declared; dark inherits them too */
  --viz-warn-text: #9A5F08; /* 5.2:1 — the proven v3 amber-brown, clearly not gold */
}

/* ── Tokens: DARK overrides (canonical only — every alias re-resolves) ──── */
[data-theme="dark"] {
  /* The dark theme is ONLY this token block (and its twin in gold.css):
     no [data-theme="dark"] selector may exist anywhere else (Phase 4,
     2026-10-06). Light is the designed base in :root. */
  --canvas: #03090F;
  --surface: #07182D;
  --surface-sunken: #0C2036;
  --border: #17324B;
  --border-strong: #244763;
  --tint-info: #0B2A3E;
  --ink-900: #F2F7FA;
  --ink-700: #C9D6E0;
  --ink-500: #9FB3C1;
  --ink-300: #4E6070;   /* disabled + hairlines ONLY — never text a user must read */
  --gold: #FCCE19;        /* light theme flips to spec #B98A22 */
  --gold-hover: #FDD84A;  /* dark lightens; light theme darkens to #A2761A */
  --viz-critical: #D98876;  --viz-critical-text: #D98876;
  --viz-warn: #E29A3F;      --viz-warn-text: #E29A3F;  /* orange, never gold's yellow — warn and gold must not read as one signal */
  --viz-ok: #8FBF7F;        --viz-ok-text: #8FBF7F;
  --viz-neutral: #9AA3BD;   --viz-neutral-text: #9AA3BD;
  --viz-info: #6FA3E4;      --viz-info-text: #6FA3E4;
  --blue-hi: #9CC1EE;
  --crit-wash: rgba(217,136,118,.20);  --crit-bd: rgba(217,136,118,.48);   /* .13/.32 read as dim on the navy (2026-10-13) */
  --warn-wash: rgba(226,154,63,.20);   --warn-bd: rgba(226,154,63,.48);
  --ok-wash:   rgba(143,191,127,.20);  --ok-bd:   rgba(143,191,127,.48);
  --unk-wash:  rgba(154,163,189,.20);  --unk-bd:  rgba(154,163,189,.48);
  --blue-bd: rgba(111,163,228,.34);
  --card-shadow: 0 14px 32px -22px rgba(0,0,0,.9);
  --pop-shadow: 0 1px 2px rgba(0,0,0,.35), 0 20px 44px -14px rgba(0,0,0,.70);
  --app-canvas: var(--canvas);
  --surface-raised: #0B1F36;           /* one notch above --surface: a card must read as a card */
  --raised-bd: color-mix(in srgb, var(--ink-900) 16%, transparent);
  --raised-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -20px rgba(0,0,0,.85);
  --yellow-text: #03090F;
}

/* ── Base surface + type ────────────────────────────────────────────────
   Flat canvas (the depth is cards, not gradients); 14px/1.5 base; the
   theme transition lives on body ONLY — per-component transitions flash
   on route change. */
body,
[data-theme="light"] body {
  background: var(--canvas);
  background-image: none;
  background-attachment: initial;
  font-size: 15px;
  line-height: 1.6;
  transition: background-color .25s ease, color .25s ease;
}
/* Page title: light weight against dense mono metrics is the typographic
   signature of this design (Chrome spec §3). */
h1, .title, .section-head .title {
  font-size: 38px; font-weight: 300; letter-spacing: -.02em;
  line-height: 1.15; color: var(--ink-1);
}
.card h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.card-sub { font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* Rule 4 as one import: every measured value gets `.mono` — now with
   tabular + slashed-zero numerals so columns of figures align. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}
/* Micro-label / eyebrow voice (Chrome spec): 11px 600 caps +0.08em. */
.micro-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
/* Prose measure: no readable block wider than 68ch. */
.measure { max-width: 68ch; }

/* ── One elevation level ────────────────────────────────────────────────
   Cards sit on canvas with the single card shadow; the v4 inset
   "lit from above" highlights and per-theme shadow forks are retired. */
.card, .ov-module, .kpi, .rem-card,
[data-theme="light"] .card,
[data-theme="light"] .ov-module,
[data-theme="light"] .kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

/* ── Gold discipline: component-level cleanup ───────────────────────────
   Everything below strips gold/yellow from states it never belonged on. */
/* Eyebrows are structure, not identity: ink-3, sans, tracked caps. */
.eyebrow, .ov-hero-eyebrow,
[data-theme="light"] .eyebrow,
[data-theme="light"] .ov-hero-eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
/* Active filter chips: blue wash, not gold tint. */
.tab-btn.is-active,
[data-theme="light"] .tab-btn.is-active {
  background: var(--blue-wash); border-color: var(--blue-bd); color: var(--blue);
}
.tab-btn.is-active .ct,
[data-theme="light"] .tab-btn.is-active .ct { color: var(--blue); }
.subnav-tab.is-active { border-bottom-color: var(--blue); }
/* Theme toggle active: blue wash (was a yellow tint). */
.theme-toggle button.active,
[data-theme="light"] .theme-toggle button.active {
  background: var(--blue-wash); color: var(--blue);
}
/* Selection checkboxes: system blue. */
input[type="checkbox"] { accent-color: var(--blue); }
/* Filter focus ring: blue, matching :focus-visible. */
#alerts-filter-sev:focus, #alerts-filter-q:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}
/* Grade chips: colour is a pure function of the grade — A/B ok, C/D warn,
   F crit. Never blue (B was), never gold, no hue-rotate tricks (D had). */
.pill[data-grade="B"] { background: var(--ok-wash); border-color: var(--ok-bd); color: var(--ok); }
.pill[data-grade="D"] { filter: none; }

/* ── Buttons ────────────────────────────────────────────────────────────
   .btn-gold / .btn-primary is the ONE gold action per screen. Per-row
   remediation CTAs (.rem-viewfix, .rem-unlock) demote to bordered
   secondaries — a screen of gold buttons is a screen with no primary. */
.btn-gold, .btn-primary,
[data-theme="light"] .btn-primary {
  background: var(--cta); color: var(--cta-on);
  border: 1px solid var(--cta);
  border-radius: var(--radius-ctl); font-weight: 600;
  box-shadow: none;
}
.btn-gold:hover, .btn-primary:hover {
  background: var(--cta-hover); border-color: var(--cta-hover); filter: none;
}
.rem-viewfix, .rem-unlock,
[data-theme="light"] .rem-viewfix,
[data-theme="light"] .rem-unlock {
  background: var(--surface); color: var(--blue);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl); font-weight: 600;
  box-shadow: none;
}
.rem-viewfix:hover, .rem-unlock:hover {
  filter: none; border-color: var(--blue); color: var(--blue-hi);
}

/* ── Rail (Trust Slate v3) ──────────────────────────────────────────────
   Persistent ink in both themes. 248px expanded / 66px collapsed via
   .app-shell.rail-collapsed (toggle button, ⌘\ / Ctrl+\, auto <1280px).
   The 2px gold identity thread on the top edge is permitted gold use #1
   (of two — the other is .btn-gold). */
/* min-width guard: below 1001px the legacy icon-rail media query (64px
   columns, labels force-hidden) must win — an unconditional 248px here left
   an expanded rail at ≤1000px as a wide empty column of naked icons. */
@media (min-width: 1001px) {
  .app-shell { grid-template-columns: 250px 1fr; }
}
.sidebar {
  background: var(--rail-bg);
  border-right: none;
  box-shadow: none;
  padding: 14px 0 14px;
  top: 54px;
  height: calc(100vh - 54px);
}
.sidebar::before { content: none; }

/* Tenant identity card — display-only (no switcher; one user = one tenant).
   The plan pill moved to the topbar (Chrome spec); the card keeps
   initials + mono tenant id. */
.sidebar-tenant {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 14px; padding: 9px 10px; min-height: 46px;
  background: var(--rail-card);
  border: 1px solid var(--rail-hair);
  border-radius: 10px;
  color: var(--rail-fg); line-height: 1.35;
}
.sidebar-tenant::before { content: none; }
.sidebar-tenant .st-initials {
  flex: none; width: 28px; height: 28px; border-radius: var(--radius-ctl);
  background: var(--chrome-600); color: var(--chrome-on);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  display: grid; place-items: center; text-transform: uppercase;
}
.sidebar-tenant .st-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-tenant .name {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--rail-active-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  word-break: normal; line-height: 1.25;
}
.sidebar-tenant .st-sub {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 10.5px; color: var(--rail-muted);
}
/* Full plan label as a quiet caps line — the old boxed chip clipped its own
   longest value ("Business TrustOps") at 12ch. Ellipsis kept only as a safety
   net for trial strings; the title attr always carries the full text. */
.sidebar-tenant .tier {
  display: block; margin: 0; padding: 0;
  font-size: 10px; font-weight: 600; line-height: 1.4;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--rail-muted); background: none;
  border: none; border-radius: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  word-break: normal; max-width: 100%;
}

/* Nav wrapper + items — full-bleed rows, square corners. The active row is
   a chrome-600 highlight inside the chrome-900 frame (bar + rail are one
   continuous surface); the 3px gold inset + 600-weight text carry the state. */
/* The nav is the rail's ONLY scroll region. flex:1 + min-height:0 +
   overflow-y:auto make long expansions scroll INSIDE the nav; without the
   overflow rule, flexbox instead SHRANK the nav box to fit the fixed-height
   rail and the 44px rows (which cannot shrink) spilled out visibly, painting
   the rail-footer ("Assets monitored", "Help") over the last nav rows
   (bug 2026-08-28). Side effect is deliberate: the footer stays pinned. */
.sidebar-nav {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--chrome-600) transparent;
}
.sidebar-tenant { flex: none; }
.nav-item {
  height: 44px; padding: 0 16px; gap: 12px;
  border-left: none; border-radius: 0;
  font-size: 14px; font-weight: 500;
  color: var(--chrome-on-muted); opacity: 1;
}
.nav-item:hover { background: var(--rail-hover); opacity: 1; color: var(--chrome-on); }
.nav-item:hover .nav-icon { color: inherit; }
.nav-item.is-active {
  position: relative;
  background: var(--rail-active-bg); color: var(--rail-active-fg);
  box-shadow: none;
  border-left: none; font-weight: 600; opacity: 1;
}
.nav-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 0; background: var(--gold);
}
.nav-item.is-active .nav-icon { color: inherit; }
.nav-item .nav-icon {
  width: 20px; font-size: 0; color: inherit; opacity: .85;
}
.nav-item .nav-icon svg { width: 20px; height: 20px; display: block; }
.nav-item.is-active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }
/* Locked (plan-gated) — still clickable: the click opens the route's upsell
   panel. Set by app-main.js _markLockedNav from GATED_ROUTES. The label is
   muted and a small lock sits at the row's end; its tooltip and accessible
   name carry the plan ("Included with Growth"). Icon only, because a text
   chip wrapped the longer labels in the 248px rail. */
.nav-item.is-locked .nav-label { color: var(--chrome-on-muted); }
.nav-item.is-locked .nav-icon { opacity: .6; }
.nav-item .nav-lock {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--chrome-on-muted);
}
.nav-item .nav-lock::before {
  content: ""; width: 10px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 4V3a2.5 2.5 0 0 1 5 0v1h.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5zm1 0h3V3a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 4V3a2.5 2.5 0 0 1 5 0v1h.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5zm1 0h3V3a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* chrome-on-muted fails contrast on the active row's chrome-600 fill. */
.nav-item.is-active .nav-lock,
.nav-item.is-locked.is-active .nav-label { color: inherit; }
.nav-item.is-locked.is-active .nav-icon { opacity: 1; }
/* A badge and a lock on one row: the badge already took margin-left:auto. */
.nav-item .nav-badge.has-count + .nav-lock { margin-left: 6px; }
/* Rail labels never wrap: a two-line row breaks the rhythm of the rail. */
.sidebar .nav-item .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) { .nav-item .nav-lock { display: none !important; } }
@media (max-width: 720px) { .sidebar.is-open .nav-item .nav-lock { display: inline-flex !important; } }
.nav-item .nav-badge {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: var(--radius-chip);
  background: rgba(240,162,150,.16); color: var(--chrome-crit);
  box-shadow: inset 0 0 0 1px rgba(240,162,150,.34);
}
.nav-item:focus-visible { outline: 2px solid var(--rail-accent); outline-offset: 2px; }

/* Groups: sans labels, tracked caps, no gold, 19px air above. The header is
   label + hairline rule + right-aligned chevron (the chevron rotates -90° on
   collapse via the legacy .sb-caret transform rule). */
.sidebar-group { padding: 0; margin-top: 19px; }
.sidebar-group-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rail-faint);
  padding: 0 16px 6px;
}
.sidebar-group-label .sb-glabel { flex: none; }
.sidebar-group-label .sb-grule { flex: 1; height: 1px; background: var(--chrome-hair); }
.sidebar-group-label .sb-caret { color: var(--rail-faint); opacity: .7; }
.sidebar-group-label .sb-caret svg { width: 12px; height: 12px; display: block; }
.sidebar-group-toggle:hover { color: var(--rail-muted); }
.sidebar-group-toggle:hover .sb-caret { opacity: 1; }
.nav-item--solo { margin-top: 2px; }

/* Footer: usage meter + funnel link + help/collapse row. */
.rail-footer {
  flex: none; margin-top: auto; padding-top: 14px;
  /* Pinned below the scrolling nav — the hairline marks the seam. */
  border-top: 1px solid var(--rail-hair);
}
.rail-usage {
  padding: 0 16px 12px; margin-bottom: 10px;
  border-bottom: 1px solid var(--rail-hair);
}
.rail-usage .ru-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--rail-muted); margin-bottom: 6px;
}
.rail-usage .ru-val { color: var(--rail-fg); font-size: 11px; }
.rail-usage .ru-track {
  height: 3px; border-radius: 2px; background: var(--rail-hair); overflow: hidden;
}
.rail-usage .ru-track > i {
  display: block; height: 100%; width: 0%;
  background: var(--rail-accent); border-radius: 2px;
  transition: width .25s ease-out;
}
.rail-usage.is-full .ru-val { color: var(--chrome-warn); }
.rail-usage.is-full .ru-track > i { background: var(--chrome-warn); }
.rail-usage .ru-link {
  display: inline-block; margin-top: 9px;
  font-size: 11.5px; font-weight: 600; color: var(--rail-accent);
  text-decoration: none;
}
.rail-usage .ru-link:hover { color: var(--rail-active-fg); }
.rail-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
}
.rail-foot-row .rf-help {
  font-size: 12px; color: var(--rail-muted); text-decoration: none;
}
.rail-foot-row .rf-help:hover { color: var(--rail-fg); }
.rail-collapse {
  background: transparent; border: none; cursor: pointer;
  color: var(--rail-muted); padding: 5px; border-radius: var(--radius-tile);
  line-height: 0;
}
.rail-collapse svg { width: 16px; height: 16px; }
.rail-collapse:hover { color: var(--rail-fg); background: var(--rail-hover); }
.rail-collapse:focus-visible { outline: 2px solid var(--rail-accent); outline-offset: 2px; }

/* Collapsed rail: 66px, icons centred, badge degrades to a 7px dot,
   group labels become 24px centred hairlines.
   Desktop-only mechanism: below 721px the off-canvas drawer (~line 1279) owns
   the shell grid; router.js keeps toggling .rail-collapsed there, which must
   stay inert — unguarded, these later rules beat the drawer's
   grid-template-columns:1fr by source order and leave a dead 66px column. */
@media (min-width: 721px) {
.app-shell.rail-collapsed { grid-template-columns: 64px 1fr; }
.app-shell.rail-collapsed .sidebar { padding: 14px 0 14px; }
.app-shell.rail-collapsed .sidebar-tenant,
.app-shell.rail-collapsed .nav-item .nav-label,
.app-shell.rail-collapsed .nav-item .nav-lock,
.app-shell.rail-collapsed .rail-usage,
.app-shell.rail-collapsed .rail-foot-row .rf-help { display: none !important; }
.app-shell.rail-collapsed .nav-item { justify-content: center; padding: 0; }
.app-shell.rail-collapsed .nav-item.is-active::before { left: 0; }
.app-shell.rail-collapsed .nav-item .nav-badge.has-count {
  display: block !important;
  position: absolute; top: 5px; right: 12px;
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  background: var(--chrome-crit); font-size: 0;
}
.app-shell.rail-collapsed .sidebar-group-label {
  display: block; width: 24px; height: 1px; margin: 10px auto 8px;
  padding: 0; font-size: 0; background: var(--rail-hair); border: none;
}
.app-shell.rail-collapsed .sidebar-group-label .sb-caret,
.app-shell.rail-collapsed .sidebar-group-label .sb-glabel,
.app-shell.rail-collapsed .sidebar-group-label .sb-grule { display: none; }
.app-shell.rail-collapsed .sidebar-group { margin-top: 0; }
/* Collapsed still honours a user's collapsed groups? No — icons must stay
   reachable (nothing visible to un-collapse with). Mirrors the old 1000px rule.
   Children excluded for the same reason as the 1000px rule: no icon to show. */
.app-shell.rail-collapsed .sidebar-group.is-collapsed .nav-item:not(.nav-item--child) { display: flex !important; }
.app-shell.rail-collapsed .rail-foot-row { justify-content: center; }
} /* end @media (min-width: 721px) — collapsed rail is desktop-only */

/* ── Topbar (Trust Slate: Chrome) ───────────────────────────────────────
   54px chrome-900 band, full bleed across rail + canvas — one continuous
   L-frame with the rail (owner call 2026-08-27; the earlier two-tone
   chrome-600 bar + docking active row is retired). position:fixed, not
   sticky — a sticky grid item cannot escape its own 54px row. Interactive
   wells inside the bar are solid chrome-800 (the translucent white
   washes tuned for chrome-600 vanish on the near-black navy). */
.app-topbar,
[data-theme="light"] .app-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: 54px; min-height: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 0 14px;
  background: var(--chrome-900);
  border-bottom: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.app-shell { padding-top: 54px; }
/* Brand cluster: wordmark (the mark carries the gold) · hairline · product
   name. Moved here from the rail head (Chrome spec §4). */
.tb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.tb-brand .sb-logo { height: 20px; display: block; }
.tb-divider { width: 1px; height: 20px; background: rgba(255,255,255,.28); flex: none; }
.tb-brand .sb-tag {
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--chrome-on); white-space: nowrap;
}
.tb-brand #sb-cobrand { white-space: nowrap; }
/* Wayfinding label: quiet "Cluster › Tab" beside the brand. Since
   2026-09-25 the cluster half links to the cluster's first tab (router.js). chrome-on-muted is legal on the chrome-900 bar (9.8:1); its
   own hairline stands in for a divider and vanishes with it when hidden. */
.tb-context {
  flex: none; min-width: 0; max-width: 280px;
  font-size: 13px; color: var(--chrome-on-muted);
  border-left: 1px solid rgba(255,255,255,.28); padding-left: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-context-link { color: var(--chrome-on); text-decoration: none; }
.tb-context-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tb-context-link:focus-visible { outline: 2px solid var(--rail-accent); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 1100px) { .tb-context { display: none !important; } }
/* Plan badge: outlined pill in the micro-label voice (Chrome spec §4). */
.tb-plan {
  flex: none; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); color: var(--chrome-on);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
}
.tb-plan:empty { display: none; }
.app-topbar .sb-toggle { color: var(--chrome-on); }
/* Search pill on chrome: chrome-800 well, chrome-600 hover (one-step lift). */
.app-topbar .topbar-search,
[data-theme="light"] .app-topbar .topbar-search {
  flex: 1; max-width: 420px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--chrome-800); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-ctl); padding: 6px 12px;
  color: var(--chrome-on); box-shadow: none; text-align: left;
}
.app-topbar .topbar-search:hover,
[data-theme="light"] .app-topbar .topbar-search:hover {
  background: var(--chrome-600); border-color: rgba(255,255,255,.32);
  color: var(--chrome-on); box-shadow: none;
}
.app-topbar .topbar-search .palette-kbd,
[data-theme="light"] .app-topbar .topbar-search .palette-kbd {
  border-color: rgba(255,255,255,.30); color: var(--chrome-on); opacity: .8;
}
.topbar-search .ts-ic { line-height: 0; flex: none; opacity: .8; }
.topbar-search .ts-ic svg { width: 15px; height: 15px; }
.topbar-search .ts-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Theme toggle on chrome. */
.app-topbar .theme-toggle,
[data-theme="light"] .app-topbar .theme-toggle {
  background: var(--chrome-800); border: 1px solid rgba(255,255,255,.14);
}
.theme-toggle button { line-height: 0; padding: 5px 8px; color: var(--chrome-on); opacity: .7; }
.theme-toggle button svg { width: 15px; height: 15px; }
.theme-toggle button.active,
[data-theme="light"] .theme-toggle button.active {
  background: var(--chrome-500); color: var(--chrome-on); opacity: 1;
}
.acct-mi .ami-ic { line-height: 0; }
.acct-mi .ami-ic svg { width: 15px; height: 15px; display: block; }
/* Account chip on chrome. The dropdown itself stays a canvas popover. */
.app-topbar .acct,
[data-theme="light"] .app-topbar .acct {
  background: var(--chrome-800); border: 1px solid rgba(255,255,255,.14);
}
.app-topbar .acct.acct-trigger:hover,
[data-theme="light"] .app-topbar .acct.acct-trigger:hover,
.acct-menu.open .acct.acct-trigger,
[data-theme="light"] .acct-menu.open .acct.acct-trigger { border-color: rgba(255,255,255,.45); }
.app-topbar .acct .acct-pic,
[data-theme="light"] .app-topbar .acct .acct-pic {
  width: 30px; height: 30px; border-radius: var(--radius-ctl);
  background: var(--chrome-500); color: var(--chrome-on);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30);
}
.app-topbar .acct .acct-nm,
[data-theme="light"] .app-topbar .acct .acct-nm { color: var(--chrome-on); }
.app-topbar .acct .acct-rl,
[data-theme="light"] .app-topbar .acct .acct-rl { color: var(--chrome-on-muted); }
.app-topbar .acct.acct-trigger::after,
[data-theme="light"] .app-topbar .acct.acct-trigger::after { color: var(--chrome-on); opacity: .8; }
.app-topbar #who, [data-theme="light"] .app-topbar #who { color: var(--chrome-on); }
.app-topbar #who code { color: var(--chrome-on); }
[data-theme="light"] .acct-dropdown { border-color: var(--border); }
[data-theme="light"] .acct-sep { background: var(--border); }
/* Freshness chip on chrome: white ink always; the state is carried by the
   dot colour AND the label text (never colour alone). */
.fresh-chip, [data-theme="light"] .fresh-chip {
  border: 1px solid rgba(255,255,255,.25); color: var(--chrome-on); background: transparent;
}
.fresh-chip:hover, [data-theme="light"] .fresh-chip:hover {
  border-color: rgba(255,255,255,.5); color: var(--chrome-on); background: rgba(255,255,255,.08);
}
.fresh-chip .fc-dot {
  width: 6px; height: 6px; background: var(--chrome-ok);
  box-shadow: 0 0 0 3px rgba(156,203,140,.22);
}
.fresh-chip.is-stale, [data-theme="light"] .fresh-chip.is-stale {
  color: var(--chrome-on); border-color: rgba(232,197,106,.55); background: rgba(232,197,106,.14);
}
.fresh-chip.is-stale .fc-dot { background: var(--chrome-warn); box-shadow: 0 0 0 3px rgba(232,197,106,.22); }
.fresh-chip.is-error, [data-theme="light"] .fresh-chip.is-error {
  color: var(--chrome-on); border-color: rgba(240,162,150,.55); background: rgba(240,162,150,.16);
}
.fresh-chip.is-error .fc-dot { background: var(--chrome-crit); box-shadow: 0 0 0 3px rgba(240,162,150,.22); }
/* Finding 182 — the estate was not wholly measured. Amber, and deliberately
   its OWN state rather than a reuse of .is-stale: both are amber today, but
   they answer different questions (this data is old / this data is partial)
   and a future palette change must be able to separate them. Neither green
   nor red, the .unmeasured precedent from finding 165. */
.fresh-chip.is-unmeasured, [data-theme="light"] .fresh-chip.is-unmeasured {
  color: var(--chrome-on); border-color: rgba(232,197,106,.55); background: rgba(232,197,106,.14);
}
.fresh-chip.is-unmeasured .fc-dot { background: var(--chrome-warn); box-shadow: 0 0 0 3px rgba(232,197,106,.22); }
.sa-unmeasured { color: var(--viz-warn-text); }
/* Chrome focus: gold ring on the indigo frame (canvas keeps the blue ring). */
.app-topbar :focus-visible, .sidebar :focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
/* Small screens: the brand yields to the controls; the bar never wraps. */
@media (max-width: 860px) {
  .tb-brand .sb-tag, .tb-divider, .tb-plan { display: none; }
}
@media (max-width: 600px) {
  .app-topbar { flex-wrap: nowrap; gap: 8px; }
  .app-topbar #who { flex-basis: auto; order: 0; }
}

/* Canvas: 1600px max measure, 32px horizontal padding (Chrome spec §4). */
.wrap { max-width: 1600px; padding: 28px 32px; }

/* ── Card furniture (Chrome spec §4/§5) ─────────────────────────────────
   Provenance footer: every data card names its source + sync time. Stale
   flips the footer to the warn text tone — with words, never colour alone. */
.card-src {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-3);
}
.card-src:empty { display: none; }
.card-src.is-stale { color: var(--viz-warn-text); }
.card-sub-inline {
  font-size: 12px; font-weight: 400; color: var(--ink-3);
  margin-left: 8px; letter-spacing: 0; text-transform: none;
}
/* Skeleton loading state — surface-sunken bars, no spinners (§5.5). */
/* B6 four-states: an error must not wear loading's muted grey — a dead
   section used to read as a slow one. Empty stays neutral: absence is not
   an all-clear, so it never takes the ok green. */
.status-msg.cs-error { color: var(--viz-critical-text); }
.status-msg.cs-empty { color: var(--text-secondary); }
.cs-skel { display: flex; flex-direction: column; gap: 12px; padding: 18px 0; }
.cs-skel i { display: block; height: 12px; border-radius: 3px; background: var(--surface-sunken); animation: cs-pulse 1.2s ease-out infinite; }
.cs-skel i:nth-child(1) { width: 86%; }
.cs-skel i:nth-child(2) { width: 68%; }
.cs-skel i:nth-child(3) { width: 51%; }
@keyframes cs-pulse { 50% { opacity: .55; } }

/* ── Expiry distribution (§5.1) ─────────────────────────────────────────
   Four bucket bars on a sunken plot; value labels ABOVE the bar in ink-1
   (never on the fill); mono y ticks on hairline gridlines; no legend —
   the x labels are self-describing. Bars are buttons. */
.xd-chart { margin-top: 14px; }
.xd-plot {
  position: relative; display: flex; align-items: flex-end; gap: 4%;
  padding: 10px 5% 0; height: 168px;
  background: var(--surface-sunken); border-radius: var(--radius-card);
}
.xd-gl { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); }
.xd-gl .xd-yl { position: absolute; left: 8px; top: -15px; font-size: 12px; color: var(--ink-3); }
.xd-col {
  position: relative; z-index: 1;
  flex: 1; height: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-sans);
}
.xd-col:hover .xd-bar { filter: brightness(1.08); }
.xd-val { font-size: 14px; font-weight: 500; color: var(--ink-1); margin-bottom: 6px; }
.xd-bar { display: block; width: 68%; max-width: 110px; min-height: 0; border-radius: 3px 3px 0 0; }
.xd-bar.sev-crit { background: var(--viz-critical); }
.xd-bar.sev-warn { background: var(--viz-warn); }
.xd-bar.sev-ok   { background: var(--viz-ok); }
.xd-lbl { height: 26px; display: flex; align-items: center; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.xd-empty { padding: 34px 0 22px; font-size: 14px; color: var(--ink-2); text-align: center; }
.xd-empty a { color: var(--blue); font-weight: 600; text-decoration: none; }
.xd-unm { color: var(--viz-warn-text); font-weight: 600; }
#xd-sub b { color: var(--ink-1); }
#xd-table-toggle { letter-spacing: 0; text-transform: none; }
/* "View as table": un-hide the sr-only twin in place. */
.xd-open #ov-horizon-table {
  position: static; width: auto; height: auto; margin: 12px 0 0; padding: 0;
  overflow: visible; clip: auto; white-space: normal;
}
.xd-open #ov-horizon-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.xd-open #ov-horizon-table caption { text-align: left; font-size: 12px; color: var(--ink-3); padding-bottom: 6px; }
.xd-open #ov-horizon-table th, .xd-open #ov-horizon-table td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border);
}
.xd-open #ov-horizon-table th:nth-child(2), .xd-open #ov-horizon-table td:nth-child(2) { text-align: right; }
.xd-open #ov-horizon-table th { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ── Regulatory band (§5.2–5.4): countdown 7/12 · advisory + feed 5/12 ── */
.ov-reg-band {
  display: grid; grid-template-columns: 7fr 5fr; gap: 24px;
  align-items: start; margin-top: 24px;
}
.ov-reg-side { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 1100px) { .ov-reg-band { grid-template-columns: 1fr; } }

/* SC-081 countdown strip: gradient hairline ok→critical, mono milestones. */
.sc081-strip { position: relative; height: 118px; margin: 30px 10px 0; }
.sc081-line {
  position: absolute; left: 0; right: 0; top: 24px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--viz-ok), var(--viz-warn) 55%, var(--viz-critical));
}
.sc081-ms { position: absolute; top: 40px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 3px; text-align: center; }
.sc081-ms::before {
  content: ""; position: absolute; left: 50%; top: -20px; width: 9px; height: 9px;
  border-radius: 50%; transform: translateX(-50%);
  background: var(--surface); border: 2px solid var(--ink-3);
}
.sc081-ms.sc081-a-l { transform: none; text-align: left; }
.sc081-ms.sc081-a-l::before { left: 4px; transform: none; }
.sc081-ms.sc081-a-r { transform: translateX(-100%); text-align: right; }
.sc081-ms.sc081-a-r::before { left: auto; right: 0; transform: none; }
.sc081-days { font-size: 14px; font-weight: 500; color: var(--ink-1); }
.sc081-year { font-size: 12px; color: var(--ink-3); }
.sc081-note { font-size: 12px; color: var(--ink-3); }
.sc081-today { position: absolute; top: 6px; width: 2px; height: 24px; background: var(--ink-2); border-radius: 1px; }
.sc081-today .mono {
  position: absolute; top: -6px; left: 50%; transform: translate(-50%, -100%);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
.sc081-cta { margin-top: 14px; }

/* ── Integrations rail subgroup (Task 2 nav pattern) ────────────────────
   Parent row styled as a nav item with a trailing chevron; children are
   indented, icon-less, badge-less. Chevron rotates 180° on expand (150ms,
   killed by the global reduced-motion rule). Collapse state persists via
   the sidebar-group machinery (data-group="integrations-nav"). */
.sidebar-subgroup { margin: 0; padding: 0; }
.sidebar-subgroup > .nav-item--parent {
  width: 100%; text-align: left; background: transparent; border: none;
  cursor: pointer; letter-spacing: 0; text-transform: none;
}
.sidebar-subgroup > .nav-item--parent:hover { background: var(--rail-hover); color: var(--chrome-on); }
.sidebar-subgroup .sb-caret2 { margin-left: auto; line-height: 0; opacity: .7; }
.sidebar-subgroup .sb-caret2 svg { width: 14px; height: 14px; transition: transform .15s ease-out; }
.sidebar-subgroup.is-collapsed .sb-caret2 svg { transform: rotate(-180deg); }
.sidebar-subgroup.is-collapsed .nav-item--child { display: none; }
.nav-item--child { height: 40px; padding: 0 16px 0 48px; font-size: 14px; }

/* ── Cluster rows (Trust Slate: Frame C) ────────────────────────────────
   Every consolidated cluster reuses the subgroup pattern: parent <a> pairs
   with a chevron button in a flex row; children are injected from SUBNAV
   by router.js. Expansion is transient — the active cluster opens, a
   chevron peek lasts until the next navigation. The parent tint
   (.is-current-parent) is the hover surface (chrome-800): a location hint,
   deliberately weaker than the child's chrome-600 + gold active row. */
.sb-cluster-row { display: flex; align-items: stretch; }
.sb-cluster-row > .nav-item { flex: 1 1 auto; min-width: 0; }
.sb-cluster-toggle {
  flex: none; width: 34px; background: transparent; border: none;
  color: var(--chrome-on-muted); cursor: pointer; padding: 0;
}
.sb-cluster-toggle:hover { background: var(--rail-hover); color: var(--chrome-on); }
.nav-item.is-current-parent { background: var(--rail-hover); color: var(--chrome-on); }
.nav-item.is-current-parent .nav-icon { color: inherit; }
/* A collapsed outcome group (MONITOR/…) must swallow the whole cluster row —
   the chevron button is not a .nav-item, so the group rule alone misses it. */
.sidebar-group.is-collapsed .sb-cluster-row { display: none; }
/* Icon rail (≤1000px) and collapsed rail: children have no icons to shrink
   to — hide them and the chevron; the drawer (≤720 open) restores them. */
@media (max-width: 1000px) {
  .nav-item--child, .sidebar-subgroup .sb-caret2 { display: none !important; }
  .sidebar.is-open .nav-item--child { display: flex !important; }
  .sidebar.is-open .sidebar-subgroup.is-collapsed .nav-item--child { display: none !important; }
  .sidebar.is-open .sidebar-subgroup .sb-caret2 { display: inline-block !important; }
}
@media (min-width: 721px) {
  .app-shell.rail-collapsed .nav-item--child,
  .app-shell.rail-collapsed .sidebar-subgroup .sb-caret2 { display: none !important; }
}

/* ── Integrations catalog (Task 2 §2) ───────────────────────────────────
   Categorised cards: 32px monogram mark (muted until connected), name,
   ONE outcome sentence, ONE status chip. Chips are text + tinted fill —
   never a dot alone. */
.ic-search-row { margin: 4px 0 18px; }
.ic-search {
  width: 100%; max-width: 420px; padding: 9px 14px;
  background: var(--surface); color: var(--ink-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius-ctl);
  font-family: var(--font-sans); font-size: 14px;
}
.ic-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.ic-cat { margin-bottom: 26px; }
.ic-cat h2 { font-size: 17px; font-weight: 600; letter-spacing: -.012em; margin: 0; }
.ic-cat-sub { font-size: 14px; color: var(--text-2); margin: 2px 0 12px; }
.ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 16px; }
/* A card that opens a connect flow is a <button>; without this reset it
   rendered centred in the system font while its neighbours were <a>. */
.ic-card {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 16px 18px; min-height: 84px;
  background: var(--surface-raised); border: 1px solid var(--raised-bd);
  border-radius: var(--radius-card); box-shadow: var(--raised-shadow);
  text-decoration: none; color: inherit; text-align: left; font: inherit; line-height: inherit;
  -webkit-appearance: none; appearance: none;
  transition: transform .18s var(--hl-ease), border-color .18s ease, box-shadow .18s ease;
}
a.ic-card, button.ic-card { cursor: pointer; }
a.ic-card:hover, button.ic-card:hover { border-color: var(--hl-bd-bright); transform: translateY(-2px); box-shadow: var(--pop-shadow); }
.ic-card:focus-visible { outline: 2px solid var(--viz-info); outline-offset: 2px; }
.ic-card.is-soon .ic-sent { color: var(--ink-3); }
.ic-mark {
  flex: none; width: 36px; height: 36px; border-radius: var(--radius-tile);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  background: var(--hl-icon-wash); color: var(--viz-info);
}
.ic-card.is-connected .ic-mark { background: var(--viz-info); color: #FFFFFF; }
.ic-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ic-name { font-size: 15px; font-weight: 500; color: var(--ink-1); }
.ic-sent { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ic-chip {
  flex: none; margin-left: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.ic-chip.ic-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ic-chip.ic-ok   { background: var(--ok-wash);  color: var(--ok);  box-shadow: inset 0 0 0 1px var(--ok-bd); }
.ic-chip.ic-warn { background: var(--warn-wash); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-bd); }
.ic-chip.ic-not  { background: var(--unk-wash); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--unk-bd); }
.ic-chip.ic-soon { background: transparent; color: var(--ink-3); border: 1px dashed var(--border-strong); padding: 2px 8px; }
.ic-chip.ic-unk  { background: var(--unk-wash); color: var(--unk); box-shadow: inset 0 0 0 1px var(--unk-bd); font-style: italic; }

/* ── Connect drawer (Task 2 §3) ─────────────────────────────────────────
   480px right dialog; four numbered steps; the drawer's step-advance is
   its ONE gold action (the page behind is dimmed). */
.ic-drawer-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10,13,31,.45);
  display: flex; justify-content: flex-end;
}
.ic-drawer {
  width: 480px; max-width: 100%; height: 100%;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--pop-shadow);
  display: flex; flex-direction: column;
}
.icd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.icd-head h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.icd-close {
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 16px; line-height: 1; padding: 6px 8px;
  border-radius: var(--radius-ctl);
}
.icd-close:hover { color: var(--ink-1); background: var(--surface-sunken); }
.icd-steps {
  display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none;
  padding: 14px 24px 0; margin: 0;
}
.icd-steps li {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.icd-steps li.on { color: var(--blue); }
.icd-steps li.done { color: var(--viz-ok-text); }
.icd-body { flex: 1; overflow: auto; padding: 20px 24px; }
.icd-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 24px; border-top: 1px solid var(--border);
}
.icd-lede { font-size: 15px; color: var(--ink-1); font-weight: 500; margin-bottom: 6px; }
.icd-need { list-style: none; padding: 0; margin: 10px 0 0; }
.icd-need li {
  position: relative; padding: 8px 0 8px 26px;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.icd-need li::before { content: '✓'; position: absolute; left: 2px; color: var(--viz-ok-text); font-weight: 700; }
.icd-field { margin-bottom: 16px; }
.icd-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-1); margin-bottom: 5px; }
.icd-field input {
  width: 100%; padding: 9px 12px; font-size: 14px;
  background: var(--surface); color: var(--ink-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius-ctl);
  font-family: var(--font-sans);
}
.icd-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.icd-help { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); margin-top: 5px; }
.icd-err { font-size: 13px; color: var(--viz-critical-text); min-height: 18px; }
.icd-testing { font-size: 14px; color: var(--ink-2); padding: 18px 0; }
.icd-result { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; }
.icd-result.is-ok { background: var(--ok-wash); border-color: var(--ok-bd); }
.icd-result.is-fail { background: var(--warn-wash); border-color: var(--warn-bd); }
.icd-result-msg { font-size: 14px; line-height: 1.5; color: var(--ink-1); font-weight: 500; }
.icd-detail { margin-top: 10px; }
.icd-detail summary { font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.icd-detail pre {
  margin: 8px 0 0; padding: 10px; font-family: var(--font-mono); font-size: 11.5px;
  background: var(--surface-sunken); border-radius: var(--radius-ctl);
  overflow: auto; max-height: 240px; white-space: pre-wrap; word-break: break-word;
}

/* Advisory panel (§5.3): tinted well, measured prose, ONE secondary action. */
.advisory-panel {
  background: var(--tint-info); border: 1px solid var(--blue-bd);
  border-radius: var(--radius-card); padding: 24px;
}
.advisory-panel h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 8px 0; color: var(--ink-1); }
.advisory-panel p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }

/* Regulatory feed (§5.4): stacked items, tinted icon wells, hairline dividers. */
.regf-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.regf-item:last-of-type { border-bottom: none; padding-bottom: 4px; }
.regf-ic {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--tint-info); color: var(--blue);
  display: grid; place-items: center;
}
.regf-ic svg { width: 20px; height: 20px; }
.regf-b { min-width: 0; }
.regf-t { font-size: 15px; font-weight: 600; color: var(--ink-1); }
.regf-s {
  font-size: 14px; color: var(--ink-3); line-height: 1.45; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.regf-d { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* Page-header meta row: greeting + three mono measured values. */
.ph-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  font-size: 12.5px; color: var(--ink-2); margin-top: 4px;
}
.ph-meta .mono { color: var(--ink-1); }
.section-head .title .mono { font-size: .88em; }

/* Setup checklist, demoted to a 40px strip (was a full card). */
.setup-strip {
  display: flex; align-items: center; gap: 12px;
  min-height: 40px; padding: 8px 14px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-ctl); font-size: 12.5px; color: var(--ink-2);
}
.setup-strip .ss-lab {
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); flex: none;
}
.setup-strip .ss-track {
  flex: none; width: 88px; height: 3px; border-radius: 2px;
  background: var(--track); overflow: hidden;
}
.setup-strip .ss-track > i {
  display: block; height: 100%; width: 0%;
  background: var(--blue); border-radius: 2px; transition: width .25s ease-out;
}
.setup-strip .ss-pct { flex: none; font-size: 11.5px; color: var(--ink-1); }
.setup-strip .ss-steps {
  display: flex; flex-wrap: wrap; gap: 2px 14px;
  list-style: none; margin: 0; padding: 0; min-width: 0;
}
.setup-strip .ss-steps li { white-space: nowrap; }
.setup-strip .ss-steps li.is-done { text-decoration: line-through; color: var(--ink-3); }
.setup-strip .ss-opt { color: var(--ink-3); }
.setup-strip .ss-finish {
  margin-left: auto; flex: none; font-weight: 600;
  color: var(--blue); text-decoration: none;
}
.setup-strip .ss-finish:hover { color: var(--blue-hi); }
.setup-strip .ss-dismiss {
  flex: none; background: transparent; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 15px; line-height: 1; padding: 2px 4px;
  border-radius: var(--radius-chip);
}
.setup-strip .ss-dismiss:hover { color: var(--ink-1); background: var(--surface-2); }
@media (max-width: 760px) { .setup-strip .ss-steps { display: none; } }

/* Mono values never wrap mid-token. */
.ph-meta .mono, .fq-pts, .ph-score { white-space: nowrap; }

/* Screen-reader-only utility (horizon table twin etc.). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Posture hero (Trust Slate v3, Phase B) ─────────────────────────────
   1.62fr/1fr columns; the right column sits on surface-2 behind a
   hairline. Grade colour comes ONLY from the g-ok/g-warn/g-crit class —
   a pure function of the letter. */
/* display:block beats the legacy .ov-hero grid (1fr 300px) at :1473 and the
   ::before glow layer padding; both die for real in Phase C. */
.ph-hero, .ph-hero.ov-hero { display: block; padding: 0; overflow: hidden; margin-bottom: 22px; }
.ph-hero::before { content: none; }
.ph-cols { display: grid; grid-template-columns: 1.62fr 1fr; }
.ph-left { padding: 26px 26px 22px; min-width: 0; }
.ph-right {
  padding: 26px 22px; min-width: 0;
  background: var(--surface-2); border-left: 1px solid var(--line);
}
.ph-grade-row { display: flex; align-items: flex-end; gap: 18px; margin: 10px 0 6px; }
.ph-grade {
  font-size: 78px; font-weight: 700; line-height: .78; letter-spacing: -.05em;
  min-height: 62px;
}
/* 78px display letter = WCAG large text (3:1) — the fills are legal here
   and separate better from gold than the deepened text variants do. */
.ph-grade.g-ok   { color: var(--viz-ok); }
.ph-grade.g-warn { color: var(--viz-warn); }
.ph-grade.g-crit { color: var(--viz-critical); }
.ph-grade-lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.ph-score { font-size: 15px; color: var(--ink-1); margin-top: 2px; }
.ph-score-of { color: var(--ink-3); }
.ph-coverage-q { font-size: 11.5px; color: var(--warn); margin-top: 4px; }
.ph-unscored { margin: 12px 0 8px; }
.ph-unscored-t { font-size: 21px; font-weight: 600; color: var(--ink-1); }
.ph-unscored-s { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.ph-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 8px 0 14px; max-width: 58ch; }
.ph-meter-wrap { max-width: 420px; margin-bottom: 14px; }
.ph-meter {
  position: relative; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--viz-critical) 0%, var(--viz-warn) 46%, var(--viz-ok) 100%);
}
.ph-pin {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--ink-1); border: 2.5px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong);
  transition: left .25s ease-out;
}
.ph-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); margin-top: 5px; }
.ov-hero-cta { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.btn-gold { padding: 8px 14px; font-size: 12.5px; cursor: pointer; }

/* Right column: distribution list replaces the donut. */
.ph-dist-total { font-size: 34px; font-weight: 700; color: var(--ink-1); line-height: 1; margin-top: 8px; }
.ph-dist-sub { font-size: 11px; color: var(--ink-3); margin: 2px 0 12px; }
.ph-dist-bar {
  display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--track); margin-bottom: 14px;
}
.ph-dist-bar > i { display: block; height: 100%; }
.ph-dist-bar .seg-crit { background: var(--viz-critical); }
.ph-dist-bar .seg-warn { background: var(--viz-warn); }
.ph-dist-bar .seg-ok   { background: var(--viz-ok); }
.ph-dist-bar .seg-unk  { background: var(--viz-neutral); }
.ph-dist-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2); padding: 4px 0;
}
.ph-dist-row .swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ph-dist-row .sw-crit { background: var(--viz-critical); }
.ph-dist-row .sw-warn { background: var(--viz-warn); }
.ph-dist-row .sw-ok   { background: var(--viz-ok); }
.ph-dist-row .sw-unk  { background: var(--viz-neutral); }
.ph-dist-row .lbl { flex: 1; }
.ph-dist-row .n  { color: var(--ink-1); }
.ph-dist-row .pc { width: 38px; text-align: right; color: var(--ink-3); }

/* ── Certificate horizon ────────────────────────────────────────────────
   −15d→+90d. TODAY at 14.3%; +30d band = where auto-renew arms. */
.ph-hz-wrap { border-top: 1px solid var(--line); padding: 16px 26px 40px; }
.ph-hz-head {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 30px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.ph-hz-note { letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.ph-hz { position: relative; height: 64px; }
/* When labels need a 2nd row per side (a2/b2 lanes), the track grows so the
   far labels clear the header/axis instead of clipping. Set by renderCertHorizon. */
.ph-hz.hz-2 { height: 96px; }
.hz-axis {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--line-strong);
}
.hz-zone-expired {
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 14.3%;
  background: var(--crit-wash); border-radius: 4px;
}
.hz-band-renew {
  position: absolute; left: 14.3%; top: 6px; bottom: 6px; width: 28.27%;
  background: var(--blue-wash); opacity: .5; border-radius: 0 4px 4px 0;
}
.hz-band-lbl {
  position: absolute; left: 15.3%; bottom: -16px;
  font-size: 10px; color: var(--ink-3); letter-spacing: .04em;
}
.hz-grid { position: absolute; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.hz-grid span {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--ink-3);
}
.hz-grid-end { margin-left: -1px; }
.hz-today { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-2); }
.hz-today span {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--ink-2); letter-spacing: .08em;
}
.hz-dot, .hz-density {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%; padding: 0;
  border: 2.5px solid var(--surface); cursor: pointer;
}
.hz-dot.sev-crit, .hz-density.sev-crit { background: var(--viz-critical); }
.hz-dot.sev-warn, .hz-density.sev-warn { background: var(--viz-warn); }
.hz-dot.sev-ok,   .hz-density.sev-ok   { background: var(--viz-ok); }
.hz-dot.sev-unk,  .hz-density.sev-unk  { background: var(--viz-neutral); }
.hz-beyond { opacity: .5; }
.hz-dot .hz-lbl {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; color: var(--ink-2); white-space: nowrap;
}
/* Lanes: near (a1/b1) then far (a2/b2). The far lanes only exist when a label
   was pushed to a 2nd row, which also promotes .ph-hz to .hz-2 (taller). */
.hz-dot .hz-lbl.hz-lane-a1 { bottom: 14px; }
.hz-dot .hz-lbl.hz-lane-b1 { top: 14px; }
.hz-dot .hz-lbl.hz-lane-a2 { bottom: 30px; }
.hz-dot .hz-lbl.hz-lane-b2 { top: 30px; }
.hz-lbl.hz-lbl-hidden { display: none; }
/* Edge anchoring: the label grows inward from the dot centre instead of
   overflowing the card edge (all >90d certs pin to the right edge). */
.hz-dot .hz-lbl.hz-anchor-r { left: auto; right: 50%; transform: none; text-align: right; }
.hz-dot .hz-lbl.hz-anchor-l { left: 50%; right: auto; transform: none; text-align: left; }
.hz-density {
  width: auto; height: 20px; border-radius: 10px; padding: 0 8px;
  display: flex; align-items: center;
}
.hz-density .mono { font-size: 11px; font-weight: 700; color: var(--surface); }
.hz-empty {
  position: absolute; left: 18%; top: 50%; transform: translateY(-90%);
  font-size: 12.5px; color: var(--ink-2);
}
.hz-empty a { color: var(--blue); font-weight: 600; text-decoration: none; }

/* ── Ranked fix queue rows ──────────────────────────────────────────────
   34px rank / 1fr detail / auto impact / auto action. Hairline between
   rows; hover fills surface-2. */
.fq-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.fq-head h2 { margin: 0; }
.fq-subtitle { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.fq-viewall { font-size: 12.5px; font-weight: 600; color: var(--blue); text-decoration: none; white-space: nowrap; }
.fq-viewall:hover { color: var(--blue-hi); }
.fq-row {
  display: grid; grid-template-columns: 34px 1fr auto auto;
  gap: 12px; align-items: center; padding: 13px 4px;
  border-bottom: 1px solid var(--line);
}
.fq-row:last-of-type { border-bottom: none; }
.fq-row:hover { background: var(--surface-2); }
.fq-rank { font-size: 12px; color: var(--ink-3); }
.fq-main { min-width: 0; }
.fq-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-1); }
.fq-pill {
  display: inline-block; font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-chip); margin-left: 6px;
  vertical-align: 1px;
}
.fq-pill.sev-crit { background: var(--crit-wash); color: var(--crit); }
.fq-pill.sev-warn { background: var(--warn-wash); color: var(--warn); }
.fq-detail { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.fq-pts { font-size: 12px; color: var(--ink-1); white-space: nowrap; }
.fq-act { display: flex; align-items: center; gap: 6px; }
.fq-btn {
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--blue); font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; padding: 6px 11px;
  border-radius: var(--radius-ctl); cursor: pointer; white-space: nowrap;
}
.fq-btn:hover { border-color: var(--blue); color: var(--blue-hi); }
.fq-dismiss {
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 15px; line-height: 1; padding: 2px 5px;
  border-radius: var(--radius-chip);
}
.fq-dismiss:hover { color: var(--ink-1); background: var(--surface-2); }
.fq-upsell {
  font-size: 12.5px; color: var(--ink-2); padding: 12px 4px 2px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rc-empty { font-size: 13px; color: var(--ink-2); padding: 6px 0; }

/* Responsive: hero stacks <980; rank+impact collapse <760. */
@media (max-width: 980px) {
  .ph-cols { grid-template-columns: 1fr; }
  .ph-right { border-left: none; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .fq-row { grid-template-columns: 1fr auto; }
  .fq-rank, .fq-pts { display: none; }
  .ph-hz-wrap { padding: 16px 16px 40px; }
  .ph-left, .ph-right { padding: 20px 16px; }
}

/* ── Look-alike threat score ─────────────────────────────────────────────── */
/* Rank within a risk band: a number the operator can act on, plus a bar that
   makes the ordering readable at a glance without reading every figure. */
.la-threat { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.la-threat > b { font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; }
.la-threat-bar {
  display: inline-block; width: 46px; height: 5px; border-radius: 3px;
  background: var(--border); overflow: hidden;
}
.la-threat-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.la-threat.la-t-crit .la-threat-bar > i { background: var(--viz-critical); }
.la-threat.la-t-warn .la-threat-bar > i { background: var(--viz-warn); }

/* Scan-confirmed DNS change — measurement-level proof, deliberately distinct
   from the provider read-back that `result: verified` represents. */
.dns-verified {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 1px 7px; margin-left: 4px; border-radius: 5px; white-space: nowrap;
  color: var(--ok); background: var(--ok-wash); border: 1px solid var(--ok-bd);
}

/* Published + read back by the provider, but NOT yet re-measured by an
   independent scan. Neutral on purpose: it must not read as proof, or it would
   make the same claim as .dns-verified above with none of the evidence. */
.rem-applied-chip {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 1px 7px; margin-left: 4px; border-radius: 5px; white-space: nowrap;
  color: var(--unk); background: var(--unk-wash); border: 1px solid var(--unk-bd);
}

/* ── Mobile responsiveness pass (2026-08-15) — every rule max-width guarded;
   desktop ≥721px is unchanged. EOF placement so these win same-specificity
   collisions against the date-layered blocks above (e.g. the un-media'd
   .ov-grid restatement) below 721px only. ─────────────────────────────── */
@media (max-width: 720px) {
  /* The v3 38px page title wins the earlier 720px override by source order —
     restate it here (this block exists to win exactly these collisions). */
  .section-head .title, .title { font-size: 27px; }
  /* Grid track floors capped at container width: min() lets auto-fill keep
     multi-column in the 481-720px range while never overflowing 375px. */
  .ov-grid        { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
  .addon-grid     { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
  .dora-roi-grid,
  .dora-conc-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
  /* Wide tables keep a readable floor and scroll inside their wrappers
     (extends the ≤600px-only floor to the whole 601-720px range). */
  .cert-table { min-width: 560px; }
  /* Fixed widths that don't fit a ~340px content column. */
  .rc-row .rc-label { width: 96px; }
  .dms-ip-input { width: 120px; }
  /* ~44px finger targets in the open drawer. */
  .sidebar.is-open .nav-item { padding: 12px 18px; }
}

/* a11y skip link — app.css already defines .sr-only above. Off-screen until
   focused, so keyboard users can jump past the sidebar to the route content. */
.skip-link {
  position: fixed; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 0.9rem;
  padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ══ Type weight scale by role (legibility pass, 2026-08-30) ═════════════
   Colour cannot compensate for missing stroke. Inter is loaded as a variable
   face (300..700), so the intermediate weights below are real renderings, not
   rounded to 400/500 — that rounding is exactly what collapsed body copy and
   list content into the same optical weight as everything else.
     420 body prose · 450 list + table values · 560 emphasis · 620 titles
   Body itself is set to 420 in the body block; these are the roles that must
   NOT simply inherit it. */
b, strong { font-weight: 560; }
.title, .section-head .title, .modal h3 { font-weight: 620; }
.card h2 { font-weight: 620; }
.lede, .scanline, .measure { font-weight: 420; }
table td, .cert-table td { font-weight: 450; }
.cert-table td.host { font-weight: 600; }   /* entry name keeps its own weight */
.eyebrow { font-weight: 500; }

/* ── Auto-Renew job progress: pips + stepper (2026-09-02) ────────────────
   FIVE step states, not two. A stage deliberately NOT performed (skipped)
   and a stage the job never reached (waiting) are different facts, and
   neither may borrow the tick from a stage that actually happened. That
   distinction is the point: findings 199 and 200 were both a terminal
   outcome inheriting the most flattering rendering available, which is
   what a two-state vocabulary forces. Colour alone never carries a state —
   every node also differs in glyph and border style, so the set survives
   greyscale and colour-blind viewing.
   Tokens only. Raw hex here would push app.css past its ratchet baseline. */
.ren-pips { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.ren-pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-300); opacity: .45;
}
.ren-pip.is-done    { background: var(--viz-ok); opacity: 1; }
.ren-pip.is-active  { background: var(--viz-info); opacity: 1; }
.ren-pip.is-failed  { background: var(--viz-critical); opacity: 1; }
.ren-pip.is-skipped { background: transparent; box-shadow: inset 0 0 0 1.5px var(--viz-neutral); opacity: 1; }
.ren-pip.is-waiting { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-300); opacity: .5; }
.ren-pip.is-pending { background: transparent; box-shadow: inset 0 0 0 1.5px var(--viz-ok); opacity: .7; }

.ren-steps-btn { margin-left: 8px; font-size: 11px; }

/* The stepper renders inside the job dialog (#ren-job-overlay) since
   2026-09-23; it used to be an expanded table row. */
.ren-steps { display: flex; flex-direction: column; max-width: 620px; }

.ren-step { display: grid; grid-template-columns: 24px 1fr; gap: 11px; }
.ren-step-rail { display: flex; flex-direction: column; align-items: center; }
.ren-step-line {
  width: 0; flex: 1; min-height: 14px; margin: 3px 0;
  border-left: 1.5px solid var(--border-strong);
}
.ren-step.is-untraversed .ren-step-line { border-left-style: dashed; border-left-color: var(--border); }

.ren-node {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; line-height: 1; font-weight: 700;
  border: 1.5px solid var(--ink-300); color: var(--ink-300);
  background: var(--surface);
}
.ren-node.is-done    { border-color: var(--viz-ok); color: var(--viz-ok-text); background: var(--ok-wash); }
.ren-node.is-active  { border-color: var(--viz-info); color: var(--viz-info-text); background: var(--blue-wash); }
.ren-node.is-failed  { border-color: var(--viz-critical); color: var(--viz-critical-text); background: var(--crit-wash); }
.ren-node.is-skipped { border-color: var(--viz-neutral); color: var(--viz-neutral-text); background: var(--unk-wash); border-style: dashed; }
.ren-node.is-waiting { border-style: dashed; background: transparent; }
/* The outside check after a finished job: still to come, but not part of the
   job any more. Solid hollow ring - not the blue in-flight fill. */
.ren-node.is-pending { border-color: var(--viz-neutral); color: var(--viz-neutral-text); background: transparent; }

/* One-line result above the job dialog's details (2026-09-24). */
.ren-outcome {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 10px 0 4px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-chip);
}
.ren-outcome.is-ok   { border-color: var(--ok-bd);   background: var(--ok-wash); }
.ren-outcome.is-warn { border-color: var(--warn-bd); background: var(--warn-wash); }
.ren-outcome.is-crit { border-color: var(--crit-bd); background: var(--crit-wash); }
.ren-outcome-glyph { font-weight: 700; font-size: 14px; line-height: 1.35; }
.ren-outcome.is-ok   .ren-outcome-glyph { color: var(--viz-ok-text); }
.ren-outcome.is-warn .ren-outcome-glyph { color: var(--viz-warn-text); }
.ren-outcome.is-crit .ren-outcome-glyph { color: var(--viz-critical-text); }
.ren-outcome-label { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }
.ren-outcome-basis { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

.ren-step-body { padding: 7px 0 3px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ren-step-label { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }
.ren-step.is-dim .ren-step-label { color: var(--text-secondary); font-weight: 500; }
.ren-step-basis { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.ren-step-stamp {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; display: flex; gap: 8px; flex-wrap: wrap;
}
.ren-step-dur { color: var(--ink-300); }
.ren-step-raw {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: var(--text-secondary); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-chip);
  padding: 7px 9px; margin-top: 2px;
  white-space: pre-wrap; word-break: break-word;
  /* A deploy hook can emit a lot. Cap it so one noisy step cannot push the
     rest of the stepper off the screen; the full text stays scrollable. */
  max-height: 8.5em; overflow: auto;
}

/* ── Renewal errors: one plain-language line, raw text on demand (2026-09-23)
   The raw CA/agent error is a <details> disclosure — keyboard-reachable via
   <summary>, selectable, with a Copy button — capped in width so opening one
   inside a table cell cannot push the table past its card. Tokens only. */
.ren-err { margin-top: 3px; line-height: 1.45; max-width: 440px; }
.ren-err-cause { overflow-wrap: anywhere; }
.ren-err-more { display: inline; }
.ren-err-more > summary {
  display: inline; cursor: pointer; list-style: none;
  font-size: 11px; color: var(--text-secondary); white-space: nowrap;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.ren-err-more > summary::-webkit-details-marker { display: none; }
.ren-err-more > summary:focus-visible { outline: 2px solid var(--viz-info); outline-offset: 2px; border-radius: 3px; }
.ren-err-more[open] > summary { color: var(--text); }
.ren-err-box { display: block; margin-top: 4px; }
.ren-err-raw {
  margin: 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: var(--text-secondary); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-chip);
  padding: 7px 9px; max-width: 440px; max-height: 12em; overflow: auto;
  white-space: pre-wrap; word-break: break-word; user-select: text;
}
.ren-err-copy { font-size: 11px; margin-top: 3px; }

/* ── Renewal job dialog (#ren-job-overlay) ─────────────────────────────── */
.ren-job-modal { max-width: 660px; }
.ren-job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ren-job-x { font-size: 20px; line-height: 1; padding: 2px 8px; }
.ren-job-ident {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px;
  margin: 0 0 16px; font-size: 13px;
}
.ren-job-ident dt { color: var(--text-secondary); font-weight: 500; }
.ren-job-ident dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ren-job-id { font-family: var(--font-mono); font-size: 11.5px; overflow-wrap: anywhere; }
.ren-job-ident .ren-err, .ren-job-ident .ren-err-raw { max-width: 100%; }
.ren-job-foot { justify-content: space-between; flex-wrap: wrap; }
.ren-job-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ren-job-danger { color: var(--viz-critical-text); }
#ren-job-msg.is-error { color: var(--viz-critical-text); }
@media (max-width: 560px) {
  .ren-job-ident { grid-template-columns: 1fr; gap: 2px; }
  .ren-job-ident dd { margin-bottom: 6px; }
}

/* ── Agent software downloads (integrations page, 2026-09-03) ────────────────
   Tokens only — no raw hex, so the contrast ratchet in scripts/contrast_audit.js
   stays at its baseline. */
.agent-dl {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 12px;
}
.agent-dl .agent-dl-title { font-weight: 650; color: var(--ink-900); }
.agent-dl .agent-dl-sum { color: var(--ink-500); margin: 4px 0 10px; }
.agent-dl .agent-dl-meta { color: var(--ink-500); font-size: 12.5px; }
.agent-dl .agent-dl-sha {
  display: block;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  color: var(--ink-700);
  word-break: break-all;
  margin: 8px 0 10px;
}
.agent-dl .agent-dl-note {
  border-left: 2px solid var(--border-strong);
  padding-left: 10px;
  color: var(--ink-500);
  font-size: 12.5px;
  margin-top: 10px;
}

/* ── Halo type (2026-09-22) — same faces as skyqon.com ─────────────────
   Space Grotesk for headings and page titles, DM Sans for prose, DM Mono
   for every measured value. The tokens above carry the families; this
   block only routes headings onto the display face. */
h1, h2, h3, .title, .card h2, .modal h3, .section-head .title, .page-title, .tb-brand .sb-tag {
  font-family: var(--font-display);
}
.title, .card h2, .modal h3, .section-head .title { letter-spacing: -0.02em; }

/* ── Halo atmosphere for the app shell (2026-09-22) ──────────────────────
   CSS only — no canvas behind a data-dense SPA. A faint cyan glow at the
   top right of the canvas and a grid at 3% alpha give the same depth as
   the marketing hero; cards get a hairline top highlight and a quiet lift
   on hover; the active rail row becomes a rounded block with a cyan edge. */
.app-shell { position: relative; isolation: isolate; }
.app-shell::before {
  content: ""; position: fixed; inset: 54px 0 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 88% 0%, rgba(111,163,228,.10) 0%, transparent 60%),
    linear-gradient(rgba(79,168,213,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,168,213,.035) 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px;
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  mask-image: linear-gradient(180deg, black 0%, transparent 70%);
}
[data-theme="light"] .app-shell::before {
  background:
    radial-gradient(ellipse 60% 45% at 88% 0%, rgba(30,95,204,.07) 0%, transparent 60%),
    linear-gradient(rgba(30,95,204,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,95,204,.05) 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px;
}
.card { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--card-shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
[data-theme="light"] .card { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--card-shadow); }
.card:hover { border-color: var(--line-strong); }
.eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--viz-info); box-shadow: 0 0 0 4px color-mix(in srgb, var(--viz-info) 14%, transparent); vertical-align: 1px; }

/* ══════════════════════════════════════════════════════════════════════════
   HALO SHELL (2026-09-22) — the marketing sites' families, mapped onto the
   app. Everything here is end-of-sheet so it wins on equal specificity; the
   older eras above are kept (decision 2026-08-29). Light-theme overrides
   repeat [data-theme="light"] because the old eras use that form. Canonical
   tokens are untouched (PDF mirror + trust-slate lockstep); the --hl-* tokens
   are app-only and are the sites' .band--dark flip reduced to what the app
   needs.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --hl-glass:      color-mix(in srgb, var(--viz-info) 4%, transparent);
  --hl-glass-bd:   var(--border);
  --hl-bd-bright:  color-mix(in srgb, var(--viz-info) 40%, transparent);
  --hl-icon-wash:  var(--tint-info);
  --hl-ease:       cubic-bezier(.2, .7, .2, 1);
}
[data-theme="dark"] {
  /* The dark theme is ONLY this token block (and its twin in gold.css):
     no [data-theme="dark"] selector may exist anywhere else (Phase 4,
     2026-10-06). Light is the designed base in :root. */
  --hl-glass:      color-mix(in srgb, var(--ink-900) 4%, transparent);
  --hl-glass-bd:   color-mix(in srgb, var(--ink-900) 14%, transparent);
  --hl-bd-bright:  color-mix(in srgb, var(--viz-info) 30%, transparent);
  --hl-icon-wash:  color-mix(in srgb, var(--viz-info) 12%, transparent);
}

/* — eyebrow: sans, tracked caps, accent colour, cyan dot (site .eyebrow) — */
.eyebrow, .ov-hero-eyebrow, .ph-hz-head,
[data-theme="light"] .eyebrow, [data-theme="light"] .ov-hero-eyebrow, [data-theme="light"] .ph-hz-head {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--viz-info);
}
.ov-hero-eyebrow::before, .ph-hz-head::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%;
  background: var(--viz-info); box-shadow: 0 0 0 4px color-mix(in srgb, var(--viz-info) 14%, transparent); vertical-align: 1px;
}

/* — page title: the display face at a weight that holds on navy — */
h1, .title, .section-head .title { font-size: 32px; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
@media (max-width: 760px) { h1, .title, .section-head .title { font-size: 26px; } }

/* — rail: rounded active block with a cyan edge (the router toggles is-active) — */
.nav-item.is-active {
  border-radius: var(--radius-ctl); margin-inline: 8px;
  background: color-mix(in srgb, var(--chrome-600) 55%, var(--chrome-800));
}
.nav-item.is-active::before { background: var(--viz-info); top: 10px; bottom: 10px; border-radius: 3px; }
.app-shell.rail-collapsed .nav-item.is-active { margin-inline: 6px; }

/* — topbar: one navy band with a hairline and a faint cyan underline; wells are chrome-800 — */
.app-topbar, [data-theme="light"] .app-topbar {
  border-bottom: 1px solid var(--chrome-hair);
  box-shadow: none;
}
.app-topbar .topbar-search, [data-theme="light"] .app-topbar .topbar-search {
  background: var(--chrome-800); border-color: var(--chrome-hair); color: var(--chrome-on-muted);
  border-radius: 999px;
}
.app-topbar .topbar-search:hover, [data-theme="light"] .app-topbar .topbar-search:hover { border-color: var(--hl-bd-bright); color: var(--chrome-on); }
.app-topbar .topbar-search .palette-kbd, [data-theme="light"] .app-topbar .topbar-search .palette-kbd { border-color: var(--chrome-hair); color: var(--chrome-on-muted); }
.app-topbar .theme-toggle, [data-theme="light"] .app-topbar .theme-toggle { background: var(--chrome-800); border: 1px solid var(--chrome-hair); border-radius: 999px; }
.app-topbar .acct, [data-theme="light"] .app-topbar .acct { background: var(--chrome-800); border-color: var(--chrome-hair); border-radius: 999px; }
.app-topbar .acct .acct-nm, [data-theme="light"] .app-topbar .acct .acct-nm { color: var(--chrome-on); }
.app-topbar .acct .acct-rl, [data-theme="light"] .app-topbar .acct .acct-rl { color: var(--chrome-on-muted); }
.app-topbar .acct .acct-pic, [data-theme="light"] .app-topbar .acct .acct-pic { background: var(--chrome-600); }
.app-topbar .acct.acct-trigger::after, [data-theme="light"] .app-topbar .acct.acct-trigger::after { color: var(--viz-info); }

/* — cards: glass on the dark canvas, opaque paper on light; hover = brighter edge only
     (no transform on .card: a transform would become the containing block of any
     fixed-position child such as a drawer or a modal) — */
.card, [data-theme="light"] .card { background: var(--surface-raised); border-color: var(--raised-bd); box-shadow: var(--raised-shadow); }
.card:hover { border-color: var(--hl-bd-bright); }
.app-main { background: var(--app-canvas); }
.kpi, .ov-module, .rem-card, .ic-drawer, .acct-dropdown { background: var(--surface-raised); box-shadow: var(--raised-shadow); }

/* — module tiles = the site's bento cards — */
.ov-module { border-radius: var(--radius-card); padding: 22px; border-color: var(--raised-bd); transition: transform .2s var(--hl-ease), border-color .2s ease, box-shadow .2s ease; }
.ov-module:hover { transform: translateY(-3px); border-color: var(--hl-bd-bright); }
.ov-module .mod-icon { width: 37px; height: 37px; border-radius: 12px; background: var(--hl-icon-wash); border: 0; color: var(--viz-info); }
.ov-module .mod-icon svg { width: 18px; height: 18px; }
.ov-module .mod-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ov-grid { gap: 14px; }

/* — KPI tiles: one stat style across the three naming generations — */
.kpi { border-radius: var(--radius-tile); border-color: var(--raised-bd); }
.kpi:hover { border-color: var(--hl-bd-bright); }
.kpi .n, .kpi .num, .kpi .kpi-num { font-family: var(--font-mono); font-size: 26px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi .l, .kpi .lbl, .kpi .kpi-label { font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-2); margin-top: 4px; }

/* — tables (site .cmp-table): quiet mono headers, roomy rows, soft hover — */
.cert-table thead th, .table-scroll > table thead th {
  background: var(--hl-glass); font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 11px 14px;
  border-bottom: 1px solid var(--hl-glass-bd);
}
.cert-table td, .table-scroll > table td { padding: 13px 14px; border-top: 1px solid var(--hl-glass-bd); border-bottom: 0; font-size: 13.5px; }
.cert-table tbody tr:hover td, .table-scroll > table tbody tr:hover td { background: var(--hl-glass); }

/* — chips — */
.pill, .mod-badge { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; }
.pill.hl-check::before { content: "\2713"; width: auto; height: auto; background: none; border-radius: 0; margin-right: 6px; font-weight: 700; color: var(--viz-info); }

/* — buttons (site .btn): primary lifts with a cyan shadow; secondary is the
     dark-band ghost; .btn-pill for hero and empty-state actions — */
.btn-gold, .btn-primary, [data-theme="light"] .btn-primary {
  min-height: 38px; padding: 9px 16px; font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  border-radius: var(--radius-ctl);
  transition: transform .2s var(--hl-ease), box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn-gold:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(7,24,45,.20); }  /* fixed navy tint: --ink-900 flips light in dark mode */
.btn-gold:disabled, .btn-primary:disabled { transform: none; box-shadow: none; }
.btn-link, .btn-quiet {
  background: color-mix(in srgb, var(--ink-900) 6%, transparent); border-color: color-mix(in srgb, var(--ink-900) 30%, transparent);
  color: var(--ink-900); box-shadow: none; transition: transform .2s var(--hl-ease), border-color .2s ease, background-color .2s ease;
}
.btn-link:hover:not(:disabled), .btn-quiet:hover { background: color-mix(in srgb, var(--ink-900) 12%, transparent); border-color: color-mix(in srgb, var(--ink-900) 45%, transparent); color: var(--ink-900); box-shadow: none; }
[data-theme="light"] .btn-link, [data-theme="light"] .btn-quiet { background: var(--surface); border-color: var(--border-strong); color: var(--viz-info); }
[data-theme="light"] .btn-link:hover:not(:disabled), [data-theme="light"] .btn-quiet:hover { background: var(--tint-info); border-color: var(--hl-bd-bright); color: var(--blue-hi); }
.btn-pill { border-radius: 999px; }

/* — tabs (site .tab-nav): a cyan edge marks the selected one — */
.subnav-tab.is-active { box-shadow: inset 0 -2px 0 var(--viz-info); }
.tab-btn.is-active { background: var(--hl-icon-wash); border-color: var(--hl-bd-bright); color: var(--ink-900); }

/* — empty states: one component for the boxed one-offs — */
.hl-empty, .rc-empty, .xd-empty, .hz-empty, .da-rem-empty, .addon-empty {
  display: grid; justify-items: center; gap: 8px; padding: 26px 18px; text-align: center;
  border: 1px dashed var(--hl-glass-bd); border-radius: var(--radius-tile);
  color: var(--ink-2); font-size: 13px; line-height: 1.5;
}
.hl-empty .ic-tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--hl-icon-wash); color: var(--viz-info); }
.hl-empty .ic-tile svg { width: 17px; height: 17px; }
.hl-empty b { color: var(--ink-1); font-family: var(--font-display); font-size: 15px; font-weight: 600; }

/* — reveal on first sight (site .reveal); JS adds the class, so a script
     failure leaves everything visible; the global reduced-motion rule above
     also neutralises the transition — */
.hl-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s var(--hl-ease); }
.hl-reveal.is-in { opacity: 1; transform: none; }
.ov-grid > .hl-reveal:nth-child(2), .hl-stats > .hl-reveal:nth-child(2) { transition-delay: 80ms; }
.ov-grid > .hl-reveal:nth-child(3), .hl-stats > .hl-reveal:nth-child(3) { transition-delay: 160ms; }
.ov-grid > .hl-reveal:nth-child(n+4), .hl-stats > .hl-reveal:nth-child(n+4) { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) { .hl-reveal { opacity: 1; transform: none; } }


/* — Overview posture hero (Stage 3): mesh behind, glass right column, pill
     CTAs, and the stat strip (site .stats-grid) under the two columns — */
.ph-hero, .ph-hero.ov-hero {
  position: relative;
  background: linear-gradient(135deg, color-mix(in srgb, var(--viz-info) 7%, var(--surface)) 0%, var(--surface) 55%);
  border-color: var(--hl-glass-bd);
}
.ph-mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
[data-theme="light"] .ph-mesh { opacity: .8; }
.ph-cols, .hl-stats, .ph-hz-wrap { position: relative; z-index: 1; }
.ph-right { background: var(--hl-glass); border-left-color: var(--hl-glass-bd); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ph-grade { font-size: 88px; letter-spacing: -.05em; }
.ph-sub { font-size: 15px; line-height: 1.6; }
.ov-hero-cta .btn-gold, .ov-hero-cta .btn-quiet { border-radius: 999px; min-height: 40px; padding-inline: 18px; }
.hl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hl-glass-bd); padding: 18px 26px 6px; }
.hl-stat { display: block; padding: 4px 24px 14px 0; border-right: 1px solid var(--hl-glass-bd); text-decoration: none; color: inherit; }
.hl-stat + .hl-stat { padding-left: 24px; }
.hl-stat:last-child { border-right: 0; }
.hl-stat-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; margin-bottom: 12px; color: var(--viz-info); background: var(--hl-icon-wash); }
.hl-stat-ic svg { width: 17px; height: 17px; }
.hl-stat b { display: block; font-size: 32px; line-height: .95; font-weight: 500; color: var(--ink-1); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.hl-stat p { margin: 8px 0 0; max-width: 200px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.hl-stat:hover b { color: var(--viz-info); }
.hl-stat:focus-visible { outline: 2px solid var(--viz-info); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (max-width: 980px) { .hl-stats { grid-template-columns: 1fr 1fr; padding-inline: 16px; } .hl-stat:nth-child(2) { border-right: 0; } .hl-stat:nth-child(3) { padding-left: 0; } }
@media (max-width: 560px) { .hl-stats { grid-template-columns: 1fr; } .hl-stat { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--hl-glass-bd); } .hl-stat:last-child { border-bottom: 0; } }

/* ── Long-list toolbar + capped, sticky-header tables (2026-09-24) ─────────
   The five long lists (CA issuance, Machine identities, Reconciliation, Top
   violations, Received reports) and CRL feeds: search box, "Showing N of M",
   CSV, Load more. Each table scrolls inside its card with its header pinned,
   so a 1,000-row page never becomes an endless page. Scoped by id so no
   other table in the app changes. Tokens only. */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 10px; }
.list-search {
  flex: 1 1 260px; min-width: 200px; max-width: 460px; padding: 8px 11px;
  background: var(--surface-sunken); color: var(--text); font: inherit; font-size: 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-chip, 6px);
}
.list-search::placeholder { color: var(--text-secondary); }
.list-search:focus-visible { outline: 2px solid var(--viz-info); outline-offset: 1px; }
.list-note { font-size: 12px; color: var(--text-secondary); }
.list-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.list-csv { margin-left: auto; font-size: 12px; padding: 4px 10px; }
.list-csv.is-locked { opacity: .6; }
.list-more { display: block; margin: 10px auto 2px; }
#iss-table.table-scroll, #inv-table.table-scroll, #rec-table.table-scroll,
#crl-table.table-scroll, #wbr-list-card .table-scroll, #tlr-list-card .table-scroll {
  max-height: min(64vh, 680px); overflow: auto;
}
#iss-table.table-scroll thead th, #inv-table.table-scroll thead th, #rec-table.table-scroll thead th,
#crl-table.table-scroll thead th, #wbr-list-card .table-scroll thead th, #tlr-list-card .table-scroll thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line-strong);
}
.wbr-expand { white-space: nowrap; font-size: 12px; }
tr.wbr-pages > td { background: var(--surface-sunken); padding: 8px 12px 12px; }
.wbr-pages-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wbr-pages-table th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 4px 8px; }
.wbr-pages-table td { padding: 4px 8px; border-top: 1px solid var(--line); vertical-align: top; }

/* Issuance ledger: SHA3 compatibility tag under the signature algorithm
   (2026-09-25). One line, below the name, so the Key / Alg column keeps
   its width. */
.iss-sha3-tag { display: inline-block; margin-top: 4px; white-space: nowrap; font-size: 11px; }

/* Legacy form controls follow the theme (2026-09-25, owner-reported from
   Private CA › Revocations and Partner): these lg-ph* rules carried the
   dark-era literal rgba(14,26,46,.55–.65), so in light theme every field
   was a dark slab with dark text. They now use --input-bg (= the sunken
   surface: #0C2036 dark, #F6F7FA light) like .list-search. Guard:
   tests/test_light_theme_form_controls.py. */
.lg-ph48::placeholder, .lg-ph175::placeholder, .lg-ph176::placeholder, .lg-ph181::placeholder, .lg-ph182::placeholder, .lg-ph184::placeholder, .lg-ph287::placeholder, .lg-ph294::placeholder, .lg-ph295::placeholder, .lg-ph317::placeholder, .lg-ph318::placeholder, .sso-f input::placeholder { color: var(--text-secondary); opacity: 1; }