/* ── public.css — Customer-facing AI² TX PADE-POC pages ────────────────
   Loaded after style.css. Shares root color tokens (--tml-primary etc.)
   but overrides typography sizing for a roomier, less dense look than
   the internal Truth Engine UI.
   Phase 2.B.1 — base shell + dossier view + flat taxonomy list.
──────────────────────────────────────────────────────────────────────── */

/* POC (control plane) palette tokens — slate counterpart to the warm
   TML orange used for PADE pillars. Used everywhere a PROTECT /
   ORCHESTRATE / COMPLY pillar is rendered: coverage bars, explorer
   group headers, active filter chips. */
:root {
  --poc-primary:      #4A5568;
  --poc-primary-deep: #2D3748;
  --poc-primary-light:#718096;
  --poc-primary-bg:   #E2E8F0;
}

.public-body {
  background: var(--neutral-bg);
  color: var(--neutral-text-body);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

/* Override the dense base h-sizes for roomy customer pages */
.public-body h1 { font-size: 2.4rem; line-height: 1.15; }
.public-body h2 { font-size: 1.65rem; border-bottom: none; padding-bottom: 0; }
.public-body h3 { font-size: 1.2rem; }
.public-body h4 { font-size: 1.0rem; }

.public-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.public-header {
  background: var(--neutral-bg-card);
  border-bottom: 4px solid var(--tml-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.public-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.public-logos {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}
.public-logo { height: 72px; width: auto; }
.public-logo-ai2 { height: 78px; width: auto; }  /* constrain height only — native ratio kept */
.public-logo-tml { height: 48px; width: auto; }  /* readable wordmark; one dimension only — no forced ratio */
.public-logo-divider {
  width: 1px;
  height: 50px;
  background: var(--border);
}
/* LEFT zone: AI² logo + eyebrow/headline as one uninterrupted brand lockup. */
.public-brand-lockup {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}
/* MID-RIGHT zone: contributor lockup, detached from AI² and pushed right.
   align-items:center keeps the TML logo at its native ratio (a column flex would
   otherwise stretch it to the role-label width); margin-right reserves space for the
   fixed profile-pin cluster (ADMIN pill + avatar) that floats far-right. */
.public-contributor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  margin-right: 7rem;
  flex-shrink: 0;
}
.public-contributor-role {
  font-family: var(--font-b);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A857C;
  max-width: 92px;        /* wrap "AI Research Contributor" to two lines, no <br> in data */
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
.public-brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.public-brand-eyebrow {
  font-family: var(--font-b);
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: #C2410C;
  text-transform: uppercase;
}
.public-brand-title {
  font-family: var(--font-h);
  font-size: 2.1rem;
  margin: 0;
  color: #2B2A26;
  font-weight: 600;
  line-height: 1.1;
}
.public-brand-byline {
  font-family: var(--font-b);
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.public-footer {
  background: #2a2a2a;
  color: #d4d4d0;
  margin-top: 4rem;
  padding: 2rem 0;
}
.public-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  font-family: var(--font-b);
  font-size: 0.85rem;
}
.public-footer-logo { height: 36px; width: auto; opacity: 0.85; }
.public-footer-text { letter-spacing: 0.04em; }

/* ── Buttons (large, generous) ──────────────────────────────────────── */
.public-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  background: var(--tml-primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.public-btn:hover { background: var(--tml-deep); color: #fff; }
.public-btn-ghost {
  background: transparent;
  color: var(--tml-primary);
  border: 2px solid var(--tml-primary);
}
.public-btn-ghost:hover {
  background: var(--tml-primary);
  color: #ffffff;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.public-card {
  background: var(--neutral-bg-card);
  border: 1px solid var(--neutral-border);
  border-radius: 6px;
  padding: 1.25rem 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.public-breadcrumb {
  font-family: var(--font-b);
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
}
.public-breadcrumb a { color: var(--muted); text-decoration: none; }
.public-breadcrumb a:hover { color: var(--tml-primary); }
.public-breadcrumb .sep { margin: 0 0.5rem; opacity: 0.5; }
.public-breadcrumb .current { color: var(--tml-primary); font-weight: 600; }

/* Phase 2.B.2.combo.4 — Task 4: dossier breadcrumb (replaces the old
   Home / PILLAR / Category / UCID format with linked taxonomy filter
   navigation). */
.dossier-breadcrumb {
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--neutral-text-muted);
  font-family: var(--font-b);
}
.dossier-breadcrumb a {
  color: var(--neutral-text-muted);
  text-decoration: none;
  transition: color 150ms ease;
}
.dossier-breadcrumb a:hover {
  color: var(--tml-primary);
  text-decoration: underline;
}
.dossier-breadcrumb .crumb-sep {
  margin: 0 0.45rem;
  color: var(--neutral-text-muted);
  opacity: 0.55;
}
.dossier-breadcrumb .crumb-current {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-m);
}

/* ── Dossier title block ────────────────────────────────────────────── */
.dossier-title-block {
  background: var(--neutral-bg-card);
  border-left: 6px solid var(--tml-primary);
  padding: 2rem 2.5rem;
  margin-bottom: 2rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.dossier-ucid {
  font-family: var(--font-b);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--tml-primary);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.dossier-title {
  font-family: var(--font-h);
  font-size: 2.4rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 0.4rem 0;
  line-height: 1.15;
}
.dossier-pillar-line {
  font-family: var(--font-b);
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.dossier-pillar-line strong { color: var(--tml-primary); font-weight: 700; }

.dossier-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: #f4f1ec;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-b);
  font-size: 0.85rem;
  font-weight: 500;
}
.stat-pill .stat-label {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stat-pill .stat-value {
  color: #1a1a1a;
  font-weight: 700;
  font-size: 1rem;
}
.stat-pill.stat-integrity .stat-value { color: var(--tml-primary); }
.stat-pill.stat-integrity {
  background: var(--neutral-bg-card);
  border-color: var(--tml-primary);
  border-width: 2px;
}

/* ── Detail sections (Phase 2.B.2.combo.5 — Task 6 compression) ─── */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 2rem;
}
.detail-grid .detail-full { grid-column: 1 / -1; }
.detail-block h3 {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--tml-primary);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.detail-block p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--neutral-text-body);
}

/* Inputs → Outputs flow */
.io-flow {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.io-flow .io-box {
  background: #f7f4ee;
  border: 1px solid var(--border);
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-size: 0.92rem;
}
.io-flow .io-arrow {
  color: var(--tml-primary);
  font-weight: 700;
  font-size: 1.4rem;
}

/* ── Executive summary ──────────────────────────────────────────────── */
.exec-summary-card {
  background: var(--neutral-bg-card);
  border: 1px solid var(--neutral-border);
  border-left: 4px solid var(--tml-primary);
}
.exec-summary-card h2 {
  font-family: var(--font-h);
  color: var(--tml-primary);
  margin-top: 0;
  font-weight: 600;
}

/* Unified dossier section title (Phase 2.B.2.combo.5 — Task 5)
   Executive Summary, Research Integrity Scorecard, Table of Contents,
   and Deep-Research SME Input all render with identical h2 treatment
   so the customer sees a consistent visual hierarchy. */
.dossier-section-title,
.public-card h2.dossier-section-title {
  font-family: var(--font-h);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tml-primary);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 0.9rem 0;
  padding: 0;
  border: none;
  line-height: 1.2;
}
.exec-summary-body {
  white-space: pre-wrap;
  font-family: var(--font-b);
  font-size: 0.98rem;
  line-height: 1.7;
  color: #2a2a2a;
}

/* ── SME Input section ──────────────────────────────────────────────── */
.sme-section h2 {
  font-family: var(--font-h);
  color: var(--tml-primary);
  margin-bottom: 0.5rem;
}
.sme-intro {
  background: #f4f1ec;
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
  font-style: italic;
  color: #3a3a3a;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--tml-primary);
}
.sme-card {
  background: var(--neutral-bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.sme-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.sme-severity {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 3px;
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.sme-severity.sev-CRITICAL { background: #b22600; color: #fff; }
.sme-severity.sev-HIGH     { background: #b64926; color: #fff; }
.sme-severity.sev-MEDIUM   { background: #c98a2e; color: #fff; }
.sme-severity.sev-LOW      { background: #6b6b68; color: #fff; }
.sme-topic {
  font-family: var(--font-h);
  font-size: 1.1rem;
  color: #1a1a1a;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.sme-card dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
  font-size: 0.92rem;
}
.sme-card dt {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 0.15rem;
}
.sme-card dd { margin: 0; color: #2a2a2a; }

/* ── Pending state ──────────────────────────────────────────────────── */
.pending-banner {
  background: #f4f1ec;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  text-align: center;
  margin: 2rem 0;
}
.pending-banner h2 {
  font-family: var(--font-h);
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.pending-banner p {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
}

/* ── Taxonomy index page ────────────────────────────────────────────── */
.taxonomy-intro {
  margin-bottom: 2rem;
}
.taxonomy-intro h2 {
  font-family: var(--font-h);
  color: var(--tml-primary);
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.taxonomy-intro p {
  font-size: 1.02rem;
  color: #2a2a2a;
  margin: 0 0 0.85rem 0;
}

.coverage-card { padding: 1.5rem 2rem; }
.coverage-summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
/* Reset summary button look so it visually matches the old div */
button.coverage-summary {
  background: transparent;
  border: none;
  padding: 0.25rem 0.5rem;
  margin-left: -0.5rem;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  width: auto;
  transition: background 0.15s ease;
}
button.coverage-summary:hover {
  background: var(--neutral-hover);
}
.coverage-action-hint {
  font-family: var(--font-b);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tml-primary);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s ease;
  margin-left: 0.5rem;
}
button.coverage-summary:hover .coverage-action-hint { opacity: 1; }
.coverage-headline {
  font-family: var(--font-h);
  font-size: 1.6rem;
  color: var(--tml-primary);
  font-weight: 600;
}
.coverage-sub {
  font-family: var(--font-b);
  color: var(--muted);
  font-size: 0.9rem;
}
.coverage-bar {
  height: 14px;
  background: var(--neutral-bg-alt);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.coverage-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tml-primary), var(--tml-accent));
  transition: width 0.5s ease;
}

.pillar-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
}
.pillar-bar {
  background: var(--neutral-bg-alt);
  border: 1px solid var(--neutral-border);
  border-radius: 4px;
  padding: 0.7rem 0.95rem;
}
/* Clickable pillar bar (button reset + hover lift) */
button.pillar-bar {
  position: relative;
  text-align: left;
  cursor: pointer;
  font: inherit;
  width: 100%;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
button.pillar-bar:hover {
  border-color: var(--tml-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(182, 73, 38, 0.12);
}
.pillar-bar-arrow {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  font-size: 0.95rem;
  color: var(--tml-primary);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
button.pillar-bar:hover .pillar-bar-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* "Show all N" link below the pillar bars */
.coverage-allrow {
  margin-top: 1rem;
  text-align: right;
}
.coverage-allbtn {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 0.78rem;
  background: transparent;
  border: none;
  color: var(--tml-primary);
  cursor: pointer;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem;
  border-radius: 3px;
}
.coverage-allbtn:hover {
  background: var(--tml-primary);
  color: #ffffff;
}
.pillar-bar-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.pillar-bar-name {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--tml-primary);
  text-transform: uppercase;
}
.pillar-bar-count {
  font-family: var(--font-b);
  font-size: 0.78rem;
  color: var(--muted);
}
.pillar-bar-track {
  height: 6px;
  background: var(--neutral-bg-alt);
  border-radius: 3px;
  overflow: hidden;
}
.pillar-bar-fill {
  height: 100%;
  background: var(--tml-primary);
}

/* Use case list (temporary, replaced in 2.B.2) */
.pillar-section {
  margin-top: 2.25rem;
}
.pillar-section h2 {
  font-family: var(--font-h);
  color: var(--tml-primary);
  font-weight: 600;
  font-size: 1.45rem;
  border-bottom: 2px solid var(--tml-primary);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}
.pillar-section .pillar-tag {
  display: inline-block;
  background: #f4f1ec;
  color: var(--muted);
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.uc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 0.6rem;
}
.uc-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.95rem;
  background: var(--neutral-bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.uc-item.researched {
  border-left: 4px solid var(--tml-primary);
}
.uc-item.researched:hover {
  border-color: var(--tml-primary);
  transform: translateX(2px);
}
.uc-item.pending {
  border-left: 4px solid #d4d4d0;
  cursor: default;
  opacity: 0.85;
}
.uc-item-id {
  font-family: var(--font-m);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tml-primary);
  background: var(--neutral-bg-alt);
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 60px;
  text-align: center;
}
.uc-item.pending .uc-item-id {
  color: var(--muted);
  background: var(--neutral-bg-alt);
}
.uc-item-body { flex: 1; min-width: 0; }
.uc-item-name {
  font-family: var(--font-b);
  font-size: 0.92rem;
  color: #1a1a1a;
  font-weight: 500;
  line-height: 1.25;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uc-item-cat {
  font-family: var(--font-b);
  font-size: 0.74rem;
  color: var(--muted);
}
.uc-status-badge {
  font-family: var(--font-b);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.uc-status-badge.researched {
  background: var(--tml-primary);
  color: #fff;
}
.uc-status-badge.pending {
  background: #e8e4dc;
  color: var(--muted);
}

/* Partner logos */
.partner-logo {
  height: 60px; width: auto; max-width: 140px; object-fit: contain;
  margin-bottom: 1rem;
}
.partner-coming-soon .partner-logo {
  filter: grayscale(100%); opacity: 0.5;
}
.partner-page-logo {
  height: 48px; width: auto; margin-right: 1rem;
}

/* Dossier purchase banner */
.dossier-purchase-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; margin: 1.5rem 0;
  background: rgba(182, 73, 38, 0.06);
  border: 1px solid var(--tml-primary); border-radius: 8px;
}
.dossier-purchase-text {
  font-family: var(--font-h); font-size: 0.95rem; font-weight: 600; color: var(--tml-primary);
}
.dossier-purchase-btn {
  display: inline-block; padding: 0.55rem 1.15rem;
  background: var(--tml-primary); color: white; border-radius: 6px;
  font-family: var(--font-h); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.05em; text-decoration: none;
}
.dossier-purchase-btn:hover { background: var(--tml-deep); }

/* Purchase button (marketplace mode) */
.uc-purchase-btn {
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--tml-primary);
  color: #fff;
  text-decoration: none;
  margin-left: 0.5rem;
  transition: background 150ms;
}
.uc-purchase-btn:hover {
  background: var(--tml-deep, #B22600);
}

/* ── Phase 2.B.2a — Tabs / Universe / Explorer / Popover ───────────── */

/* Tab navigation */
.view-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin: 2rem 0 1.5rem;
}
.tab-btn {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  position: relative;
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tab-btn:hover { color: var(--tml-primary); }
.tab-btn.active {
  color: var(--tml-primary);
  border-bottom-color: var(--tml-primary);
}

.view-pane {
  display: none;
  animation: fadeIn 0.25s ease;
}
.view-pane.active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Universe View — dual sunbursts */
.universe-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1rem 0 1.5rem;
  /* Clip the side panel slide-out so the animation doesn't push past
     the wrapper edge and create a horizontal scrollbar. */
  overflow: hidden;
}
.sunburst-container {
  position: relative;
  background: var(--neutral-bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem 1rem 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  text-align: center;
}
/* Always-visible reset CTA below each sunburst (replaces the
   absolute-positioned sunburst-reset-btn from Phase 2.B.2a.1a). */
.sunburst-reset-cta {
  display: block;
  margin: 1rem auto 0;
  padding: 0.6rem 1.5rem;
  background: transparent;
  color: var(--tml-primary);
  border: 2px solid var(--tml-primary);
  border-radius: 6px;
  font-family: var(--font-h);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.sunburst-reset-cta:hover {
  background: var(--tml-primary);
  color: #ffffff;
}
.sunburst-container[data-plane="poc"] .sunburst-reset-cta {
  color: var(--poc-primary);
  border-color: var(--poc-primary);
}
.sunburst-container[data-plane="poc"] .sunburst-reset-cta:hover {
  background: var(--poc-primary);
  color: #ffffff;
}
.sunburst-title {
  font-family: var(--font-h);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--tml-primary);
  margin-bottom: 0.2rem;
}
.sunburst-subtitle {
  font-family: var(--font-b);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.sunburst-chart {
  width: 100%;
  height: 550px;
}
.universe-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  margin: 0.75rem 0 0;
}

/* Phase 7.5.4B/12-PRE — .filter-bar / .filter-chip / .chip-* rules
   moved to static/filter_widget.css (canonical filter widget). */

/* Status pills (single-select) */
.filter-status-pills {
  display: inline-flex;
  background: var(--neutral-bg-card);
  border: 1px solid var(--neutral-border);
  border-radius: 4px;
  overflow: hidden;
}
.filter-status-pills .status-pill {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 0.78rem;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background 0.15s ease, color 0.15s ease;
}
.filter-status-pills .status-pill:last-child { border-right: none; }
.filter-status-pills .status-pill:hover { color: var(--tml-primary); }
.filter-status-pills .status-pill.active {
  background: var(--tml-primary);
  color: #ffffff;
}

/* Phase 7.5.4B/12-PRE — .filter-search / .clear-all-btn / .active-filters
   family moved to static/filter_widget.css (canonical filter widget). */

.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--neutral-bg-card);
  border: 1px solid var(--tml-primary);
  border-radius: 999px;
  font-family: var(--font-b);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tml-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.active-chip:hover {
  background: var(--tml-primary);
  color: #ffffff;
}
.active-chip-x {
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
}

/* Back-to-Universe row (only shown when filters came from a sunburst click) */
.back-to-universe-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0.5rem 0 0.85rem;
  padding: 0.7rem 1rem;
  background: #f4f1ec;
  border: 1px dashed var(--border);
  border-radius: 5px;
}
.back-to-universe-row[hidden] { display: none; }
.back-to-universe-btn {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--tml-primary);
  color: #ffffff;
  border: none;
  border-radius: 3px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  letter-spacing: 0.03em;
}
.back-to-universe-btn:hover { background: var(--tml-deep); }
.back-to-universe-hint {
  font-family: var(--font-b);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
}

/* Phase 7.5.4B/12-PRE — .filter-meta / .filter-count / .filter-spacer /
   .filter-divider moved to static/filter_widget.css. */
.link-action-public {
  background: none;
  border: none;
  color: var(--tml-primary);
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-action-public:hover { color: var(--tml-deep); }

/* Pillar groups (collapsible) */
.pillar-groups { display: flex; flex-direction: column; gap: 0.85rem; }
.pillar-group {
  background: var(--neutral-bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.pillar-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--neutral-bg-alt);
  border-bottom: 1px solid transparent;
  border-left: 3px solid var(--tml-primary);
  user-select: none;
}
.pillar-group > summary::-webkit-details-marker { display: none; }
.pillar-group[open] > summary { border-bottom-color: var(--border); }
.pillar-group .pillar-name {
  font-family: var(--font-b);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tml-primary);
}
.pillar-group .pillar-stats {
  font-family: var(--font-b);
  font-size: 0.8rem;
  color: var(--muted);
  flex: 1;
}
.pillar-group .expand-icon {
  color: var(--tml-primary);
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}
.pillar-group[open] .expand-icon { transform: rotate(180deg); }
.pillar-group .use-case-list {
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 0.55rem;
}

/* UCID hover popover */
.ucid-popover {
  position: absolute;
  z-index: 1000;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--neutral-bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--tml-primary);
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 1rem 1.15rem;
  font-family: var(--font-b);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #1a1a1a;
  pointer-events: auto;
}
.ucid-popover[hidden] { display: none; }
.ucid-popover .pop-id {
  font-family: var(--font-m);
  font-weight: 800;
  color: var(--tml-primary);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.2rem;
}
.ucid-popover .pop-title {
  font-family: var(--font-h);
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 0.3rem;
}
.ucid-popover .pop-pillar {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.ucid-popover .pop-pillar strong { color: var(--tml-primary); }
.ucid-popover .pop-section { margin-bottom: 0.55rem; }
.ucid-popover .pop-section-label {
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.1rem;
}
.ucid-popover .pop-section-value {
  font-size: 0.85rem;
  color: #2a2a2a;
}
.ucid-popover .pop-cta {
  display: inline-block;
  margin-top: 0.65rem;
  background: var(--tml-primary);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.5rem 0.95rem;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.ucid-popover .pop-cta:hover { background: var(--tml-deep); }
.ucid-popover .pop-pending {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  font-style: italic;
}

/* ── POC palette propagation (Phase 2.B.2a.1a) ─────────────────────── */
/* Coverage card — POC pillar bars use slate fill + slate hover ring */
button.pillar-bar[data-pillar="PROTECT"]     .pillar-bar-name,
button.pillar-bar[data-pillar="ORCHESTRATE"] .pillar-bar-name,
button.pillar-bar[data-pillar="COMPLY"]      .pillar-bar-name {
  color: var(--poc-primary);
}
button.pillar-bar[data-pillar="PROTECT"]     .pillar-bar-fill,
button.pillar-bar[data-pillar="ORCHESTRATE"] .pillar-bar-fill,
button.pillar-bar[data-pillar="COMPLY"]      .pillar-bar-fill {
  background: var(--poc-primary);
}
button.pillar-bar[data-pillar="PROTECT"]     .pillar-bar-arrow,
button.pillar-bar[data-pillar="ORCHESTRATE"] .pillar-bar-arrow,
button.pillar-bar[data-pillar="COMPLY"]      .pillar-bar-arrow {
  color: var(--poc-primary);
}
button.pillar-bar[data-pillar="PROTECT"]:hover,
button.pillar-bar[data-pillar="ORCHESTRATE"]:hover,
button.pillar-bar[data-pillar="COMPLY"]:hover {
  border-color: var(--poc-primary);
  box-shadow: 0 4px 12px rgba(74, 85, 104, 0.18);
}

/* Explorer — POC pillar group headers get slate text + slate left border */
.pillar-group[data-pillar="PROTECT"]     > summary .pillar-name,
.pillar-group[data-pillar="ORCHESTRATE"] > summary .pillar-name,
.pillar-group[data-pillar="COMPLY"]      > summary .pillar-name {
  color: var(--poc-primary);
}
.pillar-group[data-pillar="PROTECT"]     > summary .expand-icon,
.pillar-group[data-pillar="ORCHESTRATE"] > summary .expand-icon,
.pillar-group[data-pillar="COMPLY"]      > summary .expand-icon {
  color: var(--poc-primary);
}
.pillar-group[data-pillar="PROTECT"]     > summary,
.pillar-group[data-pillar="ORCHESTRATE"] > summary,
.pillar-group[data-pillar="COMPLY"]      > summary {
  border-left-color: var(--poc-primary);
}

/* Active filter chip — POC pillar selection uses slate */
.active-chip.pillar-POC {
  background: var(--poc-primary-bg);
  color: var(--poc-primary-deep);
  border-color: var(--poc-primary);
}
.active-chip.pillar-POC:hover {
  background: var(--poc-primary);
  color: #ffffff;
  border-color: var(--poc-primary);
}

/* Responsive — narrow viewport: stack sunbursts and reflow filter bar */
@media (max-width: 900px) {
  .universe-wrapper {
    grid-template-columns: 1fr;
  }
  .sunburst-chart { height: 420px; }
  /* Phase 7.5.4B/12-PRE — narrow-viewport .filter-bar / .filter-search /
     .clear-all-btn reflow moved to static/filter_widget.css. */
  .pillar-group .use-case-list {
    grid-template-columns: 1fr;
  }
}

/* ── Phase 2.B.2.combo — Sunburst side panel ───────────────────────── */

.sunburst-detail-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 420px;
  max-width: calc(100% - 2rem);
  max-height: 100%;
  background: var(--neutral-bg-card);
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.14);
  border-left: 3px solid var(--tml-primary);
  border-radius: 4px 0 0 4px;
  padding: 1.5rem;
  overflow-y: auto;
  z-index: 100;
  transform: translateX(110%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sunburst-detail-panel[hidden] {
  display: block;            /* keep it laid out so transform animates */
  pointer-events: none;
}
.sunburst-detail-panel[data-open="true"] {
  transform: translateX(0);
  pointer-events: auto;
}
.sunburst-detail-panel[data-plane="poc"] {
  border-left-color: var(--poc-primary);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  gap: 0.75rem;
}
.panel-breadcrumb {
  font-family: var(--font-h);
  font-size: 1.05rem;
  color: var(--tml-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.sunburst-detail-panel[data-plane="poc"] .panel-breadcrumb {
  color: var(--poc-primary);
}
.panel-separator { margin: 0 0.4rem; opacity: 0.5; }
.panel-separator[hidden] { display: none; }
.panel-close {
  background: transparent;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 0 0.35rem;
  flex-shrink: 0;
}
.panel-close:hover { color: var(--tml-primary); }

.panel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 0.5rem;
  background: var(--neutral-bg-alt);
  border-radius: 6px;
}
.panel-stat { text-align: center; }
.panel-stat-value {
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--tml-primary);
  font-family: var(--font-h);
  line-height: 1.15;
}
.sunburst-detail-panel[data-plane="poc"] .panel-stat-value {
  color: var(--poc-primary);
}
.panel-stat-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 0.2rem;
  font-weight: 600;
}

.panel-list h4 {
  font-family: var(--font-h);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  margin: 0 0 0.6rem 0;
}
.panel-usecase-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
.panel-usecase-list li {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.panel-usecase-list li:hover { background: var(--neutral-hover); }
.panel-uc-id {
  font-family: var(--font-m);
  font-size: 0.72rem;
  color: var(--tml-primary);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 56px;
}
.sunburst-detail-panel[data-plane="poc"] .panel-uc-id {
  color: var(--poc-primary);
}
.panel-uc-name {
  font-size: 0.85rem;
  color: #333;
  flex: 1;
  min-width: 0;
}
.panel-uc-status-researched { font-weight: 600; }
.panel-uc-link {
  color: var(--tml-primary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.panel-uc-link:hover { text-decoration: underline; }
.panel-uc-pending {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

.panel-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 1rem;
}
.panel-explorer-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--tml-primary);
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-family: var(--font-h);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 150ms ease;
}
.panel-explorer-btn:hover { background: var(--tml-deep); }
.sunburst-detail-panel[data-plane="poc"] .panel-explorer-btn {
  background: var(--poc-primary);
}
.sunburst-detail-panel[data-plane="poc"] .panel-explorer-btn:hover {
  background: var(--poc-primary-deep);
}

@media (max-width: 900px) {
  .sunburst-detail-panel {
    width: 100%;
    border-left: none;
    border-top: 3px solid var(--tml-primary);
    border-radius: 4px;
    transform: translateY(110%);
  }
  .sunburst-detail-panel[data-plane="poc"] {
    border-top-color: var(--poc-primary);
  }
  .sunburst-detail-panel[data-open="true"] {
    transform: translateY(0);
  }
}

/* ── Phase 2.B.2.combo — Dossier polish ─────────────────────────────── */

/* Executive summary expand/collapse */
.exec-summary-wrapper { margin-bottom: 0.5rem; }
.exec-summary-toggle {
  margin-top: 0.85rem;
  background: transparent;
  border: 1.5px solid var(--tml-primary);
  color: var(--tml-primary);
  padding: 0.55rem 1.1rem;
  border-radius: 5px;
  font-family: var(--font-h);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.exec-summary-toggle:hover {
  background: var(--tml-primary);
  color: #ffffff;
}

/* Collapsible SME gap cards */
.sme-gap-card {
  background: var(--neutral-bg-card);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.sme-gap-summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  user-select: none;
}
.sme-gap-summary::-webkit-details-marker { display: none; }
.sme-gap-summary::marker { content: ""; }
.sme-gap-severity {
  flex-shrink: 0;
  padding: 0.28rem 0.65rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: var(--font-b);
}
.severity-critical { background: #FDEDEA; color: #C73A1D; }
.severity-high     { background: #FEF3E2; color: #D97706; }
.severity-medium   { background: #FEF9E6; color: #A16207; }
.severity-low      { background: #F0F9F4; color: #166534; }

.sme-gap-topic {
  flex: 1;
  font-size: 0.95rem;
  color: #1a1a1a;
  font-weight: 500;
  font-family: var(--font-h);
  line-height: 1.3;
  min-width: 0;
}
.sme-gap-expand-icon {
  flex-shrink: 0;
  transition: transform 200ms ease;
  color: var(--tml-primary);
  font-size: 0.85rem;
}
.sme-gap-card[open] .sme-gap-expand-icon { transform: rotate(180deg); }

.sme-gap-content {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.sme-gap-detail {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
  padding-top: 1.25rem;
}
.sme-gap-left, .sme-gap-right { min-width: 0; }
.sme-gap-field label {
  display: block;
  font-family: var(--font-b);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.3rem;
  font-weight: 700;
}
.sme-gap-field p {
  margin: 0 0 1rem 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #2a2a2a;
}
@media (max-width: 900px) {
  .sme-gap-detail {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════
   BL-TER-4e — CANONICAL shared gap-card vocabulary (single-source).
   Promoted verbatim from sme_dossier_detail.html's proven-slick inline
   block so every admin page that includes web/_dossier_body.html inherits
   the same render from public.css. The CASE internal view ships no inline
   gap CSS and previously rendered "thin"; this block styles it. The three
   inline copies (dashboard.html, sme_dossier_detail.html, sme_gaps.html)
   stay for now (trial-safety) — their inline <style> still wins by document
   order, so those pages are unchanged. Appended AFTER the legacy subset
   above so the newer vocabulary wins the cascade on shared class names. */

/* count strip — severity word colors (lowercase classes) */
.sev-critical { color: #b22600; font-weight: 600; }
.sev-high     { color: #b64926; font-weight: 600; }
.sev-medium   { color: #c98a2e; font-weight: 600; }
.sev-low      { color: #6b6b68; font-weight: 600; }

.sme-gap-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.sme-gap-li { margin: 0; }

.sme-gap-card {
  background: var(--neutral-bg, #FAFAF7);
  border: 1px solid var(--neutral-border, #E4E1D8);
  border-left: 3px solid var(--neutral-text-muted, #8A8779);
  border-radius: 6px;
  overflow: hidden;
}
.sme-gap-card[data-severity="CRITICAL"] { border-left-color: #b22600; }
.sme-gap-card[data-severity="HIGH"]     { border-left-color: #b64926; }
.sme-gap-card[data-severity="MEDIUM"]   { border-left-color: #c98a2e; }
.sme-gap-card[data-severity="LOW"]      { border-left-color: #6b6b68; }

.sme-gap-summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.6rem 0.9rem;
}
.sme-gap-summary::-webkit-details-marker { display: none; }
.sme-gap-card[open] .sme-gap-summary {
  border-bottom: 1px solid var(--neutral-border, #E4E1D8);
}
.sme-gap-chevron {
  margin-left: auto;
  color: var(--neutral-text-muted, #8A8779);
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}
.sme-gap-card[open] .sme-gap-chevron { transform: rotate(90deg); }

.sme-gap-sev-badge {
  padding: 0.1rem 0.4rem; border-radius: 3px;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.65rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff;
}
.sev-CRITICAL { background: #b22600; }
.sev-HIGH     { background: #b64926; }
.sev-MEDIUM   { background: #c98a2e; }
.sev-LOW      { background: #6b6b68; }

.sme-gap-cp-pill {
  padding: 0.1rem 0.4rem; border-radius: 3px;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.65rem; letter-spacing: 0.05em;
  background: rgba(182,73,38,0.10); color: var(--tml-primary, #B64926);
  border: 1px solid rgba(182,73,38,0.4);
}
.sme-gap-module {
  font-family: 'Montserrat', sans-serif; font-size: 0.72rem;
  font-weight: 600; color: var(--neutral-text-muted, #8A8779);
  letter-spacing: 0.05em;
}
.sme-gap-topic {
  flex: 1; min-width: 180px;
  font-size: 0.85rem; line-height: 1.4;
  color: var(--neutral-text-body, #2a2a2a);
}
.sme-gap-topic-link { color: inherit; text-decoration: none; }

.sme-gap-status-pill {
  padding: 0.1rem 0.45rem; border-radius: 3px;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ZERO BLUE — status-open uses a neutral grey, never the legacy blue */
.sme-gap-status-pill.status-open {
  background: rgba(138,135,121,0.10); color: #6B6960;
  border: 1px solid rgba(138,135,121,0.35);
}
.sme-gap-status-pill.status-claimed {
  background: rgba(34,139,87,0.10); color: #1B6B43;
  border: 1px solid rgba(34,139,87,0.3);
}
.sme-gap-status-pill.status-pending_sg,
.sme-gap-status-pill.status-pending_s,
.sme-gap-status-pill.status-pending_admin_review {
  background: rgba(201,138,46,0.12); color: #8a5e1e;
  border: 1px solid rgba(201,138,46,0.35);
}
.sme-gap-status-pill.status-approved,
.sme-gap-status-pill.status-sg_complete {
  background: rgba(34,139,87,0.14); color: #1B6B43;
  border: 1px solid rgba(34,139,87,0.4);
}
.sme-gap-status-pill.status-rejected,
.sme-gap-status-pill.status-expired,
.sme-gap-status-pill.status-stalled {
  background: rgba(178,38,0,0.10); color: #8f1f00;
  border: 1px solid rgba(178,38,0,0.3);
}

.sme-gap-body {
  padding: 0.75rem 0.95rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.sme-gap-grid { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.sme-gap-grid-left {
  flex: 1; min-width: 240px;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.sme-gap-field label {
  display: block;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-text-muted, #8A8779);
  margin-bottom: 0.15rem;
}
.sme-gap-field p {
  margin: 0; font-size: 0.82rem; line-height: 1.5;
  color: var(--neutral-text-body, #2a2a2a);
}

/* Module-of-origin narrative summary (nested collapsible) */
.sme-gap-module-summary {
  border: 1px solid var(--neutral-border, #E4E1D8);
  border-radius: 5px;
  background: #fff;
}
.sme-gap-module-summary > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.7rem;
}
.sme-gap-module-summary > summary::-webkit-details-marker { display: none; }
.sme-gap-module-summary-label {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tml-primary, #B64926);
}
.sme-gap-module-summary-hint {
  font-size: 0.66rem; font-style: italic;
  color: var(--neutral-text-muted, #8A8779);
}
.sme-gap-module-summary[open] .sme-gap-module-summary-hint { visibility: hidden; }
.sme-gap-module-summary-body {
  padding: 0.5rem 0.7rem 0.65rem;
  border-top: 1px solid var(--neutral-border, #E4E1D8);
}
.module-summary-prose {
  font-size: 0.82rem; line-height: 1.55;
  color: var(--neutral-text-body, #2a2a2a);
  white-space: pre-wrap;
}
.module-summary-empty {
  margin: 0; font-size: 0.8rem; font-style: italic;
  color: var(--neutral-text-muted, #8A8779);
}
.module-summary-cta {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--neutral-text-muted, #8A8779);
}
.module-summary-link {
  color: var(--tml-primary, #B64926);
  font-weight: 600; text-decoration: none;
}
.module-summary-link:hover { text-decoration: underline; }

.sme-gap-actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center;
}
.sme-gap-actions .public-btn-secondary {
  padding: 0.3rem 0.7rem; font-size: 0.74rem;
}
.gap-detail-link {
  display: inline-block;
  margin: 0.15rem 0 0.35rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
}
.sme-gap-marker {
  color: #1B6B43; font-weight: 600;
  font-size: 0.78rem;
}
.sme-gap-marker-muted {
  color: var(--neutral-text-muted, #8A8779);
  font-weight: 400; font-style: italic;
}

.gap-module-group { margin-bottom: 1.25rem; }
.gap-module-group:last-child { margin-bottom: 0; }
.gap-module-group-heading {
  font-family: 'Khand', sans-serif;
  font-size: 0.95rem; font-weight: 600;
  color: var(--tml-primary);
  margin: 0 0 0.5rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--neutral-divider, #E8E6DC);
}

/* gap count strip + criticality filter */
.gap-count-strip {
  font-size: 0.82rem; margin-bottom: 0.7rem;
  padding: 0.45rem 0.75rem;
  background: var(--neutral-bg);
  border: 1px solid var(--neutral-border);
  border-radius: 4px;
  color: var(--neutral-text-body);
}
.gap-stat-claimed { color: #1B6B43; font-weight: 600; }
.gap-stat-closed  { color: var(--neutral-text-muted, #8A8779); font-weight: 600; }
.gap-criticality-filter {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.gap-crit-chip {
  font-family: 'Khand', sans-serif; font-size: 0.76rem;
  font-weight: 600; letter-spacing: 0.04em;
  padding: 0.3rem 0.8rem; border-radius: 14px;
  background: var(--neutral-bg-card, #FAFAF7);
  border: 1px solid var(--neutral-border, #DFDDD2);
  color: var(--neutral-text-muted, #8A8779);
  cursor: pointer;
}
.gap-crit-chip:hover {
  border-color: var(--tml-primary, #B64926);
  color: var(--tml-primary, #B64926);
}
.gap-crit-chip-active {
  background: var(--tml-primary, #B64926);
  color: #fff;
  border-color: var(--tml-primary, #B64926);
}
.gap-hidden { display: none !important; }
/* ════════════ end BL-TER-4e canonical gap-card block ════════════ */

/* SME assignment card (placeholder Expert Research Augmentation panel) */
.sme-assignment-card {
  background: #FAFAFA;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 1rem;
}
.sme-assignment-label {
  font-family: var(--font-b);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.illustrative-badge {
  background: #FEF9E6;
  color: #A16207;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.62rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-style: italic;
}
.sme-profile {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.sme-avatar img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}
.sme-info { flex: 1; min-width: 0; }
.sme-name {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 0.95rem;
  color: #1a1a1a;
  margin-bottom: 0.15rem;
  line-height: 1.2;
}
.sme-title {
  font-size: 0.78rem;
  color: #444;
  line-height: 1.35;
  margin-bottom: 0.2rem;
}
.sme-credentials {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}
.sme-status-row {
  display: flex;
  justify-content: space-between;
  padding: 0.32rem 0;
  font-size: 0.78rem;
}
.sme-status-label {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.sme-status-value { font-weight: 700; color: #2a2a2a; }
.status-verified    { color: #166534; }
.status-in-progress { color: #D97706; }
.status-assigned    { color: #2563EB; }
.status-claimed     { color: #7C3AED; }

/* ── Phase 2.B.2.combo.4 — Score block, TOC, download/premium label ── */

/* Download block + premium label (Task 5) */
.download-block {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.premium-label {
  font-size: 0.72rem;
  color: var(--neutral-text-muted);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Standalone scorecard block (Task 3) */
.score-block { padding: 1.5rem 1.75rem; }
.score-details summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  user-select: none;
}
.score-details summary::-webkit-details-marker { display: none; }
/* .score-title styling now inherits from .dossier-section-title (Task 5).
   Left here as a reserved class in case score-block needs bespoke hooks. */
.score-title { margin: 0; }
.score-expand-icon {
  font-size: 0.95rem;
  color: var(--neutral-text-muted);
  transition: transform 200ms ease;
}
.score-details[open] .score-expand-icon { transform: rotate(180deg); }
.score-intro {
  margin: 1rem 0 1.1rem 0;
  font-size: 0.85rem;
  color: var(--neutral-text-muted);
  line-height: 1.55;
}
.score-table-wrapper { overflow-x: auto; }
.score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-family: var(--font-b);
}
.score-table thead th {
  background: var(--neutral-bg-alt);
  padding: 0.55rem 0.7rem;
  text-align: left;
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-text-muted);
  border-bottom: 2px solid var(--neutral-border);
}
.score-table tbody td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--neutral-divider);
  vertical-align: middle;
}
.score-table .stage-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.score-table .score-cell {
  text-align: center;
  font-weight: 700;
  font-family: var(--font-h);
  font-size: 0.95rem;
  width: 90px;
  color: var(--neutral-text-muted);
}
.score-cell.score-excellent { background: #E8F5E8; color: #166534; }
.score-cell.score-good      { background: #FEF3E2; color: #A16207; }
.score-cell.score-fair      { background: #FEF9E6; color: #D97706; }
.score-cell.score-low       { background: #FDEDEA; color: #C73A1D; }
.flags-cell {
  font-size: 0.75rem;
  color: var(--neutral-text-muted);
  font-family: var(--font-b);
}

/* Table of Contents block (Task 6) */
.toc-block {
  background: var(--neutral-bg-alt);
  border: 1px solid var(--neutral-border);
  padding: 1rem 1.5rem;
}
.toc-details summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  user-select: none;
}
.toc-details summary::-webkit-details-marker { display: none; }
/* .toc-title styling now inherits from .dossier-section-title (Task 5). */
.toc-title { margin: 0; }

/* ── SME section collapsible wrapper (Phase 2.B.2.combo.6 — Task 2) ── */
.sme-section-details > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  user-select: none;
  padding: 0;
}
.sme-section-details > summary::-webkit-details-marker { display: none; }
.sme-section-details > summary::marker { content: ""; }
.sme-section-summary .dossier-section-title { margin: 0; }

.sme-section-content { margin-top: 1.1rem; }

/* Shared chevron rotation — used by TOC, Score, SME section
   collapsibles. Existing .toc-expand-icon and .score-expand-icon
   rules already handle their own state; this covers .section-expand-icon
   which is used on the SME section + reinforced on Scorecard. */
.section-expand-icon {
  font-size: 0.9rem;
  color: var(--neutral-text-muted);
  transition: transform 200ms ease;
  flex-shrink: 0;
  margin-left: 1rem;
}
.sme-section-details[open]   .section-expand-icon,
.score-details[open]         .section-expand-icon,
.toc-details[open]           .section-expand-icon {
  transform: rotate(180deg);
}
.toc-expand-icon {
  font-size: 0.85rem;
  color: var(--neutral-text-muted);
  transition: transform 200ms ease;
}
.toc-details[open] .toc-expand-icon { transform: rotate(180deg); }
.toc-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}
.toc-item { padding: 0.3rem 0; }
.toc-item a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.87rem;
  transition: color 150ms ease;
  font-family: var(--font-b);
}
.toc-item a:hover { color: var(--tml-primary); text-decoration: underline; }
.toc-level-h1 a { font-weight: 700; font-size: 0.92rem; }
.toc-level-h2 a { padding-left: 1rem; font-weight: 500; }
.toc-level-h3 a {
  padding-left: 2rem;
  color: var(--neutral-text-muted);
  font-size: 0.82rem;
}

/* ══════════ BATCH A.7: Unified page title block ══════════ */

.page-title-block { margin-bottom: 2rem; }

.breadcrumb {
  font-family: var(--font-b);
  font-size: 0.85rem;
  color: var(--landing-text-muted);
  margin-bottom: 0.85rem;
}
.breadcrumb a { color: var(--landing-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--landing-accent); }

.page-title-large,
.public-body h1.page-title-large,
header.page-title-block h1.page-title-large,
.page-title-block h1.page-title-large {
  font-family: 'Khand', sans-serif !important;
  font-size: 4rem !important;
  font-weight: 600 !important;
  color: #B64926 !important;
  margin: 0 0 0.5rem 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
}

.page-tagline {
  font-family: var(--font-h);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--landing-accent);
  margin: 0 0 1.5rem 0;
}

/* === Page title color enforcement (final, do not remove) === */
.page-title-block .page-title-large,
header.page-title-block h1.page-title-large,
h1.page-title-large {
  color: #B64926 !important;
  font-family: 'Khand', sans-serif !important;
  font-weight: 600 !important;
  font-size: 4rem !important;
}

/* === Alias: .page-title-block legacy container maps to stub-title treatment === */
.page-title-block { margin-bottom: 2rem; }

/* === Login page (Phase 2.C.14) === */
.login-container {
  max-width: 440px;
  margin: 3rem auto;
  padding: 2.5rem 3rem;
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #D6D3C7);
  border-radius: 10px;
}
.login-error {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid #D97706;
  color: #D97706;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.login-form { margin: 1.5rem 0; }
.login-field { margin-bottom: 1rem; }
.login-field label {
  display: block;
  font-family: 'Khand', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--landing-text-muted, #5A5A57);
  margin-bottom: 0.4rem;
}
.login-field input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--landing-bg, #EDEBE2);
  border: 1px solid var(--landing-card-border, #D6D3C7);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: 'Montserrat', sans-serif;
}
.login-field input:focus {
  outline: none;
  border-color: var(--landing-accent, #B64926);
}
/* BL-136 — radio/checkbox controls inside .login-field must NOT inherit the
   full-width text-input box styling above (which rendered them as empty white
   boxes). Restore a natural-size native control with a visible selected state.
   Applies on both launch_custom.html and admin_research_review.html radio
   groups (chains_to_run / variant / engagement_type / stuc_chain), and does
   not affect the BL-150.2 #bl150-chain1-row / #bl150-chain2-row <select>s. */
.login-field input[type="radio"],
.login-field input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0 0.5rem 0 0;
  vertical-align: middle;
  accent-color: var(--landing-accent, #B64926);
}
.login-submit {
  width: 100%;
  padding: 0.8rem 1.5rem;
  background: var(--landing-accent, #B64926);
  color: white;
  border: none;
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.login-submit:hover { background: var(--landing-accent-deep, #8B2F15); }
.login-note {
  font-size: 0.8rem;
  color: var(--landing-text-muted, #5A5A57);
  text-align: center;
  margin-top: 1.5rem;
  line-height: 1.5;
}

/* === /universe page title override (ID-based, highest specificity) ===
   public.css IS loaded on /universe (landing.css is not), so this is the right home. */
#universe-title {
  font-family: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif !important;
  font-size: 4rem !important;
  font-weight: 600 !important;
  color: #B64926 !important;
  margin: 0 0 0.5rem 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}
#universe-tagline {
  font-family: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #B64926 !important;
  margin: 0 0 1.5rem 0 !important;
}


/* ──────────────────────────────────────────────────────────────────
 * STATE BADGE — Phase D 4-state public taxonomy
 * Used on /universe, /marketplace, /dossier. Driven by
 * /api/taxonomy/status-map.
 * ─────────────────────────────────────────────────────────────── */

.state-badge {
  display: inline-block;
  padding: 0.32rem 0.7rem;
  border-radius: 6px;
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.state-badge-pending     { background: #D6D3C7; color: #5A5A57; }
.state-badge-preliminary { background: #E89B3C; color: #FAFAF7; }
.state-badge-completed   { background: var(--landing-accent, #B64926); color: #FAFAF7; }
.state-badge-enhanced    { background: var(--landing-accent-deep, #8B2F15); color: #FAFAF7; }

.state-badge-sub {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--font-b, 'Montserrat'), system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--landing-text-muted, #5A5A57);
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}
.state-badge-sub:empty { display: none; }

/* Filter pill variants for the 4-state pills on /universe and /marketplace.
   Reuses .status-pill / .filter-status base rules already in place. */
.status-pill[data-status="Pending"].active,
.filter-status.filter-status-active[data-status="Pending"] {
  background: #D6D3C7; color: #5A5A57; border-color: #5A5A57;
}
.status-pill[data-status="Preliminary"].active,
.filter-status.filter-status-active[data-status="Preliminary"] {
  background: #E89B3C; color: #FAFAF7; border-color: #E89B3C;
}
.status-pill[data-status="Completed"].active,
.filter-status.filter-status-active[data-status="Completed"] {
  background: var(--landing-accent, #B64926); color: #FAFAF7; border-color: var(--landing-accent, #B64926);
}
.status-pill[data-status="Enhanced"].active,
.filter-status.filter-status-active[data-status="Enhanced"] {
  background: var(--landing-accent-deep, #8B2F15); color: #FAFAF7; border-color: var(--landing-accent-deep, #8B2F15);
}


/* ──────────────────────────────────────────────────────────────────
 * STATE TEXT — Phase D revision: bold colored word (not a pill)
 * Used on display surfaces: marketplace cards, /universe rows,
 * /dossier header, popover. Filter pills keep using .state-badge.
 * ─────────────────────────────────────────────────────────────── */

.state-text {
  display: inline-block;
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.state-text-pending     { color: #8A8780; }
.state-text-preliminary { color: #C17817; }
.state-text-completed   { color: var(--landing-accent, #B64926); }
.state-text-enhanced    { color: var(--landing-accent-deep, #8B2F15); }

/* Larger variant for the standalone dossier-header status word */
.state-text-lg {
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

/* ──────────────────────────────────────────────────────────────────
 * DOSSIER header actions + state row (Phase D revision)
 * ─────────────────────────────────────────────────────────────── */

.dossier-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.1rem 0 1rem 0;
}
.dossier-actions-row .public-btn {
  margin: 0;
}
.dossier-btn-purchase {
  background: transparent !important;
  color: var(--landing-accent, #B64926) !important;
  border: 1px solid var(--landing-accent, #B64926) !important;
}
.dossier-btn-purchase:hover {
  background: var(--landing-accent, #B64926) !important;
  color: #FAFAF7 !important;
}
.dossier-state-row {
  margin: 0.75rem 0 1.25rem 0;
  min-height: 1.6rem;
}


/* ──────────────────────────────────────────────────────────────────
 * PRELIMINARY DOSSIER banner — Phase 2 Module P UI integration
 * ─────────────────────────────────────────────────────────────── */

.preliminary-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  margin: 0 0 1.5rem 0;
  background: linear-gradient(90deg, rgba(232, 155, 60, 0.15), rgba(232, 155, 60, 0.05));
  border: 1px solid #E89B3C;
  border-left: 4px solid #E89B3C;
  border-radius: 6px;
  font-family: 'Montserrat', system-ui, sans-serif;
}
.preliminary-banner-icon {
  color: #E89B3C;
  font-size: 1.2rem;
  font-weight: 600;
}
.preliminary-banner-label {
  font-family: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #B47020;
  text-transform: uppercase;
}
.preliminary-banner-sub {
  font-size: 0.82rem;
  color: #6B5D3C;
  font-style: italic;
  margin-left: 0.5rem;
}

/* ──────────────────────────────────────────────────────────────────
 * SUBSCRIPTION GATE MODAL — cosmetic only, no real auth
 * Used on /universe coverage card click handlers.
 * ─────────────────────────────────────────────────────────────── */

.subscription-gate-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: gateModalFadeIn 220ms ease-out;
}
.subscription-gate-modal[hidden] { display: none; }

@keyframes gateModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.subscription-gate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 26, 0.7);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.subscription-gate-card {
  position: relative;
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #D6D3C7);
  border-radius: 10px;
  max-width: 480px;
  width: 100%;
  padding: 2.25rem 2rem 1.75rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  text-align: left;
  animation: gateCardSlideUp 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gateCardSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.subscription-gate-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--landing-card-border, #D6D3C7);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--landing-text-muted, #5A5A57);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subscription-gate-close:hover {
  border-color: var(--landing-accent, #B64926);
  color: var(--landing-accent, #B64926);
}

.subscription-gate-eyebrow {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--landing-accent, #B64926);
  margin-bottom: 0.5rem;
}

.subscription-gate-headline {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--landing-text-primary, #2B2A26);
  margin: 0 0 0.85rem 0;
  line-height: 1.1;
}

.subscription-gate-copy {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0 0 1.5rem 0;
}

.subscription-gate-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.subscription-gate-btn-primary {
  padding: 0.65rem 1.25rem;
  background: var(--landing-accent, #B64926);
  color: #FAFAF7;
  border: 1px solid var(--landing-accent, #B64926);
  border-radius: 6px;
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms;
}
.subscription-gate-btn-primary:hover {
  background: var(--landing-accent-deep, #8B2F15);
}

.subscription-gate-btn-secondary {
  padding: 0.65rem 1.25rem;
  background: transparent;
  color: var(--landing-text-muted, #5A5A57);
  border: 1px solid var(--landing-card-border, #D6D3C7);
  border-radius: 6px;
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.subscription-gate-btn-secondary:hover {
  border-color: var(--landing-accent, #B64926);
  color: var(--landing-accent, #B64926);
}

/* ──────────────────────────────────────────────────────────────────
 * STATS BLOCK — "AI in M&E Top Numbers" section on /universe
 * 4-quadrant grid, typography-led, Industrial Elegance style.
 * ─────────────────────────────────────────────────────────────── */

.stats-block {
  margin-top: 1.5rem;
  padding: 2rem 2rem 1.75rem;
}

.stats-block-title {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--landing-text-primary, #2B2A26);
  margin: 0 0 1.75rem 0;
  line-height: 1.1;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.5rem;
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.stats-quadrant {
  padding: 1.25rem 0;
  border-top: 2px solid var(--landing-card-border, #D6D3C7);
  min-height: 380px;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stats-big-number {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.stats-number {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--landing-text-primary, #2B2A26);
  letter-spacing: -0.02em;
}

.stats-number-label {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--landing-text-primary, #2B2A26);
  line-height: 1.2;
}

.stats-number-separator {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0 0.25rem;
}

.stats-subtitle {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--landing-accent, #B64926);
  margin-bottom: 0.6rem;
}

/* Pillar distribution bars */
.stats-pillar-bars {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stats-pillar-row {
  display: grid;
  grid-template-columns: 90px 1fr 32px;
  align-items: center;
  gap: 0.5rem;
}

.stats-pillar-name {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--landing-text-primary, #2B2A26);
}

.stats-pillar-track {
  height: 14px;
  background: var(--landing-card-border, #D6D3C7);
  border-radius: 2px;
  overflow: hidden;
}

.stats-pillar-fill {
  height: 100%;
  background: var(--landing-accent, #B64926);
  border-radius: 2px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-pillar-count {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--landing-text-primary, #2B2A26);
  text-align: right;
}

/* AI technique categories list */
.stats-technique-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stats-technique-list li {
  font-family: var(--font-b, 'Montserrat'), system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--landing-text-primary, #2B2A26);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--landing-card-border, #D6D3C7);
}

.stats-technique-list li:last-child {
  border-bottom: none;
}

/* Deployment tiers */
.stats-deploy-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stats-deploy-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.stats-deploy-color {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

.stats-deploy-label {
  flex: 1;
  font-family: var(--font-b, 'Montserrat'), system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--landing-text-primary, #2B2A26);
}

.stats-deploy-pct {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--landing-text-primary, #2B2A26);
  min-width: 32px;
  text-align: right;
}

.stats-source {
  font-size: 0.7rem;
  color: var(--landing-text-muted, #5A5A57);
  font-style: italic;
  margin-top: 0.75rem;
}

/* ──────────────────────────────────────────────────────────────────
 * STATS VISUALS — donut, horizontal bars, compact company bars
 * ─────────────────────────────────────────────────────────────── */

/* Horizontal bar rows (shared by Q2 techniques + Q4 companies) */
.stats-hbars {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stats-hbar-row {
  display: grid;
  grid-template-columns: 110px 1fr 32px;
  align-items: center;
  gap: 0.5rem;
}

.stats-hbar-label {
  font-family: var(--font-b, 'Montserrat'), system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--landing-text-primary, #2B2A26);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-hbar-track {
  height: 14px;
  background: var(--landing-card-border, #D6D3C7);
  border-radius: 2px;
  overflow: hidden;
}

.stats-hbar-fill {
  height: 100%;
  background: var(--landing-accent, #B64926);
  border-radius: 2px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-hbar-fill-muted {
  background: var(--landing-text-muted, #5A5A57);
}

.stats-hbar-value {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--landing-text-primary, #2B2A26);
  text-align: right;
}

.stats-hbar-row-other {
  margin-top: 0.25rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--landing-card-border, #D6D3C7);
}

/* Compact variant for companies (more rows, tighter spacing) */
.stats-hbars-compact {
  gap: 0.2rem;
}

.stats-hbars-compact .stats-hbar-row {
  grid-template-columns: 100px 1fr 30px;
  gap: 0.4rem;
}

.stats-hbars-compact .stats-hbar-label {
  font-size: 0.72rem;
}

.stats-hbars-compact .stats-hbar-track {
  height: 10px;
}

.stats-hbars-compact .stats-hbar-value {
  font-size: 0.75rem;
}

/* Q4 wide quadrant — spans full grid width */
.stats-quadrant-wide {
  grid-column: 1 / -1;
}

/* Donut chart — pure CSS conic-gradient */
.stats-deploy-visual {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.stats-donut {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: conic-gradient(
    #C0522A 0deg 104.4deg,
    #E8A838 104.4deg 252deg,
    #A0633A 252deg 295.2deg,
    #D4833A 295.2deg 360deg
  );
  position: relative;
  flex-shrink: 0;
}

/* Inner circle to create the donut hole */
.stats-donut::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--landing-card-bg, #FAFAF7);
}

.stats-deploy-legend {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

@media (max-width: 768px) {
  .stats-quadrant-wide { grid-column: 1; }
  .stats-deploy-visual { flex-direction: column; align-items: flex-start; }
  .stats-donut { width: 100px; height: 100px; }
  .stats-donut::after { width: 50px; height: 50px; }
}

/* Q4 companies: scrollable bar list within fixed-height quadrant */
.stats-quadrant .stats-hbars-compact {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Responsive: unlock fixed heights on mobile */
@media (max-width: 768px) {
  .stats-quadrant {
    min-height: auto;
    max-height: none;
  }
  .stats-donut { width: 140px; height: 140px; }
  .stats-donut::after { width: 70px; height: 70px; }
}

/* Align bar rows across Q1 and Q2 — fixed header height */
.stats-quadrant .stats-big-number {
  min-height: 3.8rem;
}

.stats-quadrant .stats-subtitle {
  min-height: 1.2rem;
}

/* Q2 has no subtitle — add equivalent spacer */
.stats-quadrant .stats-hbars:first-of-type {
  /* no-op selector — the alignment comes from the fixed
     min-height on .stats-big-number above */
}

/* Force Q2 to have the same top spacing as Q1 by adding
   a subtitle placeholder when none exists */
.stats-quadrant > .stats-big-number + .stats-hbars {
  margin-top: 2rem;
}

.stats-quadrant > .stats-big-number + .stats-subtitle + .stats-pillar-bars {
  margin-top: 0;
}

.stats-quadrant > .stats-big-number + .stats-subtitle {
  margin-top: 0;
}