:root {
  --bg: #f5efe6;
  --bg-accent: radial-gradient(circle at top left, rgba(183, 120, 52, 0.22), transparent 32%),
    radial-gradient(circle at bottom right, rgba(39, 80, 67, 0.22), transparent 28%),
    linear-gradient(180deg, #f8f3ec 0%, #efe4d2 100%);
  --surface: rgba(255, 250, 243, 0.88);
  --surface-strong: #fff9f1;
  --border: rgba(63, 43, 19, 0.12);
  --text: #1d1a14;
  --muted: #655b50;
  --brand: #9d4d24;
  --brand-deep: #65311d;
  --success: #275043;
  --critical: #6e1b1b;
  --high: #a72e2e;
  --medium: #a5631c;
  --low: #406e5f;
  --info: #556676;
  --shadow: 0 24px 80px rgba(85, 69, 44, 0.14);
  --radius: 22px;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-body: "Avenir Next", "Segoe UI", sans-serif;
}

/* ========================================================================
   Phase 7 — Calm Cybersecurity Theme (additive token layer)
   ------------------------------------------------------------------------
   Activated via `body.theme-calm`. Designed for the operator/admin shell
   so long sessions feel calm and focused — deep navy base, muted blue
   primary, restrained teal/cyan accents, and subdued severity colors.
   The share/client report intentionally keeps the warm "paper" palette
   so customer deliverables remain visually distinct. Severity tokens
   are unified across both themes (same names, calmer hues here).
   ======================================================================== */
body.theme-calm {
  --bg: #0e1626;
  --bg-accent:
    radial-gradient(circle at top left, rgba(56, 122, 168, 0.18), transparent 38%),
    radial-gradient(circle at bottom right, rgba(48, 156, 158, 0.12), transparent 34%),
    linear-gradient(180deg, #0c1422 0%, #111c2e 100%);
  --surface: rgba(22, 32, 48, 0.92);
  --surface-strong: #1a2438;
  --surface-soft: #141d2d;
  --border: rgba(150, 175, 210, 0.14);
  --border-strong: rgba(160, 190, 220, 0.22);
  --text: #e6ecf3;
  --text-soft: #c2cdde;
  --muted: #8c9bb3;
  --brand: #4a82bd;          /* muted blue primary */
  --brand-deep: #2c5b8c;
  --accent: #3aa6a4;         /* teal accent — used sparingly */
  --accent-soft: rgba(58, 166, 164, 0.12);
  --success: #4f9b7d;
  --critical: #c9534b;       /* restrained red */
  --high: #d97852;
  --medium: #d6a455;
  --low: #6f9fb5;
  --info: #7d92a8;
  --shadow: 0 18px 48px rgba(4, 10, 22, 0.55);

  background: var(--bg);
  color: var(--text);
}

/* Severity / status pill alignment under the calm theme. We don't replace
   the existing badge classes — we let CSS variables flow into them. The
   classes below provide a single-source mapping when we want to render
   a fresh component without inheriting the warm-paper styling. */
body.theme-calm .badge-critical,
body.theme-calm .badge-high,
body.theme-calm .badge-medium,
body.theme-calm .badge-low,
body.theme-calm .badge-info { color: #fff; border-color: transparent; }
body.theme-calm .badge-critical { background: var(--critical); }
body.theme-calm .badge-high     { background: var(--high); }
body.theme-calm .badge-medium   { background: var(--medium); color: #1a1208; }
body.theme-calm .badge-low      { background: var(--low); }
body.theme-calm .badge-info     { background: var(--info); }

/* Phase 7 — calm-theme building blocks for new monitoring & audience UI.
   Reused by the Platform Monitoring page and the audience switcher so
   we get a consistent look without touching legacy components. */
.calm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 4px 14px rgba(4, 10, 22, 0.18);
}
.calm-card + .calm-card { margin-top: 0.75rem; }
.calm-card-title {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.calm-metric {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
.calm-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.calm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border-strong, rgba(0,0,0,0.08));
  background: rgba(255,255,255,0.04);
  color: var(--text-soft, var(--text));
  white-space: nowrap;
}
.calm-pill--critical { background: rgba(201, 83, 75, 0.18);  color: #f0b8b3; border-color: rgba(201, 83, 75, 0.4); }
.calm-pill--high     { background: rgba(217, 120, 82, 0.18); color: #f3c4ad; border-color: rgba(217, 120, 82, 0.4); }
.calm-pill--medium   { background: rgba(214, 164, 85, 0.18); color: #ead7a6; border-color: rgba(214, 164, 85, 0.38); }
.calm-pill--low      { background: rgba(111, 159, 181, 0.18); color: #c8dde7; border-color: rgba(111, 159, 181, 0.4); }
.calm-pill--none     { background: rgba(79, 155, 125, 0.18); color: #b8dccb; border-color: rgba(79, 155, 125, 0.4); }
.calm-pill--verified { background: rgba(79, 155, 125, 0.18); color: #b8dccb; border-color: rgba(79, 155, 125, 0.4); }
.calm-pill--warning  { background: rgba(214, 164, 85, 0.18); color: #ead7a6; border-color: rgba(214, 164, 85, 0.38); }
.calm-pill--restricted { background: rgba(201, 83, 75, 0.18); color: #f0b8b3; border-color: rgba(201, 83, 75, 0.4); }
.calm-pill--not_tested,
.calm-pill--stale    { background: rgba(140, 155, 179, 0.18); color: var(--muted); border-color: rgba(140, 155, 179, 0.3); }

/* Audience switcher — used by both operator scan detail and the share
   page so the visual language stays consistent across surfaces. */
.audience-switcher {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  background: var(--surface-strong, rgba(255,255,255,0.6));
  border-radius: 999px;
  align-items: center;
}
.audience-switcher button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.audience-switcher button.is-active {
  background: var(--brand, #4a82bd);
  color: #fff;
}
.audience-switcher button:focus-visible {
  outline: 2px solid var(--accent, #3aa6a4);
  outline-offset: 2px;
}

/* Platform Monitoring table — shows up only inside section-platform when
   the monitoring sub-tab is selected. Compact, dense, calm. */
.pm-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pm-table th, .pm-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
  vertical-align: middle;
}
.pm-table th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-soft, transparent);
}
.pm-table tr:hover td { background: rgba(74, 130, 189, 0.06); }
.pm-row-attention td:first-child { box-shadow: inset 3px 0 0 var(--high, #d97852); }
.pm-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
  align-items: center;
}
.pm-filters select, .pm-filters input[type="search"] {
  padding: 0.3rem 0.5rem; font-size: 0.8rem;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  background: var(--surface-strong, #fff);
  color: var(--text); border-radius: 6px;
}
.pm-empty {
  padding: 1.2rem; text-align: center; color: var(--muted);
  border: 1px dashed var(--border, rgba(0,0,0,0.12)); border-radius: 10px;
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-accent);
  color: var(--text);
  font-family: var(--font-body);
}

a {
  color: var(--brand-deep);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: none;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  padding: 0.78rem 1.1rem;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  padding: 0.78rem 1.1rem;
  text-decoration: none;
  transition: transform 120ms ease, filter 120ms ease;
}

.button-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.button-link.secondary {
  background: var(--success);
}

button.secondary {
  background: var(--success);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.78);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(157, 77, 36, 0.4);
  box-shadow: 0 0 0 3px rgba(157, 77, 36, 0.08);
}

.shell {
  width: min(1180px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 0.5rem 0 2.5rem;
}

#section-register,
#section-assets,
#section-zap,
#section-auth,
#section-findings,
#section-detail,
#section-welcome {
  scroll-margin-top: 52px;
}

.hero {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 0.85rem;
}

.hero h1,
.section-head h2,
.finding h3,
.scan h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.4rem, 3.5vw, 2.1rem);
  line-height: 1.05;
}

.lede {
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 0.25rem;
}

.hero-panel,
.card {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-panel {
  padding: 1rem 1.1rem;
  box-shadow: none;
  background: rgba(255, 250, 243, 0.72);
  border-color: rgba(63, 43, 19, 0.08);
}

.hero-panel-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.hero-panel ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.55;
}

.hero-panel li + li {
  margin-top: 0.15rem;
}

.cards,
.grid {
  display: grid;
  gap: 1.25rem;
}

.cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.5rem;
}

.grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1.25rem;
}

.card {
  padding: 1.15rem;
}

.metric {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.85rem 1rem;
}

.metric span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.metric strong {
  font-family: var(--font-display);
  font-size: 1.65rem;
}

.severity-card {
  background: linear-gradient(135deg, rgba(157, 77, 36, 0.1), rgba(39, 80, 67, 0.08)), var(--surface);
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.85rem;
}

.section-head h2 {
  margin: 0;
  font-size: 1.3rem;
}

.eyebrow {
  margin: 0 0 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--brand-deep);
}

.stack {
  display: grid;
  gap: 0.95rem;
}

label span {
  display: block;
  margin-bottom: 0.38rem;
  font-weight: 600;
}

.checkbox-row {
  display: flex;
  gap: 0.7rem;
  align-items: start;
}

.checkbox-row input {
  width: auto;
  margin-top: 0.22rem;
}

.small-note,
.muted {
  color: var(--muted);
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

tbody tr {
  transition: background 120ms ease, box-shadow 120ms ease;
}

th,
td {
  text-align: left;
  padding: 0.9rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.asset-row {
  cursor: pointer;
}

.asset-row:hover {
  background: rgba(157, 77, 36, 0.05);
}

.asset-row.is-active {
  background: rgba(157, 77, 36, 0.1);
  box-shadow: inset 3px 0 0 rgba(157, 77, 36, 0.45);
}

.filters {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.scanner-catalog {
  margin-top: 1rem;
}

.scanner-item {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-strong);
  padding: 0.95rem 1rem;
}

.scanner-item p {
  margin: 0.2rem 0 0;
}

.test-target-panel {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.finding,
.scan {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-strong);
  padding: 1rem;
  transition: background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.scan {
  cursor: pointer;
}

.scan:hover {
  background: rgba(255, 250, 243, 1);
  border-color: rgba(157, 77, 36, 0.25);
}

.finding-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.finding h3,
.scan h3 {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-critical {
  background: var(--critical);
}

.badge-high {
  background: var(--high);
}

.badge-medium {
  background: var(--medium);
}

.badge-low {
  background: var(--low);
}

.badge-info {
  background: var(--info);
}

.badge-completed {
  background: var(--success);
}

.badge-running,
.badge-queued {
  background: var(--brand);
}

.badge-cancelled {
  background: rgba(120, 120, 120, 0.16);
  color: var(--muted, #6b7280);
  border: 1px solid var(--border);
}
.badge-requested {
  background: rgba(37, 99, 235, 0.10);
  color: var(--blue, #2563eb);
  border: 1px solid rgba(37, 99, 235, 0.25);
}
.badge-failed {
  background: var(--high);
}

.badge-skipped {
  background: var(--medium);
  color: #1c1300;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.verification-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.scan-action-bulk {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.9rem;
  background: linear-gradient(135deg, rgba(58, 122, 254, 0.08), rgba(58, 122, 254, 0.02));
  border: 1px solid rgba(58, 122, 254, 0.25);
  border-radius: 8px;
}

.scan-action-bulk button.primary {
  white-space: nowrap;
}

.scan-action-bulk .muted {
  font-size: 0.82rem;
  flex: 1;
  min-width: 200px;
}

.scan-action-grid {
  display: grid;
  gap: 1rem;
}

.detail-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.summary-tile {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  padding: 0.95rem 1rem;
  /* Without min-width:0 a long value (e.g. a hostname) forces the grid
     track wider than 1fr and the value visibly bleeds into the next
     tile. min-width:0 + overflow:hidden keeps each tile self-contained. */
  min-width: 0;
  overflow: hidden;
}

.summary-tile span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
}

.summary-tile strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  display: block;
  /* Long single-token values (hostnames, dates, slugs) must wrap inside
     the tile rather than overflow horizontally. */
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.asset-summary-grid .summary-tile strong {
  font-size: 1.05rem;
}

.asset-summary-grid + .asset-summary-grid {
  margin-top: 1rem;
}

/* Calm (dark) theme — the default tile background is a translucent
   off-white tuned for the warm paper palette. On the navy theme that
   reads as a washed-out grey panel and the muted-color label disappears
   into it. Re-skin the tile with the dark-theme surface tokens so the
   label/value hierarchy stays legible (the screenshot of the verified
   asset detail page surfaced this — labels were ghosted out and only
   the values were vaguely readable). */
body.theme-calm .summary-tile {
  background: var(--surface-soft);
  border-color: var(--border-strong, var(--border));
}
body.theme-calm .summary-tile span {
  color: var(--text-soft);
}
body.theme-calm .summary-tile strong {
  color: var(--text);
}

/* Narrow desktop / canvas-iframe widths: 4 tiles at 1.6rem are too wide
   for the available column. Drop to 2 tiles and ease the value font. */
@media (max-width: 1100px) {
  .asset-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .asset-summary-grid .summary-tile strong {
    font-size: 1rem;
  }
}

.artifact {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-strong);
  padding: 1rem;
}

.artifact-error {
  border-color: rgba(167, 46, 46, 0.28);
  background: rgba(255, 243, 243, 0.92);
}

.artifact-new {
  border-color: rgba(167, 99, 28, 0.25);
}

.artifact-resolved {
  border-color: rgba(64, 110, 95, 0.25);
}

.verification-method p {
  margin: 0.35rem 0 0;
}

.artifact pre,
.artifact code {
  white-space: pre-wrap;
  word-break: break-word;
}

.artifact pre {
  max-height: 300px;
  overflow: auto;
  margin: 0.75rem 0 0;
  padding: 0.9rem;
  border-radius: 14px;
  background: rgba(29, 26, 20, 0.05);
}

.flash {
  position: sticky;
  bottom: 1rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(39, 80, 67, 0.9);
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 10;
}

.flash:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}

.flash.error {
  background: rgba(167, 46, 46, 0.92);
}

.empty {
  color: var(--muted);
  font-style: italic;
  padding: 1.2rem 0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

.empty-state-icon {
  font-size: 2rem;
  opacity: 0.4;
  font-style: normal;
}

.empty-state p {
  margin: 0;
  max-width: 36ch;
}

.timeline-list {
  display: grid;
  gap: 0.75rem;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--text);
  padding: 0.85rem 1rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.timeline-item.tl-completed { border-left-color: #10b981; }
.timeline-item.tl-failed    { border-left-color: #ef4444; }
.timeline-item.tl-running   { border-left-color: #f59e0b; }
.timeline-item.tl-queued    { border-left-color: #94a3b8; }
.tl-row-top, .tl-row-bottom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.tl-row-bottom { font-size: 0.82rem; color: var(--muted); }
.tl-count {
  font-size: 0.78rem;
  padding: 0.15em 0.5em;
  border-radius: 6px;
  background: rgba(0,0,0,0.06);
}
.tl-delta {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15em 0.45em;
  border-radius: 6px;
}
.tl-delta-up   { background: rgba(239,68,68,0.12); color: #dc2626; }
.tl-delta-down { background: rgba(16,185,129,0.12); color: #059669; }
.tl-delta-same { background: rgba(0,0,0,0.05); color: var(--muted); }
.tl-scheduled {
  font-size: 0.72rem;
  padding: 0.12em 0.45em;
  border-radius: 6px;
  background: rgba(139,92,246,0.12);
  color: #7c3aed;
  font-weight: 500;
}

.timeline-item:hover {
  border-color: rgba(157, 77, 36, 0.3);
}

.timeline-item.is-active {
  border-color: rgba(157, 77, 36, 0.4);
  box-shadow: inset 0 0 0 1px rgba(157, 77, 36, 0.18);
}

.detail-actions {
  margin: 0.9rem 0 1rem;
}

.status-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.badge-new {
  background: var(--high);
}

.badge-recurring {
  background: var(--medium);
}

.badge-legacy {
  background: #6b6560;
  color: #fff;
}

.badge-baseline {
  background: #8a6820;
  color: #fff;
}

.badge-warning {
  background: var(--medium);
}

.artifact-recurring {
  border-color: rgba(120, 85, 20, 0.25);
  background: rgba(255, 250, 240, 0.92);
}

.artifact-warning {
  border-color: rgba(130, 100, 30, 0.28);
  background: rgba(255, 252, 235, 0.92);
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.comparison-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.comparison-list li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
}

.empty-inline {
  color: var(--muted);
  font-style: italic;
}

.badge-stack {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.severity-group {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.severity-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(29, 26, 20, 0.04);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
}

.severity-group > .artifact {
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--border);
}

.severity-group > .artifact:first-of-type {
  border-top: none;
}

.auth-profile-card {
  cursor: default;
}

.scan-summary-line {
  display: block;
  padding: 0.15rem 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.scan-summary-line .badge {
  font-size: 0.72rem;
  vertical-align: middle;
}

.scan-eligible {
  color: var(--success);
}

.scan-blocked {
  color: var(--high);
}

.scan-selected {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.scan-active {
  border-left: 3px solid var(--brand);
}

.scan-active.scan-status-running {
  border-left-color: #33883b;
}

.scan-active.scan-status-queued {
  border-left-color: var(--brand);
}

.live-queue-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.4rem 0;
  margin-bottom: 0.6rem;
}

.live-queue-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
  padding-right: 0.25rem;
}

.queue-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.26rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--text);
  transition: background 100ms ease;
  white-space: nowrap;
  font-family: inherit;
}

.queue-chip:hover {
  background: rgba(63, 43, 19, 0.08);
}

.queue-chip.is-running {
  border-color: rgba(51, 112, 51, 0.45);
  background: rgba(51, 112, 51, 0.07);
}

.queue-chip.is-queued {
  border-color: rgba(157, 77, 36, 0.38);
  background: rgba(157, 77, 36, 0.06);
}

.queue-chip.is-failed {
  border-color: rgba(167, 46, 46, 0.38);
  background: rgba(167, 46, 46, 0.06);
}

.queue-chip.is-completed {
  border-color: var(--border);
  background: transparent;
  color: var(--muted);
}

.queue-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #33883b;
  animation: pulse-glow 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.65); }
}

.chip-id {
  font-weight: 700;
}

.chip-sep {
  color: var(--muted);
  opacity: 0.6;
}

.chip-asset {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-status-badge {
  font-size: 0.68rem;
  padding: 0.1em 0.45em;
}

.chip-time {
  font-size: 0.71rem;
  color: var(--muted);
}

.scan-progress-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: rgba(157, 77, 36, 0.09);
  border: 1px solid rgba(157, 77, 36, 0.22);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* ── Live scan progress card ───────────────────────────────────────── */
.scan-live-card {
  background: linear-gradient(135deg,
    rgba(51, 136, 59, 0.07) 0%,
    rgba(51, 136, 59, 0.04) 100%);
  border: 1px solid rgba(51, 136, 59, 0.28);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.scan-live-card--queued {
  background: linear-gradient(135deg,
    rgba(157, 77, 36, 0.08) 0%,
    rgba(157, 77, 36, 0.04) 100%);
  border-color: rgba(157, 77, 36, 0.28);
}
.scan-live-card--cancelling {
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.32);
}
.scan-live-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.scan-live-pulse {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #33883b;
  animation: pulse-glow 1.3s ease-in-out infinite;
  flex-shrink: 0;
  margin-top: 5px;
}
.scan-live-card--queued .scan-live-pulse {
  background: var(--brand);
}
.scan-live-card--cancelling .scan-live-pulse {
  background: #dc2626;
}
.scan-live-headline {
  flex: 1;
  min-width: 0;
}
.scan-live-headline strong {
  display: block;
  font-size: 1.02rem;
  margin-bottom: 0.15rem;
}
.scan-live-step {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.4;
  word-break: break-word;
}
.scan-live-percent {
  font-size: 1.6rem;
  font-weight: 600;
  color: #33883b;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}
.scan-live-card--queued .scan-live-percent {
  color: var(--brand);
}
.scan-live-bar {
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.85rem;
  position: relative;
}
.scan-live-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #33883b 0%, #4ea456 100%);
  border-radius: 999px;
  transition: width 0.6s ease-out;
  position: relative;
  overflow: hidden;
}
.scan-live-bar-fill::after {
  /* subtle shimmer to convey activity */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0) 100%);
  animation: scan-live-shimmer 1.8s linear infinite;
}
.scan-live-card--queued .scan-live-bar-fill {
  background: linear-gradient(90deg, var(--brand) 0%, #b86844 100%);
}
@keyframes scan-live-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.scan-live-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.scan-live-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 100px;
}
.scan-live-stat-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scan-live-stat-value {
  font-size: 0.92rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.scan-live-stat--budget .scan-live-stat-value {
  color: var(--muted);
  font-weight: 400;
}
.scan-live-footnote {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .scan-live-bar-fill::after,
  .scan-live-pulse {
    animation: none;
  }
  .scan-live-bar-fill { transition: none; }
}

.scan-progress-banner--running {
  background: rgba(51, 112, 51, 0.08);
  border-color: rgba(51, 112, 51, 0.28);
}

.scan-progress-content {
  flex: 1;
}

.scan-progress-detail {
  margin: 0.2rem 0 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.scan-progress-times {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.scan-card-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #33883b;
  animation: pulse-glow 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.scan-progress-pulse {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse-glow 1.3s ease-in-out infinite;
  flex-shrink: 0;
  margin-top: 3px;
}

.scan-progress-banner--running .scan-progress-pulse {
  background: #33883b;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.finding-state-new {
  border-left: 4px solid var(--high);
  background: rgba(220, 38, 38, 0.025);
}

.finding-state-recurring {
  border-left: 3px solid var(--medium);
  opacity: 0.92;
}

.finding-state-resolved {
  border-left: 3px solid var(--low);
  opacity: 0.65;
}

.finding-state-baseline {
  border-left: 3px solid #8a6820;
}

.finding-state-not-rechecked {
  border-left: 3px solid var(--info);
  opacity: 0.8;
}

.comparison-summary {
  margin: 0.75rem 0 0.25rem;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  background: rgba(39, 80, 67, 0.06);
  border: 1px solid rgba(39, 80, 67, 0.14);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}

.comparison-summary strong {
  color: var(--high);
}

.comparison-resolved-text {
  color: var(--success);
}

.comparison-summary a {
  color: var(--brand-deep);
}

.comparison-summary-baseline {
  background: rgba(138, 104, 32, 0.08);
  border-color: rgba(138, 104, 32, 0.2);
  color: #6b5520;
}

.severity-group-hint {
  font-weight: 400;
  font-size: 0.78rem;
  margin-left: auto;
}

.finding-body {
  margin-top: 0.65rem;
}

.finding-body p {
  margin: 0.4rem 0;
  line-height: 1.55;
}

.finding-body p strong {
  color: var(--text);
}

.finding-evidence {
  color: var(--muted);
  font-size: 0.9rem;
  word-break: break-word;
  overflow-wrap: break-word;
}

.scan-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.scan-meta-label {
  font-size: 0.82rem;
  color: var(--muted);
}

.scan-detail-header p {
  margin: 0.3rem 0;
  line-height: 1.5;
}

.workspace-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(245, 239, 230, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0;
  padding: 0 max(1rem, calc(50vw - 590px));
}

.workspace-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
  position: relative;
}

.workspace-tab:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.workspace-tab.is-active {
  color: var(--brand-deep);
  border-bottom-color: var(--brand-deep);
}

.workspace-tab.has-dot::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
  margin-top: -6px;
  align-self: flex-start;
}

.filter-bar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: rgba(63, 43, 19, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.filter-bar input,
.filter-bar select {
  flex: 1;
  min-width: 120px;
  padding: 0.42rem 0.65rem;
  font-size: 0.84rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-strong);
}

.filter-checkbox {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.filter-checkbox input {
  width: auto;
  flex: none;
}

.filter-result-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
  min-height: 1em;
}

.btn-sm {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  white-space: nowrap;
}

.metric-clickable {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.metric-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 88px rgba(85, 69, 44, 0.2);
}

.scan-item-badges {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.scan-item-target {
  font-size: 0.82rem;
  word-break: break-all;
  margin: 0.2rem 0;
}

.scan-item-meta {
  display: flex;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.scan-item-error {
  font-size: 0.85rem;
  color: var(--high);
  margin: 0.35rem 0 0;
}

.scan-failed-banner {
  background: rgba(167, 46, 46, 0.1);
  border: 1px solid rgba(167, 46, 46, 0.28);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  color: var(--high);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.report-header-card {
  padding: 1.4rem 1.6rem;
}

.report-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.report-header-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.report-header-title {
  font-size: 1.25rem;
  font-family: var(--font-display);
  margin: 0 0 0.2rem;
  font-weight: 700;
  color: var(--text);
}

.report-header-target {
  margin: 0;
  font-size: 0.87rem;
  color: var(--muted);
  word-break: break-all;
}

.report-header-badges {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}

.report-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem 1.2rem;
  margin: 1rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.report-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.report-meta-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.report-meta-cell > span:last-child {
  font-size: 0.87rem;
  color: var(--text);
  word-break: break-word;
}

.report-assessment-note {
  margin: 0.75rem 0 0;
  font-size: 0.87rem;
  color: var(--muted);
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.export-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.export-panel-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.export-panel-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.export-btn {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 1rem;
  min-width: 180px;
  text-decoration: none;
  border-radius: 14px;
}

.export-btn-label {
  font-weight: 600;
  font-size: 0.87rem;
}

.export-btn-desc {
  font-size: 0.75rem;
  opacity: 0.78;
  font-weight: 400;
  line-height: 1.35;
}

.priority-block {
  margin: 0.85rem 0 0.25rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(63, 43, 19, 0.05);
  border: 1px solid var(--border);
}

.priority-block-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.priority-block-body {
  display: flex;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
}

.priority-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.priority-item-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}

.priority-item-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.priority-sev-critical .priority-item-value { color: var(--critical); }
.priority-sev-high .priority-item-value { color: var(--high); }
.priority-sev-medium .priority-item-value { color: var(--medium); }
.priority-sev-low .priority-item-value { color: var(--low); }
.priority-sev-info .priority-item-value { color: var(--info); }

.finding-url {
  word-break: break-all;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.finding-description {
  margin: 0 0 0.65rem;
  line-height: 1.55;
}

.finding-field {
  margin-top: 0.5rem;
}

.finding-field-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.finding-field-evidence {
  margin: 0;
  font-size: 0.8rem;
  background: rgba(63, 43, 19, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  line-height: 1.45;
  max-height: 200px;
  overflow-y: auto;
}

.finding-field-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}

.artifact-body {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  background: rgba(63, 43, 19, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  line-height: 1.5;
  max-height: 400px;
  overflow-y: auto;
}

.meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 0.6rem;
}

.meta-table-key {
  padding: 0.2rem 0.6rem 0.2rem 0;
  color: var(--muted);
  font-weight: 600;
  vertical-align: top;
  white-space: nowrap;
  width: 1%;
}

.meta-table-val {
  padding: 0.2rem 0;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
}

.tool-error-code {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

.tool-error-code code {
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  background: rgba(167, 46, 46, 0.09);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  color: var(--high);
}

.section-subheading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1rem 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.badge-muted {
  background: rgba(63, 43, 19, 0.1);
  color: var(--muted);
}

.system-status-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  margin-bottom: 0.6rem;
  border-radius: 12px;
  background: rgba(63, 43, 19, 0.04);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted);
}

.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator.status-clear {
  background: var(--success);
}

.status-indicator.status-active {
  background: #33883b;
  animation: pulse-glow 1.2s ease-in-out infinite;
}

.status-indicator.status-warn {
  background: var(--high);
}

.status-text {
  font-weight: 500;
}

.attention-bar {
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.75rem;
  border-radius: 12px;
  background: rgba(167, 46, 46, 0.04);
  border: 1px solid rgba(167, 46, 46, 0.15);
}

.attention-title {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--high);
  margin-bottom: 0.35rem;
}

.attention-items {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.attention-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  transition: background 100ms ease;
}

.attention-item:hover {
  background: rgba(167, 46, 46, 0.06);
  transform: none;
  filter: none;
}

.scan-priority-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15em 0.5em;
  border-radius: 6px;
  white-space: nowrap;
}

.scan-priority-tag.priority-high {
  background: rgba(167, 46, 46, 0.1);
  color: var(--high);
  border: 1px solid rgba(167, 46, 46, 0.2);
}

.scan-priority-tag.priority-medium {
  background: rgba(165, 99, 28, 0.1);
  color: var(--medium);
  border: 1px solid rgba(165, 99, 28, 0.2);
}

.scan-priority-tag.priority-low {
  background: rgba(39, 80, 67, 0.08);
  color: var(--success);
  border: 1px solid rgba(39, 80, 67, 0.15);
}

.scan-priority-high {
  border-left: 3px solid var(--high);
}

.scan-priority-medium {
  border-left: 3px solid var(--medium);
}

.scan-priority-low {
  border-left: 3px solid var(--success);
}

.risk-summary {
  font-size: 0.84rem;
  margin-top: 0.4rem;
  padding: 0.3rem 0;
  font-weight: 500;
}

.risk-summary.risk-clear {
  color: var(--success);
}

.risk-summary.risk-new {
  color: var(--high);
}

.risk-summary.risk-recurring {
  color: var(--medium);
}

.risk-summary.risk-baseline {
  color: var(--muted);
}

.risk-summary.risk-failed {
  color: var(--high);
}

.security-summary-stmt {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  font-weight: 500;
  border-left: 3px solid var(--border);
}
.security-summary-stmt.sss-critical {
  background: rgba(198,40,40,0.06);
  border-left-color: #b71c1c;
  color: #7f1d1d;
}
.security-summary-stmt.sss-high {
  background: rgba(239,108,0,0.06);
  border-left-color: #e65100;
  color: #7c2d12;
}
.security-summary-stmt.sss-medium {
  background: rgba(245,158,11,0.06);
  border-left-color: #f59e0b;
  color: #78350f;
}
.security-summary-stmt.sss-clear {
  background: rgba(16,185,129,0.06);
  border-left-color: #10b981;
  color: #065f46;
}
.sss-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.sss-text {
  flex: 1;
}
.sss-scan {
  margin-bottom: 0.5rem;
}

.severity-group-body.is-collapsed {
  display: none;
}

.severity-collapsible {
  cursor: pointer;
  transition: background 100ms ease;
}

.severity-collapsible:hover {
  background: rgba(63, 43, 19, 0.06);
}

.collapse-arrow {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted);
  transition: transform 120ms ease;
}

/* ── Next Best Action ── */
#next-action-panel {
  margin-bottom: 0.75rem;
}

.next-action-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 250, 243, 0.9);
  border: 1px solid rgba(157, 77, 36, 0.18);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: 0.75rem 1.1rem;
  backdrop-filter: blur(10px);
}

.next-action-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand);
  white-space: nowrap;
  flex-shrink: 0;
}

.next-action-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.next-action-label {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.next-action-cta {
  background: none;
  border: 1px solid var(--brand);
  color: var(--brand-deep);
  padding: 0.38rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.next-action-cta:hover:not(:disabled) {
  background: rgba(157, 77, 36, 0.06);
  transform: none;
  filter: none;
}

/* ── Attention Panel (updated) ── */
.attention-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.attention-verb {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(167, 46, 46, 0.1);
  color: var(--high);
  border: 1px solid rgba(167, 46, 46, 0.18);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}

.attention-desc {
  font-size: 0.84rem;
  color: var(--text);
}

.attention-bar-clear {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.attention-clear-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.attention-clear-text {
  font-size: 0.84rem;
  color: var(--success);
  font-weight: 500;
}

/* ── Asset Workflow Track ── */
.asset-workflow-track {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}

.wf-step {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.wf-done {
  background: rgba(39, 80, 67, 0.1);
  color: var(--success);
}

.wf-pending {
  background: rgba(63, 43, 19, 0.06);
  color: var(--muted);
}

.wf-sep {
  font-size: 0.65rem;
  color: var(--muted);
  opacity: 0.5;
}

/* ── Scan Card Story Line ── */
.scan-item-story {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
}

.story-clean {
  color: var(--success);
}

.story-findings {
  color: var(--medium);
}

.story-failed {
  color: var(--high);
  font-weight: 600;
}

.finding-dedup-count {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand-deep, #2851b8);
  border-radius: 999px;
  vertical-align: middle;
}

.finding-affected-items {
  margin-top: 0.55rem;
  padding: 0.45rem 0.6rem;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  font-size: 0.85rem;
}

.finding-affected-items > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-deep, #2851b8);
  list-style: none;
  user-select: none;
}

.finding-affected-items > summary::-webkit-details-marker { display: none; }
.finding-affected-items > summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 0.2rem;
  transition: transform 0.15s ease;
}
.finding-affected-items[open] > summary::before {
  content: "▾ ";
}

.finding-affected-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.finding-affected-list li code {
  background: transparent;
  padding: 0;
  font-size: 0.85rem;
  word-break: break-all;
}

.story-skipped {
  color: var(--medium);
  font-weight: 600;
}

.scan-failure-hint {
  margin: 0.3rem 0 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--medium);
  border-radius: 4px;
}

.scan-failure-hint strong {
  color: var(--brand-deep);
}

.scan-next-hint {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--brand-deep);
  margin-left: 0.35rem;
  cursor: pointer;
}

/* ── Failed Scan Actions ── */
.failed-scan-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ── Activity Timeline ── */
#activity-timeline {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.activity-timeline {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--border);
}

.activity-timeline-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 0.1rem;
  flex-shrink: 0;
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  flex: 1;
  min-width: 0;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.18rem 0;
  min-width: 0;
}

.activity-item[data-activity-scan] {
  cursor: pointer;
}

.activity-item[data-activity-scan]:hover .activity-label {
  text-decoration: underline;
}

.activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--muted);
  opacity: 0.5;
}

.activity-type-completed .activity-dot {
  background: var(--success);
  opacity: 1;
}

.activity-type-failed .activity-dot {
  background: var(--high);
  opacity: 1;
}

.activity-type-running .activity-dot {
  background: var(--brand);
  opacity: 1;
}

.activity-label {
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 38ch;
}

.activity-time {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    padding: 0.75rem 1rem;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid,
  .filters,
  .detail-grid,
  .verification-grid,
  .detail-columns,
  .summary-grid,
  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    grid-template-columns: 1fr;
  }

  .workspace-nav {
    padding: 0 0.75rem;
    overflow-x: auto;
  }

  .workspace-tab {
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar input,
  .filter-bar select {
    width: 100%;
    min-width: unset;
  }

  .report-header-top {
    flex-direction: column;
    gap: 0.6rem;
  }

  .report-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .priority-block-body {
    flex-direction: column;
    gap: 0.4rem;
  }

  .export-panel-actions {
    flex-direction: column;
  }

  .export-btn {
    min-width: unset;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 1.4rem;
  }

  .metric strong {
    font-size: 1.4rem;
  }
}

/* ── Report mode toggle ─────────────────────────────────────── */

.report-mode-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.report-mode-btn {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  border: 1.5px solid var(--brand-deep);
  background: transparent;
  color: var(--brand-deep);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s;
}

.report-mode-btn:hover {
  background: var(--brand-deep);
  color: #fff;
}

.report-mode-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Trust indicators ───────────────────────────────────────── */

.trust-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.trust-chip {
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: rgba(39, 80, 67, 0.07);
  border: 1px solid rgba(39, 80, 67, 0.18);
  color: #275043;
  letter-spacing: 0.01em;
}

/* ── Executive summary ──────────────────────────────────────── */

.exec-summary {
  margin: 1rem 0 0.75rem;
  padding: 1rem 1.1rem;
  background: rgba(39, 80, 67, 0.05);
  border-left: 3px solid var(--brand-deep);
  border-radius: 0 10px 10px 0;
}

.exec-summary-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 0.35rem;
}

.exec-summary-text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

/* ── Recommended actions ────────────────────────────────────── */

.recommended-actions {
  margin: 0.75rem 0;
  padding: 0.85rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.recommended-actions-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.recommended-action-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.recommended-action-item {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}

/* ── Clean mode header card ─────────────────────────────────── */

.report-header-card-clean {
  border-top: 3px solid var(--brand-deep);
}

/* ── Severity impact labels ─────────────────────────────────── */

.severity-impact-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 10px;
  white-space: nowrap;
}

.severity-impact-critical {
  background: rgba(185, 28, 28, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.25);
}

.severity-impact-high {
  background: rgba(194, 65, 12, 0.1);
  color: #c2410c;
  border: 1px solid rgba(194, 65, 12, 0.25);
}

.severity-impact-medium {
  background: rgba(138, 104, 32, 0.1);
  color: #8a6820;
  border: 1px solid rgba(138, 104, 32, 0.25);
}

.severity-impact-low {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.severity-impact-info {
  background: rgba(100, 116, 139, 0.07);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.15);
}

/* ── Clean-mode finding cards ───────────────────────────────── */

.finding-card-clean {
  border-left-width: 3px;
}

.finding-impact-text {
  color: var(--muted);
  font-style: italic;
}

/* ── Report share button + status badge ─────────────────────── */

.report-share-btn {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  border: 1.5px solid var(--brand-deep);
  background: var(--brand-deep);
  color: #fff;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: opacity 0.15s;
}

.report-share-btn:hover {
  opacity: 0.85;
}

.report-status-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
}

.report-status-draft {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.25);
}

.report-status-sent {
  background: rgba(138, 104, 32, 0.1);
  color: #8a6820;
  border: 1px solid rgba(138, 104, 32, 0.25);
}

.report-status-viewed {
  background: rgba(39, 80, 67, 0.1);
  color: #275043;
  border: 1px solid rgba(39, 80, 67, 0.22);
}

/* ── Branding bar ───────────────────────────────────────────── */

.report-branding-bar {
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.report-branding-input {
  width: 100%;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed rgba(39, 80, 67, 0.25);
  padding: 0.2rem 0;
  outline: none;
}

.report-branding-input:focus {
  border-bottom-color: var(--brand-deep);
}

/* ── Editable title + client inputs ─────────────────────────── */

.report-title-input {
  width: 100%;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed rgba(0, 0, 0, 0.15);
  padding: 0.15rem 0;
  margin-bottom: 0.15rem;
  outline: none;
}

.report-title-input:focus {
  border-bottom-color: var(--brand-deep);
}

.report-client-for {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0.2rem 0 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.report-client-input {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed rgba(0, 0, 0, 0.15);
  padding: 0.1rem 0;
  outline: none;
  min-width: 120px;
}

.report-client-input:focus {
  border-bottom-color: var(--brand-deep);
}

.report-generated-info {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* ── Confidence score ───────────────────────────────────────── */

.report-confidence-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.85rem 0 0.25rem;
  flex-wrap: wrap;
}

.confidence-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.55rem 1rem;
  border-radius: 12px;
  min-width: 90px;
}

.confidence-score-high {
  background: rgba(39, 80, 67, 0.08);
  border: 1px solid rgba(39, 80, 67, 0.2);
  color: #275043;
}

.confidence-score-mid {
  background: rgba(138, 104, 32, 0.08);
  border: 1px solid rgba(138, 104, 32, 0.2);
  color: #8a6820;
}

.confidence-score-low {
  background: rgba(194, 65, 12, 0.08);
  border: 1px solid rgba(194, 65, 12, 0.2);
  color: #c2410c;
}

.confidence-score-critical {
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.2);
  color: #b91c1c;
}

.confidence-score-number {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.confidence-score-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.2rem;
  text-align: center;
}

/* ── Before / After indicator ───────────────────────────────── */

.before-after-indicator {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
}

.before-after-clear {
  background: rgba(39, 80, 67, 0.07);
  color: #275043;
  border: 1px solid rgba(39, 80, 67, 0.18);
}

.before-after-warn {
  background: rgba(194, 65, 12, 0.08);
  color: #c2410c;
  border: 1px solid rgba(194, 65, 12, 0.2);
}

/* ── Next Steps ─────────────────────────────────────────────── */

.next-steps-section h3 {
  margin-bottom: 0.5rem;
}

.next-steps-card {
  background: rgba(39, 80, 67, 0.04);
  border-color: rgba(39, 80, 67, 0.15);
}

.next-steps-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.next-steps-item {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}

/* ── Print / download styles ────────────────────────────────── */

.no-print {
  /* marker class — used by @media print */
}

@media print {
  .no-print,
  .workspace-nav,
  #system-status,
  #next-action-panel,
  #summary-cards,
  #live-queue,
  #attention-panel,
  #activity-timeline,
  #section-register,
  #section-assets,
  #section-zap,
  #section-auth,
  #section-findings .card > header,
  #section-findings .scan-list-col,
  #flash {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
    font-size: 11pt;
  }

  .shell {
    padding: 1.5cm 2cm;
    max-width: 100%;
  }

  /* Cover page: break after so exec summary starts on page 2 */
  .report-header-card-clean {
    break-after: page;
    page-break-after: always;
    box-shadow: none;
    border: none;
    padding: 0;
  }

  /* Key findings: start on its own page and break after */
  .kf-section {
    break-before: page;
    page-break-before: always;
    break-after: page;
    page-break-after: always;
  }

  /* Full findings section starts on its own page */
  .rc-findings-section {
    break-before: page;
    page-break-before: always;
  }

  .report-header-card,
  .artifact,
  .exec-summary,
  .recommended-actions,
  .next-steps-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 0.75rem;
  }

  .kf-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .rbc-chart {
    border: 1px solid #ccc;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .rbc-seg,
  .rbc-tile,
  .rc-risk-pill,
  .kf-sev {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .stack {
    gap: 0.75rem;
  }

  .report-branding-input,
  .report-title-input,
  .report-client-input,
  .rc-company-input,
  .rc-title-input,
  .rc-client-input {
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .rc-branding-bar {
    border-bottom-color: #111;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  h3, h4 {
    margin-bottom: 0.4rem;
    page-break-after: avoid;
    break-after: avoid;
  }

  section {
    page-break-before: auto;
    break-before: auto;
  }

  .rc-cover-hero {
    padding: 2cm 0 1.5cm;
  }

  .rc-title-input {
    font-size: 2rem !important;
  }

  .rc-score-num {
    font-size: 1.75rem;
  }

  .sss-block,
  .ct-block,
  .exec-risk-block,
  .as-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .next-steps-section {
    break-before: page;
    page-break-before: always;
  }

  #onboarding-strip,
  #first-run-path,
  #first-run-card,
  #workspace-summary {
    display: none !important;
  }
}

/* ── Onboarding strip ───────────────────────────────────────── */

#onboarding-strip {
  position: sticky;
  top: 41px;
  z-index: 190;
  background: rgba(245, 239, 230, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0 max(1rem, calc(50vw - 590px));
}

.onboarding-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.52rem 0;
  flex-wrap: wrap;
}

.onboarding-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.25rem;
  white-space: nowrap;
}

.onboarding-all-done .onboarding-label {
  color: var(--success);
}

.onboarding-steps {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.onboarding-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.72rem;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  white-space: nowrap;
}

.onboarding-step:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
  background: rgba(157, 77, 36, 0.05);
  transform: none;
  filter: none;
}

.onboarding-step.is-done {
  border-color: rgba(39, 80, 67, 0.35);
  background: rgba(39, 80, 67, 0.06);
  color: var(--success);
}

.onboarding-step-num {
  font-size: 0.72rem;
  font-weight: 800;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.onboarding-step.is-done .onboarding-step-num {
  background: rgba(39, 80, 67, 0.15);
  color: var(--success);
}

.onboarding-sep {
  font-size: 0.85rem;
  color: var(--border);
  user-select: none;
}

/* ── Capability row (hero) ──────────────────────────────────── */

.capability-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.cap-chip {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.22rem 0.65rem;
  border-radius: 20px;
  background: rgba(157, 77, 36, 0.07);
  border: 1px solid rgba(157, 77, 36, 0.18);
  color: var(--brand-deep);
}

/* ── Section "why this matters" line ────────────────────────── */

.section-why {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.2rem 0 0;
  line-height: 1.5;
  font-style: italic;
}

/* ── Workspace summary bar ──────────────────────────────────── */

#workspace-summary {
  padding: 0.5rem max(1rem, calc(50vw - 590px));
  background: rgba(245, 239, 230, 0.6);
  border-bottom: 1px solid var(--border);
}

.workspace-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.ws-sep {
  color: var(--border);
  font-size: 0.9rem;
}

.ws-item {
  color: var(--text);
}

.ws-item strong {
  font-weight: 700;
}

.ws-dim {
  color: var(--muted);
}

.ws-ok {
  color: var(--success);
}

.ws-warn {
  color: var(--medium);
}

.ws-err {
  color: var(--high);
}

/* ── Tool readiness ─────────────────────────────────────────── */

.tool-readiness {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: rgba(63, 43, 19, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.tool-readiness-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.15rem;
  white-space: nowrap;
}

.tool-readiness-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.22rem 0.65rem;
  border-radius: 20px;
}

.tool-chip-ready {
  background: rgba(39, 80, 67, 0.07);
  border: 1px solid rgba(39, 80, 67, 0.2);
  color: var(--success);
}

.tool-chip-unavailable {
  background: rgba(100, 116, 139, 0.06);
  border: 1px solid rgba(100, 116, 139, 0.18);
  color: var(--muted);
}

.tool-chip-import {
  background: rgba(157, 77, 36, 0.06);
  border: 1px solid rgba(157, 77, 36, 0.15);
  color: var(--brand-deep);
}

.tool-chip-status {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.75;
}

/* ── Asset table capability pills ───────────────────────────── */

.asset-cap-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.cap-pill {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.5rem;
  border-radius: 20px;
}

.cap-pill-ok {
  background: rgba(39, 80, 67, 0.08);
  border: 1px solid rgba(39, 80, 67, 0.18);
  color: var(--success);
}

.cap-pill-dim {
  background: rgba(100, 116, 139, 0.06);
  border: 1px solid rgba(100, 116, 139, 0.14);
  color: var(--muted);
}

/* ── Scan card next action line ─────────────────────────────── */

.scan-next-action {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.scan-next-action .scan-next-hint {
  color: var(--muted);
}

/* ── Scan card visual hierarchy ─────────────────────────────── */

.scan-priority-low article,
article.scan.scan-priority-low {
  opacity: 0.8;
}

article.scan.scan-priority-high {
  border-left-width: 3px;
}

/* ── Mobile improvements ────────────────────────────────────── */

@media (max-width: 640px) {
  .onboarding-strip {
    gap: 0.5rem;
    padding: 0.45rem 0;
  }

  .onboarding-step {
    font-size: 0.72rem;
    padding: 0.22rem 0.55rem;
  }

  .onboarding-label {
    width: 100%;
    margin-bottom: 0.1rem;
  }

  .capability-row {
    gap: 0.3rem;
  }

  .cap-chip {
    font-size: 0.7rem;
    padding: 0.18rem 0.5rem;
  }

  .workspace-summary {
    font-size: 0.76rem;
  }

  .tool-readiness {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .tool-readiness-chips {
    gap: 0.3rem;
  }

  .section-why {
    font-size: 0.79rem;
  }

  .asset-cap-row {
    gap: 0.25rem;
  }

  .cap-pill {
    font-size: 0.63rem;
  }

  .report-confidence-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .first-run-card {
    flex-direction: column;
  }


  .report-cols {
    flex-direction: column;
    gap: 1rem;
  }

  .report-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
  }

  .report-col:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .first-run-path {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .frp-steps {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
}

/* ── Trust cues ─────────────────────────────────────────────── */

.trust-cues {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.trust-chip {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.6rem;
  border-radius: 20px;
  background: rgba(39, 80, 67, 0.07);
  border: 1px solid rgba(39, 80, 67, 0.15);
  color: var(--success);
}

/* ── First-run path ribbon ──────────────────────────────────── */

#first-run-path {
  background: rgba(245, 239, 230, 0.85);
  border-bottom: 1px solid var(--border);
  padding: 0 max(1rem, calc(50vw - 590px));
}

.first-run-path {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0;
  flex-wrap: wrap;
}

.frp-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.frp-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.76rem;
}

.frp-step {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.frp-step.frp-done {
  color: var(--success);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: rgba(39, 80, 67, 0.35);
}

.frp-arrow {
  color: var(--border);
  font-size: 0.8rem;
}

/* ── First-run card ─────────────────────────────────────────── */

#first-run-card {
  padding: 0 max(1rem, calc(50vw - 590px));
  margin: 0.75rem 0;
}

.first-run-card {
  display: flex;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(85, 69, 44, 0.06);
}
.first-run-card--solo {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.first-run-card--solo .first-run-hero {
  max-width: 520px;
}

.first-run-illustration {
  margin: 0;
  flex: 1 1 320px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.75rem 0.25rem 0.25rem;
}

.fri-steps {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem 0.1rem;
  background: linear-gradient(135deg, rgba(220, 196, 144, 0.12), rgba(120, 165, 140, 0.10));
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.fri-step {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0.4rem;
}

.fri-icon {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--accent, #2f6d52);
  flex-shrink: 0;
}

.fri-icon svg {
  width: 18px;
  height: 18px;
}

.fri-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.fri-hint {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.1;
}

.fri-arrow {
  grid-row: 1 / span 2;
  margin: 0 0.15rem 0 0.35rem;
  color: var(--border);
  font-size: 1rem;
  align-self: center;
}

.fri-step:last-child .fri-arrow {
  display: none;
}

.fri-caption {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

@media (max-width: 720px) {
  .first-run-card--solo .first-run-hero {
    max-width: none;
  }
  .first-run-illustration {
    flex-basis: 100%;
  }
}

.first-run-hero {
  flex: 1;
  min-width: 0;
}

.first-run-hero h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.first-run-hero p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.first-run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.first-run-actions button {
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
}

/* ── First Scan Discovery Card ──────────────────────────────── */

.fsd-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(85, 69, 44, 0.06);
}

.fsd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1rem;
  background: linear-gradient(135deg, rgba(63, 43, 19, 0.035) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}

.fsd-headline {
  flex: 1;
  min-width: 0;
}

.fsd-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.fsd-headline h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.fsd-asset-line {
  font-size: 0.82rem;
  color: var(--muted);
}

.fsd-dismiss {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.fsd-dismiss:hover {
  background: var(--border);
}

.fsd-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

@media (max-width: 700px) {
  .fsd-body { grid-template-columns: 1fr; }
}

.fsd-panel {
  padding: 1.1rem 1.5rem;
}

.fsd-panel + .fsd-panel {
  border-left: 1px solid var(--border);
}

@media (max-width: 700px) {
  .fsd-panel + .fsd-panel { border-left: none; border-top: 1px solid var(--border); }
}

.fsd-panel-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}

.fsd-stat-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.fsd-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--text);
}

.fsd-stat-label {
  font-size: 0.82rem;
  color: var(--muted);
}

.fsd-surface-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.fsd-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: rgba(63, 43, 19, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
}

.fsd-chip.chip-framework {
  background: rgba(107, 74, 29, 0.08);
  border-color: rgba(107, 74, 29, 0.18);
  color: #5a3e1b;
}

.fsd-chip.chip-risk {
  background: rgba(167, 46, 46, 0.07);
  border-color: rgba(167, 46, 46, 0.18);
  color: var(--high);
}

.fsd-sev-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.fsd-sev {
  font-size: 0.73rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}

.fsd-sev.sev-critical { background: rgba(110, 27, 27, 0.09); color: var(--critical); }
.fsd-sev.sev-high     { background: rgba(167, 46, 46, 0.09); color: var(--high); }
.fsd-sev.sev-medium   { background: rgba(165, 99, 28, 0.09); color: var(--medium); }
.fsd-sev.sev-low      { background: rgba(64, 110, 95, 0.09); color: var(--low); }

.fsd-top-findings {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.1rem;
}

.fsd-finding {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.4;
}

.fsd-finding-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
  text-transform: uppercase;
  margin-top: 0.05rem;
}

.fsd-finding-badge.fb-critical { background: rgba(110,27,27,0.1); color: var(--critical); }
.fsd-finding-badge.fb-high     { background: rgba(167,46,46,0.1); color: var(--high); }

.fsd-finding-title {
  flex: 1;
  min-width: 0;
}

.fsd-no-findings {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  color: var(--success);
  font-weight: 600;
}

.fsd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--border);
  background: rgba(63, 43, 19, 0.025);
  flex-wrap: wrap;
}

.fsd-next-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-right: 0.25rem;
}

.fsd-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.fsd-actions button {
  font-size: 0.82rem;
  padding: 0.45rem 1rem;
}

.fsd-coverage-line {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ── Report section empty state ─────────────────────────────── */

.report-empty-state {
  padding: 0.5rem 0;
}

.report-cols {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
}

.report-col {
  flex: 1;
  padding: 1rem 1.25rem;
  background: rgba(63, 43, 19, 0.02);
  border: 1px solid var(--border);
}

.report-col:first-child {
  border-radius: 14px 0 0 14px;
  border-right: none;
}

.report-col:last-child {
  border-radius: 0 14px 14px 0;
  background: rgba(39, 80, 67, 0.025);
}

.report-col h3 {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.report-col ul {
  margin: 0 0 0.65rem;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.report-col li {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.report-empty-cta {
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  padding: 0.75rem;
  background: rgba(63, 43, 19, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* ── Verification explainer (asset detail empty) ────────────── */

.verification-explainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  background: rgba(63, 43, 19, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.ve-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
}

.ve-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.3em;
  flex-shrink: 0;
}

.ve-passive {
  background: var(--success);
}

.ve-locked {
  background: var(--muted);
  opacity: 0.45;
}

/* ── Scan history guide ─────────────────────────────────────── */

.scan-history-guide {
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  background: rgba(63, 43, 19, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.shg-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.shg-tip {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

/* ── Auth profiles empty guide ──────────────────────────────── */

.auth-empty-guide {
  margin-top: 0.8rem;
  padding: 0.75rem 1rem;
  background: rgba(63, 43, 19, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.aeg-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.auth-empty-guide ul {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.auth-empty-guide li {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
}

.aeg-note {
  font-size: 0.78rem;
  margin: 0;
}

/* ── Tool chip icon ─────────────────────────────────────────── */

.tool-chip-icon {
  font-size: 0.72rem;
  font-weight: 800;
}

/* ── Coverage block ─────────────────────────────────────────── */

.coverage-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.25rem;
  margin-bottom: 0.5rem;
}

.coverage-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.65rem;
}

.coverage-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
}

.coverage-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.coverage-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.1;
}

.coverage-stat-key {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}

/* ── Limitations block ──────────────────────────────────────── */

.limitations-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 0.5rem;
}

.limitations-summary {
  padding: 0.65rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}

.limitations-summary::before {
  content: "›";
  font-size: 1rem;
  transition: transform 0.15s;
  display: inline-block;
  color: var(--muted);
}

.limitations-block[open] .limitations-summary::before {
  transform: rotate(90deg);
}

.limitations-list {
  margin: 0;
  padding: 0.5rem 1.1rem 0.85rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-top: 1px solid var(--border);
}

.limitations-list li {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ── Raw data toggle ────────────────────────────────────────── */

.raw-data-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 0.5rem;
}

.raw-data-summary {
  padding: 0.65rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}

.raw-data-summary::before {
  content: "›";
  font-size: 1rem;
  transition: transform 0.15s;
  display: inline-block;
  color: var(--muted);
}

.raw-data-block[open] .raw-data-summary::before {
  transform: rotate(90deg);
}

.raw-data-inner {
  border-top: 1px solid var(--border);
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.raw-data-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.raw-data-pre {
  font-size: 0.74rem;
  font-family: var(--font-mono);
  background: rgba(63, 43, 19, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  overflow-x: auto;
  white-space: pre;
  color: var(--muted);
  max-height: 400px;
  overflow-y: auto;
  line-height: 1.5;
}

/* ── Finding pages chip ─────────────────────────────────────── */

.finding-pages-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: 20px;
  background: rgba(63, 43, 19, 0.07);
  border: 1px solid rgba(63, 43, 19, 0.15);
  color: var(--muted);
  margin-left: 0.45rem;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════
   Executive Risk Block
   ═══════════════════════════════════════════════════════════════════ */

.exec-risk-block {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
  color: #e8eaf6;
  position: relative;
  overflow: hidden;
}

.exec-risk-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e53935, #f57c00, #fdd835);
  opacity: 0.85;
}

.exec-risk-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.exec-risk-header-left {
  flex: 1 1 280px;
  min-width: 0;
}

.exec-risk-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #90caf9;
  margin-bottom: 0.85rem;
}

.exec-risk-level-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.exec-risk-level {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  min-width: 100px;
}

.exec-risk-level-risk-critical { background: rgba(229,57,53,0.22); border: 1.5px solid rgba(229,57,53,0.5); }
.exec-risk-level-risk-high     { background: rgba(245,124,0,0.22);  border: 1.5px solid rgba(245,124,0,0.5); }
.exec-risk-level-risk-moderate { background: rgba(253,216,53,0.18); border: 1.5px solid rgba(253,216,53,0.45); }
.exec-risk-level-risk-low      { background: rgba(104,159,56,0.18); border: 1.5px solid rgba(104,159,56,0.4); }
.exec-risk-level-risk-clear    { background: rgba(38,166,154,0.18); border: 1.5px solid rgba(38,166,154,0.4); }

.exec-risk-level-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232,234,246,0.65);
  line-height: 1;
}

.exec-risk-level-value {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1.2;
  font-family: var(--font-display);
}

.exec-risk-level-risk-critical .exec-risk-level-value { color: #ff8a80; }
.exec-risk-level-risk-high     .exec-risk-level-value { color: #ffcc80; }
.exec-risk-level-risk-moderate .exec-risk-level-value { color: #fff59d; }
.exec-risk-level-risk-low      .exec-risk-level-value { color: #c5e1a5; }
.exec-risk-level-risk-clear    .exec-risk-level-value { color: #80cbc4; }

.exec-risk-confidence {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.exec-risk-confidence-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(232,234,246,0.55);
}

.exec-risk-confidence-score {
  font-size: 1.35rem;
  font-weight: 800;
  color: #e3f2fd;
  font-family: var(--font-display);
  line-height: 1.1;
}

.exec-risk-confidence-note {
  font-size: 0.72rem;
  color: rgba(232,234,246,0.65);
  font-weight: 500;
}

.exec-risk-delta {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  letter-spacing: 0.01em;
}

.exec-risk-delta-warn  { background: rgba(229,57,53,0.18); color: #ff8a80; border: 1px solid rgba(229,57,53,0.35); }
.exec-risk-delta-clear { background: rgba(38,166,154,0.18); color: #80cbc4; border: 1px solid rgba(38,166,154,0.35); }

.exec-risk-exposure-col {
  flex: 0 1 200px;
}

.exec-risk-section-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(232,234,246,0.55);
  margin-bottom: 0.55rem;
}

.exec-risk-exposure-chips {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.exposure-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
}

.exposure-chip-active   { background: rgba(229,57,53,0.18); color: #ff8a80;  border: 1px solid rgba(229,57,53,0.32); }
.exposure-chip-inactive { background: rgba(38,166,154,0.12); color: #80cbc4; border: 1px solid rgba(38,166,154,0.25); }

.exec-risk-top3 {
  border-top: 1px solid rgba(232,234,246,0.1);
  padding-top: 1.1rem;
}

.exec-risk-top3-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.exec-risk-top3-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: rgba(232,234,246,0.88);
  line-height: 1.4;
}

.exec-risk-top3-sev {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.35rem;
}

.sev-dot-critical { background: #e53935; box-shadow: 0 0 0 2px rgba(229,57,53,0.25); }
.sev-dot-high     { background: #f57c00; box-shadow: 0 0 0 2px rgba(245,124,0,0.22); }
.sev-dot-medium   { background: #fdd835; box-shadow: 0 0 0 2px rgba(253,216,53,0.2); }
.sev-dot-low      { background: #66bb6a; box-shadow: 0 0 0 2px rgba(102,187,106,0.2); }
.sev-dot-info     { background: #90a4ae; }

.exec-risk-top3-text {
  flex: 1;
}

.exec-risk-clear-note {
  color: #80cbc4;
  font-size: 0.875rem;
  font-style: italic;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(232,234,246,0.1);
}

/* ═══════════════════════════════════════════════════════════════════
   Business Insight — finding-level chips and impact text
   ═══════════════════════════════════════════════════════════════════ */

.finding-biz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.biz-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.biz-chip-label {
  padding: 0.25rem 0.5rem;
  background: rgba(63,43,19,0.06);
  color: var(--muted);
  border-right: 1px solid rgba(63,43,19,0.1);
  font-weight: 500;
  font-size: 0.69rem;
  letter-spacing: 0.03em;
}

.biz-chip-value {
  padding: 0.25rem 0.55rem;
  font-weight: 700;
}

/* Exploit Likelihood & Fix Priority variants */
.biz-chip-critical .biz-chip-value { background: rgba(229,57,53,0.12); color: #b71c1c; border: 1px solid rgba(229,57,53,0.25); }
.biz-chip-high     .biz-chip-value { background: rgba(245,124,0,0.12);  color: #e65100; border: 1px solid rgba(245,124,0,0.25); }
.biz-chip-medium   .biz-chip-value { background: rgba(253,216,53,0.14); color: #f57f17; border: 1px solid rgba(253,216,53,0.3); }
.biz-chip-low      .biz-chip-value { background: rgba(102,187,106,0.12); color: #2e7d32; border: 1px solid rgba(102,187,106,0.25); }

/* Fix Effort variants */
.biz-chip-quick    .biz-chip-value { background: rgba(38,166,154,0.1);  color: #00695c; border: 1px solid rgba(38,166,154,0.25); }
.biz-chip-moderate .biz-chip-value { background: rgba(100,181,246,0.12); color: #1565c0; border: 1px solid rgba(100,181,246,0.25); }
.biz-chip-complex  .biz-chip-value { background: rgba(171,71,188,0.1);  color: #6a1b9a; border: 1px solid rgba(171,71,188,0.22); }

/* Business impact text in finding cards */
.finding-biz-impact-text {
  color: var(--text);
  line-height: 1.55;
}

/* Business insight wrapper in technical mode */
.finding-biz-insight {
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(100,181,246,0.05);
  border-left: 3px solid rgba(100,181,246,0.35);
  border-radius: 0 6px 6px 0;
}

.finding-biz-insight .finding-biz-impact-text {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

/* ── Print: ensure exec risk block renders ──────────────────── */

@media print {
  .exec-risk-block {
    background: #1a1a2e !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid;
    margin-bottom: 1rem;
  }

  .exec-risk-block::before {
    display: none;
  }

  .exec-risk-level-row,
  .exec-risk-header {
    flex-wrap: wrap;
  }

  .finding-biz-insight {
    border-left-color: #90caf9;
    background: #f0f7ff;
  }

  .finding-biz-meta {
    margin-bottom: 0.5rem;
  }

  .biz-chip {
    border: 1px solid #ccc;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Change Tracking Section (ct-*)
   Visible in both client and technical mode.
   ═══════════════════════════════════════════════════════════════════ */

.ct-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem 1rem;
  margin-bottom: 1rem;
}

.ct-block-baseline {
  border-style: dashed;
  opacity: 0.9;
}

/* ── Header ── */
.ct-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.ct-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ct-eyebrow {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

.ct-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.ct-ref {
  font-size: 0.74rem;
  color: var(--muted);
  font-style: italic;
}

.ct-header-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ── Summary chips ── */
.ct-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
}

.ct-chip-new       { background: rgba(198,40,40,0.1);   color: #b71c1c; border: 1px solid rgba(198,40,40,0.25); }
.ct-chip-recurring { background: rgba(239,108,0,0.08);  color: #e65100; border: 1px solid rgba(239,108,0,0.2); }
.ct-chip-resolved  { background: rgba(38,166,154,0.1);  color: #00695c; border: 1px solid rgba(38,166,154,0.25); }
.ct-chip-sevchange { background: rgba(139,92,246,0.1);  color: #6d28d9; border: 1px solid rgba(139,92,246,0.25); }
.ct-chip-notchecked{ background: rgba(63,43,19,0.06);   color: var(--muted); border: 1px solid var(--border); }

.ct-risk-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.ct-trend-up      { background: rgba(198,40,40,0.08); color: #b71c1c; }
.ct-trend-down    { background: rgba(38,166,154,0.08); color: #00695c; }
.ct-trend-mixed   { background: rgba(239,108,0,0.08); color: #e65100; }
.ct-trend-stable  { background: rgba(63,43,19,0.05);  color: var(--muted); }

.ct-insight-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.ct-insight-bullet {
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  background: rgba(63,43,19,0.04);
  border: 1px solid var(--border);
  color: var(--text);
}

.ct-group-sevchange .ct-group-header { border-left-color: #7c3aed; }
.ct-group-count-sevchange { background: rgba(139,92,246,0.12); color: #6d28d9; }

.ct-sev-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.ct-sev-prev { opacity: 0.6; text-decoration: line-through; }
.ct-sev-direction { color: var(--muted); }
.ct-sev-curr { }
.ct-sev-arrow-escalated .ct-sev-curr { color: #b71c1c; }
.ct-sev-arrow-downgraded .ct-sev-curr { color: #00695c; }

.ct-sevchange-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ct-sevchange-badge-escalated  { background: rgba(198,40,40,0.1); color: #b71c1c; }
.ct-sevchange-badge-downgraded { background: rgba(38,166,154,0.1); color: #00695c; }

.ct-finding-row-sevchange {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Score delta chip ── */
.ct-score-delta {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  white-space: nowrap;
}

.ct-score-delta-up   { background: rgba(38,166,154,0.1);  color: #00695c; border: 1px solid rgba(38,166,154,0.2); }
.ct-score-delta-down { background: rgba(198,40,40,0.08);   color: #b71c1c; border: 1px solid rgba(198,40,40,0.15); }
.ct-score-delta-flat { background: rgba(63,43,19,0.05);   color: var(--muted); border: 1px solid var(--border); }

/* ── Status banners ── */
.ct-no-change-banner,
.ct-change-banner {
  font-size: 0.83rem;
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  border: 1px solid;
}

.ct-no-change-banner {
  background: rgba(38,166,154,0.07);
  color: #00695c;
  border-color: rgba(38,166,154,0.2);
}

.ct-change-banner-worse {
  background: rgba(198,40,40,0.05);
  color: #b71c1c;
  border-color: rgba(198,40,40,0.15);
}

.ct-change-banner-mixed {
  background: rgba(239,108,0,0.06);
  color: #bf360c;
  border-color: rgba(239,108,0,0.2);
}

.ct-change-banner-better {
  background: rgba(38,166,154,0.07);
  color: #00695c;
  border-color: rgba(38,166,154,0.2);
}

/* ── Finding groups ── */
.ct-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.65rem;
}

.ct-group-new {
  border-color: rgba(198,40,40,0.25);
}

.ct-group-resolved {
  border-color: rgba(38,166,154,0.25);
}

.ct-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  flex-wrap: wrap;
}

.ct-group-new    .ct-group-header { background: rgba(198,40,40,0.05);  color: #b71c1c; }
.ct-group-resolved .ct-group-header { background: rgba(38,166,154,0.05); color: #00695c; }

.ct-group-icon { font-size: 0.85rem; flex-shrink: 0; }
.ct-group-label { font-weight: 800; }

.ct-group-subtext {
  font-size: 0.72rem;
  font-weight: 500;
  color: inherit;
  opacity: 0.7;
  flex: 1;
  font-style: italic;
}

.ct-group-count {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.1rem 0.45rem;
  border-radius: 20px;
  margin-left: auto;
  flex-shrink: 0;
}

.ct-group-count-new      { background: rgba(198,40,40,0.12); color: #b71c1c; }
.ct-group-count-resolved { background: rgba(38,166,154,0.12); color: #00695c; }

/* ── Finding rows ── */
.ct-finding-list {
  padding: 0.4rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ct-finding-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.35rem;
  border-radius: 5px;
  font-size: 0.79rem;
  flex-wrap: wrap;
}

.ct-finding-row:hover { background: rgba(63,43,19,0.04); }

.ct-finding-row-new      { border-left: 3px solid rgba(198,40,40,0.4); }
.ct-finding-row-resolved { border-left: 3px solid rgba(38,166,154,0.4); opacity: 0.8; }

.ct-sev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ct-finding-sev {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 50px;
}

.ct-finding-sev-critical { color: #b71c1c; }
.ct-finding-sev-high     { color: #c62828; }
.ct-finding-sev-medium   { color: #ef6c00; }
.ct-finding-sev-low      { color: #f57f17; }
.ct-finding-sev-info     { color: #78909c; }

.ct-finding-title {
  flex: 1;
  color: var(--text);
  font-weight: 500;
  min-width: 0;
}

.ct-finding-row-resolved .ct-finding-title {
  text-decoration: line-through;
  text-decoration-color: rgba(38,166,154,0.5);
  color: var(--muted);
}

.ct-finding-url {
  font-size: 0.68rem;
  color: var(--muted);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.ct-pages-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  background: rgba(63,43,19,0.07);
  color: var(--muted);
  white-space: nowrap;
}

.ct-truncate {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  border-top: 1px solid rgba(63,43,19,0.06);
}

/* ── Persistent and not-rechecked notes ── */
.ct-persistent-note,
.ct-notchecked-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  margin-top: 0.4rem;
}

.ct-persistent-note {
  background: rgba(239,108,0,0.05);
  border: 1px solid rgba(239,108,0,0.12);
  color: #e65100;
}

.ct-notchecked-note {
  background: rgba(63,43,19,0.04);
  border: 1px solid var(--border);
}

.ct-persistent-icon,
.ct-notchecked-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── Baseline note ── */
.ct-baseline-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: rgba(63,43,19,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ct-baseline-icon { font-size: 1.1rem; flex-shrink: 0; }

.ct-baseline-text {
  font-size: 0.82rem;
  color: var(--text);
  margin: 0 0 0.3rem;
  line-height: 1.5;
}

.ct-baseline-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}

/* Print */
@media print {
  .ct-block { page-break-inside: avoid; }
  .ct-finding-list { max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Security Score Block (sss-*)
   ═══════════════════════════════════════════════════════════════════ */

.sss-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem 1rem;
  margin-bottom: 1rem;
}

.sss-header {
  margin-bottom: 1.1rem;
}

.sss-eyebrow {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.sss-headline {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Overall ring ── */
.sss-body {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.sss-overall-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 110px;
}

.sss-overall-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 5px solid;
  position: relative;
}

.sss-overall-green  { border-color: #26a69a; background: rgba(38,166,154,0.06); }
.sss-overall-amber  { border-color: #ffa726; background: rgba(255,167,38,0.06); }
.sss-overall-orange { border-color: #ef6c00; background: rgba(239,108,0,0.07); }
.sss-overall-red    { border-color: #e53935; background: rgba(229,57,53,0.07); }

.sss-overall-score {
  font-size: 2.1rem;
  font-weight: 900;
  font-family: var(--font-display);
  line-height: 1;
}

.sss-overall-green  .sss-overall-score { color: #00695c; }
.sss-overall-amber  .sss-overall-score { color: #e65100; }
.sss-overall-orange .sss-overall-score { color: #bf360c; }
.sss-overall-red    .sss-overall-score { color: #b71c1c; }

.sss-overall-max {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: -2px;
}

.sss-overall-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}

/* ── Category bars ── */
.sss-cats-col {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sss-cat-row {
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background 0.15s;
}

.sss-cat-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
}

.sss-cat-name-col {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 170px;
  flex-shrink: 0;
}

.sss-cat-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.sss-cat-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.sss-cat-bar-col {
  flex: 1;
  min-width: 60px;
}

.sss-bar-track {
  height: 8px;
  background: rgba(63,43,19,0.08);
  border-radius: 20px;
  overflow: hidden;
}

.sss-bar-fill {
  height: 100%;
  border-radius: 20px;
  transition: width 0.4s ease;
}

.sss-bar-green  { background: #26a69a; }
.sss-bar-amber  { background: #ffa726; }
.sss-bar-orange { background: #ef6c00; }
.sss-bar-red    { background: #e53935; }

.sss-cat-score-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 60px;
  flex-shrink: 0;
}

.sss-cat-score {
  font-size: 1rem;
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1;
}

.sss-bar-green-text  { color: #00695c; }
.sss-bar-amber-text  { color: #e65100; }
.sss-bar-orange-text { color: #bf360c; }
.sss-bar-red-text    { color: #b71c1c; }

.sss-cat-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* ── Category details (neg/pos rows) ── */
.sss-cat-details {
  padding: 0.3rem 0.5rem 0.5rem 2.1rem;
  border-top: 1px solid rgba(63,43,19,0.06);
}

.sss-neg-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  font-size: 0.76rem;
}

.sss-neg-sev {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sss-neg-sev-critical { background: #b71c1c; }
.sss-neg-sev-high     { background: #e53935; }
.sss-neg-sev-medium   { background: #ef6c00; }
.sss-neg-sev-low      { background: #ffa726; }
.sss-neg-sev-info     { background: #90a4ae; }

.sss-neg-text {
  flex: 1;
  color: var(--text);
}

.sss-neg-pts {
  font-size: 0.68rem;
  font-weight: 700;
  color: #e53935;
  white-space: nowrap;
}

.sss-pos-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.sss-pos-check {
  color: #26a69a;
  font-weight: 800;
  flex-shrink: 0;
}

.sss-pos-text { flex: 1; }

.sss-detail-empty {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

/* ── What's hurting section ── */
.sss-hurting-section {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.sss-hurting-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.55rem;
}

.sss-hurting-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sss-hurting-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  background: rgba(63,43,19,0.025);
  border: 1px solid rgba(63,43,19,0.06);
  font-size: 0.78rem;
  flex-wrap: wrap;
}

.sss-hurting-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sss-hurting-cat-tls         { background: rgba(100,181,246,0.15); color: #1565c0; }
.sss-hurting-cat-headers     { background: rgba(171,71,188,0.12);  color: #6a1b9a; }
.sss-hurting-cat-auth        { background: rgba(255,193,7,0.15);   color: #8a6820; }
.sss-hurting-cat-application { background: rgba(239,108,0,0.12);   color: #bf360c; }
.sss-hurting-cat-scanHealth  { background: rgba(63,43,19,0.08);    color: var(--muted); }

.sss-hurting-impact {
  flex: 1;
  color: var(--text);
  min-width: 0;
}

.sss-hurting-deduct {
  font-size: 0.72rem;
  font-weight: 700;
  color: #e53935;
  white-space: nowrap;
  flex-shrink: 0;
}

.sss-hurting-clear {
  font-size: 0.82rem;
  color: #00695c;
  font-weight: 600;
  padding: 0.4rem 0;
}

/* ── Weight note ── */
.sss-weight-note {
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(63,43,19,0.06);
  font-style: italic;
  text-align: right;
}

/* Print */
@media print {
  .sss-block {
    page-break-inside: avoid;
  }
  .sss-cat-details {
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Attack Surface — scan report section
   ═══════════════════════════════════════════════════════════════════ */

.as-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.as-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.as-section-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.as-section-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}

.as-risk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  white-space: nowrap;
}

.as-risk-chip-warn  { background: rgba(245,124,0,0.1);  color: #e65100; border: 1px solid rgba(245,124,0,0.3); }
.as-risk-chip-clear { background: rgba(38,166,154,0.1); color: #00695c; border: 1px solid rgba(38,166,154,0.3); }

/* Stats row */
.as-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.as-stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  min-width: 70px;
}

.as-stat-neutral { background: rgba(63,43,19,0.05); border: 1px solid var(--border); }
.as-stat-warn    { background: rgba(245,124,0,0.08); border: 1px solid rgba(245,124,0,0.25); }

.as-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1.1;
  color: var(--text);
}

.as-stat-warn .as-stat-value { color: #e65100; }

.as-stat-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Domains */
.as-domains-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.as-row-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-right: 0.25rem;
}

.as-domain-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(100,181,246,0.1);
  border: 1px solid rgba(100,181,246,0.3);
  color: #1565c0;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Open ports */
.as-ports {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.as-port-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(171,71,188,0.08);
  border: 1px solid rgba(171,71,188,0.25);
  color: #6a1b9a;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 700;
}

.as-port-svc {
  font-weight: 500;
  font-size: 0.65rem;
  text-transform: uppercase;
  color: #9c27b0;
}

/* Details (collapsible) */
.as-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 0.65rem;
}

.as-details-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  background: rgba(63,43,19,0.03);
  user-select: none;
}

.as-details-summary::-webkit-details-marker { display: none; }

.as-details[open] .as-details-summary {
  border-bottom: 1px solid var(--border);
}

.as-detail-count {
  background: var(--accent-muted, rgba(63,43,19,0.1));
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 20px;
}

.as-details-body {
  padding: 0.75rem 1rem;
}

/* Service rows */
.as-service-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(63,43,19,0.06);
  font-size: 0.82rem;
}

.as-service-row:last-child { border-bottom: none; }

.as-service-icon {
  color: var(--muted);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.as-service-name {
  flex: 1;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.as-service-cat {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(63,43,19,0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

/* Endpoint rows */
.as-ep-list {
  padding: 0.5rem;
  max-height: 360px;
  overflow-y: auto;
}

.as-ep-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  font-size: 0.76rem;
  font-family: var(--font-mono);
  flex-wrap: wrap;
}

.as-ep-row:hover { background: rgba(63,43,19,0.04); }
.as-ep-risky { background: rgba(245,124,0,0.04); }

.as-ep-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.as-ep-status {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.as-ep-status-ok  { background: rgba(38,166,154,0.1); color: #00695c; }
.as-ep-status-err { background: rgba(229,57,53,0.1);  color: #b71c1c; }

.as-ep-flag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-sans, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(245,124,0,0.12);
  color: #e65100;
  border: 1px solid rgba(245,124,0,0.25);
  white-space: nowrap;
}

.as-empty {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.as-truncate-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0.5rem 0;
  font-style: italic;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Attack Surface — dashboard card
   ═══════════════════════════════════════════════════════════════════ */

#attack-surface-card {
  margin-bottom: 0.75rem;
}

.as-dashboard-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent, #3f2b13);
  border-radius: var(--radius);
  padding: 1.1rem 1.5rem;
}

.as-dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.as-dash-eyebrow {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.as-dash-headline {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.as-dash-source {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  background: rgba(63,43,19,0.06);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  align-self: flex-start;
}

.as-dash-stats {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.as-dash-stat {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.as-dash-stat-val {
  font-size: 1.55rem;
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1.1;
  color: var(--text);
}

.as-dash-stat-key {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.as-dash-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.as-dash-risk {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
}

.as-dash-risk-warn  { background: rgba(245,124,0,0.1);  color: #e65100; border: 1px solid rgba(245,124,0,0.3); }
.as-dash-risk-clear { background: rgba(38,166,154,0.1); color: #00695c; border: 1px solid rgba(38,166,154,0.3); }

.as-dash-port-note {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}

.as-dash-svc-chip {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border-radius: 20px;
  background: rgba(63,43,19,0.06);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════════════════════════
   Client Report Cover Page  (rc-*)
   ══════════════════════════════════════════════════════════════════════════ */

.rc-branding-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--brand-deep);
  margin-bottom: 1.5rem;
}

.rc-company-input {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--fg) !important;
  letter-spacing: 0.02em;
  min-width: 220px;
}

.rc-branding-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.18rem 0.55rem;
  text-transform: uppercase;
  flex-shrink: 0;
}

.rc-cover-hero {
  padding: 1.5rem 0 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.rc-cover-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.rc-title-input {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--fg) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.rc-cover-asset {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0.6rem 0 0.2rem;
}

.rc-cover-target {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.rc-cover-target a {
  color: var(--muted);
  text-decoration: none;
}

.rc-cover-risk-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.rc-risk-pill {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  flex-shrink: 0;
}

.rc-risk-pill-risk-critical { background: #dc2626; color: #fff; }
.rc-risk-pill-risk-high     { background: #d97706; color: #fff; }
.rc-risk-pill-risk-moderate { background: #ca8a04; color: #fff; }
.rc-risk-pill-risk-low      { background: #3b82f6; color: #fff; }
.rc-risk-pill-risk-clear    { background: #16a34a; color: #fff; }

.rc-score-block {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.rc-score-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--fg);
  line-height: 1;
}

.rc-score-label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
}

.rc-prepared-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem 0 0.5rem;
}

.rc-prepared-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: uppercase;
}

.rc-client-input {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  flex: 1;
}

.rc-cover-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.5rem 0 0.75rem;
}

.rc-sep {
  color: var(--border);
}

.rc-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

.rc-meta-grid {
  margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Risk Breakdown Chart  (rbc-*)
   ══════════════════════════════════════════════════════════════════════════ */

.rbc-chart {
  margin: 1rem 0 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 0.9rem;
}

.rbc-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.rbc-chart-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rbc-chart-total {
  font-size: 0.74rem;
  color: var(--muted);
}

.rbc-bar-track {
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--border);
  margin-bottom: 0.85rem;
}

.rbc-bar {
  display: flex;
  height: 100%;
  width: 100%;
}

.rbc-seg {
  height: 100%;
  transition: opacity 0.15s;
  min-width: 2px;
}

.rbc-seg:first-child { border-radius: 7px 0 0 7px; }
.rbc-seg:last-child  { border-radius: 0 7px 7px 0; }
.rbc-seg:only-child  { border-radius: 7px; }

.rbc-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.rbc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.4rem 0.4rem;
  border-radius: 7px;
  border: 1.5px solid;
  gap: 0.1rem;
}

.rbc-tile-count {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

.rbc-tile-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rbc-info-note {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
  margin: 0.5rem 0 0;
}

.rbc-empty {
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0.5rem 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Key Findings Section  (kf-*)
   ══════════════════════════════════════════════════════════════════════════ */

.kf-section {
  margin-bottom: 1rem;
}

.kf-section-header {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.kf-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

.kf-count-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.6rem;
  border-radius: 20px;
  background: rgba(220,38,38,0.1);
  color: #991b1b;
  border: 1px solid rgba(220,38,38,0.2);
  white-space: nowrap;
}

.kf-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0.75rem;
}

.kf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  break-inside: avoid;
  page-break-inside: avoid;
}

.kf-head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}

.kf-sev {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.kf-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  line-height: 1.35;
}

.kf-desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
  line-height: 1.5;
}

.kf-impact {
  font-size: 0.8rem;
  color: var(--fg);
  margin: 0 0 0.4rem;
  line-height: 1.5;
}

.kf-fix-hint {
  font-size: 0.78rem;
  color: var(--fg);
  margin: 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

.kf-fix-hint strong {
  color: var(--brand-deep);
}

/* ── How to Fix collapsible ─────────────────────────────────────────────── */

.htf-details {
  margin-top: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 0.1rem;
}

.htf-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand-deep);
  cursor: pointer;
  padding: 0.45rem 0 0.3rem;
  list-style: none;
  user-select: none;
}

.htf-toggle::-webkit-details-marker { display: none; }

.htf-toggle::before {
  content: "▶";
  font-size: 0.55rem;
  transition: transform 0.15s ease;
  color: var(--brand-mid);
}

.htf-details[open] .htf-toggle::before {
  transform: rotate(90deg);
}

.htf-body {
  padding: 0.4rem 0 0.5rem;
}

.htf-summary-text {
  font-size: 0.83rem;
  color: var(--fg);
  line-height: 1.55;
  margin: 0 0 0.75rem;
}

.htf-code-block {
  background: #1e1e1e;
  color: #d4d4d4;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.85rem 1rem;
  font-size: 0.73rem;
  font-family: 'Courier New', Courier, monospace;
  line-height: 1.65;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

.htf-code-block code {
  background: none;
  color: inherit;
  font-size: inherit;
  padding: 0;
}

/* Comments in code blocks */
.htf-code-block .comment {
  color: #6a9955;
}

/* Print */
@media print {
  .htf-details { display: none; }

  .as-section {
    page-break-inside: avoid;
  }

  .as-dashboard-card {
    display: none;
  }

  .as-details[open] .as-details-body {
    max-height: none;
  }

  .as-ep-list {
    max-height: none;
    overflow: visible;
  }
}

.evidence-captures {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.evidence-capture-item {
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border-color, #e2e5e9);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.82rem;
}

.evidence-capture-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.evidence-capture-url {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--text-secondary, #555);
  word-break: break-all;
}

.evidence-capture-source {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.evidence-capture-source-static {
  background: #e8ecf1;
  color: #4a5568;
}

.evidence-capture-source-js {
  background: #ebf5ff;
  color: #2563eb;
}

.evidence-capture-status {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: #f0f0f0;
  color: #333;
}

.evidence-capture-headers {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary, #555);
  background: transparent;
  border: none;
  padding: 2px 0 0 0;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
}

.as-js-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-top: 8px;
  background: #ebf5ff;
  border-radius: 6px;
  font-size: 0.82rem;
}

.as-js-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #2563eb;
  color: #fff;
}

.nav-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}

#section-schedules .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
@media (max-width: 900px) {
  #section-schedules .grid {
    grid-template-columns: 1fr;
  }
}

#schedule-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#schedule-form label span {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--fg2);
}
#schedule-form select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg2);
  color: var(--fg);
  font-size: 0.88rem;
}

.btn-sm {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg2);
  color: var(--fg);
  font-size: 0.76rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-sm:hover {
  background: var(--bg3, var(--border));
}
.btn-sm.btn-danger {
  color: var(--red);
  border-color: var(--red);
}
.btn-sm.btn-danger:hover {
  background: var(--red);
  color: #fff;
}

.alert-unread {
  border-left: 3px solid var(--blue, #2563eb);
}

.badge-scan-active {
  background: #7c3aed;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-scan-passive {
  background: #0891b2;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.compliance-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0.2rem;
}

.compliance-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  white-space: nowrap;
  cursor: default;
}

.compliance-owasp {
  background: rgba(220, 38, 38, 0.10);
  color: #991b1b;
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.compliance-soc2 {
  background: rgba(37, 99, 235, 0.10);
  color: #1e3a8a;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.compliance-hipaa {
  background: rgba(22, 163, 74, 0.10);
  color: #14532d;
  border: 1px solid rgba(22, 163, 74, 0.25);
}

.risk-priority-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
}

.risk-priority-critical {
  background: #dc2626;
  color: #fff;
}

.risk-priority-high {
  background: #d97706;
  color: #fff;
}

.risk-priority-medium {
  background: #ca8a04;
  color: #fff;
}

.risk-priority-low {
  background: #3b82f6;
  color: #fff;
}

.risk-priority-info {
  background: #e5e7eb;
  color: #6b7280;
}

#section-alerts .empty-state,
#section-schedules .empty-state {
  text-align: center;
  padding: 2rem;
}

/* ── Remediation Status Badges ─────────────────────────────── */

.badge-remediation {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-rs-open { background: rgba(239,68,68,0.1); color: #dc2626; border: 1px solid rgba(239,68,68,0.2); }
.badge-rs-in_progress { background: rgba(59,130,246,0.1); color: #2563eb; border: 1px solid rgba(59,130,246,0.2); }
.badge-rs-fixed { background: rgba(34,197,94,0.1); color: #16a34a; border: 1px solid rgba(34,197,94,0.2); }
.badge-rs-verified { background: rgba(16,185,129,0.1); color: #059669; border: 1px solid rgba(16,185,129,0.2); }
.badge-rs-false_positive { background: rgba(107,114,128,0.1); color: #6b7280; border: 1px solid rgba(107,114,128,0.2); }

/* ── Remediation Controls ──────────────────────────────────── */

.remediation-controls {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.remediation-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.remediation-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 120px;
}

.remediation-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.remediation-select,
.remediation-input {
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

.remediation-select:focus,
.remediation-input:focus {
  outline: 2px solid rgba(139, 92, 42, 0.3);
  border-color: rgba(139, 92, 42, 0.4);
}

.remediation-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-left: auto;
}

.btn-sm {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.btn-sm:hover {
  background: var(--border);
}

.btn-verify {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.25);
  color: #16a34a;
}
.btn-verify:hover {
  background: rgba(34,197,94,0.15);
}

.btn-ticket {
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.25);
  color: #2563eb;
}
.btn-ticket:hover {
  background: rgba(59,130,246,0.15);
}

.btn-ticket-link {
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  background: rgba(107,74,29,0.08);
  border: 1px solid rgba(107,74,29,0.18);
  color: #5a3e1b;
  text-decoration: none;
  white-space: nowrap;
}

.btn-history {
  background: rgba(107,114,128,0.08);
  border-color: rgba(107,114,128,0.2);
  color: #6b7280;
}

/* ── History Drawer ────────────────────────────────────────── */

.history-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}

.history-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}

.history-drawer-panel {
  position: relative;
  width: min(420px, 90vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
}

.history-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.history-drawer-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-display);
}

.history-drawer-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--muted);
  padding: 0.2rem 0.4rem;
  line-height: 1;
}

.history-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.history-drawer-footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.history-comment-input {
  flex: 1;
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
}

.history-item {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.history-item:last-child {
  border-bottom: none;
}

.history-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.history-item-type {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.history-item-time {
  font-size: 0.72rem;
  color: var(--muted);
}

.history-item-detail {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

.history-item-note {
  font-size: 0.82rem;
  color: var(--text);
  margin: 0.25rem 0 0;
  line-height: 1.5;
}

/* ── Remediation Summary Bar ───────────────────────────────── */

.remediation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0;
}

.rs-chip {
  font-size: 0.73rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}

.rs-open { background: rgba(239,68,68,0.08); color: #dc2626; }
.rs-inprogress { background: rgba(59,130,246,0.08); color: #2563eb; }
.rs-fixed { background: rgba(34,197,94,0.08); color: #16a34a; }
.rs-verified { background: rgba(16,185,129,0.08); color: #059669; }
.rs-fp { background: rgba(107,114,128,0.08); color: #6b7280; }

/* ── Integration Cards ─────────────────────────────────────── */

.integration-card .finding-head {
  padding: 1rem;
}

.integration-not-configured {
  opacity: 0.7;
}

#section-integrations .empty-state,
#notification-channels-list .empty-state {
  text-align: center;
  padding: 2rem;
}

.channel-card .finding-head {
  padding: 1rem;
}

.btn-danger {
  color: #dc2626;
  border-color: rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.04);
}
.btn-danger:hover {
  background: rgba(239,68,68,0.1);
}

.delivery-chips {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.delivery-chip {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 12px;
}

.delivery-sent { background: rgba(34,197,94,0.1); color: #16a34a; }
.delivery-failed { background: rgba(239,68,68,0.1); color: #dc2626; }
.delivery-retrying { background: rgba(245,158,11,0.1); color: #d97706; }
.delivery-pending { background: rgba(107,114,128,0.1); color: #6b7280; }

.rs-stale { background: rgba(245,158,11,0.1); color: #d97706; }

.aging-risk-warning {
  background: rgba(239,68,68,0.06);
  border-left: 3px solid #dc2626;
  color: #dc2626;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  margin-bottom: 0.4rem;
  border-radius: 4px;
}

.remediation-queues {
  display: flex;
  gap: 0.4rem;
  padding: 0.2rem 0;
}

.rs-queue-btn {
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  color: var(--text);
}
.rs-queue-btn:hover {
  background: rgba(59,130,246,0.08);
  border-color: #2563eb;
  color: #2563eb;
}

.badge-stale {
  background: rgba(245,158,11,0.12);
  color: #b45309;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: 12px;
}
.badge-stale.stale-urgent {
  background: rgba(239,68,68,0.12);
  color: #dc2626;
}

.badge-owner {
  background: rgba(59,130,246,0.08);
  color: #2563eb;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 12px;
}

.badge-ticket {
  background: rgba(107,114,128,0.08);
  color: #4b5563;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 12px;
  text-decoration: none;
}
a.badge-ticket:hover {
  background: rgba(59,130,246,0.12);
  color: #2563eb;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.filter-check input[type="checkbox"] {
  margin: 0;
}

.auth-container {
  max-width: 380px;
  margin: 12vh auto 0;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.auth-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--brand);
  margin: 0 0 0.2rem;
  text-align: center;
}
.auth-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.auth-form input {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
  background: var(--bg);
  color: var(--text);
}
.auth-btn {
  padding: 0.6rem;
  font-weight: 700;
}
.auth-error {
  background: rgba(239,68,68,0.08);
  color: #dc2626;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.auth-toggle {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.75rem;
}
.auth-toggle a {
  color: var(--brand);
  text-decoration: underline;
  cursor: pointer;
}

.user-nav-info {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.user-nav-info .user-role-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  background: rgba(59,130,246,0.1);
  color: #2563eb;
  text-transform: uppercase;
}
.user-nav-info .btn-logout {
  font-size: 0.72rem;
  cursor: pointer;
  background: none;
  border: 1px solid var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  color: var(--muted);
}
.user-nav-info .btn-logout:hover {
  color: #dc2626;
  border-color: rgba(239,68,68,0.3);
}

.team-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.team-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}
.team-stat-card .stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
}
.team-stat-card .stat-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
}

.audit-entry {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.audit-entry .audit-time {
  color: var(--muted);
  white-space: nowrap;
  min-width: 130px;
}
.audit-entry .audit-actor {
  font-weight: 600;
  min-width: 100px;
}
.audit-entry .audit-action {
  flex: 1;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.user-card .user-name {
  font-weight: 600;
  font-size: 0.85rem;
}
.user-card .user-email {
  font-size: 0.75rem;
  color: var(--muted);
}
.user-card .user-role-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  background: rgba(59,130,246,0.1);
  color: #2563eb;
  text-transform: uppercase;
}
.user-card .user-actions {
  margin-left: auto;
  display: flex;
  gap: 0.3rem;
}

.role-restricted {
  display: none !important;
}

/* AI remediation suggestion block */
.finding-ai-block {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #c8d3e3;
  border-left: 3px solid #6c5ce7;
  border-radius: 6px;
  background: linear-gradient(180deg, #f7f5ff 0%, #fbfbff 100%);
}
.finding-ai-block .ai-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.finding-ai-block .ai-meta {
  font-size: 11px;
  color: #6b7488;
}
.finding-ai-block .ai-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.btn-ai-generate {
  background: #6c5ce7;
  color: #fff;
  border: 1px solid #5a4cd4;
}
.btn-ai-generate:hover { background: #5a4cd4; }
.btn-ai-generate:disabled { opacity: 0.6; cursor: wait; }
.badge-ai-edited {
  background: #fff4d2;
  color: #8a6d00;
  border: 1px solid #e9d27a;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}
.ai-subfield { margin-top: 8px; }
.ai-sublabel {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4b3fa3;
  margin-bottom: 3px;
}
.ai-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #2a2f3a;
}
.ai-text-pre { white-space: pre-wrap; }
.ai-example {
  margin: 0;
  padding: 8px 10px;
  background: #1f2330;
  color: #e7eaf3;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-x: auto;
}
.ai-edit-form { display: flex; flex-direction: column; gap: 6px; }
.ai-textarea {
  width: 100%;
  border: 1px solid #c8d3e3;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.ai-textarea-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ai-edit-actions { display: flex; gap: 8px; margin-top: 4px; }
.ai-empty { font-style: italic; }

/* ===== Share modal ===== */
.share-modal-overlay { position: fixed; inset: 0; background: rgba(20, 14, 6, 0.45); display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 1rem; }
.share-modal-card { background: var(--surface-strong); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 1.6rem 1.8rem; }
.share-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.share-modal-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; }
.modal-close { background: transparent; color: var(--text); font-size: 1.6rem; padding: 0.1rem 0.6rem; border-radius: 999px; }
.share-modal-intro { color: var(--muted); margin: 0.2rem 0 1rem; line-height: 1.5; }
.share-create-form { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
.share-form-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.9rem; margin-bottom: 0.7rem; }
.share-form-row label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; color: var(--muted); }
.share-form-row select, .share-form-row input { padding: 0.55rem 0.7rem; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 0.95rem; color: var(--text); }
.share-create-btn { background: var(--brand); color: #fff; }
.share-form-error { margin-top: 0.5rem; min-height: 1.2em; color: var(--high); font-size: 0.88rem; }
.share-list-wrap h3 { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: 1.1rem; }
.share-list { display: flex; flex-direction: column; gap: 0.6rem; }
.share-list-empty { color: var(--muted); font-size: 0.92rem; margin: 0.4rem 0; }
.share-row { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.share-row-revoked, .share-row-expired { opacity: 0.55; }
.share-row-main { flex: 1; min-width: 0; }
.share-row-status { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
.share-status-pill { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.15rem 0.55rem; border-radius: 999px; color: #fff; }
.share-status-active { background: var(--success); }
.share-status-revoked { background: var(--muted); }
.share-status-expired { background: var(--info); }
.share-lock { font-size: 0.95rem; }
.share-row-url { font-family: monospace; font-size: 0.82rem; color: var(--brand-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-row-meta { font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }
.share-row-actions { display: flex; flex-direction: column; gap: 0.35rem; flex-shrink: 0; }
.share-row-btn { background: var(--brand); color: #fff; padding: 0.4rem 0.8rem; font-size: 0.82rem; border-radius: 999px; }
.share-row-btn-danger { background: var(--high); }

/* Onboarding strip — added by onboarding flow */
.onboarding-strip { flex-direction: column; align-items: stretch; padding: 0.75rem 0 0.85rem; gap: 0.55rem; }
.onboarding-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.onboarding-title { font-size: 0.92rem; color: var(--text); margin-right: 0.6rem; }
.onboarding-progress-text { font-size: 0.76rem; color: var(--muted); }
.onboarding-actions { display: inline-flex; gap: 0.4rem; align-items: center; }
.onboarding-actions .btn-sm.primary { background: var(--brand); color: #fff; border: none; padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.onboarding-actions .btn-sm.primary:hover { background: var(--brand-deep); }
.onboarding-actions .btn-sm.primary:disabled { opacity: 0.6; cursor: not-allowed; }
.onboarding-dismiss { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; }
.onboarding-dismiss:hover { color: var(--text); border-color: var(--brand); }
.onboarding-progress-bar { height: 4px; background: rgba(0,0,0,0.06); border-radius: 4px; overflow: hidden; }
.onboarding-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--success)); transition: width 200ms ease; }
.onboarding-step { align-items: flex-start; padding: 0.45rem 0.75rem; }
.onboarding-step-body { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.onboarding-step-help { font-size: 0.7rem; font-weight: 400; color: var(--muted); white-space: normal; }
.onboarding-step.is-done .onboarding-step-help { color: rgba(39, 80, 67, 0.75); }

/* ===== Connect-a-site CTA + wizard ===== */
.connect-site-card { background: linear-gradient(135deg, var(--surface-strong), var(--surface)); }
.connect-site-cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.primary-cta { background: var(--accent, #b25c2c); color: #fff; border: none; border-radius: 999px; padding: 0.85rem 1.6rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 120ms ease, filter 120ms ease; }
.primary-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.primary-cta:disabled { background: var(--muted); cursor: not-allowed; transform: none; filter: none; }
.link-button { background: none; border: none; color: var(--accent, #b25c2c); cursor: pointer; font-size: 0.9rem; padding: 0.4rem 0.6rem; }
.link-button:hover { text-decoration: underline; }
.connect-site-mini-steps { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.connect-site-mini-steps li { display: flex; align-items: center; gap: 0.7rem; color: var(--muted); font-size: 0.95rem; }
.connect-site-mini-steps li span { display: inline-flex; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--surface-strong); border: 1px solid var(--border); align-items: center; justify-content: center; font-weight: 700; color: var(--accent, #b25c2c); }

.connect-wizard-overlay { position: fixed; inset: 0; background: rgba(20, 14, 6, 0.5); display: flex; align-items: flex-start; justify-content: center; z-index: 10050; padding: 1rem; overflow-y: auto; }
.connect-wizard-card { background: var(--surface-strong); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); max-width: 720px; width: 100%; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.6rem 1.8rem; margin-top: 1rem; }
@media (min-width: 720px) { .connect-wizard-overlay { align-items: center; } .connect-wizard-card { margin-top: 0; } }
.connect-wizard-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.connect-wizard-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; }
.connect-wizard-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.connect-wizard-steps li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); padding: 0.3rem 0.6rem; border-radius: 999px; }
.connect-wizard-steps li span { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); align-items: center; justify-content: center; font-weight: 700; }
.connect-wizard-steps li.active { color: var(--text); background: var(--surface); }
.connect-wizard-steps li.active span { background: var(--accent, #b25c2c); color: #fff; border-color: var(--accent, #b25c2c); }
.connect-wizard-steps li.done span { background: #2c8b5e; color: #fff; border-color: #2c8b5e; }
.connect-wizard-steps li.done span::before { content: "✓"; }
.connect-wizard-steps li.done span > * { display: none; }
.connect-wizard-body label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.9rem; }
.connect-wizard-body label small.muted { font-weight: 400; }
.connect-wizard-body input[type="url"], .connect-wizard-body input[type="text"], .connect-wizard-body select { padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 1rem; }
.connect-wizard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.connect-wizard-intro { color: var(--muted); margin: 0 0 1rem; line-height: 1.55; }
.connect-wizard-optional { color: var(--muted); font-weight: 400; font-size: 0.82rem; margin-left: 0.25rem; }
.connect-wizard-helper { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.connect-wizard-autodetect {
  list-style: none; padding: 0.85rem 1rem; margin: 0.35rem 0 0;
  background: color-mix(in srgb, var(--accent, #b25c2c) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent, #b25c2c) 22%, var(--border));
  border-radius: 10px; display: grid; gap: 0.7rem;
}
.connect-wizard-autodetect li {
  display: grid; grid-template-columns: 26px 1fr; gap: 0.7rem;
  align-items: start; font-size: 0.9rem; line-height: 1.4; font-weight: 400;
}
.connect-wizard-autodetect .cwa-icon { font-size: 1.05rem; line-height: 1.4; text-align: center; }
.connect-wizard-autodetect strong { display: block; color: var(--text); font-weight: 600; }
.connect-wizard-autodetect small { display: block; font-size: 0.82rem; margin-top: 0.1rem; }
.connect-wizard-advanced {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.45rem 0.85rem; background: var(--surface); margin-top: 0.6rem;
}
.connect-wizard-advanced[open] { padding-bottom: 0.85rem; }
.connect-wizard-advanced > summary {
  cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--text);
  padding: 0.25rem 0; list-style: revert;
}
.connect-wizard-advanced-help { margin: 0.55rem 0 0.7rem; font-size: 0.85rem; line-height: 1.5; }
.connect-wizard-callout { background: var(--surface); border-left: 3px solid var(--accent, #b25c2c); padding: 0.8rem 1rem; border-radius: 6px; margin: 0.8rem 0; }
.connect-wizard-callout h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.connect-wizard-callout p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.connect-wizard-confirm { display: flex; gap: 0.7rem; align-items: flex-start; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin: 1rem 0 0.5rem; cursor: pointer; font-weight: 400; }
.connect-wizard-confirm input { margin-top: 0.2rem; transform: scale(1.2); }
.connect-wizard-error { color: #b13a3a; font-size: 0.88rem; margin-top: 0.5rem; min-height: 1em; }
.connect-wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.connect-wizard-method { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 0.8rem; }
.connect-wizard-method[open] { border-color: var(--accent, #b25c2c); }
.connect-wizard-method summary { cursor: pointer; font-size: 0.95rem; padding: 0.2rem 0; }
.connect-wizard-howto { margin: 0.8rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.7rem; font-size: 0.9rem; line-height: 1.55; }
.copy-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.copy-row code { flex: 1; background: var(--surface-strong); padding: 0.5rem 0.7rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; word-break: break-all; border: 1px solid var(--border); }
.copy-btn { padding: 0.4rem 0.8rem; border: 1px solid var(--border); background: var(--surface-strong); border-radius: 6px; cursor: pointer; font-size: 0.82rem; }
.copy-btn:hover { background: var(--accent, #b25c2c); color: #fff; border-color: var(--accent, #b25c2c); }
.connect-wizard-result { padding: 0.8rem 1rem; border-radius: 8px; margin-top: 1rem; font-size: 0.92rem; }
.connect-wizard-result.pending { background: var(--surface); color: var(--muted); }
.connect-wizard-result.success { background: #e7f5ec; color: #1f5e3d; border: 1px solid #2c8b5e; }
.connect-wizard-result.fail { background: #fbecec; color: #842525; border: 1px solid #d18a8a; }
.connect-wizard-failreasons { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.connect-wizard-done { text-align: center; padding: 1.2rem 0.5rem; }
.connect-wizard-done-icon { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 0.6rem; }
.connect-wizard-done.ok .connect-wizard-done-icon { background: #e7f5ec; color: #1f5e3d; }
.connect-wizard-done.pending .connect-wizard-done-icon { background: var(--surface); color: var(--muted); }
.connect-wizard-done h3 { margin: 0 0 0.5rem; font-family: var(--font-display); }
.connect-wizard-done p { color: var(--muted); margin: 0 auto; max-width: 420px; line-height: 1.5; }
@media (max-width: 600px) {
  .connect-wizard-row { grid-template-columns: 1fr; }
  .connect-wizard-card { padding: 1.2rem 1rem; max-height: 96vh; }
}

/* ========== Forced onboarding overlay ========== */
.onb-backdrop{position:fixed;inset:0;background:rgba(8,12,24,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto}
/* Onboarding fade-in for each step body — gives the feeling of motion. */
@keyframes onb-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.onb-fade-in { animation: onb-fade-in .28s ease-out both; }
/* Step-completion flash: green check + label that animates in then out. */
@keyframes onb-flash-in { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
.onb-flash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 24px; animation: onb-flash-in .35s ease-out both; }
.onb-flash-check { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg,#10b981,#059669); color: #fff; font-size: 38px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(16,185,129,.35); }
.onb-flash-text { font-size: 18px; font-weight: 600; color: var(--text, #0f172a); }
/* Momentum line on scan complete — subtle green confirmation. */
.onb-momentum { color: #047857; font-weight: 600; }
.onb-finding { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.onb-finding-body { flex: 1; min-width: 0; }
.onb-finding-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin-top: 4px; }
.onb-finding-why { font-size: 13px; color: var(--muted, #64748b); margin-top: 2px; line-height: 1.45; }

/* Eyebrow label above headlines — signals "this is a deliverable section". */
.onb-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }

/* Risk pill used in eyebrow — small inline risk indicator. */
.onb-risk-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.onb-risk-pill.onb-risk-critical { background: #fee2e2; color: #991b1b; }
.onb-risk-pill.onb-risk-high { background: #ffedd5; color: #9a3412; }
.onb-risk-pill.onb-risk-medium { background: #fef3c7; color: #854d0e; }
.onb-risk-pill.onb-risk-low { background: #dbeafe; color: #1e40af; }
.onb-risk-pill.onb-risk-clean { background: #dcfce7; color: #166534; }

/* Client-ready report preview — designed to feel like a consultant deliverable. */
.onb-report-card { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #e2e8f0; border-radius: 14px; padding: 22px; box-shadow: 0 8px 24px rgba(15,23,42,.06); margin: 12px 0 18px; }
.onb-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #e2e8f0; }
.onb-report-title { font-size: 17px; font-weight: 700; color: #0f172a; }
.onb-report-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.onb-risk-badge { text-align: right; padding: 8px 14px; border-radius: 10px; min-width: 96px; }
.onb-risk-badge-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.onb-risk-badge-value { font-size: 18px; font-weight: 800; margin-top: 2px; }
.onb-risk-badge.onb-risk-critical { background: #fee2e2; color: #991b1b; }
.onb-risk-badge.onb-risk-high { background: #ffedd5; color: #9a3412; }
.onb-risk-badge.onb-risk-medium { background: #fef3c7; color: #854d0e; }
.onb-risk-badge.onb-risk-low { background: #dbeafe; color: #1e40af; }
.onb-risk-badge.onb-risk-clean { background: #dcfce7; color: #166534; }
.onb-report-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.onb-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 8px; text-align: center; }
.onb-stat-num { font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1; }
.onb-stat-lab { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin-top: 4px; }
.onb-stat.sev-critical .onb-stat-num { color: #b91c1c; }
.onb-stat.sev-high .onb-stat-num { color: #c2410c; }
.onb-stat.sev-medium .onb-stat-num { color: #a16207; }
.onb-stat.sev-low .onb-stat-num { color: #1d4ed8; }
.onb-report-section { margin-top: 12px; }
.onb-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #475569; margin-bottom: 4px; }
.onb-section-body { font-size: 13.5px; line-height: 1.5; color: #1e293b; margin: 0; }
.onb-report-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e2e8f0; font-size: 11.5px; color: #64748b; text-align: center; letter-spacing: .02em; }

/* Business-value card revealed after share — reinforces premium positioning. */
.onb-value-card { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); border: 1px solid #c7d2fe; }
.onb-value-title { font-size: 14px; font-weight: 700; color: #312e81; }
.onb-value-sub { font-size: 12.5px; color: #4338ca; margin-top: 4px; line-height: 1.4; }
.onb-card{background:var(--surface,#fff);color:var(--text,#0f172a);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.4);width:min(680px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;margin-top:8px}
@media (min-width:720px){.onb-backdrop{align-items:center;padding:24px}.onb-card{margin-top:0}}
.onb-head{display:flex;align-items:center;gap:16px;padding:20px 28px;border-bottom:1px solid rgba(0,0,0,.08)}
.onb-progress{flex:1;display:flex;flex-direction:column;gap:6px}
.onb-progress-bar{height:6px;border-radius:999px;background:rgba(99,102,241,.15);overflow:hidden}
.onb-progress-fill{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:999px;transition:width .35s ease}
.onb-progress-text{font-size:12px;font-weight:600;color:var(--muted,#64748b);letter-spacing:.04em;text-transform:uppercase}
.onb-skip{font-size:13px;color:var(--muted,#64748b);text-decoration:none;white-space:nowrap}
.onb-skip:hover{color:var(--text,#0f172a);text-decoration:underline}
.onb-body{padding:28px;overflow-y:auto}
.onb-step h2{margin:0 0 8px;font-size:22px;line-height:1.25}
.onb-lead{margin:0 0 18px;color:var(--muted,#475569);line-height:1.55}
.onb-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.onb-actions .primary-cta{padding:10px 18px;border-radius:10px;border:0;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-weight:600;cursor:pointer;font-size:14px}
.onb-actions .primary-cta:hover{filter:brightness(1.08)}
.onb-actions .link-button{background:none;border:0;color:var(--muted,#64748b);cursor:pointer;font-size:13px;text-decoration:underline}
.onb-checklist{margin:0 0 8px;padding-left:20px;color:var(--text,#0f172a)}
.onb-checklist li{margin:6px 0}
.onb-hint{margin-top:14px;font-size:12px;color:var(--muted,#64748b)}
.onb-scan-status{padding:12px 14px;background:rgba(99,102,241,.08);border-radius:10px;font-size:14px;color:var(--text,#1e293b);margin-bottom:8px}
.onb-findings-list{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:8px}
.onb-finding{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:rgba(15,23,42,.04)}
.onb-sev{font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:#94a3b8;color:#fff;min-width:64px;text-align:center}
.onb-finding.sev-critical .onb-sev{background:#dc2626}
.onb-finding.sev-high .onb-sev{background:#ea580c}
.onb-finding.sev-medium .onb-sev{background:#d97706}
.onb-finding.sev-low .onb-sev{background:#0891b2}
.onb-finding.sev-info .onb-sev{background:#64748b}
.onb-finding-title{font-size:14px;color:var(--text,#0f172a)}
.onb-callout{margin:14px 0;padding:16px;border:1px solid rgba(99,102,241,.25);border-radius:12px;background:rgba(99,102,241,.06)}
.onb-callout-title{font-weight:700;margin-bottom:6px}
.onb-callout p{margin:0 0 12px;color:var(--muted,#475569);font-size:14px}
.onb-callout .primary-cta{display:inline-block;text-decoration:none;padding:9px 16px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-weight:600;font-size:13px}
.onb-done{text-align:center}
.onb-done-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:999px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:32px;margin-bottom:12px}
.onb-done .onb-actions{justify-content:center}
@media (max-width:640px){
  .onb-backdrop{padding:0}
  .onb-card{border-radius:0;max-height:100vh;height:100vh;width:100%}
  .onb-head{padding:14px 16px}
  .onb-body{padding:18px 16px}
  .onb-step h2{font-size:19px}
  .onb-actions{flex-direction:column;align-items:stretch}
  .onb-actions .primary-cta{width:100%;text-align:center}
}

/* =====================================================================
   Two-mode UX: signed-out marketing shell + signed-in app.
   Visibility is driven by classes on <body>:
     - body.signed-out      → marketing only, app/nav/onboarding hidden
     - body.is-authed       → marketing hidden, app/nav visible
     - body.is-first-run    → no completed scans yet → hide advanced sections
     - body.has-asset, .has-verified-asset, .has-completed-scan → unlocks
     - body.is-admin        → admin nav items visible
   ===================================================================== */

/* Default: hide app shell until JS decides which mode we're in. */
body:not(.is-authed) #workspace-nav,
body:not(.is-authed) .shell,
body:not(.is-authed) #first-run-dashboard,
body:not(.is-authed) #onboarding-strip,
body:not(.is-authed) #first-run-path { display: none !important; }
body.is-authed #auth-screen { display: none !important; }

/* First-run hides advanced/admin sections + the dense metric cards row. */
body.is-first-run #section-auth,
body.is-first-run #section-zap,
body.is-first-run #section-schedules,
body.is-first-run #section-alerts,
body.is-first-run #section-integrations,
body.is-first-run #section-team,
body.is-first-run #section-clients,
body.is-first-run #section-jobs,
body.is-first-run #summary-cards,
body.is-first-run #attention-panel,
body.is-first-run #activity-timeline,
body.is-first-run #attack-surface-card,
body.is-first-run #live-queue,
body.is-first-run #workspace-summary,
body.is-first-run #first-scan-discovery { display: none !important; }
body.is-first-run #first-run-dashboard { display: block !important; }

/* Progressive unlock — nav items hidden until prerequisites are met. */
body:not(.has-asset) [data-lock="needs-asset"] { display: none !important; }
body:not(.has-verified-asset) [data-lock="needs-verified"] { display: none !important; }
body:not(.has-completed-scan) [data-lock="needs-scan"] { display: none !important; }
body:not(.is-admin) [data-lock="admin"],
body.is-first-run [data-lock="admin"] { display: none !important; }

/* Belt-and-suspenders: hide admin sections in the page body too, even if
   permission-based code paths try to reveal them for non-admin roles. */
body:not(.is-admin) #section-team,
body:not(.is-admin) #section-clients,
body:not(.is-admin) #section-jobs { display: none !important; }

/* ---------- Marketing shell ---------- */
.marketing-shell {
  min-height: 100vh;
  padding: 0 0 80px;
}
.marketing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 5vw;
}
.marketing-brand {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--brand-deep);
}
.marketing-nav-actions { display: flex; gap: 10px; }
/* Marketing nav links (added 2026-04-24 for Pricing nav entry).
   Sits between the brand and the sign-in CTA. Uses theme-aware
   tokens so it reads correctly on both the warm marketing shell
   and the dark calm theme (theme-calm overrides below). */
.marketing-nav-links {
  display: flex; gap: 22px;
  margin-left: 28px;
  margin-right: auto;
}
.marketing-nav-link {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}
.marketing-nav-link:hover { color: var(--brand); }
.marketing-nav-link--active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
body.theme-calm .marketing-nav-link { color: var(--text-soft, #c2cdde); }
body.theme-calm .marketing-nav-link:hover,
body.theme-calm .marketing-nav-link--active {
  color: var(--text, #e6ecf3);
  border-bottom-color: var(--brand);
}
@media (max-width: 720px) {
  .marketing-nav-links { display: none; }
}
.btn-ghost {
  background: transparent; color: var(--brand-deep);
  border: 1px solid var(--border); padding: 0.6rem 1rem;
}
.btn-ghost:hover:not(:disabled) { background: rgba(157, 77, 36, 0.08); }
.marketing-hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 48px; align-items: center;
  max-width: 1180px; margin: 40px auto 0; padding: 40px 5vw;
}
.marketing-hero-text h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px); line-height: 1.05;
  margin: 0 0 18px; color: var(--text);
}
.marketing-sub {
  font-size: 19px; color: var(--muted); margin: 0 0 28px; max-width: 560px;
}
.marketing-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.marketing-cta { padding: 0.95rem 1.6rem; font-size: 16px; }
.marketing-hero-card {
  background: var(--surface-strong); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow);
}
.sample-report-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 14px;
}
.sample-report-title { font-weight: 600; font-size: 16px; color: var(--text); }
.sample-report-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.sample-report-badge {
  background: rgba(101, 49, 29, 0.1); color: var(--brand-deep);
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.sample-report-findings {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.sample-report-findings li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: rgba(255, 250, 243, 0.6);
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 14px; color: var(--text);
}
.sev {
  font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 4px;
  color: #fff; min-width: 36px; text-align: center;
}
.sev-crit { background: var(--critical); }
.sev-high { background: var(--high); }
.sev-med  { background: var(--medium); }
.sev-low  { background: var(--low); }
.marketing-how { max-width: 1180px; margin: 60px auto 0; padding: 0 5vw; }
.marketing-how h2 {
  font-family: var(--font-display); font-size: 32px;
  margin: 0 0 24px; color: var(--text);
}
.marketing-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.marketing-steps li {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.marketing-step-num {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand); color: #fff; display: flex;
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; margin-bottom: 12px;
}
.marketing-steps h3 { margin: 0 0 8px; font-size: 18px; color: var(--text); }
.marketing-steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 800px) {
  .marketing-hero { grid-template-columns: 1fr; gap: 32px; }
  .marketing-steps { grid-template-columns: 1fr; }
  .marketing-nav-actions .btn-ghost { display: none; }
}

/* ============================================================
   Public marketing homepage (signed-out only).
   Buyer-facing. No operator UI. Short, high-whitespace, premium.
   ============================================================ */
.mkt-hero {
  max-width: 1080px;
  margin: 56px auto 0;
  padding: 64px 5vw 32px;
  text-align: center;
}
.mkt-hero-inner { max-width: 760px; margin: 0 auto; }
.mkt-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-deep);
  background: rgba(157, 77, 36, 0.08);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 22px;
}
.mkt-headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.05;
  margin: 0 0 20px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.mkt-sub {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--muted);
  margin: 0 auto 36px;
  max-width: 620px;
  line-height: 1.55;
}
.mkt-cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.mkt-cta-row--center { justify-content: center; }
.mkt-cta-row:not(.mkt-cta-row--center) { justify-content: center; }
.mkt-cta-primary,
.mkt-cta-secondary {
  padding: 0.95rem 1.7rem;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em;
}

.mkt-trust {
  max-width: 1080px;
  margin: 24px auto 0;
  padding: 32px 5vw;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mkt-trust-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mkt-trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--text);
}
.mkt-trust-mark {
  flex: 0 0 22px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

.mkt-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.mkt-section-eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 12px;
}
.mkt-section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
}

.mkt-how {
  max-width: 1080px;
  margin: 0 auto;
  padding: 80px 5vw;
}
.mkt-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.mkt-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.mkt-step-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  margin-bottom: 14px;
}
.mkt-step-title {
  font-size: 16px; font-weight: 600;
  margin: 0 0 6px; color: var(--text);
}
.mkt-step-text {
  font-size: 13.5px; line-height: 1.55;
  color: var(--muted); margin: 0;
}
/* W30 — three-step variant overrides the four-column default. */
.mkt-steps.mkt-steps--three { grid-template-columns: repeat(3, 1fr); }

/* W30 — Attack-demo strip. Three condensed feed rows that show
   the value (bypassed traffic, login attack, defense applied) on
   the public landing page. Echoes the operator dashboard feed
   visually so the marketing promise matches the product. */
.mkt-demo {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 5vw 24px;
}
.mkt-demo-feed {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.mkt-demo-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
}
.mkt-demo-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--muted);
  box-shadow: 0 0 0 4px rgba(140, 155, 179, 0.12);
}
.mkt-demo-row--allow .mkt-demo-dot {
  background: #d8a13a;
  box-shadow: 0 0 0 4px rgba(216, 161, 58, 0.18);
}
.mkt-demo-row--alert .mkt-demo-dot {
  background: #d24c4c;
  box-shadow: 0 0 0 4px rgba(210, 76, 76, 0.20);
}
.mkt-demo-row--block .mkt-demo-dot {
  background: #4a82bd;
  box-shadow: 0 0 0 4px rgba(74, 130, 189, 0.22);
}
.mkt-demo-body { min-width: 0; }
.mkt-demo-line {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.mkt-demo-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mkt-demo-pill--allow {
  background: rgba(216, 161, 58, 0.16);
  color: #e8b558;
  border-color: rgba(216, 161, 58, 0.35);
}
.mkt-demo-pill--alert {
  background: rgba(210, 76, 76, 0.18);
  color: #f08a8a;
  border-color: rgba(210, 76, 76, 0.40);
}
.mkt-demo-pill--block {
  background: rgba(74, 130, 189, 0.20);
  color: #9bc1e8;
  border-color: rgba(74, 130, 189, 0.40);
}
.mkt-demo-headline {
  font-size: 14.5px; font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.mkt-demo-meta {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: var(--muted);
}
.mkt-demo-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
  opacity: 0.85;
}
.mkt-demo-sub {
  margin-top: 8px;
  font-size: 13px; color: var(--muted);
  line-height: 1.5;
}
.mkt-demo-time {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap;
  padding-top: 4px;
}

.mkt-deliverable {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 5vw 80px;
}
.mkt-deliv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mkt-deliv-grid > .mkt-deliv-card:nth-child(4),
.mkt-deliv-grid > .mkt-deliv-card:nth-child(5) {
  /* On 3-col layout, the last two sit centered on the second row. */
}
.mkt-deliv-card {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 130px;
}
.mkt-deliv-tag {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-deep);
}
.mkt-deliv-desc {
  font-size: 14px; line-height: 1.55;
  color: var(--text); margin: 0;
}

.mkt-final {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 72px 5vw;
  text-align: center;
}
.mkt-final-inner {
  max-width: 640px; margin: 0 auto;
}
.mkt-final-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.mkt-final-sub {
  font-size: 16px; color: var(--muted);
  margin: 0 0 28px;
}

.mkt-footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 5vw 40px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 12.5px; color: var(--muted);
}
.mkt-footer-brand {
  font-family: var(--font-display);
  font-weight: 600; color: var(--brand-deep);
  letter-spacing: 0.04em;
}
/* W29 — small "Book a demo" affordance demoted into the footer
   so it stays available without competing with Get Started. */
.mkt-footer-cta {
  margin-left: auto;
  padding: 6px 14px;
  font-size: 12.5px;
}
/* W29 — opt into native smooth scrolling so the in-page anchor
   from the "See How It Works" CTA glides into view. */
html { scroll-behavior: smooth; }

/* W31 — "See How It Works" walkthrough modal. Backdrop + card
   styled to sit on top of the dark theme; reuses the .mkt-demo
   row visuals inside each step so the marketing promise matches
   the live product. Backdrop click + Esc + close button all
   dismiss; visual focus indicators come from the existing
   .btn-primary / .btn-ghost rules. */
.how-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 14, 26, 0.74);
  z-index: 80;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
body.how-modal-open { overflow: hidden; }
.how-modal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(640px, 100%);
  max-height: min(86vh, 720px);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.how-modal-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0;
  color: var(--muted);
  font-size: 28px; line-height: 1;
  width: 36px; height: 36px;
  border-radius: 8px;
  cursor: pointer;
}
.how-modal-close:hover,
.how-modal-close:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.how-modal-head {
  padding: 28px 28px 6px;
}
.how-modal-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.2;
  margin: 6px 0 8px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.how-modal-sub {
  font-size: 14px; color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.how-modal-steps {
  list-style: none;
  margin: 0; padding: 18px 28px 8px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.how-modal-step { margin: 0; }
.how-modal-step-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.how-modal-step-num {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.how-modal-step-title {
  font-size: 17px; font-weight: 600;
  color: var(--text); margin: 0;
  letter-spacing: -0.005em;
}
.how-modal-step-text {
  font-size: 14px; line-height: 1.6;
  color: var(--muted);
  margin: 0 0 14px;
}
/* The embedded demo card inside a step is denser than the public
   landing version — tighter padding so the modal feels balanced. */
.how-modal-demo { padding: 10px; }
.how-modal-demo .mkt-demo-row { padding: 12px 14px; }

.how-modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 28px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.how-modal-progress {
  display: flex; gap: 8px;
}
.how-modal-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(140, 155, 179, 0.35);
  transition: background 120ms ease, transform 120ms ease;
}
.how-modal-dot.is-active {
  background: var(--brand);
  transform: scale(1.15);
}
.how-modal-actions {
  display: flex; gap: 10px;
}
.how-modal-prev,
.how-modal-next,
.how-modal-cta {
  padding: 0.55rem 1.1rem;
  font-size: 14px; font-weight: 600;
}
.how-modal-prev[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
/* W33 — thin auto-advance progress indicator. Pinned to the
   bottom of the card; doesn't affect layout above it. */
.how-modal-autobar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(140, 155, 179, 0.18);
  overflow: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  pointer-events: none;
}
.how-modal-autobar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brand);
  will-change: width;
}
@media (prefers-reduced-motion: reduce) {
  .how-modal-autobar { display: none; }
}
@media (max-width: 560px) {
  .how-modal-backdrop { padding: 0; align-items: stretch; }
  .how-modal-card {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border-left: 0; border-right: 0;
  }
  .how-modal-head  { padding: 22px 18px 4px; }
  .how-modal-steps { padding: 14px 18px 4px; }
  .how-modal-foot  { padding: 12px 18px 18px; flex-wrap: wrap; }
  .how-modal-actions { margin-left: auto; }
}

@media (max-width: 900px) {
  .mkt-trust-row { grid-template-columns: repeat(2, 1fr); }
  .mkt-steps { grid-template-columns: repeat(2, 1fr); }
  .mkt-steps.mkt-steps--three { grid-template-columns: repeat(3, 1fr); }
  .mkt-deliv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mkt-hero { padding: 40px 5vw 24px; }
  .mkt-trust-row { grid-template-columns: 1fr; }
  .mkt-steps,
  .mkt-steps.mkt-steps--three { grid-template-columns: 1fr; }
  .mkt-deliv-grid { grid-template-columns: 1fr; }
  .mkt-how { padding: 56px 5vw; }
  .mkt-final { padding: 56px 5vw; }
  /* W30 — collapse demo row to single column on phones; hide
     the absolute time so the headline doesn't get cramped. */
  .mkt-demo { padding: 40px 5vw 16px; }
  .mkt-demo-row {
    grid-template-columns: 14px 1fr;
    gap: 10px;
    padding: 12px 14px;
  }
  .mkt-demo-time { display: none; }
}

/* Hide ALL operator UI when signed out — defence-in-depth on top of
   the JS toggling. Anything inside <main class="shell"> or workspace
   nav must never leak onto the public homepage. */
body.signed-out .shell,
body.signed-out #workspace-nav,
body.signed-out #onboarding-strip,
body.signed-out #first-run-path,
body.signed-out #first-run-dashboard,
body.signed-out #onboarding-root { display: none !important; }

/* ---------- Auth modal ---------- */
.auth-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 16, 10, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; padding: 20px;
}
.auth-modal-card {
  background: var(--surface-strong); border-radius: var(--radius);
  padding: 32px 28px; width: 100%; max-width: 420px;
  position: relative; box-shadow: var(--shadow);
}
.auth-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; color: var(--muted);
  border: none; font-size: 28px; line-height: 1;
  padding: 4px 10px; border-radius: 8px;
}
.auth-modal-close:hover:not(:disabled) {
  background: rgba(0,0,0,0.05); color: var(--text); transform: none;
}

/* ---------- Condensed nav with More dropdown ---------- */
.workspace-nav-condensed {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  position: sticky; top: 0; z-index: 200;
  /* Use the stronger surface variant + a small drop-shadow so the bar
     is obviously separated from the dashboard content below it. The
     previous translucent --surface blended into the dark dashboard
     background and the bar effectively disappeared. */
  background: var(--surface-strong, #fff);
  border-bottom: 1px solid var(--border, #e5e5e5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  padding: 8px 16px;
}
.workspace-nav-condensed .workspace-tab {
  /* Brighter than --muted so tabs are legible against the strong
     surface (the main nav.workspace-nav declaration colors them with
     --muted, which is intentionally low-contrast for the marketing
     hero variant — overridden here for the signed-in shell). */
  color: var(--text);
  opacity: 0.78;
}
.workspace-nav-condensed .workspace-tab:hover,
.workspace-nav-condensed .workspace-tab.is-active {
  opacity: 1;
}
.workspace-nav-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.95rem;
  color: var(--brand);
  text-decoration: none;
  padding: 6px 8px; margin-right: 8px;
  letter-spacing: 0.01em;
}
.workspace-nav-brand:hover { color: var(--brand-deep); }
.nav-hamburger {
  display: none;
  background: transparent; border: 1px solid var(--border, #ccc);
  border-radius: 8px; padding: 8px 10px; cursor: pointer;
  flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
}
.nav-hamburger-bar {
  display: block; width: 18px; height: 2px;
  background: var(--text, #222); border-radius: 2px;
}
.workspace-more { position: relative; }
.workspace-more-summary {
  list-style: none; cursor: pointer;
}
.workspace-more-summary::-webkit-details-marker { display: none; }
.workspace-more-summary::after { content: " ▾"; font-size: 10px; opacity: 0.7; }
.workspace-more[open] .workspace-more-summary { background: rgba(157, 77, 36, 0.15); }
.workspace-more-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--surface-strong); border: 1px solid var(--border);
  border-radius: 14px; padding: 6px;
  min-width: 200px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px; z-index: 500;
}
.workspace-more-item {
  display: block; padding: 10px 14px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 14px;
}
.workspace-more-item:hover { background: rgba(157, 77, 36, 0.1); }
@media (max-width: 720px) {
  .workspace-more-menu { right: 0; left: auto; }
}

/* ---------- Mobile/tablet drawer for the workspace nav ---------- */
@media (max-width: 760px) {
  .nav-hamburger { display: inline-flex; }
  .workspace-nav-condensed {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .workspace-nav-condensed > .workspace-tab,
  .workspace-nav-condensed > .workspace-more,
  .workspace-nav-condensed > #user-nav-info {
    display: none;
  }
  body.nav-open .workspace-nav-condensed {
    flex-wrap: wrap;
  }
  body.nav-open .workspace-nav-condensed > .workspace-tab,
  body.nav-open .workspace-nav-condensed > .workspace-more,
  body.nav-open .workspace-nav-condensed > #user-nav-info {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 8px;
  }
  body.nav-open .workspace-more-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    padding-left: 12px;
  }
}

/* ---------- Universal mobile/tablet polish ---------- */
@media (max-width: 760px) {
  /* Anything tagged as a card or section gets sane horizontal padding */
  .card, .shell, main.shell, section.card {
    padding-left: 14px; padding-right: 14px;
    margin-left: 0; margin-right: 0;
  }
  /* Long code/snippets and tables must scroll, not blow out the layout */
  pre, code, .scan-access-snippet pre {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
    white-space: pre-wrap;
  }
  table { display: block; overflow-x: auto; max-width: 100%; }
  /* Inputs at full width so they're tappable */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="url"], input[type="search"], textarea, select {
    max-width: 100%; box-sizing: border-box;
  }
  /* Section headers stack their action button below the title */
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Scan-access secret row should always wrap cleanly */
  #scan-access-secret-row > div { min-width: 0; }
  #scan-access-secret { min-width: 0 !important; width: 100%; }
  .scan-access-tabs { overflow-x: auto; flex-wrap: nowrap !important; }
  .scan-access-tabs .btn-sm { white-space: nowrap; }
  /* Modals shouldn't run off screen */
  .modal, .auth-modal, .onb-card, .connect-wizard-card {
    max-width: 96vw; max-height: 92vh; overflow: auto;
  }
  /* Dashboard summary cards stack one per row */
  #summary-cards, .cards { grid-template-columns: 1fr !important; }
}

/* Tablet: 2-column dashboard cards, full-width nav row */
@media (min-width: 761px) and (max-width: 1024px) {
  .cards, #summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-nav-condensed { overflow-x: auto; }
}

/* ---------- First-run dashboard hero + 5-step checklist ---------- */
#first-run-dashboard {
  max-width: 1180px; margin: 24px auto 0; padding: 0 5vw;
}
.fr-hero {
  background: var(--surface-strong); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px;
  box-shadow: var(--shadow); margin-bottom: 22px;
}
.fr-hero h2 {
  font-family: var(--font-display); font-size: 30px; margin: 0 0 8px;
}
.fr-hero p { color: var(--muted); margin: 0 0 16px; font-size: 16px; }
.fr-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fr-checklist {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.fr-step {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: 14px;
  background: rgba(255, 250, 243, 0.5);
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.fr-step.fr-active {
  background: rgba(157, 77, 36, 0.08);
  border-color: rgba(157, 77, 36, 0.3);
}
.fr-step.fr-done { opacity: 0.7; }
.fr-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--border); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.fr-step.fr-active .fr-step-num { background: var(--brand); color: #fff; }
.fr-step.fr-done .fr-step-num { background: var(--success); color: #fff; }
.fr-step-body { flex: 1; min-width: 0; }
.fr-step-title { font-weight: 600; color: var(--text); }
.fr-step-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.fr-step-cta {
  padding: 0.55rem 0.95rem; font-size: 13px;
  background: var(--brand); color: #fff;
}
.fr-step.fr-locked .fr-step-cta {
  background: rgba(0,0,0,0.1); color: var(--muted); cursor: not-allowed;
}
.fr-step.fr-done .fr-step-cta {
  background: transparent; color: var(--success);
  border: 1px solid var(--success);
}
@media (max-width: 600px) {
  .fr-step { flex-direction: column; align-items: flex-start; }
  .fr-step-cta { width: 100%; text-align: center; }
}

/* ── Partial-coverage / scan-group / diagnostics ─────────────────────────── */
.badge-partial, .badge-partial_complete {
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
}
.partial-coverage-banner {
  background: #fffbeb; border: 1px solid #fcd34d; color: #78350f;
  padding: 0.7rem 0.9rem; border-radius: 8px; margin: 0.6rem 0 0.8rem;
  display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.82rem;
}
.partial-coverage-banner strong { color: #78350f; }
.partial-coverage-banner p { margin: 0; }

.coverage-note {
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 0.75rem 0.9rem; margin: 0.6rem 0 0.8rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.coverage-tone-warn { background: #fffbeb; border-color: #fcd34d; }
.coverage-tone-fail { background: #fef2f2; border-color: #fca5a5; }
.coverage-tone-ok   { background: #f0fdf4; border-color: #bbf7d0; }
.coverage-tone-info { background: #eff6ff; border-color: #bfdbfe; }
.coverage-note-head { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.coverage-note-head strong { font-size: 0.85rem; }
.coverage-aggregate { color: #4b5563; font-size: 0.78rem; }
.coverage-desc { margin: 0; font-size: 0.78rem; color: #4b5563; }
.coverage-list { list-style: none; padding: 0; margin: 0.2rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; }
.cov-row { display: grid; grid-template-columns: 180px 90px 1fr; gap: 0.5rem; align-items: center; font-size: 0.78rem; padding: 0.25rem 0; }
.cov-scanner { font-weight: 600; }
.cov-outcome {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 4px;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  text-align: center;
}
.cov-outcome.cov-ok       { background: #dcfce7; color: #166534; }
.cov-outcome.cov-partial  { background: #fef3c7; color: #92400e; }
.cov-outcome.cov-skipped  { background: #e5e7eb; color: #374151; }
.cov-outcome.cov-failed   { background: #fee2e2; color: #991b1b; }
.cov-outcome.cov-running  { background: #dbeafe; color: #1e40af; }
.cov-detail { color: #6b7280; font-size: 0.74rem; }

.scanner-status-list {
  display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem;
}
.scanner-status-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.6rem;
  align-items: center; padding: 0.4rem 0.6rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
  cursor: pointer; text-align: left; font: inherit;
}
.scanner-status-row:hover { background: #f9fafb; }
.scanner-status-partial_complete { border-left: 3px solid #f59e0b; }
.scanner-status-failed           { border-left: 3px solid #ef4444; }
.scanner-status-skipped          { border-left: 3px solid #9ca3af; }
.scanner-status-completed        { border-left: 3px solid #10b981; }
.ssr-name { font-weight: 600; font-size: 0.82rem; }
.ssr-meta { font-size: 0.72rem; }

.scan-group { border-left: 3px solid #6366f1; }
.badge-group {
  background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe;
  font-weight: 600;
}
.badge-group.agg-ok      { background: #dcfce7; color: #166534; border-color: #86efac; }
.badge-group.agg-partial { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.badge-group.agg-fail    { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.badge-group.agg-running { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }

.diag-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.diag-head { display: flex; justify-content: space-between; align-items: center; }
.diag-pill {
  font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.diag-pill.diag-ok   { background: #dcfce7; color: #166534; }
.diag-pill.diag-fail { background: #fee2e2; color: #991b1b; }
.diag-grid { display: flex; flex-direction: column; gap: 0.25rem; }
.diag-row {
  display: grid; grid-template-columns: 180px 1fr auto; gap: 0.5rem;
  align-items: baseline; font-size: 0.78rem; padding: 0.15rem 0;
  border-bottom: 1px dashed #f3f4f6;
}
.diag-row code { font-size: 0.72rem; color: #374151; word-break: break-all; }

.sss-partial { background: #fffbeb !important; border-color: #fcd34d !important; color: #78350f !important; }

/* ── Demo / sample data badge + banner ──────────────────────── */
.demo-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(165, 99, 28, 0.12);
  border: 1px solid rgba(165, 99, 28, 0.32);
  color: #8a6820;
  padding: 0.08rem 0.42rem;
  border-radius: 4px;
  margin-left: 0.4rem;
  vertical-align: middle;
}
#demo-banner { margin: 0 0 1rem; }
.demo-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  background: rgba(165, 99, 28, 0.06);
  border: 1px solid rgba(165, 99, 28, 0.28);
  border-radius: 10px;
}
.demo-banner-text {
  flex: 1;
  min-width: 240px;
  font-size: 0.88rem;
  color: var(--text);
}
.demo-banner-inner .demo-badge { margin-left: 0; }

/* SPA-style nav: highlight the current section in the top tabs */
.workspace-tab.is-active,
.workspace-more-item.is-active {
  font-weight: 700;
  color: var(--brand, #b85a1a);
}

/* ─── Identity Risk section ─── */
.id-section { margin-top: 1rem; }
.id-empty { color: var(--muted, #6b7280); font-style: italic; margin: 0.5rem 0; }
.id-stats-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0.75rem 0 1rem; }
.id-stat { display: flex; flex-direction: column; align-items: flex-start; padding: 0.5rem 0.85rem; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; min-width: 90px; background: var(--surface, #fff); }
.id-stat-warn { border-color: #f59e0b; background: rgba(245, 158, 11, 0.06); }
.id-stat-num { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.id-stat-label { font-size: 0.78rem; color: var(--muted, #6b7280); margin-top: 0.15rem; }
.id-signals-row { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0 1rem; }
.id-signals-label { font-size: 0.78rem; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; }
.id-signals-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.id-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid var(--border, #e5e7eb); font-size: 0.82rem; background: var(--surface, #fff); }
.id-chip-label { color: var(--muted, #6b7280); }
.id-chip-value { font-weight: 600; }
.id-chip-true  { border-color: #2563eb; }
.id-chip-true  .id-chip-value  { color: #2563eb; }
.id-chip-false { border-color: var(--border, #e5e7eb); }
.id-chip-false .id-chip-value  { color: var(--muted, #6b7280); }
.id-chip-unknown { border-style: dashed; }
.id-chip-unknown .id-chip-value { color: #9ca3af; font-style: italic; }
.id-findings-block { margin: 0.75rem 0; }
.id-block-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.5rem; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; }
.id-finding-row { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.55rem 0.6rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; margin-bottom: 0.4rem; background: var(--surface, #fff); }
.id-finding-body { flex: 1; min-width: 0; }
.id-finding-title { font-weight: 600; font-size: 0.92rem; }
.id-finding-url { font-size: 0.78rem; color: var(--muted, #6b7280); margin-top: 0.2rem; word-break: break-all; }
.id-truncate-note { font-size: 0.78rem; color: var(--muted, #6b7280); margin: 0.4rem 0 0; }
.id-details { margin-top: 0.75rem; }
.id-details-summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; padding: 0.5rem 0; }
.id-detail-count { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; background: var(--border, #e5e7eb); color: var(--muted, #6b7280); border-radius: 999px; font-size: 0.78rem; }
.id-details-body { padding: 0.5rem 0; }
.id-surface-row { display: flex; gap: 0.5rem; align-items: center; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border, #e5e7eb); font-size: 0.84rem; }
.id-surface-row:last-child { border-bottom: none; }
.id-surface-icon { font-size: 1rem; }
.id-surface-bucket { min-width: 90px; font-weight: 600; color: var(--muted, #6b7280); text-transform: capitalize; }
.id-surface-url { flex: 1; min-width: 0; word-break: break-all; }
.id-surface-source { padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; }
.id-source-static { background: var(--border, #e5e7eb); color: var(--muted, #6b7280); }
.id-source-js     { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }

/* ─── Change Tracking — Identity drift block (Step 7) ─── */
.ct-group-identity { border-color: #f59e0b; }
.ct-group-count-identity { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.ct-id-list { padding: 0.4rem 0.6rem; }
.ct-id-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 0.86rem;
}
.ct-id-row:last-child { border-bottom: none; }
.ct-id-row-added .ct-id-icon { color: #b45309; font-weight: 700; }
.ct-id-row-removed .ct-id-icon { color: #047857; font-weight: 700; }
.ct-id-icon { width: 1rem; text-align: center; }
.ct-id-bucket {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
.ct-id-bucket-elevated { background: rgba(220, 38, 38, 0.1); color: #b91c1c; }
.ct-id-bucket-login    { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.ct-id-bucket-other    { background: var(--border, #e5e7eb); color: var(--muted, #6b7280); }
.ct-id-url { flex: 1; min-width: 0; word-break: break-all; color: var(--text, #111827); }
.ct-id-source {
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  font-size: 0.7rem;
  font-weight: 600;
}

/* ===== Step 8 — Action & Remediation Layer ===== */

#remediation-widget { margin: 0.75rem 0; }
.rem-widget {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  padding: 0.75rem 1rem;
  background: linear-gradient(90deg, #fff7ed 0%, #fff 60%);
  border: 1px solid #fed7aa; border-radius: 8px;
}
.rem-widget-tile { display: flex; flex-direction: column; gap: 0.15rem; min-width: 120px; }
.rem-widget-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.rem-widget-value { font-size: 1.4rem; font-weight: 700; color: #111827; }
.rem-widget-critical { color: #b91c1c; }
.rem-widget-exposure-high { color: #b91c1c; }
.rem-widget-exposure-medium { color: #c2410c; }
.rem-widget-exposure-low { color: #047857; }
.rem-widget-trend-improving { color: #047857; }
.rem-widget-trend-worsening { color: #b91c1c; }
.rem-widget-trend-flat { color: #6b7280; }
.rem-widget-cta { margin-left: auto; }
.rem-widget-regressed {
  display: inline-block; margin-top: 0.2rem;
  font-size: 0.7rem; font-weight: 600; color: #b91c1c;
}

/* Tasks table */
.tasks-summary { padding: 0.5rem 0; color: #6b7280; font-size: 0.85rem; }
.tasks-table { overflow-x: auto; }
.tasks-table .data-table { width: 100%; border-collapse: collapse; }
.tasks-table .data-table th,
.tasks-table .data-table td {
  text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid #e5e7eb; font-size: 0.88rem;
}
.tasks-table .data-table th { background: #f9fafb; font-weight: 600; }
.tasks-table .task-title { font-weight: 600; }
.tasks-table .task-asset { font-size: 0.78rem; }
.tasks-table .task-age { white-space: nowrap; color: #6b7280; }
.tasks-table .js-task-status { padding: 0.2rem 0.4rem; }
.filter-chip {
  padding: 0.35rem 0.7rem; border: 1px solid #d1d5db; background: #fff;
  border-radius: 999px; cursor: pointer; font-size: 0.8rem;
}
.filter-chip[aria-pressed="true"] { background: #1f2937; color: #fff; border-color: #1f2937; }

/* Recommended actions on-screen */
.top-actions-card { margin: 1rem 0; }
.top-actions-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.top-actions-table th, .top-actions-table td {
  padding: 0.55rem 0.75rem; border-bottom: 1px solid #e5e7eb;
  vertical-align: top; text-align: left; font-size: 0.85rem;
}
.top-actions-table .ta-rank { width: 2rem; font-weight: 700; color: #6b7280; }
.top-actions-table .ta-title { font-weight: 600; }
.top-actions-table .ta-action { color: #374151; margin-top: 0.15rem; }
.top-actions-table .ta-impact { color: #6b7280; max-width: 220px; }

/* Auto-set status badges */
.badge-verified { background: #d1fae5; color: #065f46; }
.badge-regressed { background: #fee2e2; color: #991b1b; }

/* ---- Step 9: Active Defense / Protection UI ---- */
.protection-tile { margin: 12px 0; }
.protection-tile-inner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0; border-radius: 12px; padding: 20px; cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.2); transition: transform 0.15s ease;
}
.protection-tile-inner:hover { transform: translateY(-1px); }
.pt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.pt-eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.pt-headline { font-size: 16px; font-weight: 600; margin-top: 4px; }
.pt-state { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pt-state.pt-on { background: #064e3b; color: #6ee7b7; }
.pt-state.pt-off { background: #7f1d1d; color: #fecaca; }
.pt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pt-stat { background: rgba(148, 163, 184, 0.08); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.pt-stat-val { font-size: 24px; font-weight: 700; }
.pt-stat-key { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.pt-stat.pt-warn .pt-stat-val { color: #fca5a5; }
.pt-foot { margin-top: 14px; font-size: 12px; color: #94a3b8; }

.protection-status { margin-bottom: 18px; }
.protection-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.protection-summary-tile { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px;
  display: flex; flex-direction: column; gap: 4px; }
.protection-summary-tile span { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.protection-summary-tile strong { font-size: 20px; font-weight: 700; color: #0f172a; }
.protection-summary-tile.ps-on { border-color: #10b981; background: #ecfdf5; }
.protection-summary-tile.ps-off { border-color: #ef4444; background: #fef2f2; }

.protection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .protection-grid { grid-template-columns: 1fr; } }
.protection-subcard { padding: 14px; }

.protection-bars { display: flex; flex-direction: column; gap: 8px; }
.protection-bar-row { display: grid; grid-template-columns: minmax(120px, 180px) 1fr 40px; gap: 8px; align-items: center; font-size: 13px; }
.protection-bar-label { font-family: monospace; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.protection-bar { background: #e2e8f0; height: 8px; border-radius: 4px; overflow: hidden; }
.protection-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #3b82f6, #6366f1); }
.protection-bar-count { text-align: right; font-weight: 600; color: #475569; }

.data-table.compact { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table.compact th, .data-table.compact td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #f1f5f9; }
.data-table.compact th { font-weight: 600; color: #475569; background: #f8fafc; }
.data-table.compact td.ev-path { font-family: monospace; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-warn { background: #fef3c7; color: #92400e; }
.badge-success { background: #d1fae5; color: #065f46; }

.reco-list { display: flex; flex-direction: column; gap: 10px; }
.reco-item { background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #6366f1; border-radius: 6px; padding: 12px; }
.reco-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.reco-why { color: #475569; font-size: 13px; margin: 4px 0; }
.reco-action { font-size: 13px; margin: 4px 0; color: #0f172a; }

.manual-block-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.manual-block-form input { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; }
.manual-block-form input[name="ip"] { flex: 1 1 180px; min-width: 160px; }
.manual-block-form input[name="reason"] { flex: 1 1 200px; }
.manual-block-form input[name="ttl_seconds"] { width: 110px; }

.asset-protection-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.asset-protection-form .checkbox-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.asset-protection-form .text-row { display: flex; flex-direction: column; gap: 4px; }
.asset-protection-form .text-row span { font-size: 12px; color: #64748b; }
.asset-protection-form input[type="text"] { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; max-width: 320px; }

/* ---------- Step 10: Trust scorecard ---------- */
.trust-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.trust-actions select { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; }

.trust-scorecard { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.trust-overall {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px; border-radius: 14px;
  background: #f8fafc; border: 1px solid #e2e8f0;
}
.trust-overall-grade {
  width: 84px; height: 84px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 800; color: #fff; line-height: 1;
}
.trust-overall.tg-A .trust-overall-grade { background: #16a34a; }
.trust-overall.tg-B .trust-overall-grade { background: #65a30d; }
.trust-overall.tg-C .trust-overall-grade { background: #ca8a04; }
.trust-overall.tg-D .trust-overall-grade { background: #ea580c; }
.trust-overall.tg-F .trust-overall-grade { background: #dc2626; }
.trust-overall-meta { display: flex; flex-direction: column; gap: 4px; }
.trust-overall-score { font-size: 22px; font-weight: 700; }
.trust-overall-target { color: #64748b; font-size: 13px; }
.trust-confidence {
  margin-top: 4px; padding: 6px 10px; border-radius: 6px; font-size: 12px;
  background: #f1f5f9; color: #475569; border-left: 3px solid #94a3b8; max-width: 640px;
}
.trust-confidence.trust-conf-high { border-left-color: #16a34a; }
.trust-confidence.trust-conf-medium { border-left-color: #ca8a04; }
.trust-confidence.trust-conf-limited { border-left-color: #dc2626; }

.trust-components {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.trust-comp {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px;
}
.trust-comp.tg-A { border-top: 4px solid #16a34a; }
.trust-comp.tg-B { border-top: 4px solid #65a30d; }
.trust-comp.tg-C { border-top: 4px solid #ca8a04; }
.trust-comp.tg-D { border-top: 4px solid #ea580c; }
.trust-comp.tg-F { border-top: 4px solid #dc2626; }
.trust-comp-head { display: flex; justify-content: space-between; align-items: center; }
.trust-comp-label { color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.trust-comp-score { font-size: 28px; font-weight: 700; margin: 8px 0 4px; }
.trust-comp-grade {
  font-size: 14px; font-weight: 700; margin-left: 6px; padding: 2px 8px;
  border-radius: 999px; background: #f1f5f9; color: #1e293b; vertical-align: 4px;
}
.trust-comp-detail { color: #64748b; font-size: 13px; }
.trust-trend { font-weight: 800; font-size: 14px; }
.trust-trend.up { color: #16a34a; }
.trust-trend.down { color: #dc2626; }
.trust-trend.flat { color: #64748b; }
.trust-trend.new { color: #94a3b8; }

.trust-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 8px; }
@media (max-width: 800px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-compliance-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #e2e8f0; gap: 12px;
}
.trust-compliance-row:last-child { border-bottom: 0; }
.trust-comp-name { font-weight: 600; }
.trust-status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.04em; }
.trust-PASS { background: #dcfce7; color: #166534; }
.trust-WARNING { background: #fef3c7; color: #854d0e; }
.trust-FAIL { background: #fee2e2; color: #991b1b; }

.trust-weekly-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.trust-stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; text-align: center; }
.trust-stat-num { font-size: 22px; font-weight: 700; }
.trust-stat-lbl { color: #64748b; font-size: 12px; }

#trust-share-modal.modal {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
#trust-share-modal[hidden] { display: none; }
#trust-share-modal .modal-card {
  background: #fff; border-radius: 12px; padding: 0; width: min(440px, 92vw);
  box-shadow: 0 20px 60px rgba(15,23,42,0.25);
}
#trust-share-modal .modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
}
#trust-share-modal .modal-head h3 { margin: 0; }
#trust-share-modal .icon-btn { background: none; border: 0; font-size: 22px; cursor: pointer; color: #64748b; }
#trust-share-modal .modal-body { padding: 16px 20px 20px; }
#trust-share-modal input[type="text"], #trust-share-modal input[type="number"] {
  width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
}

/* Friendly domain verification failure UX */
.verify-help {
  margin: 10px 0 12px;
  padding: 12px 14px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-left: 4px solid #d97706;
  border-radius: 8px;
  color: #78350f;
}
.verify-help p { margin: 0; line-height: 1.5; }
.verify-tech { margin-top: 10px; }
.verify-tech summary { cursor: pointer; font-size: 12px; color: #92400e; user-select: none; }
.verify-tech code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; font-size: 12px; word-break: break-word; }

/* Verdict card with embedded action button (Step 10 fix) */
.security-summary-stmt .sss-body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex: 1; flex-wrap: wrap;
}
.security-summary-stmt .sss-cta {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.12);
  color: inherit; font-weight: 600;
  padding: 8px 14px; border-radius: 8px;
  cursor: pointer; white-space: nowrap; font-size: 14px;
  transition: background 0.15s ease, transform 0.05s ease;
}
.security-summary-stmt .sss-cta:hover { background: #fff; }
.security-summary-stmt .sss-cta:active { transform: translateY(1px); }
@media (max-width: 600px) {
  .security-summary-stmt .sss-body { flex-direction: column; align-items: flex-start; }
  .security-summary-stmt .sss-cta { width: 100%; text-align: center; }
}

/* Part 4 — "Fix these in order" card */
.fix-first-card { margin: 1rem 0 1.25rem; border-left: 4px solid #b25c2c; }
.fix-first-card .ff-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.85rem; }
.ff-item { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.9rem; padding: 0.9rem 1rem; background: var(--surface-strong, #fafafa); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; }
.ff-item.ff-sev-critical { border-left: 4px solid #991b1b; }
.ff-item.ff-sev-high     { border-left: 4px solid #b91c1c; }
.ff-item.ff-sev-medium   { border-left: 4px solid #b45309; }
.ff-item.ff-sev-low      { border-left: 4px solid #047857; }
.ff-rank { font-family: var(--font-display, inherit); font-size: 1.4rem; font-weight: 700; color: var(--accent, #b25c2c); line-height: 1; padding-top: 0.2rem; text-align: center; }
.ff-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.35rem; }
.ff-title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.ff-sev-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.2rem 0.55rem; border-radius: 999px; color: #fff; text-transform: uppercase; }
.ff-sev-badge-critical { background: #991b1b; }
.ff-sev-badge-high     { background: #b91c1c; }
.ff-sev-badge-medium   { background: #b45309; }
.ff-sev-badge-low      { background: #047857; }
.ff-impact { margin: 0.25rem 0 0.5rem; color: var(--muted, #4b5563); font-size: 0.95rem; line-height: 1.45; }
.ff-affected { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted, #6b7280); }
.ff-affected code { background: rgba(0,0,0,0.05); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.82rem; word-break: break-all; }
.ff-label { font-weight: 600; color: var(--text, #111827); }
.ff-details { margin-top: 0.4rem; }
.ff-show-fix { display: inline-block; cursor: pointer; padding: 0.45rem 0.85rem; background: var(--accent, #b25c2c); color: #fff; border-radius: 6px; font-weight: 600; font-size: 0.9rem; user-select: none; list-style: none; }
.ff-show-fix::-webkit-details-marker { display: none; }
.ff-show-fix::before { content: "▸ "; }
.ff-details[open] .ff-show-fix::before { content: "▾ "; }
.ff-show-fix:hover { filter: brightness(1.05); }
.ff-fix-body { margin-top: 0.7rem; padding: 0.85rem 1rem; background: rgba(178, 92, 44, 0.06); border: 1px solid rgba(178, 92, 44, 0.2); border-radius: 8px; }
.ff-fix-summary { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.5; color: var(--text, #111827); }
.ff-fix-code { margin: 0.5rem 0; padding: 0.7rem 0.9rem; background: #1e293b; color: #f1f5f9; border-radius: 6px; font-size: 0.82rem; line-height: 1.4; overflow-x: auto; white-space: pre; }
.ff-fix-actions { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.ff-copy-btn { padding: 0.45rem 0.85rem; background: #1f2937; color: #fff; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.ff-copy-btn:hover { background: #111827; }
.ff-copy-status { font-size: 0.85rem; }
@media (max-width: 640px) {
  .ff-item { grid-template-columns: 1.8rem 1fr; padding: 0.75rem 0.85rem; gap: 0.6rem; }
  .ff-title { font-size: 1rem; }
  .ff-rank { font-size: 1.2rem; }
}

/* =============================================================================
 * Activation tour, Quick Start checklist, and Fix-These-In-Order refinements.
 * Added in a single block so it can be removed cleanly. No behavioural changes;
 * pure styling pass to lift perceived quality of the post-onboarding flow.
 * ============================================================================= */

/* ---- Activation tour overlay ---- */
#sw-tour-overlay { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
#sw-tour-overlay #sw-tour-card,
#sw-tour-overlay #sw-tour-spotlight,
#sw-tour-overlay button { pointer-events: auto; }
#sw-tour-card {
  background: var(--surface-strong);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(29, 26, 20, 0.28);
  padding: 1.1rem 1.2rem 1rem;
  z-index: 10002;
  font-size: 0.95rem;
  line-height: 1.5;
}
#sw-tour-card h3 { margin: 0.35rem 0 0.45rem; font-size: 1.05rem; line-height: 1.3; color: var(--text); }
#sw-tour-card p { margin: 0; color: var(--muted); }
#sw-tour-step {
  display: inline-block;
  background: rgba(178, 92, 44, 0.12);
  color: #8a3f17;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#sw-tour-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; }
#sw-tour-controls .sw-tour-nav { display: flex; gap: 0.45rem; }
#sw-tour-controls button {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
#sw-tour-controls button:hover { background: rgba(0,0,0,0.04); }
#sw-tour-controls #sw-tour-skip { color: var(--muted); border-color: transparent; padding-left: 0.4rem; padding-right: 0.4rem; }
#sw-tour-controls #sw-tour-next.primary { background: var(--accent, #b25c2c); color: #fff; border-color: transparent; }
#sw-tour-controls #sw-tour-next.primary:hover { filter: brightness(1.05); background: var(--accent, #b25c2c); }
@media (max-width: 640px) {
  #sw-tour-card { width: calc(100vw - 32px) !important; left: 16px !important; right: 16px; max-width: 360px; }
}

/* ---- Help menu (Tour / Checklist) in user nav ---- */
.sw-help-menu { display: inline-flex; gap: 0.35rem; margin-right: 0.55rem; padding-right: 0.55rem; border-right: 1px solid var(--border); }
.sw-help-link {
  font-size: 0.78rem; font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.sw-help-link:hover { color: var(--text); background: rgba(0,0,0,0.03); }
@media (max-width: 640px) {
  .sw-help-menu { display: none; } /* Tour + Checklist still reachable via auto-fire + dashboard */
}

/* ---- Quick Start checklist ---- */
.sw-quick-start-card { padding: 1.25rem 1.4rem 1.1rem; }
.sw-qs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.sw-qs-head h3 { margin: 0.1rem 0 0; font-size: 1.15rem; line-height: 1.3; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.sw-qs-progress {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(178, 92, 44, 0.12);
  color: #8a3f17;
}
.sw-qs-dismiss {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0;
}
.sw-qs-dismiss:hover { color: var(--text); background: rgba(0,0,0,0.04); }
.sw-qs-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.sw-qs-item {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background .15s ease;
}
.sw-qs-item:hover { background: var(--surface-strong); }
.sw-qs-item.is-done { background: rgba(4, 120, 87, 0.05); border-color: rgba(4, 120, 87, 0.15); }
.sw-qs-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(101, 91, 80, 0.14);
  color: transparent;
  font-size: 0.85rem; font-weight: 700;
  border: 1px solid var(--border);
}
.sw-qs-item.is-done .sw-qs-check { background: #047857; color: #fff; border-color: transparent; }
.sw-qs-body { min-width: 0; }
.sw-qs-title { font-weight: 600; color: var(--text); font-size: 0.95rem; line-height: 1.3; }
.sw-qs-item.is-done .sw-qs-title { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(101,91,80,0.4); }
.sw-qs-desc { font-size: 0.83rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.4; }
.sw-qs-cta {
  font-size: 0.82rem; font-weight: 600;
  padding: 0.42rem 0.85rem;
  border-radius: 8px;
  background: var(--accent, #b25c2c);
  color: #fff;
  border: none; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.sw-qs-cta:hover { filter: brightness(1.05); }
.sw-qs-done-label { font-size: 0.78rem; font-weight: 600; color: #047857; white-space: nowrap; }
@media (max-width: 640px) {
  .sw-qs-item { grid-template-columns: 28px 1fr; gap: 0.6rem; padding: 0.65rem 0.75rem; }
  .sw-qs-cta, .sw-qs-done-label { grid-column: 2 / 3; justify-self: start; margin-top: 0.4rem; }
  .sw-qs-check { width: 24px; height: 24px; }
}

/* ---- Fix These In Order — refined hierarchy ---- */
/* "Show fix" demoted from primary accent button to a subtle ghost link.
 * "Copy for developer" is now the primary action and only appears once
 * the disclosure is open, so the resting state of the card is calmer. */
.fix-first-card .ff-show-fix {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: transparent;
  color: var(--accent, #b25c2c);
  padding: 0.3rem 0;
  border-radius: 0;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  text-decoration: none;
}
.fix-first-card .ff-show-fix:hover { color: #8a3f17; text-decoration: underline; filter: none; }
.fix-first-card .ff-show-fix::before { content: "▸"; font-size: 0.75rem; transition: transform .15s ease; display: inline-block; }
.fix-first-card .ff-details[open] .ff-show-fix::before { content: "▾"; }

.fix-first-card .ff-copy-btn.primary,
.fix-first-card .ff-copy-btn {
  background: var(--accent, #b25c2c);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.fix-first-card .ff-copy-btn:hover { filter: brightness(1.05); background: var(--accent, #b25c2c); }

.fix-first-card .ff-view-full {
  background: transparent;
  color: var(--accent, #b25c2c);
  border: 1px solid rgba(178, 92, 44, 0.4);
  border-radius: 8px;
  padding: 0.42rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.fix-first-card .ff-view-full:hover { background: rgba(178, 92, 44, 0.08); }

.fix-first-card .ff-fix-body-empty { background: transparent; border-color: transparent; padding: 0.5rem 0; }
.fix-first-card .ff-fix-summary.muted { color: var(--muted); font-style: italic; }

/* Persistent "Copied ✓" pill — hidden by default, revealed once the user
 * has copied this row at least once during the session. */
.fix-first-card .ff-copied-pill {
  display: inline-flex; align-items: center;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(4, 120, 87, 0.14);
  color: #047857;
  margin-left: auto;
}
.fix-first-card .ff-copied-pill[aria-hidden="true"] { display: none; }
.fix-first-card .ff-item.is-copied { background: rgba(4, 120, 87, 0.04); }

/* Dim the impact line slightly so the title carries the row visually. */
.fix-first-card .ff-impact { color: var(--muted); }

/* "View full finding" target flash — brief highlight when scrolled to. */
.ff-flash {
  animation: ff-flash-anim 1.4s ease-out;
  border-radius: 8px;
}
@keyframes ff-flash-anim {
  0%   { box-shadow: 0 0 0 0 rgba(178, 92, 44, 0.55); }
  60%  { box-shadow: 0 0 0 6px rgba(178, 92, 44, 0.10); }
  100% { box-shadow: 0 0 0 0 rgba(178, 92, 44, 0); }
}

/* ============================================================
   Hero workspace state snapshot (replaces static brochure hero)
   ============================================================ */
.hero-state-host {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
}
.hero-state {
  display: block;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.hero-state .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  margin: 0 0 6px 0;
}
.hero-state-title {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text, #111827);
}
/* Plain-language reinforcement of the CRIT chip — sits as a sibling
   line under the title rather than inline beside it. The chip carries
   the visual signal; this paragraph carries the words for the user
   who reads rather than scans. Timestamp lives only on the Top Risks
   scope eyebrow now to remove the duplicate. */
.hero-state-meta {
  display: block;
  margin: 0 0 14px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #6b7280);
}
.hero-state-findings {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-state-findings li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-subtle, #f9fafb);
  border-radius: 8px;
  font-size: 14px;
}
.hero-state-finding-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, #111827);
}
.hero-state-pill {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}
.hero-state-pill-critical { background: #991b1b; }
.hero-state-pill-high     { background: #b91c1c; }
.hero-state-pill-medium   { background: #b45309; }
.hero-state-pill-low      { background: #047857; }
.hero-state-pill-info     { background: #6b7280; }
.hero-state-empty {
  margin: 4px 0 14px 0;
  font-size: 14px;
  color: var(--muted, #6b7280);
}
.hero-state-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hero-state-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent, #1f2937);
  color: #fff;
}
.hero-state-cta:hover {
  filter: brightness(1.08);
}
@media (max-width: 640px) {
  .hero-state { padding: 16px; }
  .hero-state-title { font-size: 17px; }
  .hero-state-meta { margin-top: 4px; }
}

/* ============================================================
   Fix-First — affected URL truncation with hover/focus expand
   ============================================================ */
.ff-affected-url {
  display: inline-block;
  max-width: min(60ch, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  cursor: help;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0,0,0,0.04);
}
.ff-affected-url:hover,
.ff-affected-url:focus {
  white-space: normal;
  word-break: break-all;
  background: rgba(0,0,0,0.08);
  outline: none;
}
.ff-fix-body-empty {
  padding: 6px 0 2px 0;
}

/* ============================================================
   Dashboard collapse: when hero-state is active, suppress legacy
   first-run / workspace-summary / next-action panels so the
   dashboard never stacks redundant guidance above the metrics.
   The remediation-summary-bar and system-status are retained
   because they carry signals that the hero-state doesn't cover.
   ============================================================ */
body.has-hero-state #first-run-card,
body.has-hero-state #workspace-summary,
body.has-hero-state #first-scan-discovery,
body.has-hero-state #next-action-panel,
body.has-hero-state #onboarding-strip,
body.has-hero-state #first-run-path,
body.has-hero-state #first-run-dashboard {
  display: none !important;
}

/* ============================================================
   De-emphasize inventory metrics — priority comes from the
   workspace state block + Top Risks card above. Tiles stay
   visible but recede visually so they don't dominate.
   ============================================================ */
body.has-hero-state #summary-cards {
  gap: 8px;
  margin-top: 6px;
}
body.has-hero-state #summary-cards .card.metric {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-subtle, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  box-shadow: none;
  opacity: 0.92;
}
body.has-hero-state #summary-cards .card.metric:hover {
  opacity: 1;
}
body.has-hero-state #summary-cards .card.metric > span {
  font-size: 11px;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.has-hero-state #summary-cards .card.metric > strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--text, #111827);
}
body.has-hero-state #summary-cards .card.metric.severity-card > strong {
  font-size: 15px;
}

/* ============================================================
   Dashboard "Top risks" card — same Fix-First chrome but
   slotted between the workspace state block and the metrics.
   ============================================================ */
#dashboard-fix-first .fix-first-card {
  margin-bottom: 16px;
}

/* ============================================================
   Pass 3 — Signal consolidation & clarity
   ============================================================ */

/* Top Risks scope meta — small contextual line under the card title */
.fix-first-card .ff-scope-meta {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--muted, #6b7280);
  letter-spacing: 0.01em;
}

/* Hero state severity chip — perception-speed pass.
   The container is just a flex row; each severity is its own pill so
   we can give CRIT a dominant filled treatment and HIGH a quieter
   outlined treatment. Numerals are the loud part; labels are smaller. */
.hero-state-sev-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  gap: 6px;
  margin-left: 10px;
  vertical-align: middle;
  background: transparent;
  border: 0;
  padding: 0;
}
.hero-state-sev-crit,
.hero-state-sev-high {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1;
}
/* Tie numeral and label tightly so "3 CRIT" reads as one unit and the
   count is unambiguously bound to the severity it labels. */
.hero-state-sev-crit .hero-state-sev-num,
.hero-state-sev-high .hero-state-sev-num {
  margin-right: 1px;
}
/* CRIT: filled deep red, big numeral — the eye lands here first.
   #b91c1c on white text yields ~6.4:1, comfortably above WCAG AA
   for the 11px label (the 17px bold numeral is already AA-large). */
.hero-state-sev-crit {
  background: #b91c1c;
  color: #fff;
  border: 1px solid #991b1b;
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.32);
}
.hero-state-sev-crit .hero-state-sev-num {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero-state-sev-crit .hero-state-sev-lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.95;
}
/* HIGH: outlined amber, secondary weight — clearly subordinate. */
.hero-state-sev-high {
  background: rgba(245, 158, 11, 0.10);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.45);
}
.hero-state-sev-high .hero-state-sev-num {
  font-size: 14px;
  font-weight: 700;
}
.hero-state-sev-high .hero-state-sev-lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

/* Visual elevation of the dashboard Top Risks card — bumped so it
   pulls the eye before the metrics row underneath. */
body.has-hero-state #dashboard-fix-first {
  margin-top: 18px;
  margin-bottom: 24px;
}
body.has-hero-state #dashboard-fix-first .fix-first-card {
  border: 1px solid rgba(17, 24, 39, 0.14);
  box-shadow:
    0 8px 22px rgba(17, 24, 39, 0.08),
    0 2px 4px rgba(17, 24, 39, 0.05);
  padding: 24px 26px;
  background: #fff;
  position: relative;
}
/* Subtle accent rail along the left edge — silently signals
   "this is the priority surface" without competing with the CRIT
   badge in the hero header above. Darker, desaturated tones so the
   filled red CRIT pill stays the loudest red on the page. */
body.has-hero-state #dashboard-fix-first .fix-first-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #7f1d1d 0%, #92400e 100%);
  opacity: 0.55;
}
body.has-hero-state #dashboard-fix-first .section-head {
  margin-bottom: 14px;
}

/* CTA-driven focus flash on the Top Risks card. */
@keyframes fixFirstFlash {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45),
                     0 8px 22px rgba(17, 24, 39, 0.08); }
  60%  { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.0),
                     0 8px 22px rgba(17, 24, 39, 0.08); }
  100% { box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08),
                     0 2px 4px rgba(17, 24, 39, 0.05); }
}
body.has-hero-state #dashboard-fix-first.fix-first-flash .fix-first-card {
  animation: fixFirstFlash 1.3s ease-out 1;
}

/* Pass 4 — push the metrics row a touch further into the background
   so the eye anchors on Top Risks before inventory counts. */
body.has-hero-state #summary-cards {
  opacity: 0.88;
}
body.has-hero-state #summary-cards .card.metric {
  padding: 8px 12px;
}
body.has-hero-state #summary-cards .card.metric > strong {
  font-size: 16px;
  font-weight: 600;
}
body.has-hero-state #summary-cards .card.metric.severity-card > strong {
  font-size: 14px;
}
body.has-hero-state #summary-cards .card.metric > span {
  font-size: 10px;
}

/* Suppress redundant actionable summaries below the fold. The hero
   state header + Top Risks card now own the "what should I do next"
   surface; these legacy bars repeat the same signal in different
   shapes and add scroll noise. They remain available on their own
   detail pages — only the dashboard placement is suppressed. */
body.has-hero-state #remediation-summary-bar,
body.has-hero-state #remediation-widget,
body.has-hero-state #security-summary-statement {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Threat Summary Hero — executive-buyer view, presentational only.
   Consumes /api/threat-summary fields; no scoring or layout knowledge here.
   ───────────────────────────────────────────────────────────────────────── */
.threat-hero {
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
  color: #f5f7fb;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.threat-hero--critical {
  background: linear-gradient(135deg, #4b1014 0%, #2a0608 100%);
  border-color: rgba(255, 99, 99, 0.35);
}
.threat-hero--warn {
  background: linear-gradient(135deg, #4a3208 0%, #2a1c04 100%);
  border-color: rgba(245, 196, 89, 0.35);
}
.threat-hero--safe {
  background: linear-gradient(135deg, #103a2a 0%, #07261a 100%);
  border-color: rgba(89, 217, 158, 0.35);
}
.threat-hero--loading,
.threat-hero--error {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.threat-hero__placeholder {
  font-size: 14px;
  color: rgba(245, 247, 251, 0.7);
  letter-spacing: 0.02em;
}
.threat-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 247, 251, 0.55);
}
.threat-hero__asset {
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(245, 247, 251, 0.85);
  text-transform: none;
  font-size: 13px;
}
.threat-hero__verdict {
  display: flex;
  align-items: center;
  gap: 14px;
}
.threat-hero__verdict h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.threat-hero__icon {
  font-size: 28px;
  line-height: 1;
  flex: 0 0 auto;
}
.threat-hero--critical .threat-hero__icon { color: #ff8a8a; }
.threat-hero--warn     .threat-hero__icon { color: #f5c459; }
.threat-hero--safe     .threat-hero__icon { color: #59d99e; }
.threat-hero__body {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 22px;
  align-items: stretch;
}
.threat-hero__metric {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.threat-hero__metric-value {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.threat-hero--critical .threat-hero__metric-value { color: #ff8a8a; }
.threat-hero--warn     .threat-hero__metric-value { color: #f5c459; }
.threat-hero--safe     .threat-hero__metric-value { color: #59d99e; }
.threat-hero__metric-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 247, 251, 0.65);
}
.threat-hero__lines {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.threat-hero__lines > div { margin: 0; }
.threat-hero__lines dt {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 247, 251, 0.55);
  margin-bottom: 4px;
}
.threat-hero__lines dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #f5f7fb;
}
.threat-hero__action {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.threat-hero__action-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 247, 251, 0.55);
  flex: 0 0 auto;
}
.threat-hero__action-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #f5f7fb;
  position: relative;
  padding-left: 18px;
}
.threat-hero__action-text::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
}
.threat-hero--critical .threat-hero__action-text::before { color: #ff8a8a; }
.threat-hero--warn     .threat-hero__action-text::before { color: #f5c459; }
.threat-hero--safe     .threat-hero__action-text::before { color: #59d99e; }

@media (max-width: 720px) {
  .threat-hero { padding: 18px; }
  .threat-hero__verdict h2 { font-size: 18px; }
  .threat-hero__body {
    grid-template-columns: 1fr;
  }
  .threat-hero__metric {
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 12px;
    text-align: left;
  }
  .threat-hero__metric-value { font-size: 32px; }
  .threat-hero__action {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Threat Hero: Executive View toggle + Next Steps CTA + Exec Mode hiding.
   No backend coupling. Pure presentation.
   ───────────────────────────────────────────────────────────────────────── */
.threat-hero__exec-toggle {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 247, 251, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  margin-left: 12px;
}
.threat-hero__exec-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}
.threat-hero__exec-toggle[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

.threat-next-steps {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
  color: #f5f7fb;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.threat-next-steps__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 247, 251, 0.55);
}
.threat-next-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: nextstep;
}
.threat-next-steps__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.threat-next-steps__num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 138, 138, 0.18);
  color: #ff8a8a;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.threat-next-steps__item { flex: 1; }
.threat-next-steps__item strong {
  display: block;
  font-size: 14px;
  color: #f5f7fb;
  margin-bottom: 4px;
}
.threat-next-steps__item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(245, 247, 251, 0.72);
}
.threat-next-steps__count {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 247, 251, 0.5);
}
.threat-next-steps__details > summary {
  display: block;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 110px;
}
.threat-next-steps__details > summary::-webkit-details-marker { display: none; }
.threat-next-steps__details > summary::marker { content: ""; }
.threat-next-steps__toggle {
  position: absolute; top: 0; right: 0;
  font-size: 11px; letter-spacing: 0.04em;
  color: rgba(245, 247, 251, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px; padding: 3px 10px;
  user-select: none;
}
.threat-next-steps__details[open] .threat-next-steps__toggle::after { content: ""; }
.threat-next-steps__details[open] .threat-next-steps__toggle { color: #fff; }
.threat-next-steps__details:not([open]) .threat-next-steps__toggle::before { content: "▸ "; }
.threat-next-steps__details[open] .threat-next-steps__toggle::before { content: "▾ "; }
.threat-next-steps__details:not([open]) .threat-next-steps__toggle::after { content: ""; }
.threat-next-steps__findings {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.threat-next-steps__findings li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
  font-size: 13px; color: rgba(245, 247, 251, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.threat-next-steps__findings li:last-child { border-bottom: none; }
.threat-next-steps__finding-title { flex: 1; min-width: 0; }
button.threat-next-steps__jump {
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  text-decoration: underline;
  text-decoration-color: rgba(245, 247, 251, 0.25);
  text-underline-offset: 2px;
}
button.threat-next-steps__jump:hover,
button.threat-next-steps__jump:focus {
  color: #fff;
  text-decoration-color: rgba(245, 247, 251, 0.6);
  outline: none;
}
.threat-next-steps__jump-icon {
  font-size: 11px; opacity: 0.6; flex: 0 0 auto;
}
button.threat-next-steps__jump:hover .threat-next-steps__jump-icon { opacity: 1; }
button.threat-next-steps__jump-all {
  background: transparent;
  border: 1px dashed rgba(245, 247, 251, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  color: rgba(245, 247, 251, 0.75);
  cursor: pointer;
  width: 100%;
  text-align: center;
}
button.threat-next-steps__jump-all:hover,
button.threat-next-steps__jump-all:focus {
  color: #fff;
  border-color: rgba(245, 247, 251, 0.5);
  outline: none;
}
body.report-mode button.threat-next-steps__jump {
  text-decoration-color: rgba(0, 0, 0, 0.25);
}
body.report-mode button.threat-next-steps__jump:hover,
body.report-mode button.threat-next-steps__jump:focus {
  color: #111827;
  text-decoration-color: #1f2937;
}
body.report-mode button.threat-next-steps__jump-all {
  border-color: rgba(0, 0, 0, 0.2);
  color: #374151;
}
body.report-mode button.threat-next-steps__jump-all:hover,
body.report-mode button.threat-next-steps__jump-all:focus {
  color: #111827;
  border-color: #1f2937;
}
@keyframes findingJumpFlash {
  0%   { box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.65); }
  100% { box-shadow: 0 0 0 3px rgba(99, 179, 237, 0); }
}
.finding-jump-flash {
  animation: findingJumpFlash 1.6s ease-out 1;
  border-radius: 8px;
}
.threat-next-steps__sev {
  flex: 0 0 auto;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); color: #f5f7fb;
  min-width: 56px; text-align: center;
}
.threat-next-steps__sev--critical { background: rgba(239, 68, 68, 0.22); color: #fca5a5; }
.threat-next-steps__sev--high     { background: rgba(249, 115, 22, 0.22); color: #fdba74; }
.threat-next-steps__sev--medium   { background: rgba(234, 179, 8, 0.22); color: #fde047; }
.threat-next-steps__sev--low      { background: rgba(59, 130, 246, 0.22); color: #93c5fd; }
.threat-next-steps__sev--info     { background: rgba(148, 163, 184, 0.22); color: #cbd5e1; }
.threat-next-steps__regressed {
  flex: 0 0 auto;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(239, 68, 68, 0.18); color: #fca5a5;
}
.threat-next-steps__more {
  font-style: italic;
  color: rgba(245, 247, 251, 0.55);
  font-size: 12px;
}
body.report-mode .threat-next-steps__toggle {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: #374151;
}
body.report-mode .threat-next-steps__findings {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
body.report-mode .threat-next-steps__findings li {
  color: #1f2937;
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.report-mode .threat-next-steps__more { color: #6b7280; }

/* ============================================================
   Audience switcher — Executive | Technical | Simple.
   Pure presentation layer over existing fields. Composes with the
   existing exec-mode and report-mode rules; never duplicates logic.
   ============================================================ */
.audience-switcher {
  display: inline-flex;
  background: rgba(20, 16, 10, 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.audience-switcher__btn {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.audience-switcher__btn:hover { color: var(--text); }
.audience-switcher__btn[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
}

/* Simple-mode plain-language card — ALWAYS in DOM, hidden unless
   audience=simple. Mirrors the "Simple / Client Report" structure
   from the buyer playbook. Same data, plain framing. */
.audience-simple-card {
  display: none;
  margin: 18px 0;
  padding: 22px 24px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body.audience-simple .audience-simple-card { display: block; }
.audience-simple-card__urgency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.audience-simple-card__urgency--high {
  background: rgba(213, 60, 60, 0.12);
  color: var(--critical, #b91c1c);
}
.audience-simple-card__urgency--medium {
  background: rgba(217, 119, 6, 0.12);
  color: var(--high, #b45309);
}
.audience-simple-card__urgency--low {
  background: rgba(34, 139, 34, 0.12);
  color: var(--low, #15803d);
}
.audience-simple-card__urgency-label { opacity: 0.7; }
.audience-simple-card__urgency-value { font-size: 13px; }
.audience-simple-card__summary {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.audience-simple-card__lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 28px;
  margin: 0;
}
.audience-simple-card__lines > div { margin: 0; }
.audience-simple-card__lines dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 4px;
}
.audience-simple-card__lines dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

/* Per-audience visibility rules. Anything tagged
   data-audience-only="X" only shows when body.audience-X is active.
   Anything tagged data-audience-hide="X" is hidden when
   body.audience-X is active. */
[data-audience-only] { display: none; }
body.audience-executive [data-audience-only="executive"],
body.audience-technical [data-audience-only="technical"],
body.audience-simple    [data-audience-only="simple"] { display: block; }

body.audience-executive [data-audience-hide="executive"],
body.audience-technical [data-audience-hide="technical"],
body.audience-simple    [data-audience-hide="simple"] { display: none !important; }

/* Simple mode: keep only the audience-simple-card visible inside the
   asset detail. Decision summary, threat-hero internals,
   next-steps, remediation, ownership, action-status, trend-progress,
   closing-cta, operator artifact — all hidden. The simple-card
   itself sits inside the threat-hero so the hero shell remains
   visible (provides the colored background tone) but its content
   is collapsed via data-audience-hide. */
body.audience-simple #decision-summary,
body.audience-simple #threat-next-steps,
body.audience-simple #remediation-progress,
body.audience-simple #remediation-ownership,
body.audience-simple #action-status,
body.audience-simple #trend-progress,
body.audience-simple #closing-cta { display: none !important; }
body.audience-simple .threat-hero {
  background: var(--surface);
  padding-top: 16px;
}
body.audience-simple .threat-hero__top { padding-bottom: 0; border-bottom: none; }

/* Executive mode rule: keep all the buyer-narrative sections, hide
   operator surface. This is achieved by the existing body.exec-mode
   rules below — body.audience-executive composes by also having
   exec-mode applied automatically by setAudience(). No new hiding
   needed here. */

/* Technical mode: every existing rule is the default. exec-mode is
   removed, so all operator panels (scan controls, raw evidence, tool
   diagnostics, scanner catalog, etc.) are visible. The audience-simple
   card is hidden by default (display:none) so no visual leak. */

/* Executive Mode — hide operator clutter so only the buyer-facing
   sections (hero, next steps, asset header, findings/chains/fix plan)
   remain. Triggered by the toggle button on the hero. */
body.exec-mode [data-buyer-hide="operator"] { display: none !important; }
body.exec-mode #scan-controls,
body.exec-mode #scan-policy,
body.exec-mode #scanner-catalog,
body.exec-mode #raw-evidence,
body.exec-mode #tool-diagnostics,
body.exec-mode #informational-output,
body.exec-mode #raw-artifacts { display: none !important; }
body.exec-mode .nav-links a[href="#scans"],
body.exec-mode .nav-links a[href="#scanners"],
body.exec-mode .nav-links a[href="#auth-profiles"],
body.exec-mode .nav-links a[href="#test-target"] { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   Client-Ready Report Mode
   Wraps the existing asset detail in a print-safe, share-ready layout.
   Activated by the "Report Mode" toggle on the hero. Stacks on top of
   exec-mode (operator clutter already hidden) and adds:
     • Light, paper-style canvas
     • Cover header ("Authorized Security Assessment / Prepared for …")
     • Hidden site chrome (marketing nav, workspace nav, other dashboard cards)
     • Page-break-aware sections so File→Print produces a clean PDF
   ───────────────────────────────────────────────────────────────────────── */

.threat-hero__toggles { display: inline-flex; gap: 8px; margin-left: auto; }
.threat-hero__report-toggle {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit;
  cursor: pointer; opacity: 0.85;
}
.threat-hero__report-toggle:hover { opacity: 1; }
.threat-hero__report-toggle[aria-pressed="true"] {
  background: rgba(255,255,255,0.18); opacity: 1;
}

/* Report cover — only rendered when report mode is on. */
.report-cover {
  background: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 36px 40px 32px;
  margin: 0 0 20px;
  font-family: Georgia, "Times New Roman", serif;
}
.report-cover__eyebrow {
  margin: 0 0 8px; font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: #6b7280;
}
.report-cover__title {
  margin: 0 0 20px; font-size: 28px; line-height: 1.2;
  font-weight: 700; color: #0f172a;
}
.report-cover__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px; margin: 0 0 18px; padding: 16px 0;
  border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
}
.report-cover__meta div { margin: 0; }
.report-cover__meta dt {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6b7280; margin-bottom: 4px;
}
.report-cover__meta dd { margin: 0; font-size: 15px; color: #111827; }
.report-cover__note {
  margin: 0; font-size: 13px; line-height: 1.55; color: #4b5563;
  font-style: italic;
}

/* Report mode — global presentation rules.
   Self-contained: re-applies exec-mode operator hides so that turning
   exec-mode off (via its own toggle) cannot expose operator sections in a
   client-facing report. Also hides the exec toggle while report mode is on. */
body.report-mode [data-buyer-hide="operator"] { display: none !important; }
body.report-mode #scan-controls,
body.report-mode #scan-policy,
body.report-mode #scanner-catalog,
body.report-mode #raw-evidence,
body.report-mode #tool-diagnostics,
body.report-mode #informational-output,
body.report-mode #raw-artifacts { display: none !important; }
body.report-mode .nav-links a[href="#scans"],
body.report-mode .nav-links a[href="#scanners"],
body.report-mode .nav-links a[href="#auth-profiles"],
body.report-mode .nav-links a[href="#test-target"] { display: none; }
body.report-mode .threat-hero__exec-toggle { display: none !important; }
body.report-mode { background: #f3f4f6 !important; }
body.report-mode .marketing-nav,
/* Workspace nav stays visible even in report-mode so users always have
   a way to navigate. Print rule below still hides it for clean PDFs. */
body.report-mode .marketing-footer,
body.report-mode #section-overview,
body.report-mode #section-zap,
body.report-mode #section-attack-surface,
body.report-mode #section-protection,
body.report-mode #section-assets > .card:first-child,
body.report-mode #section-jobs,
body.report-mode #section-alerts,
body.report-mode #section-scans,
body.report-mode #section-scanners,
body.report-mode #section-test-target,
body.report-mode #section-auth-profiles,
body.report-mode #section-findings,
body.report-mode #section-discovery { display: none !important; }
body.report-mode main, body.report-mode .workspace-main { padding-top: 0 !important; }
body.report-mode #section-assets .card,
body.report-mode #asset-detail .card {
  background: #ffffff !important; color: #111827;
  border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
body.report-mode #asset-detail { gap: 18px; }
body.report-mode #asset-detail > * { page-break-inside: avoid; break-inside: avoid; }
body.report-mode #asset-detail .threat-hero { page-break-after: auto; }
body.report-mode .threat-hero__report-toggle[aria-pressed="true"] {
  background: rgba(255,255,255,0.28);
}

/* Report Actions bar (Print / Save PDF, Copy Share Link). */
.report-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5e7eb;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.report-actions__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid #d1d5db; background: #ffffff; color: #111827;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.report-actions__btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.report-actions__btn:disabled { opacity: 0.55; cursor: progress; }
.report-actions__btn span[aria-hidden] { font-size: 14px; line-height: 1; }
.report-actions__status {
  font-size: 12px; color: #4b5563; min-height: 1em;
  margin-left: auto; max-width: 100%;
}
.report-actions__status[data-ok="0"] { color: #b91c1c; }

/* Remediation Handoff block under the Next Steps list. */
.threat-handoff {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed rgba(148, 163, 184, 0.45);
}
.threat-handoff__title {
  margin: 0 0 6px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: inherit;
}
.threat-handoff__lead {
  margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: inherit;
  opacity: 0.92;
}
.threat-handoff__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px; margin: 0;
}
.threat-handoff__meta div { margin: 0; }
.threat-handoff__meta dt {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.7; margin-bottom: 2px;
}
.threat-handoff__meta dd { margin: 0; font-size: 13px; }
@media (max-width: 560px) {
  .threat-handoff__meta { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Remediation Progress — buyer-readable view of existing finding statuses.
   No new analysis; presentation-only summary of remediation_status values
   already returned by the API.
   ───────────────────────────────────────────────────────────────────────── */
.remediation-progress {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 18px 22px;
  color: inherit;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.remediation-progress[hidden] { display: none !important; }
.remediation-progress__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.remediation-progress__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.78;
}
.remediation-progress__headline {
  font-size: 14px; font-weight: 600; opacity: 0.95;
}
.remediation-progress__bar {
  position: relative; height: 10px; border-radius: 999px;
  background: rgba(148, 163, 184, 0.22); overflow: hidden;
  margin: 6px 0 14px;
}
.remediation-progress__bar-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width 240ms ease;
}
.remediation-progress--complete .remediation-progress__bar-fill {
  background: linear-gradient(90deg, #16a34a, #15803d);
}
.remediation-progress__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px; margin: 0 0 16px;
}
.remediation-progress__stats div { margin: 0; }
.remediation-progress__stats dt {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.7; margin-bottom: 2px;
}
.remediation-progress__stats dd {
  margin: 0; font-size: 18px; font-weight: 700;
}
.remediation-progress__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.remediation-progress__col h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.remediation-progress__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: rgba(148, 163, 184, 0.22);
}
.remediation-progress__col--open h4 { color: #f59e0b; }
.remediation-progress__col--done h4 { color: #4ade80; }
.remediation-progress__top-list,
.remediation-progress__recent-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px;
}
.remediation-progress__top-list li {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 8px;
  align-items: baseline;
}
.remediation-progress__top-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(245, 158, 11, 0.18); color: #f59e0b;
  font-weight: 700; font-size: 12px;
}
.remediation-progress__top-title { font-weight: 600; }
.remediation-progress__top-count {
  font-size: 11px; opacity: 0.78; white-space: nowrap;
}
.remediation-progress__recent-list li {
  padding-left: 14px; position: relative;
}
.remediation-progress__recent-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: #4ade80; font-weight: 700;
}
.remediation-progress__empty {
  margin: 0; font-size: 12.5px; opacity: 0.7; font-style: italic;
}
.remediation-progress__note {
  margin: 8px 0 0; font-size: 11.5px; opacity: 0.7;
}
@media (max-width: 720px) {
  .remediation-progress__stats,
  .remediation-progress__cols { grid-template-columns: 1fr; }
}

/* Report-mode skin (light, paper-style) for the remediation progress card. */
body.report-mode .remediation-progress {
  background: #ffffff; color: #111827;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
body.report-mode .remediation-progress__bar { background: #e5e7eb; }
body.report-mode .remediation-progress__pill { background: #e5e7eb; color: #111827; }
body.report-mode .remediation-progress__top-num {
  background: #fef3c7; color: #92400e;
}
body.report-mode .remediation-progress__col--open h4 { color: #b45309; }
body.report-mode .remediation-progress__col--done h4 { color: #15803d; }
body.report-mode .remediation-progress__recent-list li::before { color: #15803d; }

/* Trust footer — appears at the bottom of the asset detail in report mode. */
.report-footer {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 8px;
  margin-top: 20px; padding: 16px 12px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: #6b7280;
  border-top: 1px solid #e5e7eb;
}
.report-footer__brand { font-weight: 700; color: #111827; letter-spacing: 0.04em; }
.report-footer__sep { opacity: 0.5; }

/* ───────────────────────────────────────────────────────────────────────────
   Demo Closing Mode — Decision Summary + Closing CTA
   ─────────────────────────────────────────────────────────────────────────── */
.decision-summary {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.decision-summary__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.decision-summary__eyebrow-wrap {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.decision-summary__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted, #6b7280);
}
.decision-summary__sub {
  font-size: 12px; color: var(--muted, #6b7280); font-style: italic;
}
.decision-summary__priority {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
  background: #e5e7eb; color: #374151;
}
.decision-summary__priority--bad     { background:#fee2e2; color:#991b1b; }
.decision-summary__priority--warn    { background:#fef3c7; color:#92400e; }
.decision-summary__priority--good    { background:#dcfce7; color:#166534; }
.decision-summary__priority--neutral { background:#e5e7eb; color:#374151; }
.decision-summary__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px; margin: 0;
}
.decision-summary__grid div { margin: 0; min-width: 0; }
.decision-summary__grid dt {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted, #6b7280); margin-bottom: 2px;
}
.decision-summary__grid dd {
  margin: 0; font-size: 14px; color: var(--ink, #111827); line-height: 1.4;
}
.decision-summary__risk {
  display:inline-block; padding: 2px 10px; border-radius: 6px;
  font-weight: 700; font-size: 13px;
}
.decision-summary__risk--bad     { background:#fee2e2; color:#991b1b; }
.decision-summary__risk--warn    { background:#fef3c7; color:#92400e; }
.decision-summary__risk--good    { background:#dcfce7; color:#166534; }
.decision-summary__risk--neutral { background:#e5e7eb; color:#374151; }
@media (max-width: 720px) {
  .decision-summary__grid { grid-template-columns: 1fr; }
}
body.report-mode .decision-summary {
  background: #fff; border-color: #d1d5db; color: #111827;
  page-break-inside: avoid;
}
body.report-mode .decision-summary__eyebrow,
body.report-mode .decision-summary__grid dt { color: #4b5563; }

.closing-cta {
  margin: 24px 0 0;
  padding: 18px 18px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.closing-cta__head { margin-bottom: 12px; }
.closing-cta__eyebrow {
  display:block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted, #6b7280); margin-bottom: 4px;
}
.closing-cta__title {
  margin: 0; font-size: 1.05rem; color: var(--ink, #111827);
}
.closing-cta__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.closing-cta__col { margin: 0; min-width: 0; }
.closing-cta__col h4 {
  margin: 0 0 4px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted, #6b7280);
}
.closing-cta__col p {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink, #111827);
}
@media (max-width: 720px) {
  .closing-cta__grid { grid-template-columns: 1fr; }
}
body.report-mode .closing-cta {
  background: #fff; border-color: #d1d5db; color: #111827;
  page-break-inside: avoid;
}
body.report-mode .closing-cta__eyebrow,
body.report-mode .closing-cta__col h4 { color: #4b5563; }
@media print {
  .decision-summary, .closing-cta, .action-status { page-break-inside: avoid; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Action Sync Mode — Action Status (assignment + linked-work tracking)
   ─────────────────────────────────────────────────────────────────────────── */
.action-status {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.action-status__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.action-status__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted, #6b7280);
}
.action-status__sub { font-size: 12px; color: var(--muted, #6b7280); }
.action-status__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px; margin: 0 0 12px;
}
.action-status__stats > div { margin: 0; min-width: 0; }
.action-status__stats dt {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted, #6b7280); margin-bottom: 2px;
}
.action-status__stats dd {
  margin: 0; font-size: 13px; color: var(--ink, #111827); line-height: 1.45;
}
.action-status__table { display: block; }
.action-status__row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px; padding: 8px 0; border-top: 1px solid var(--border, #e5e7eb);
  font-size: 13px; color: var(--ink, #111827); align-items: start;
}
.action-status__row--head {
  border-top: none; padding-top: 0; padding-bottom: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted, #6b7280);
}
.action-status__row--empty { color: var(--muted, #6b7280); }
.action-status__pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: #e5e7eb; color: #374151;
}
.action-status__pill--good { background: #dcfce7; color: #166534; }
.action-status__pill--warn { background: #fef3c7; color: #92400e; }
.action-status__pill--bad { background: #fee2e2; color: #991b1b; }
.action-status__pill--neutral { background: #e5e7eb; color: #374151; }
.action-status__not-tracked {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: #f3f4f6; color: #6b7280; font-size: 12px; font-weight: 600;
}
.action-status__ticket-status {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
}
.action-status__summary {
  margin: 12px 0 0; font-size: 13px; color: var(--ink, #111827);
  font-weight: 600;
}
.action-status__note { margin: 6px 0 0; font-size: 12px; }
@media (max-width: 720px) {
  .action-status__stats { grid-template-columns: 1fr; }
  .action-status__row { grid-template-columns: 1fr; }
  .action-status__row--head { display: none; }
}
body.report-mode .action-status {
  background: #fff; border-color: #d1d5db; color: #111827;
  page-break-inside: avoid;
}
body.report-mode .action-status__eyebrow,
body.report-mode .action-status__stats dt,
body.report-mode .action-status__row--head { color: #4b5563; }

/* ───────────────────────────────────────────────────────────────────────────
   Remediation Ownership — recommendation -> responsible team + status
   ─────────────────────────────────────────────────────────────────────────── */
.rem-ownership {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.rem-ownership__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.rem-ownership__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted, #6b7280);
}
.rem-ownership__sub { font-size: 12px; color: var(--muted, #6b7280); }
.rem-ownership__table { display: flex; flex-direction: column; }
.rem-ownership__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 0.8fr minmax(0, 1.2fr);
  gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--border, #e5e7eb);
  align-items: center; font-size: 13px;
}
.rem-ownership__row--head {
  border-top: none;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted, #6b7280); font-weight: 700;
  padding-top: 0;
}
.rem-ownership__rec { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rem-ownership__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; border-radius: 999px;
  background: var(--surface-alt, #f3f4f6); color: var(--ink, #111827);
  font-size: 11px; font-weight: 700;
}
.rem-ownership__title { font-weight: 600; color: var(--ink, #111827); }
.rem-ownership__owner { color: var(--ink, #111827); }
.rem-ownership__status {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  width: fit-content;
}
.rem-ownership__status--good    { background: #dcfce7; color: #166534; }
.rem-ownership__status--warn    { background: #fef3c7; color: #92400e; }
.rem-ownership__status--neutral { background: #e5e7eb; color: #374151; }
.rem-ownership__remaining { color: var(--muted, #6b7280); }
.rem-ownership__note { margin: 10px 0 0; font-size: 12px; }

body.report-mode .rem-ownership {
  background: #fff; border-color: #d1d5db; color: #111827;
  page-break-inside: avoid;
}
body.report-mode .rem-ownership__eyebrow,
body.report-mode .rem-ownership__sub,
body.report-mode .rem-ownership__remaining,
body.report-mode .rem-ownership__row--head { color: #4b5563; }
body.report-mode .rem-ownership__num { background: #e5e7eb; color: #111827; }

@media print {
  .rem-ownership { page-break-inside: avoid; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Trend + Proof — Progress Over Time
   ─────────────────────────────────────────────────────────────────────────── */
.trend-progress {
  margin: 16px 0 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.trend-progress[hidden] { display: none !important; }
.trend-progress__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.trend-progress__eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 11px; font-weight: 700; color: #94a3b8;
}
.trend-progress__verdict {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: rgba(148, 163, 184, 0.18); color: #e2e8f0;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.trend-progress__verdict--good {
  background: rgba(34, 197, 94, 0.18); color: #4ade80;
}
.trend-progress__verdict--warn {
  background: rgba(245, 158, 11, 0.18); color: #fbbf24;
}
.trend-progress__verdict--neutral {
  background: rgba(148, 163, 184, 0.18); color: #cbd5e1;
}
.trend-progress__summary {
  margin: 4px 0 14px; font-size: 15px; line-height: 1.5; color: #e2e8f0;
}
.trend-progress__metrics {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 0;
}
.trend-progress__metric {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.trend-progress__metric dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #94a3b8; font-weight: 600; margin-bottom: 4px;
}
.trend-progress__metric dd {
  margin: 0; font-size: 16px; font-weight: 700; color: #f1f5f9;
}
.trend-progress__metric--good dd { color: #4ade80; }
.trend-progress__metric--warn dd { color: #fbbf24; }
.trend-progress__metric--neutral dd { color: #cbd5e1; }
.trend-progress__note {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.45;
}
@media (max-width: 720px) {
  .trend-progress__metrics { grid-template-columns: 1fr 1fr; }
}
/* Report Mode skin — light, paper-friendly. */
body.report-mode .trend-progress {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
}
body.report-mode .trend-progress__eyebrow { color: #6b7280; }
body.report-mode .trend-progress__summary { color: #111827; }
body.report-mode .trend-progress__metric {
  background: #f9fafb; border: 1px solid #e5e7eb;
}
body.report-mode .trend-progress__metric dt { color: #6b7280; }
body.report-mode .trend-progress__metric dd { color: #111827; }
body.report-mode .trend-progress__metric--good dd { color: #15803d; }
body.report-mode .trend-progress__metric--warn dd { color: #b45309; }
body.report-mode .trend-progress__metric--neutral dd { color: #374151; }
body.report-mode .trend-progress__verdict { background: #e5e7eb; color: #111827; }
body.report-mode .trend-progress__verdict--good { background: #dcfce7; color: #15803d; }
body.report-mode .trend-progress__verdict--warn { background: #fef3c7; color: #b45309; }
body.report-mode .trend-progress__verdict--neutral { background: #e5e7eb; color: #374151; }
body.report-mode .trend-progress__note { color: #6b7280; }

/* Print rules — File → Print produces a clean PDF. */
@media print {
  body.report-mode {
    background: #ffffff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.report-mode .marketing-nav,
  body.report-mode #workspace-nav,
  body.report-mode .threat-hero__toggles,
  body.report-mode [data-no-print="1"],
  body.report-mode .report-actions { display: none !important; }
  body.report-mode #asset-detail > *,
  body.report-mode #threat-next-steps,
  body.report-mode .threat-handoff,
  body.report-mode #remediation-progress,
  body.report-mode #trend-progress,
  body.report-mode .report-footer { page-break-inside: avoid; break-inside: avoid; }
  body.report-mode .remediation-progress__bar-fill {
    background: #15803d !important;
  }
  body.report-mode .report-cover { page-break-after: always; border: none; padding: 0 0 12px; }
  body.report-mode .threat-hero { box-shadow: none; }
  body.report-mode .report-footer {
    border-top: 1px solid #d1d5db; color: #4b5563;
    page-break-before: avoid;
  }
  @page { margin: 18mm; }
}

/* Internal-only demo page banner. */
.demo-internal-banner {
  background: #f5c459;
  color: #2a1c04;
  text-align: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────
   Operator-grade Technical Finding Card
   Renders only in body.audience-technical via data-audience-only="technical".
   Light-theme card with monospace pinpoint table — engineering-handoff feel
   without breaking the surrounding app theme.
   ───────────────────────────────────────────────────────────────────────── */
.finding-tech-card {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: 3px solid #0891b2;
  border-radius: 8px;
}
.finding-tech-section { margin: 0 0 12px; }
.finding-tech-section:last-child { margin-bottom: 0; }
.finding-tech-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  margin-bottom: 6px;
}
.finding-tech-section p {
  margin: 0;
  line-height: 1.5;
  color: #0f172a;
  font-size: 13.5px;
}
.finding-tech-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: #0f172a;
  background: #ffffff;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.finding-tech-pinpoint {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 13px;
}
.finding-tech-pinpoint > div { display: contents; }
.finding-tech-pinpoint dt {
  color: #475569;
  font-weight: 600;
  padding-right: 12px;
  white-space: nowrap;
}
.finding-tech-pinpoint dd {
  margin: 0;
  color: #0f172a;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}
@media (max-width: 600px) {
  .finding-tech-pinpoint {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .finding-tech-pinpoint dt { padding-right: 0; padding-top: 6px; }
}
.finding-tech-refs {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #0f172a;
}
.finding-tech-refs li { margin: 0 0 2px; word-break: break-all; }
.finding-tech-refs a { color: #0e7490; text-decoration: underline; }
.finding-tech-refs a:hover { color: #155e75; }

/* ============================================================ */
/* Admin Console shell (Phase 1)                                */
/* Sidebar + topbar + isolated views. Activated by hash "#/..."  */
/* ============================================================ */
#admin-shell {
  position: fixed; inset: 0;
  background: #0f1115;
  color: #d8dde3;
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  z-index: 90;
  font-family: inherit;
}
#admin-shell[hidden] { display: none; }
#admin-sidebar {
  grid-area: sidebar;
  background: #14171c;
  border-right: 1px solid #232830;
  overflow-y: auto;
  padding: 0.75rem 0;
}
.admin-sidebar-brand {
  font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em;
  padding: 0.5rem 1rem 1rem; color: #f0f2f5;
  border-bottom: 1px solid #232830; margin-bottom: 0.4rem;
}
.admin-nav { display: flex; flex-direction: column; }
.admin-nav-group {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #6b7280; padding: 0.85rem 1rem 0.3rem;
}
.admin-nav-link {
  display: block; padding: 0.45rem 1rem;
  color: #b6bcc4; text-decoration: none; font-size: 0.86rem;
  border-left: 2px solid transparent;
}
.admin-nav-link:hover { background: #1b1f26; color: #e8ebef; }
.admin-nav-link.is-active {
  background: #1d232c; color: #ffffff; border-left-color: #d97a3c;
  font-weight: 600;
}
#admin-topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0 1rem;
  background: #14171c;
  border-bottom: 1px solid #232830;
}
.admin-topbar-title { font-weight: 600; font-size: 0.95rem; color: #f0f2f5; }
.admin-topbar-spacer { flex: 1; }
.admin-topbar-search {
  background: #1b1f26; border: 1px solid #2a3038; color: #d8dde3;
  border-radius: 4px; padding: 0.32rem 0.6rem; font-size: 0.82rem;
  min-width: 220px;
}
.admin-topbar-user {
  font-size: 0.78rem; color: #9aa0a6; padding: 0 0.4rem;
}
.admin-topbar-btn {
  background: #1b1f26; border: 1px solid #2a3038; color: #d8dde3;
  padding: 0.3rem 0.7rem; border-radius: 4px; font-size: 0.78rem;
  cursor: pointer;
}
.admin-topbar-btn:hover { background: #232830; }
#admin-shell-main {
  grid-area: main;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}
.admin-view { display: block; }
.admin-view[hidden] { display: none; }
.admin-view-loading { color: #9aa0a6; font-size: 0.85rem; }

/* ===== Step 3 — Super Admin Console ============================ */
/* Indigo platform-scope strip. Sits just under the topbar so it
   spans the full content column when active. */
.admin-platform-strip {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 1rem;
  margin: -1.25rem -1.5rem 1rem; /* span the full content column */
  background: linear-gradient(90deg, #2a1f6b 0%, #3a2a8a 60%, #2a1f6b 100%);
  border-bottom: 1px solid #4b3aaa;
  color: #e8e6ff; font-size: 0.78rem; letter-spacing: 0.02em;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05);
}
.admin-platform-strip[hidden] { display: none; }
.admin-platform-strip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #b9adff; box-shadow: 0 0 8px #8c7bff;
  animation: admin-platform-pulse 2.4s ease-in-out infinite;
}
@keyframes admin-platform-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
.admin-platform-strip-label { font-weight: 600; }
.admin-platform-strip-spacer { flex: 1; }
.admin-platform-strip-toggle {
  display: inline-flex; background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
  padding: 2px;
}
.admin-scope-btn {
  appearance: none; background: transparent; color: #cfc8ff;
  border: 0; padding: 0.25rem 0.75rem; font-size: 0.73rem;
  font-weight: 600; cursor: pointer; border-radius: 999px;
  transition: background 120ms, color 120ms;
}
.admin-scope-btn:hover { color: #fff; }
.admin-scope-btn.is-active {
  background: #fff; color: #2a1f6b;
}

/* Global Dashboard 5-tile grid */
.admin-tile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem; margin: 0 0 1.25rem;
}
.admin-tile {
  display: block; text-decoration: none;
  background: linear-gradient(180deg, #161a22 0%, #12151c 100%);
  border: 1px solid #262c36; border-radius: 8px;
  padding: 1rem 1.1rem;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}
.admin-tile:hover {
  border-color: #5b4bd0; transform: translateY(-1px);
  box-shadow: 0 4px 18px -8px rgba(91,75,208,0.45);
}
.admin-tile-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #8c93a3; font-weight: 600;
}
.admin-tile-value {
  font-size: 2rem; font-weight: 700; color: #f3f4f8; margin-top: 0.35rem;
  line-height: 1.1;
}
.admin-tile-value.is-threat { color: #ff8a80; }
.admin-tile-live-dot {
  display: inline-block;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: #ff5252; margin-right: 0.35rem; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.65);
  animation: admin-tile-live-pulse 1.6s ease-out infinite;
}
@keyframes admin-tile-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.55); }
  70%  { box-shadow: 0 0 0 0.45rem rgba(255, 82, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); }
}
.admin-tile-sub {
  font-size: 0.74rem; color: #9aa0a6; margin-top: 0.35rem;
  display: flex; gap: 0.6rem; flex-wrap: wrap;
}
.admin-tile-sub b { color: #d8dde3; font-weight: 600; }
.admin-tile-link {
  margin-top: 0.55rem; font-size: 0.72rem; color: #8c7bff;
  font-weight: 600; letter-spacing: 0.02em;
}

/* Step 3D — Primary Threat Panel (sits above the tile grid) */
.admin-primary-threat {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.95rem 1.1rem; margin: 0 0 1rem;
  border-radius: 8px;
  background: linear-gradient(180deg, #1a141f 0%, #15121b 100%);
  border-left: 4px solid #ff5252; border-top: 1px solid #2a1f6b;
  border-right: 1px solid #2a1f6b; border-bottom: 1px solid #2a1f6b;
}
.admin-primary-threat.is-critical { border-left-color: #ff1744; }
.admin-primary-threat.is-high     { border-left-color: #ff8a00; }
.admin-primary-threat.is-clear    {
  border-left-color: #2e7d32;
  background: linear-gradient(180deg, #131a14 0%, #0f1410 100%);
}
/* Step 3E — feedback states for Apply defense */
.admin-primary-threat.is-working {
  opacity: 0.65; pointer-events: none;
  transition: opacity 180ms ease-out;
}
.admin-primary-threat.is-resolved {
  border-left-color: #2e7d32;
  background: linear-gradient(180deg, #14201a 0%, #0f1814 100%);
  transition: background 280ms ease-out, border-color 280ms ease-out;
}
.admin-primary-threat.is-resolved .admin-primary-threat-sev {
  background: #2e7d32;
}
.admin-primary-threat.is-resolved .admin-primary-threat-title::before {
  content: "✓ ";
  color: #66bb6a;
}
.admin-primary-threat-actions .admin-modal-btn[disabled],
.admin-primary-threat-actions .admin-modal-btn.is-disabled {
  opacity: 0.55; cursor: not-allowed;
  pointer-events: none;
}
/* Step 3F — Multi-Action Decision Surface popover */
.admin-primary-threat-defend {
  position: relative; display: inline-block;
}
.admin-primary-threat-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  z-index: 40; min-width: 280px; max-width: 340px;
  background: #1a1430; color: #f5f3ff;
  border: 1px solid #3a2f7b;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 0.35rem; display: flex; flex-direction: column;
  gap: 0.15rem;
}
.admin-primary-threat-menu[hidden] { display: none; }
.admin-primary-threat-menu-item {
  background: transparent; border: 1px solid transparent;
  color: inherit; text-align: left; cursor: pointer;
  padding: 0.55rem 0.65rem; border-radius: 7px;
  display: flex; flex-direction: column; gap: 0.15rem;
  font: inherit;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.admin-primary-threat-menu-item:hover:not(:disabled),
.admin-primary-threat-menu-item:focus-visible:not(:disabled) {
  background: #25195a; border-color: #5a47b8; outline: none;
}
.admin-primary-threat-menu-item .defense-label {
  font-weight: 600; font-size: 0.86rem;
}
.admin-primary-threat-menu-item .defense-desc {
  font-size: 0.74rem; color: #b9b1d8; line-height: 1.3;
}
.admin-primary-threat-menu-item.is-disabled,
.admin-primary-threat-menu-item:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.admin-primary-threat-menu-item .defense-pill {
  display: inline-block; margin-left: 0.4rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 999px;
  background: #3a2f7b; color: #d6cffb;
  text-transform: uppercase;
}
.admin-primary-threat-body { flex: 1 1 320px; min-width: 0; }
.admin-primary-threat-row {
  display: flex; align-items: center; gap: 0.55rem;
  flex-wrap: wrap; font-size: 0.74rem; margin-bottom: 0.3rem;
}
.admin-primary-threat-sev {
  display: inline-block; padding: 0.12rem 0.5rem; border-radius: 4px;
  background: #ff1744; color: #fff;
  font-weight: 700; letter-spacing: 0.06em;
}
.admin-primary-threat.is-high .admin-primary-threat-sev { background: #ff8a00; }
.admin-primary-threat-asset { color: #c7ccd6; font-weight: 600; }
.admin-primary-threat-endpoint {
  color: #8c93a3; font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.72rem; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.admin-primary-threat-proof {
  display: inline-block; padding: 0.12rem 0.45rem; border-radius: 4px;
  background: #1f2a44; color: #8cb4ff;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em;
}
.admin-primary-threat-title {
  font-size: 1.05rem; font-weight: 600; color: #f3f4f8;
  margin: 0.1rem 0 0.2rem;
}
.admin-primary-threat-sub { font-size: 0.82rem; color: #aab0bc; line-height: 1.4; }
.admin-primary-threat-actions {
  display: flex; gap: 0.5rem; align-items: center;
  flex-shrink: 0;
}
.admin-primary-threat-actions .admin-modal-btn.is-primary {
  background: #5b4bd0; color: #fff; border-color: #5b4bd0;
}
.admin-primary-threat-actions .admin-modal-btn.is-primary:hover {
  background: #6e5dde; border-color: #6e5dde;
}

/* Step 3D — Action Required badge in the dashboard header */
.admin-action-required {
  display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px;
  background: #ff1744; color: #fff;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(255, 23, 68, 0.6);
  animation: admin-action-required-pulse 2s ease-out infinite;
}
@keyframes admin-action-required-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 23, 68, 0.55); }
  70%  { box-shadow: 0 0 0 0.5rem rgba(255, 23, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 23, 68, 0); }
}

/* Step 3D — extra context line under the tile breakdown */
.admin-tile-context {
  font-size: 0.72rem; color: #b6bcc7; margin-top: 0.25rem;
  line-height: 1.35;
}
.admin-tile-context b { color: #e2e6ec; font-weight: 600; }

/* Users management table */
.admin-users-toolbar {
  display: flex; gap: 0.6rem; align-items: center;
  margin-bottom: 0.75rem; flex-wrap: wrap;
}
.admin-users-toolbar input[type="search"] {
  background: #11141a; color: #e8ebef;
  border: 1px solid #262c36; border-radius: 5px;
  padding: 0.4rem 0.6rem; font-size: 0.85rem; min-width: 220px;
}
.admin-users-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
  background: #12151c; border: 1px solid #232830; border-radius: 6px;
  overflow: hidden;
}
.admin-users-table th {
  text-align: left; padding: 0.55rem 0.7rem;
  background: #1a1f27; color: #b6bdc9;
  font-weight: 600; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.06em; border-bottom: 1px solid #232830;
}
.admin-users-table td {
  padding: 0.55rem 0.7rem; border-bottom: 1px solid #1c2128;
  color: #d8dde3;
}
.admin-users-table tr:last-child td { border-bottom: 0; }
.admin-users-table tr:hover td { background: #161b23; }
.admin-role-pill {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid currentColor;
}
.admin-role-pill.role-super_admin { color: #b9adff; }
.admin-role-pill.role-admin       { color: #ffb86b; }
.admin-role-pill.role-analyst     { color: #7ad7ff; }
.admin-role-pill.role-viewer      { color: #9aa0a6; }
.admin-verified-yes { color: #6cd99a; font-weight: 600; }
.admin-verified-no  { color: #ff8a80; font-weight: 600; }
.admin-users-action-btn {
  appearance: none; background: #1f2632; color: #e8ebef;
  border: 1px solid #2e3644; border-radius: 4px;
  padding: 0.25rem 0.6rem; font-size: 0.75rem; cursor: pointer;
}
.admin-users-action-btn:hover { background: #2a3344; border-color: #5b4bd0; }

/* Role-change dialog + audit panel */
.admin-modal-backdrop {
  position: fixed; inset: 0; background: rgba(8,10,14,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
.admin-modal {
  width: min(560px, calc(100% - 2rem));
  background: #14171c; border: 1px solid #2a3242; border-radius: 8px;
  padding: 1.1rem 1.25rem; color: #e8ebef;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.55);
}
.admin-modal h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.admin-modal-sub { color: #9aa0a6; font-size: 0.8rem; margin: 0 0 0.85rem; }
.admin-modal label { font-size: 0.78rem; color: #b6bdc9; display:block; margin: 0.4rem 0 0.2rem; }
.admin-modal select, .admin-modal input {
  width: 100%; background: #11141a; color: #e8ebef;
  border: 1px solid #262c36; border-radius: 5px;
  padding: 0.4rem 0.55rem; font-size: 0.85rem;
}
.admin-modal-actions {
  margin-top: 0.95rem; display: flex; justify-content: flex-end; gap: 0.5rem;
}
.admin-modal-btn {
  appearance: none; border: 1px solid #2e3644; background: #1f2632;
  color: #e8ebef; border-radius: 5px; padding: 0.45rem 0.85rem;
  font-size: 0.82rem; cursor: pointer; font-weight: 600;
}
.admin-modal-btn.is-primary {
  background: #5b4bd0; border-color: #6e5dde; color: #fff;
}
.admin-modal-btn:hover { filter: brightness(1.08); }
.admin-audit-panel {
  margin-top: 1rem; max-height: 220px; overflow-y: auto;
  background: #11141a; border: 1px solid #232830; border-radius: 5px;
  padding: 0.5rem 0.6rem;
}
.admin-audit-row {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 0.5rem; padding: 0.3rem 0;
  border-bottom: 1px dashed #1c2128; font-size: 0.78rem;
}
.admin-audit-row:last-child { border-bottom: 0; }
.admin-audit-time { color: #8c93a3; font-variant-numeric: tabular-nums; }
.admin-audit-text { color: #d8dde3; }
.admin-audit-text b { color: #b9adff; }
.admin-audit-empty { color: #6b7280; font-size: 0.78rem; padding: 0.4rem; }
.admin-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem; margin-bottom: 1.25rem;
}
.admin-kpi {
  background: #14171c; border: 1px solid #232830; border-radius: 6px;
  padding: 0.85rem 1rem;
}
.admin-kpi-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6b7280;
}
.admin-kpi-value {
  font-size: 1.6rem; font-weight: 700; color: #f0f2f5; margin-top: 0.25rem;
}
.admin-kpi-sub { font-size: 0.74rem; color: #9aa0a6; margin-top: 0.15rem; }
.admin-card {
  background: #14171c; border: 1px solid #232830; border-radius: 6px;
  padding: 1rem; margin-bottom: 1rem;
}
.admin-card h3 {
  margin: 0 0 0.6rem; font-size: 0.95rem; color: #f0f2f5;
}
.admin-scans-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  background: #14171c; border: 1px solid #232830; border-radius: 6px;
  padding: 0.7rem 0.85rem; margin-bottom: 0.85rem;
  position: sticky; top: 0; z-index: 5;
}
.admin-scans-toolbar select,
.admin-scans-toolbar input {
  background: #1b1f26; border: 1px solid #2a3038; color: #d8dde3;
  border-radius: 4px; padding: 0.3rem 0.55rem; font-size: 0.8rem;
}
.admin-scans-table {
  width: 100%; border-collapse: collapse; font-size: 0.84rem;
  background: #14171c; border: 1px solid #232830; border-radius: 6px;
  overflow: hidden;
}
.admin-scans-table th {
  text-align: left; padding: 0.55rem 0.7rem; font-size: 0.74rem;
  color: #9aa0a6; text-transform: uppercase; letter-spacing: 0.05em;
  background: #181c22; border-bottom: 1px solid #232830;
}
.admin-scans-table td {
  padding: 0.55rem 0.7rem; border-bottom: 1px solid #1d2128; color: #d8dde3;
}
.admin-scans-table tr:hover td { background: #181c22; }
.admin-scans-pager {
  display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end;
  padding-top: 0.75rem; font-size: 0.8rem; color: #9aa0a6;
}
.admin-pill {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; background: #1d2128; color: #9aa0a6;
}
.admin-pill.is-ok { color: #9ec79e; background: #1a2620; }
.admin-pill.is-warn { color: #d6b97a; background: #2a2418; }
.admin-pill.is-bad { color: #d68a8a; background: #2a1d1d; }
.admin-pill.is-info { color: #9ab8d6; background: #182230; }

/* Phase 4 polish: page header, empty state, search dropdown, bulk bar */
.admin-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.75rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid #1d2128;
}
.admin-page-header h2 { margin: 0; font-size: 1.05rem; color: #f0f2f5; }
.admin-page-header .admin-page-subtitle {
  color: #9aa0a6; font-size: 0.78rem; margin-top: 0.2rem;
}
.admin-page-header .admin-page-actions { display: flex; gap: 0.4rem; }
.admin-empty {
  background: #14171c; border: 1px dashed #2a3038; border-radius: 6px;
  padding: 1.5rem; text-align: center; color: #9aa0a6;
}
.admin-empty strong { color: #d8dde3; display: block; margin-bottom: 0.3rem; }
.admin-bulk-bar {
  display: flex; align-items: center; gap: 0.6rem;
  background: #14171c; border: 1px solid #232830; border-radius: 6px;
  padding: 0.4rem 0.7rem; margin-bottom: 0.6rem; font-size: 0.8rem;
  color: #9aa0a6;
}
.admin-topbar-search-results {
  position: absolute; top: calc(100% + 4px); right: 0;
  width: 360px; max-height: 360px; overflow-y: auto;
  background: #14171c; border: 1px solid #2a3038; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45); z-index: 30;
}
.admin-search-result {
  padding: 0.45rem 0.7rem; cursor: pointer; font-size: 0.82rem;
  color: #d8dde3; border-bottom: 1px solid #1d2128;
}
.admin-search-result:hover, .admin-search-result.is-active { background: #232830; }
.admin-search-result-kind {
  font-size: 0.7rem; color: #6b7280; text-transform: uppercase;
  letter-spacing: 0.05em; margin-right: 0.4rem;
}
.admin-search-empty { padding: 0.6rem 0.8rem; color: #6b7280; font-size: 0.8rem; }
.admin-nav-link.is-active {
  background: #232830; color: #f0f2f5;
  border-left: 2px solid #4a8acb; padding-left: calc(0.6rem - 2px);
}

@media (max-width: 760px) {
  #admin-shell { grid-template-columns: 56px 1fr; }
  .admin-sidebar-brand, .admin-nav-group, .admin-nav-link { font-size: 0.72rem; }
  .admin-nav-link { padding: 0.4rem 0.5rem; }
  .admin-topbar-search { min-width: 120px; }
}

/* ========================================================================
   Phase 8 — Calm theme global polish (admin shell only).
   Activated by `body.theme-calm` (set on <body> in index.html). The share
   page intentionally keeps the warm "paper" palette so customer
   deliverables stay visually distinct, and @media print rules below
   restore high-contrast paper for printable reports.
   ======================================================================== */
body.theme-calm a { color: #9bc2e6; }
body.theme-calm a:hover { color: #c5dcef; }
body.theme-calm .muted { color: var(--muted); }
body.theme-calm .eyebrow { color: var(--muted); }

body.theme-calm .card,
body.theme-calm .hero-panel,
body.theme-calm .artifact {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}
body.theme-calm .hero-panel { background: var(--surface-soft); }
body.theme-calm .hero-panel ul,
body.theme-calm .hero-panel-title { color: var(--muted); }

body.theme-calm input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.theme-calm select,
body.theme-calm textarea {
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
body.theme-calm input::placeholder,
body.theme-calm textarea::placeholder { color: var(--muted); }

body.theme-calm table { color: var(--text); }
body.theme-calm th { color: var(--muted); border-bottom-color: var(--border); }
body.theme-calm td { border-color: var(--border); }
body.theme-calm tbody tr:hover { background: rgba(74, 130, 189, 0.08); }

body.theme-calm .empty-state {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-soft);
}

/* Buttons keep their existing shape but pick up calm primary/border. */
body.theme-calm button { background: var(--brand); color: #fff; }
body.theme-calm button:hover:not(:disabled) { background: var(--brand-deep); }
body.theme-calm .btn-ghost,
body.theme-calm button.secondary,
body.theme-calm button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
body.theme-calm .btn-ghost:hover,
body.theme-calm button.secondary:hover,
body.theme-calm button.ghost:hover { background: rgba(74, 130, 189, 0.12); }

/* Audience switcher already declared above — make sure the calm theme
   gives it readable contrast on dark backgrounds. */
body.theme-calm .audience-switcher {
  background: var(--surface-strong);
  border-color: var(--border-strong);
}
body.theme-calm .audience-switcher button { color: var(--text-soft); }
body.theme-calm .audience-switcher button.is-active {
  background: var(--brand);
  color: #fff;
}

/* Coverage-limited audience note — recolor for the dark surface so it
   stays readable but doesn't shout. */
body.theme-calm .audience-coverage-note {
  background: rgba(214, 164, 85, 0.10) !important;
  border-color: rgba(214, 164, 85, 0.35) !important;
  color: #ead7a6 !important;
}
body.theme-calm .audience-coverage-note a { color: #ead7a6 !important; }

/* Restore warm paper for any printable report surface so PDFs stay
   high-contrast and readable on paper, regardless of the calm shell. */
@media print {
  body.theme-calm,
  body.theme-calm .card,
  body.theme-calm .artifact {
    background: #ffffff !important;
    color: #1a1f2e !important;
    box-shadow: none !important;
  }
  body.theme-calm a { color: #1f4a7a !important; }
}

/* Wave 15 — intelligence panel */
.w15-panel{margin:24px 0;padding:20px;border:1px solid #2a3450;
  border-radius:12px;background:#0e1626;color:#dbe5f5}
.w15-panel h3{margin:0 0 16px;font-size:16px;color:#fff}
.w15-section{margin:14px 0}
.w15-h{margin:0 0 6px;font-size:13px;color:#8aa0c8;
  text-transform:uppercase;letter-spacing:.04em}
.w15-empty{color:#6b7a99;font-size:13px}
.w15-card{padding:10px 12px;background:#16203a;border-radius:8px}
.w15-summary{font-weight:600;color:#fff}
.w15-score{font-size:12px;color:#8aa0c8;margin-top:4px}
.w15-list{margin:6px 0;padding-left:20px;font-size:13px}
.w15-list li{margin:2px 0}
.w15-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.w15-time{color:#6b7a99;font-size:11px}
.w15-dim{color:#6b7a99}
.w15-meta{color:#8aa0c8;font-size:12px;margin-bottom:6px}
.w15-narrative{margin:6px 0;line-height:1.5}

/* ──────────────────────────────────────────────────────────────
   Step (post-3F) — Marketing landing: comparison + pricing
   Lives alongside the existing .mkt-* tokens; reuses --brand,
   --surface, --text, --muted, --border so a theme swap (light /
   dark) carries over without per-section overrides.
   ────────────────────────────────────────────────────────────── */

/* Why ScanForgeX — comparison */
.mkt-compare {
  padding: 4rem 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
.mkt-compare-grid {
  margin-top: 2rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.mkt-compare-col,
.mkt-compare-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(3, 1fr);
  gap: 0;
}
.mkt-compare-row + .mkt-compare-row,
.mkt-compare-col + .mkt-compare-row {
  border-top: 1px solid var(--border);
}
.mkt-compare-cell {
  padding: 0.95rem 1.1rem;
  font-size: 0.92rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: 1px solid var(--border);
}
.mkt-compare-cell:first-child {
  border-left: 0;
}
.mkt-compare-cell--feature {
  justify-content: flex-start;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  background: rgba(0, 0, 0, 0.02);
}
.mkt-compare-col--head .mkt-compare-cell {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.04);
}
.mkt-compare-cell--us {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.mkt-compare-col--head .mkt-compare-cell--us {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.mkt-compare-check {
  color: #2e7d32;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.mkt-compare-x {
  color: var(--muted);
  font-weight: 600;
}
.mkt-compare-partial {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Pricing */
.mkt-pricing {
  padding: 4rem 1.25rem 5rem;
  max-width: 1280px;
  margin: 0 auto;
}
.mkt-pricing-grid {
  margin-top: 2.25rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
/* 5-column variant for the dedicated /pricing page (Demo Scan +
   Starter + Growth + Pro + Command). Reflows to 3-up at large
   tablet, 2-up at small tablet, 1-up at phone. */
.mkt-pricing-grid--five {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1280px) {
  .mkt-pricing-grid--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .mkt-pricing-grid--five { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .mkt-pricing-grid--five { grid-template-columns: 1fr; }
}

/* Compact pricing CTA strip on the homepage. Replaces the full
   pricing grid; routes to /pricing for the full comparison. Kept
   intentionally short so it doesn't dilute the hero/value sections
   above it. */
.mkt-pricing-strip {
  max-width: 1080px;
  margin: 2rem auto 3rem;
  padding: 0 1.25rem;
}
.mkt-pricing-strip-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.75rem;
  background: var(--surface-strong, #1a2438);
  border: 1px solid var(--border-strong, rgba(160,190,220,0.22));
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.mkt-pricing-strip-text { display: flex; flex-direction: column; gap: 0.35rem; }
.mkt-pricing-strip-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-display, inherit);
}
.mkt-pricing-strip-sub {
  margin: 0;
  color: var(--text-soft, var(--muted));
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 540px;
}
.mkt-pricing-strip-cta {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .mkt-pricing-strip-inner {
    flex-direction: column; align-items: flex-start;
    padding: 1.25rem;
  }
  .mkt-pricing-strip-cta { width: 100%; text-align: center; }
}

/* Pricing-card extras for the dedicated page: audience line +
   "limits" sub-list (used by Demo Scan). */
.mkt-pricing-audience {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--text-soft, var(--muted));
  font-style: italic;
  line-height: 1.4;
}
.mkt-pricing-limits {
  list-style: none;
  padding: 0.75rem 0 0;
  margin: 0.5rem 0 0;
  border-top: 1px dashed var(--border, rgba(160,190,220,0.2));
  display: flex; flex-direction: column; gap: 0.4rem;
}
.mkt-pricing-limits li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}
.mkt-pricing-limits li::before {
  content: "—";
  position: absolute; left: 0; top: 0;
  color: var(--muted);
  font-weight: 700;
}
.mkt-pricing-card--demo {
  border-style: dashed;
}

/* Premium statement banner above the pricing grid. Centered,
   editorial — short eyebrow + display-weight body. Uses a soft
   gradient stripe so the page opens with a "this is a platform"
   feel rather than dropping straight into a plan grid. */
.mkt-pricing-statement {
  max-width: 1080px;
  margin: 1.5rem auto 0;
  padding: 0 1.25rem;
}
.mkt-pricing-statement-inner {
  position: relative;
  padding: 2rem 2.25rem;
  border-radius: 18px;
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--brand) 14%, var(--surface-strong, #1a2438)) 0%,
      var(--surface-strong, #1a2438) 60%);
  border: 1px solid var(--border-strong, rgba(160,190,220,0.22));
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  text-align: center;
  overflow: hidden;
}
.mkt-pricing-statement-inner::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--brand) 50%, transparent 100%);
  opacity: 0.65;
}
.mkt-pricing-statement-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.mkt-pricing-statement-body {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.45;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 720px) {
  .mkt-pricing-statement-inner { padding: 1.5rem 1.25rem; }
  .mkt-pricing-statement-body br { display: none; }
}

/* Card content blocks — "Who it's for", "What it includes", and
   "Unlocks at <next tier>". Each block has a small label and a
   short body so visitors can scan the page without reading every
   feature bullet. The "next" block is visually distinct (subtle
   gradient + brand-tinted left rule) so it reads as forward-looking
   guidance rather than a list of features they don't yet have. */
.mkt-pricing-block {
  display: flex; flex-direction: column; gap: 0.45rem;
}
.mkt-pricing-block-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft, var(--muted));
}
.mkt-pricing-block-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}
.mkt-pricing-block--for .mkt-pricing-block-body {
  color: var(--text-soft, var(--text));
}
.mkt-pricing-block--next {
  margin-top: 0.5rem;
  padding: 0.85rem 0.95rem;
  border-radius: 10px;
  border-left: 2px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.mkt-pricing-block--next .mkt-pricing-block-label {
  color: var(--brand);
}
.mkt-pricing-block--next .mkt-pricing-block-body {
  color: var(--text);
  font-size: 0.85rem;
}
/* Command (top tier) variant — amber accent matches the rest of
   the enterprise treatment so it doesn't look like an upsell. */
.mkt-pricing-card--enterprise .mkt-pricing-block--next {
  border-left-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 10%, transparent);
}
.mkt-pricing-card--enterprise .mkt-pricing-block--next .mkt-pricing-block-label {
  color: #f59e0b;
}
.mkt-pricing-block--top .mkt-pricing-block-label {
  letter-spacing: 0.08em;
}

/* Slightly tighter card padding on the dedicated page so the
   extra blocks (For / Includes / Unlocks at) don't push cards
   uncomfortably tall. */
.mkt-pricing-page .mkt-pricing-card {
  gap: 1.1rem;
  padding: 1.6rem 1.4rem 1.4rem;
}
.mkt-pricing-page .mkt-pricing-features { gap: 0.45rem; }
.mkt-pricing-page .mkt-pricing-features li { font-size: 0.86rem; }
.mkt-pricing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}
.mkt-pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
}
.mkt-pricing-card--featured {
  border-color: var(--brand);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--brand) 24%, transparent);
}
.mkt-pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.mkt-pricing-name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.mkt-pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.mkt-pricing-amount {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.mkt-pricing-period {
  font-size: 0.85rem;
  color: var(--muted);
}
.mkt-pricing-tagline {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.mkt-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.mkt-pricing-features li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.4;
}
.mkt-pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--brand);
  font-weight: 700;
}
.mkt-pricing-cta {
  width: 100%;
  margin-top: auto;
  font-weight: 600;
}
.mkt-pricing-fineprint {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Enterprise tier — "Command". Premium visual treatment: dark
   gradient surface, amber accent (vs brand blue used elsewhere),
   slightly elevated shadow so it reads as a tier above the SMB
   plans rather than a peer. */
.mkt-pricing-card--enterprise {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, #f59e0b 14%, var(--surface)) 0%,
      var(--surface) 55%);
  border-color: color-mix(in srgb, #f59e0b 55%, var(--border));
  box-shadow: 0 18px 44px color-mix(in srgb, #f59e0b 22%, transparent);
}
.mkt-pricing-card--enterprise:hover {
  box-shadow: 0 22px 52px color-mix(in srgb, #f59e0b 28%, transparent);
}
.mkt-pricing-badge--enterprise {
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
  color: #1a0f00;
  letter-spacing: 0.1em;
}
.mkt-pricing-name--enterprise {
  color: #f59e0b;
}
.mkt-pricing-price--custom {
  margin-top: 0.6rem;
}
.mkt-pricing-amount--custom {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f59e0b; /* fallback for browsers without background-clip:text */
}
.mkt-pricing-features--enterprise li::before {
  color: #f59e0b;
}
.mkt-pricing-cta--enterprise {
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
  border-color: transparent;
  color: #1a0f00;
}
.mkt-pricing-cta--enterprise:hover {
  filter: brightness(1.06);
}

/* Mobile responsive — comparison collapses to stacked rows,
   pricing reflows to 2-up at tablet and a single column on phones.
   The featured (Growth) card surfaces first on mobile; Command
   sits last so SMB visitors see the natural-fit tier first. */
@media (max-width: 1100px) {
  .mkt-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  .mkt-pricing-grid {
    grid-template-columns: 1fr;
  }
  .mkt-pricing-card--featured {
    order: -1;  /* surface the recommended tier first on mobile */
  }
  .mkt-pricing-card--enterprise {
    order: 1;
  }
}
@media (max-width: 720px) {
  .mkt-compare {
    padding: 3rem 0.75rem;
  }
  .mkt-compare-grid {
    border-radius: 10px;
  }
  .mkt-compare-col--head { display: none; }
  .mkt-compare-row {
    grid-template-columns: 1fr;
    padding: 0.75rem 0.25rem;
    gap: 0.25rem;
  }
  .mkt-compare-cell {
    border-left: 0;
    padding: 0.45rem 0.85rem;
    justify-content: space-between;
    text-align: left;
  }
  .mkt-compare-cell--feature {
    font-size: 0.95rem;
    background: transparent;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--border);
    justify-content: flex-start;
  }
  .mkt-compare-cell:not(.mkt-compare-cell--feature)::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mkt-compare-cell--us {
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    border-radius: 6px;
  }
}

/* === Marketing: 6-column comparison + Why-ScanForgeX-wins cards === */
.mkt-compare--wide .mkt-compare-grid--6col .mkt-compare-col,
.mkt-compare--wide .mkt-compare-grid--6col .mkt-compare-row {
  grid-template-columns: minmax(190px, 1.8fr) repeat(5, minmax(96px, 1fr));
}
.mkt-compare-partial {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--text);
  border: 1px solid var(--border);
}
.mkt-compare-check {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
}
.mkt-compare-x {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px dashed var(--border);
}

.mkt-pricing-actions {
  margin-top: 1.6rem;
}

.mkt-wins {
  max-width: 1100px;
  margin: 4rem auto 0;
  padding: 0 1.25rem;
}
.mkt-wins-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.mkt-wins-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
}
.mkt-wins-icon {
  color: var(--brand);
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}
.mkt-wins-title {
  font-size: 1rem;
  margin: 0 0 0.4rem 0;
  color: var(--text);
}
.mkt-wins-body {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 980px) {
  .mkt-wins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mkt-wins-grid { grid-template-columns: 1fr; }
  /* The 6-col table also collapses via the existing mobile rule
     for .mkt-compare-row (1fr stack). The data-label ::before
     already handles the per-cell labels. */
  .mkt-compare--wide .mkt-compare-grid--6col .mkt-compare-col,
  .mkt-compare--wide .mkt-compare-grid--6col .mkt-compare-row {
    grid-template-columns: 1fr;
  }
}

/* Hero alert banner — sits just under the CTA row. */
.mkt-alert-box {
  margin: 1.5rem auto 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  text-align: center;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
  color: var(--text);
}
.mkt-alert-box strong { font-size: 0.98rem; }
.mkt-alert-box span { font-size: 0.88rem; color: var(--muted); }

/* === Live Example (before / after scan) ============================ */
.mkt-live {
  max-width: 1100px;
  margin: 4rem auto 0;
  padding: 0 1.25rem;
}
.mkt-live-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1rem;
}
.mkt-live-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 260px;
}
.mkt-live-card--after {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.mkt-live-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.mkt-live-tag--muted {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
  border: 1px solid var(--border);
}
.mkt-live-tag--brand {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
}
.mkt-live-headline {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.mkt-live-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mkt-live-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text);
}
.mkt-live-row--empty { color: var(--muted); }
.mkt-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 60%, transparent);
  flex: 0 0 auto;
}
.mkt-live-pill {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.mkt-live-pill--high { background: #b91c1c; color: #fff; }
.mkt-live-pill--med  { background: #b45309; color: #fff; }
.mkt-live-pill--low  { background: #2563eb; color: #fff; }
.mkt-live-foot {
  margin-top: auto;
  font-size: 0.88rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}
.mkt-live-foot--muted { color: var(--muted); }
.mkt-live-foot--brand { color: var(--text); }
.mkt-live-arrow {
  align-self: center;
  font-size: 1.6rem;
  color: var(--muted);
  padding: 0 0.25rem;
}
@media (max-width: 860px) {
  .mkt-live-grid { grid-template-columns: 1fr; }
  .mkt-live-arrow { transform: rotate(90deg); justify-self: center; }
}

/* === Social proof line ============================================= */
.mkt-social-proof {
  max-width: 760px;
  margin: 1.5rem auto 0;
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}
.mkt-social-proof strong { color: var(--text); }

/* Risk framing line — sits just above the Live Example. */
.mkt-risk {
  max-width: 900px;
  margin: 4rem auto 0;
  padding: 1.4rem 1.5rem;
  text-align: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
}
.mkt-risk-title {
  margin: 0 0 0.35rem 0;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--text);
}
.mkt-risk-sub {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}