/* ==========================================================================
   AIM CONSUMER — components.css
   Generated from: pipeline/shared/design-tokens.json (design-tokens-v1)
   Authority: AIM-FE-CONFORMANCE-NOTE.md §1 / fe-consumer-bridge.md Rule 1

   Component styles for AIM paid surfaces. References only CSS custom
   properties declared in base.css (no hardcoded hex).

   PI-1 graceful-fallback rule (fe-consumer-bridge.md Rule 3):
     Absent data → block is omitted, not broken. Every component that
     depends on dynamic data uses :empty { display:none } and data-absent
     attribute contracts so missing content collapses cleanly.

   CONSTRAINT: This file does NOT copy or fork renderer.js, nav.js,
   chart JS, or the shared base.css primitives from
   asym-intel-commons:static/monitors/shared/. Those are engine-side.
   Structural primitives (disclosure, kpi-bloom, status-strip, sparkline,
   chip-row, delta-arrow) are consumed from engine-assets/primitives/.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLE OF CONTENTS
   1.  Signal cards
   2.  Data tables
   3.  Confidence badges  (Confirmed / High / Assessed / Possible)
   4.  Source-tier badges (T1 / T2 / T3)
   5.  Gaps-register rows
   6.  Module-tag chips (all 16 modules)
   7.  Risk-vector rows
   8.  AI-Unverified badge
   9.  Paywall / subscriber gate
   10. Export / action row
   -------------------------------------------------------------------------- */


/* ==========================================================================
   1. Signal cards
   An AIM signal card wraps a single item from any of the 16 modules.
   If the card's slot data is absent the card collapses (PI-1).
   ========================================================================== */

.aim-card {
  background-color: var(--card);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--elev-1);
  transition:
    box-shadow var(--motion-base) var(--motion-easing),
    background-color var(--motion-fast) var(--motion-easing);
}

.aim-card:hover {
  background-color: var(--card-hover);
  box-shadow: var(--elev-2);
}

/* PI-1: card with no content collapses */
.aim-card:empty,
.aim-card[data-absent="true"] {
  display: none;
}

.aim-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.aim-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text);
  line-height: var(--leading-snug);
  margin: 0;
}

.aim-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.aim-card__body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.aim-card__body:empty { display: none; }

.aim-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-subtle);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.aim-card__footer:empty { display: none; }

/* Card grid layout */
.aim-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.aim-cards:empty { display: none; }

/* Asymmetric flag accent — left border stripe */
.aim-card--asymmetric {
  border-left: 3px solid var(--gold);
}


/* ==========================================================================
   2. Data tables
   Used for: funding_rounds, strategic_deals, lab scorecard, personnel,
   governance_health, gaps_register tabular view.
   ========================================================================== */

.aim-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.aim-table-wrap:empty { display: none; }

.aim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: var(--text);
}

.aim-table thead {
  background-color: var(--surface);
  border-bottom: 1px solid var(--line);
}

.aim-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.aim-table tbody tr {
  border-bottom: 1px solid var(--line-subtle);
  transition: background-color var(--motion-fast) var(--motion-easing);
}

.aim-table tbody tr:last-child {
  border-bottom: none;
}

.aim-table tbody tr:hover {
  background-color: var(--card-hover);
}

.aim-table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  line-height: var(--leading-snug);
}

.aim-table td.aim-table__num {
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "tnum", "lnum";
}

/* PI-1: empty table body collapses the wrapper */
.aim-table tbody:empty + caption::before {
  content: attr(data-empty-message);
  display: block;
  padding: var(--space-6);
  text-align: center;
  color: var(--text-faint);
  font-size: var(--text-sm);
}

/* Table captions (accessible) */
.aim-table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text);
  padding-bottom: var(--space-3);
}


/* ==========================================================================
   3. Confidence badges
   Values: Confirmed | High | Assessed | Possible
   Each maps to a semantic colour role. Text always white or near-black for
   AA compliance; background must achieve ≥3:1 against surrounding context.
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.6;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  vertical-align: middle;
}

/* Confirmed — highest certainty; deep navy accent */
.badge--confirmed {
  background-color: var(--acc);
  color: var(--card);  /* #fff on #1d3b5e: ~10.8:1 ✓ */
}

/* High — strong signal; muted green */
.badge--high {
  background-color: var(--green);
  color: var(--card);  /* #fff on #2d6a3f: ~6.1:1 ✓ */
}

/* Assessed — analytical inference; warm gold tint background */
.badge--assessed {
  background-color: color-mix(in srgb, var(--gold) 18%, var(--bg));
  color: var(--text);   /* dark text on pale gold wash: ≥7:1 ✓ */
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}

/* Possible — speculative; surface-level with subtle border */
.badge--possible {
  background-color: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--line);
}

/* Dark-theme overrides for badge tints */
[data-theme="dark"] .badge--assessed {
  background-color: color-mix(in srgb, var(--gold) 22%, var(--surface));
  color: var(--text);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
}
@media (prefers-color-scheme: dark) {
  .badge--assessed {
    background-color: color-mix(in srgb, var(--gold) 22%, var(--surface));
    color: var(--text);
    border-color: color-mix(in srgb, var(--gold) 35%, transparent);
  }
}

/* ==========================================================================
   4. Source-tier badges
   T1 = primary (official/lab-published), T2 = secondary (reputable media),
   T3 = tertiary (aggregated/unverified).
   ========================================================================== */

/* T1 — high authority */
.badge--t1 {
  background-color: color-mix(in srgb, var(--acc) 14%, var(--bg));
  color: var(--acc);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
}

/* T2 — standard */
.badge--t2 {
  background-color: color-mix(in srgb, var(--amber) 12%, var(--bg));
  color: color-mix(in srgb, var(--amber) 90%, var(--text));
  border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
}

/* T3 — lower confidence / unverified */
.badge--t3 {
  background-color: var(--surface);
  color: var(--text-faint);
  border: 1px solid var(--line-subtle);
}

/* AI-Unverified badge — distinct from confidence/tier, marks unverified
   model-generated claims (AIM moat requirement) */
.badge--ai-unverified {
  background-color: color-mix(in srgb, var(--amber) 15%, var(--bg));
  color: color-mix(in srgb, var(--amber) 85%, var(--text));
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  font-style: italic;
}


/* ==========================================================================
   5. Gaps-register rows
   Renders the gaps_register[] array (AGM-GAP-001…N).
   PI-1: empty list = no element rendered.
   ========================================================================== */

.gaps-register {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gaps-register:empty { display: none; }

.gaps-register__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-subtle);
  transition: background-color var(--motion-fast) var(--motion-easing);
}

.gaps-register__item:last-child {
  border-bottom: none;
}

.gaps-register__item:hover {
  background-color: var(--card-hover);
}

/* PI-1: individual gap row with absent data collapses */
.gaps-register__item[data-absent="true"] { display: none; }

.gaps-register__id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  white-space: nowrap;
  padding-top: 2px;
}

.gaps-register__body {
  min-width: 0;
}

.gaps-register__title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text);
  margin: 0 0 var(--space-1) 0;
}

.gaps-register__detail {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.gaps-register__detail:empty { display: none; }

.gaps-register__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Gaps register table layout variant */
.gaps-register--table .gaps-register__item {
  grid-template-columns: 140px 1fr 80px 120px;
}


/* ==========================================================================
   6. Module-tag chips — all 16 AIM modules
   Used as: filter tags, card labels, signal-feed facets.
   Module IDs match the interpreter schema module indices 0–15.
   semantic_roles.chip tokens map to these.
   ========================================================================== */

.module-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  background-color: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--line);
  transition:
    background-color var(--motion-fast) var(--motion-easing),
    color var(--motion-fast) var(--motion-easing),
    border-color var(--motion-fast) var(--motion-easing);
}

/* Interactive chips (filter context) */
.module-chip[role="button"],
.module-chip[tabindex] {
  cursor: pointer;
}

.module-chip[role="button"]:hover,
.module-chip[tabindex]:hover {
  background-color: var(--card-hover);
  border-color: var(--line);
}

.module-chip[aria-pressed="true"],
.module-chip--selected {
  background-color: var(--acc);
  color: var(--card);
  border-color: var(--acc);
}

/* PI-1: chip row with no chips collapses */
.module-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.module-chip-row:empty { display: none; }

/* Per-module accent colours (used when module context is known).
   Palette keys: all referencing token vars, no hardcoded hex.
   Priority modules get slightly stronger accent per §5 of AIM-DATA-INVENTORY. */

/* module_0: The Signal */
.module-chip[data-module="0"]  { --chip-accent: var(--acc); }

/* module_1: Executive Insight */
.module-chip[data-module="1"]  { --chip-accent: var(--accent-dim); }

/* module_2: Model Frontier */
.module-chip[data-module="2"]  { --chip-accent: var(--acc); }

/* module_3: Investment & M&A — priority */
.module-chip[data-module="3"]  { --chip-accent: var(--gold); }

/* module_4: Sectors */
.module-chip[data-module="4"]  { --chip-accent: var(--accent-dim); }

/* module_5: EU / China */
.module-chip[data-module="5"]  { --chip-accent: var(--acc); }

/* module_6: Science — priority */
.module-chip[data-module="6"]  { --chip-accent: var(--green); }

/* module_7: Risk Indicators */
.module-chip[data-module="7"]  { --chip-accent: var(--red); }

/* module_8: Military AI — priority */
.module-chip[data-module="8"]  { --chip-accent: var(--red); }

/* module_9: Law and Litigation */
.module-chip[data-module="9"]  { --chip-accent: var(--acc); }

/* module_10: AI Governance */
.module-chip[data-module="10"] { --chip-accent: var(--accent-dim); }

/* module_11: Ethics */
.module-chip[data-module="11"] { --chip-accent: var(--green); }

/* module_12: Technical Standards */
.module-chip[data-module="12"] { --chip-accent: var(--accent-dim); }

/* module_13: AI and Society */
.module-chip[data-module="13"] { --chip-accent: var(--amber); }

/* module_14: Power Structures */
.module-chip[data-module="14"] { --chip-accent: var(--red); }

/* module_15: Personnel — priority */
.module-chip[data-module="15"] { --chip-accent: var(--gold); }

/* When a per-module chip is selected, apply its accent */
.module-chip[data-module][aria-pressed="true"],
.module-chip[data-module].module-chip--selected {
  background-color: var(--chip-accent, var(--acc));
  border-color: var(--chip-accent, var(--acc));
  color: var(--card);
}

/* Priority module chips have a slightly bolder resting border */
.module-chip[data-module="3"],
.module-chip[data-module="6"],
.module-chip[data-module="8"],
.module-chip[data-module="15"] {
  border-color: color-mix(in srgb, var(--chip-accent) 35%, var(--line));
}


/* ==========================================================================
   7. Risk-vector rows
   Renders vectors[] from module_7: each has vector, rating, changed,
   confidence, sources.
   ========================================================================== */

.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

.risk-grid:empty { display: none; }

.risk-item {
  background-color: var(--card);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border-left: 3px solid transparent;
  transition: box-shadow var(--motion-base) var(--motion-easing);
}

.risk-item:hover {
  box-shadow: var(--elev-1);
}

/* PI-1 */
.risk-item[data-absent="true"] { display: none; }

.risk-item__rating {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.risk-item__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text);
  margin-bottom: var(--space-1);
}

.risk-item__meta {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* Rating levels — left-border + rating-text colour via custom property */
.risk-item[data-rating="HIGH"] {
  border-left-color: var(--red);
}
.risk-item[data-rating="HIGH"] .risk-item__rating {
  color: var(--red);
}

.risk-item[data-rating="ELEVATED"] {
  border-left-color: var(--amber);
}
.risk-item[data-rating="ELEVATED"] .risk-item__rating {
  color: var(--amber);
}

.risk-item[data-rating="MODERATE"] {
  border-left-color: var(--gold);
}
.risk-item[data-rating="MODERATE"] .risk-item__rating {
  color: color-mix(in srgb, var(--gold) 85%, var(--text));
}

.risk-item[data-rating="LOW"] {
  border-left-color: var(--green);
}
.risk-item[data-rating="LOW"] .risk-item__rating {
  color: var(--green);
}


/* ==========================================================================
   8. AI-Unverified badge (standalone block variant)
   Inline badge variant is covered under §4 above.
   ========================================================================== */

/* Already defined under badge--ai-unverified in §4.
   Block-level notice for article/section context: */
.aim-unverified-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: color-mix(in srgb, var(--amber) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
}

.aim-unverified-notice:empty { display: none; }


/* ==========================================================================
   9. Paywall / subscriber gate
   Not-advice boundary + subscription CTA block.
   ========================================================================== */

.aim-gate {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background-color: var(--surface);
}

.aim-gate__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text);
  margin: 0 0 var(--space-3) 0;
}

.aim-gate__body {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.aim-gate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background-color: var(--acc);
  color: var(--card);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--motion-fast) var(--motion-easing),
    box-shadow var(--motion-fast) var(--motion-easing);
}

.aim-gate__cta:hover {
  background-color: var(--accent-dim);
  box-shadow: var(--elev-1);
}

.aim-gate__cta:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

.aim-gate__not-advice {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-style: italic;
}


/* ==========================================================================
   10. Export / action row
   ========================================================================== */

.aim-action-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.aim-action-row:empty { display: none; }

.aim-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color var(--motion-fast) var(--motion-easing),
    border-color var(--motion-fast) var(--motion-easing),
    color var(--motion-fast) var(--motion-easing);
  text-decoration: none;
}

.aim-btn:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Primary */
.aim-btn--primary {
  background-color: var(--acc);
  color: var(--card);
  border-color: var(--acc);
}

.aim-btn--primary:hover {
  background-color: var(--accent-dim);
  border-color: var(--accent-dim);
}

/* Secondary / outline */
.aim-btn--secondary {
  background-color: transparent;
  color: var(--acc);
  border-color: var(--line);
}

.aim-btn--secondary:hover {
  background-color: var(--surface);
  border-color: var(--acc);
}

/* Ghost */
.aim-btn--ghost {
  background-color: transparent;
  color: var(--text-muted);
  border-color: transparent;
}

.aim-btn--ghost:hover {
  background-color: var(--surface);
  color: var(--text);
}


/* ==========================================================================
   AIM CONSUMER — components.css FE-2 additive extension
   Added per FE-2-html-build.md §2 Rule 1: "ADD that rule to components.css
   (additive only, no edits to existing rules)".
   These rules provide the shell/layout/widget classes from the mockup
   design system that were not yet present in the FE-1-shipped components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   11. App shell layout
   Replicates the two-column sidebar + main layout from mockup inline styles.
   Uses CSS custom properties from base.css — no hardcoded hex.
   -------------------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: 228px 1fr;
  min-height: 100vh;
}

.side {
  background-color: var(--card);
  border-right: 1px solid var(--line);
  padding: 18px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}

.brand {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 19px;
  padding: 0 20px 16px;
  border-bottom: 2px solid var(--text);
}

.brand em {
  color: var(--gold);
  font-style: normal;
}

.snav {
  padding: 12px 0;
}

.snav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background-color var(--motion-fast) var(--motion-easing),
              color var(--motion-fast) var(--motion-easing);
}

.snav a:hover {
  background-color: var(--surface);
  color: var(--text);
}

.snav a.on {
  color: var(--acc);
  background-color: var(--surface);
  border-left: 3px solid var(--gold);
  font-weight: 600;
}

.snav .ic {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.acct {
  padding: 14px 20px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  margin-top: 8px;
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   12. Topbar
   -------------------------------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background-color: var(--card);
  position: sticky;
  top: 0;
  z-index: 5;
}

.top .h {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
}

.filter {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}

.sel {
  background-color: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 6px 10px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-family: var(--font-sans);
}

/* AI-Unverified inline indicator */
.aiu {
  font-size: 10px;
  letter-spacing: 1px;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Content area
   -------------------------------------------------------------------------- */

.content {
  padding: 22px 26px;
  max-width: 1180px;
}

/* --------------------------------------------------------------------------
   14. Card grid layout primitives (mockup-originated .row .r2 .r3 .r4)
   -------------------------------------------------------------------------- */

.row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.r4 { grid-template-columns: repeat(4, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r2 { grid-template-columns: 1fr 1fr; }

/* --------------------------------------------------------------------------
   15. Card (legacy mockup variant — .card and .card.span2)
   This is a structural alias; .aim-card is the semantic component.
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.card.span2 {
  grid-column: span 2;
}

/* --------------------------------------------------------------------------
   16. Card header label (.ck)
   -------------------------------------------------------------------------- */

.ck {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Big KPI number */
.big {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--acc);
  line-height: 1.1;
}

/* Sparkline */
.spark {
  height: 30px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin-top: 8px;
}

.spark i {
  flex: 1;
  background-color: var(--acc);
  opacity: 0.35;
  border-radius: 2px;
  display: block;
}

/* --------------------------------------------------------------------------
   17. Tag chips (mockup .tag variants)
   Legacy semantic tags — mapped to badge classes in new HTML,
   but kept for backward compatibility with mockup-derived markup.
   -------------------------------------------------------------------------- */

.tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-weight: 600;
  display: inline-block;
  white-space: nowrap;
}

/* Severity colours — all reference token vars */
.elev  { background-color: color-mix(in srgb, var(--red) 12%, var(--bg));   color: var(--red); }
.warn  { background-color: color-mix(in srgb, var(--amber) 14%, var(--bg)); color: var(--amber); }
.ok    { background-color: color-mix(in srgb, var(--green) 12%, var(--bg)); color: var(--green); }
.mutt  { background-color: var(--surface); color: var(--text-muted); }

/* Tier tags */
.t1 { background-color: color-mix(in srgb, var(--acc) 10%, var(--bg)); color: var(--acc); }
.t2 { background-color: var(--surface); color: var(--text-muted); }
.t3 { background-color: color-mix(in srgb, var(--amber) 10%, var(--bg)); color: var(--amber); }

/* Confidence tags */
.conf   { background-color: color-mix(in srgb, var(--green) 12%, var(--bg));  color: var(--green); }
.high   { background-color: color-mix(in srgb, var(--amber) 14%, var(--bg));  color: var(--amber); }
.assess { background-color: color-mix(in srgb, var(--red) 10%, var(--bg));    color: var(--red); }

/* --------------------------------------------------------------------------
   18. Sub-text helper
   -------------------------------------------------------------------------- */

.sub {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   19. Bar chart primitive
   -------------------------------------------------------------------------- */

.bar {
  height: 7px;
  background-color: var(--surface);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 5px;
}

.bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   20. Export link chip (.exp)
   -------------------------------------------------------------------------- */

.exp {
  font-size: 11px;
  color: var(--acc);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: var(--radius-lg);
  transition: background-color var(--motion-fast) var(--motion-easing),
              border-color var(--motion-fast) var(--motion-easing);
}

.exp:hover {
  background-color: var(--surface);
  border-color: var(--acc);
}

/* --------------------------------------------------------------------------
   21. Section heading (.sec)
   -------------------------------------------------------------------------- */

h3.sec {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--acc);
  margin: 22px 0 6px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

/* --------------------------------------------------------------------------
   22. Gap block (.gap)
   -------------------------------------------------------------------------- */

.gap {
  border-left: 3px solid var(--gold);
  padding: 10px 14px;
  background-color: var(--surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   23. Layer row (.layer) — EU AI Act 7-layer tracker
   -------------------------------------------------------------------------- */

.layer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-subtle);
  font-size: 13px;
}

.layer:last-child {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   24. Status dot (.dotg)
   -------------------------------------------------------------------------- */

.dotg {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   25. Footer (.foot)
   -------------------------------------------------------------------------- */

.foot {
  padding: 16px 26px;
  border-top: 2px solid var(--text);
  color: var(--text-muted);
  font-size: 11px;
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   26. Absence-contract empty state (.aim-empty-state)
   PI-1 graceful fallback: renders empty_reason + absence_basis
   when a module has null_signal=true.
   -------------------------------------------------------------------------- */

.aim-empty-state {
  padding: var(--space-5) var(--space-6);
  background-color: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.aim-empty-state[hidden] {
  display: none;
}

.aim-empty-state__reason {
  font-weight: var(--font-medium);
  color: var(--text);
  font-style: normal;
  margin-bottom: var(--space-1);
}

.aim-empty-state__basis {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   27. Responsive overrides
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }
  .side {
    display: none;
  }
  .r4, .r3, .r2 {
    grid-template-columns: 1fr;
  }
  .card.span2 {
    grid-column: span 1;
  }
}

/* --------------------------------------------------------------------------
   28. Rich site footer (methodology + content pages)
   Carries the legacy footer's information content (brand · nav · powered-by ·
   disclaimer · copyright) adapted to the new token palette. Additive; the
   minimal `.foot` compliance line on dashboard pages is unchanged.
   -------------------------------------------------------------------------- */

.site-foot {
  border-top: 2px solid var(--text);
  padding: 22px 26px 28px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: var(--leading-relaxed);
}

.site-foot__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-subtle);
}

.site-foot__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--font-semibold);
  color: var(--acc);
  font-size: 13px;
}

.site-foot__brand .mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background-color: var(--acc);
  flex-shrink: 0;
}

.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.site-foot__links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-easing);
}

.site-foot__links a:hover {
  color: var(--acc);
}

.site-foot__bottom {
  padding-top: 14px;
}

.site-foot__powered {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-weight: var(--font-semibold);
  font-size: 11.5px;
  text-decoration: none;
}

.site-foot__powered:hover {
  text-decoration: underline;
}

.site-foot__disclaimer {
  margin: 10px 0 6px;
  font-size: 11.5px;
  color: var(--text-faint);
  max-width: 760px;
}

.site-foot__copy {
  font-size: 11px;
  color: var(--text-faint);
}

/* Methodology prose helpers */
.meth-lede {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 6px;
}
.meth-p { font-size: 13px; line-height: var(--leading-relaxed); margin: 8px 0; max-width: 860px; }
.meth-p--muted { color: var(--text-muted); }
.meth-list { font-size: 13px; line-height: var(--leading-relaxed); margin: 8px 0 14px; padding-left: 20px; max-width: 860px; }
.meth-list li { margin: 4px 0; }
.filter-block { border-left: 3px solid var(--gold); padding: 10px 14px; background-color: var(--surface); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin-bottom: 10px; }
.filter-block b { color: var(--acc); }
.editor-block { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }


/* ==========================================================================
   §29  PUBLIC / MARKETING PAGES — homepage, login, brief, api
   De-inlined from operator mockups 11 (homepage), login, 13 (brief), 14 (api).
   These pages use a top-header nav shell (NOT the dashboard .app/.side shell):
   marketing landing, auth, sample content, and API docs are public surfaces.
   Palette mapped to the canonical token system (base.css :root) — NOT the
   mockups' local hex vars. Serif headings (Georgia) per house style.
   Authority: operator directive 2026-06-05 "import the homepage and the other
   pages I gave you the mockups for"; routing decision 2026-06-05 (homepage at
   /, dashboard at /dashboard.html).
   ========================================================================== */

/* ---- shared public shell ------------------------------------------------ */
.pub { background-color: var(--bg); color: var(--text); font-family: Georgia, "Times New Roman", serif; line-height: 1.62; }
.pub .sans { font-family: var(--font-sans); }
.pub-wrap { max-width: 1060px; margin: 0 auto; padding: 0 28px; }

.pub-head { border-bottom: 2px solid var(--text); padding: 18px 0; position: sticky; top: 0; background-color: rgba(250,248,243,.94); backdrop-filter: blur(8px); z-index: 20; }
.pub-head__inner { max-width: 1060px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.pub-mast { font-size: 23px; letter-spacing: .4px; font-weight: 700; line-height: 1; text-decoration: none; color: var(--text); }
.pub-mast em { color: var(--gold); font-style: normal; }
.pub-kick { font-family: var(--font-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.pub-nav a { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); text-decoration: none; margin-left: 18px; }
.pub-nav a.on { color: var(--acc); border-bottom: 2px solid var(--gold); padding-bottom: 4px; }
.pub-nav a:hover { color: var(--acc); }
.pub-aiu { font-family: var(--font-sans); font-size: 10px; letter-spacing: 1px; border: 1px solid var(--line); color: var(--text-muted); padding: 4px 8px; border-radius: 3px; margin-left: 18px; }

.pub-cta { font-family: var(--font-sans); display: inline-block; background-color: var(--acc); color: #fff; padding: 14px 26px; text-decoration: none; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 26px; font-weight: 600; border: none; cursor: pointer; }
.pub-cta:hover { background-color: var(--accent-dim); }
.pub-cta--ghost { background-color: transparent; color: var(--acc); border: 1px solid var(--acc); margin-left: 8px; }
.pub-cta--ghost:hover { background-color: var(--surface); }

.pub-foot { border-top: 2px solid var(--text); padding: 24px 0; font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); }
.pub-foot a { color: var(--text-muted); }
.pub-foot a:hover { color: var(--acc); }

/* ---- homepage ----------------------------------------------------------- */
.hero { padding: 56px 0 40px; }
.hero h1 { font-size: 46px; line-height: 1.1; max-width: 840px; margin: 14px 0 18px; font-weight: 400; }
.hero h1 em { color: var(--acc); font-style: italic; }
.hero .lede { font-size: 18px; color: var(--text-muted); max-width: 640px; }

.band { background-color: #11161f; color: #e7ecf5; border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); }
.band .pub-wrap { padding: 30px 28px; }
.band .pub-kick { color: #8893ab; }
.bandgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 16px; }
.bcard { background-color: #171e2c; border: 1px solid #232d44; border-radius: 8px; padding: 16px; }
.bk { font-family: var(--font-sans); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #8893ab; margin-bottom: 8px; }
.bbig { font-family: var(--font-sans); font-size: 30px; font-weight: 700; }
.bsub { font-family: var(--font-sans); font-size: 11px; color: #8893ab; }
.band table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13px; }
.band td, .band th { text-align: left; padding: 9px 6px; border-bottom: 1px solid #232d44; }
.band th { color: #8893ab; font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.pub-tag { font-family: var(--font-sans); font-size: 11px; padding: 2px 7px; border-radius: 4px; display: inline-block; margin: 2px 0; font-weight: 600; }
.t-elev { background-color: rgba(192,73,47,.18); color: #ff8a6b; }
.t-ok { background-color: rgba(61,220,151,.15); color: #3ddc97; }
.t-warn { background-color: rgba(255,207,92,.15); color: #ffcf5c; }

.cols { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.col { padding: 32px 24px; border-right: 1px solid var(--line); }
.col:last-child { border-right: none; }
.col h3 { font-size: 12px; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 1.4px; color: var(--gold); margin-bottom: 10px; }
.col p { font-size: 15px; color: var(--text-muted); }

.pub-sec { padding: 50px 0; }
.pub-sec h2 { font-size: 30px; font-weight: 400; margin-bottom: 6px; }
.feeds { columns: 2; column-gap: 40px; margin-top: 18px; }
.feed { break-inside: avoid; padding: 13px 0; border-bottom: 1px solid var(--line); }
.feed b { font-size: 16px; }
.feed span { display: block; font-size: 14px; color: var(--text-muted); font-family: var(--font-sans); }
.pub-trust { background-color: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); padding: 28px 30px; font-size: 16px; color: var(--text-muted); }
.pub-trust b { color: var(--text); }
.pricebox { background-color: var(--card); border: 1px solid var(--line); padding: 38px; display: grid; grid-template-columns: 2fr 1fr; gap: 36px; align-items: center; }
.fr { font-family: var(--font-sans); font-size: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
.amt { font-size: 46px; }
.amt small { font-size: 17px; color: var(--text-muted); }
.ent { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 16px; font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); }

/* ---- login -------------------------------------------------------------- */
.login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: calc(100vh - 120px); }
.login-left { padding: 64px 56px; border-right: 1px solid var(--line); }
.login-left h1 { font-size: 34px; font-weight: 400; line-height: 1.15; margin: 14px 0 18px; }
.login-left h1 em { color: var(--acc); font-style: italic; }
.login-left ul { list-style: none; padding: 0; margin: 22px 0; }
.login-left li { font-size: 15px; color: var(--text-muted); padding: 8px 0 8px 26px; position: relative; }
.login-left li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.login-right { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.login-tab { display: flex; gap: 6px; margin-bottom: 22px; }
.login-tab button { flex: 1; font-family: var(--font-sans); font-size: 13px; padding: 10px; border: 1px solid var(--line); background-color: var(--card); cursor: pointer; color: var(--text-muted); border-radius: 6px; }
.login-tab button.on { background-color: var(--acc); color: #fff; border-color: var(--acc); font-weight: 600; }
.login-right label { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); display: block; margin: 14px 0 6px; }
.login-right input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; font-size: 15px; background-color: var(--card); font-family: var(--font-sans); color: var(--text); }
.login-right .pub-cta { display: block; width: 100%; text-align: center; border-radius: 7px; margin-top: 22px; padding: 14px; }
.login-price { background-color: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin-bottom: 18px; }
.login-price .amt { font-size: 30px; }
.login-price .amt small { font-size: 14px; color: var(--text-muted); }
.login-muted { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); margin-top: 14px; text-align: center; }
.login-muted a { color: var(--acc); }
.is-hidden { display: none; }

/* ---- brief + api (shared content-page chrome) -------------------------- */
.pub-sec h3 { font-size: 20px; font-weight: 400; margin: 26px 0 8px; color: var(--acc); }
.pub-sec p { color: var(--text-muted); }
.pagehead { padding: 46px 0 30px; border-bottom: 1px solid var(--line); }
.pagehead h1 { font-size: 40px; font-weight: 400; line-height: 1.12; max-width: 820px; margin: 12px 0 14px; }
.pagehead h1 em { color: var(--acc); font-style: italic; }
.pagehead .lede { font-size: 18px; color: var(--text-muted); max-width: 680px; }
.pub-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13.5px; margin: 14px 0; }
.pub-table td, .pub-table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pub-table th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.t-t1 { background-color: #eef3f8; color: var(--acc); }
.t-conf { background-color: rgba(45,106,63,.12); color: var(--green); }
.t-assess { background-color: rgba(154,123,63,.16); color: var(--gold); }
.t-t2 { background-color: var(--surface); color: var(--text-muted); }
.pub-card { background-color: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 24px; margin: 14px 0; }
.cardrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pub-card .pub-trust, .pub-sec .pub-trust { margin: 18px 0; padding: 24px 28px; font-size: 15px; }
.code-block { background-color: #11161f; color: #cdd6e8; border-radius: 10px; padding: 20px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; overflow-x: auto; margin: 14px 0; white-space: pre; }
.code-block .c { color: #7a86a3; }
.code-block .s { color: #7fd1bd; }
.code-block .k { color: #8aa9ff; }
.code-block .n { color: #e6b673; }
.notice { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); background-color: var(--surface); border-radius: 6px; padding: 12px 16px; margin: 14px 0; }

/* ---- public-page responsive -------------------------------------------- */
@media (max-width: 900px) {
  .pub-nav a:not(.pub-aiu) { display: none; }
}
@media (max-width: 780px) {
  .cols, .pricebox, .cardrow { grid-template-columns: 1fr; }
  .col { border-right: none; border-bottom: 1px solid var(--line); }
  .feeds { columns: 1; }
  .hero h1 { font-size: 31px; }
  .pagehead h1 { font-size: 29px; }
  .bandgrid > * { grid-column: span 12 !important; }
}
@media (max-width: 760px) {
  .login-grid { grid-template-columns: 1fr; }
  .login-left { border-right: none; border-bottom: 1px solid var(--line); padding: 40px 28px; }
  .login-right { padding: 40px 28px; }
}



/* ==========================================================================
   §30  SEMANTIC SEVERITY + DESIGNER TREATMENT CLASSES
   AIM colour+contrast uplift sprint (2026-06).
   Extends base.css :root tokens —crit/--high/--mod/--ok (+tints).
   NO !important. Light mode only. Does NOT touch dark_overrides.
   WCAG: --high and --mod are FILL-ONLY; text uses WCAG-pass alternatives.
   ========================================================================== */

/* --------------------------------------------------------------------------
   30a. Severity tag chips — .tag.crit / .tag.high / .tag.mod / .tag.ok
   Aliases so BOTH existing markup (.tag.elev/.warn/.ok) and new designer
   markup (.tag.crit/.tag.high/.tag.mod/.tag.ok) work without breaking.

   Text colours use WCAG-pass equivalents (not the raw fill colours):
     .crit → text var(--red) #8b2b2b  (7.98 on --bg)
     .high → text var(--high-text) #7d5f20 (5.61 on --bg)
     .mod  → text var(--text-muted) #6b6559 (5.45 on --bg)
     .ok   → text var(--green) #2d6a3f (6.10 on --bg)
   -------------------------------------------------------------------------- */

.tag {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  display: inline-block;
  line-height: 1.5;
  white-space: nowrap;
}

/* Severity — ELEVATED / extreme */
.tag.crit,
.tag.elev {
  background: var(--crit-b);
  color: var(--red);      /* #8b2b2b: 7.98 AA on --bg ✓ */
}

/* Severity — High */
.tag.high {
  background: var(--high-b);
  color: var(--high-text); /* #7d5f20: 5.61 AA on --bg ✓ */
}

/* Severity — Moderate / watch */
.tag.mod,
.tag.warn {
  background: var(--mod-b);
  color: var(--text-muted); /* #6b6559: 5.45 AA on --bg ✓ */
}

/* Severity — Low / ok / stable */
.tag.ok {
  background: var(--ok-b);
  color: var(--green);    /* #2d6a3f: 6.10 AA on --bg ✓ */
}

/* --------------------------------------------------------------------------
   30b. Confidence chips — .tag.cf-conf / .tag.cf-high / .tag.cf-assess
   Complement the existing .badge--confirmed/.badge--high/.badge--assessed.
   These are the designer's compact inline variants.
   -------------------------------------------------------------------------- */

.tag.cf-conf {
  background: var(--acc);
  color: #fff;            /* #fff on #1d3b5e: ~10.8 AA ✓ */
}

.tag.cf-high {
  background: transparent;
  color: var(--acc);
  border: 1px solid var(--acc);
}

.tag.cf-assess {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--line);
}

/* --------------------------------------------------------------------------
   30c. Direction arrows
   -------------------------------------------------------------------------- */

.up   { color: var(--crit); font-weight: 700; }
.down { color: var(--ok);   font-weight: 700; }
.flat { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   30d. KPI card severity modifiers — .kpi.alert / .kpi.good
   Adds FILL tint (--crit-b wash) and top-border colour modifier.
   Does NOT reflow the existing .card / .big / .spark structure.
   -------------------------------------------------------------------------- */

.kpi.alert {
  border-top: 4px solid var(--crit);
  background: linear-gradient(180deg, var(--crit-b), var(--card));
}

.kpi.alert .big {
  color: var(--crit);
}

.kpi.good {
  border-top: 4px solid var(--ok);
}

.kpi.good .big {
  color: var(--ok);
}

/* --------------------------------------------------------------------------
   30e. Table semantic style — navy header, zebra, hover
   Applied to .aim-table (existing class) so ALL data tables pick it up.
   Overrides the pale --surface header with the navy accent.
   -------------------------------------------------------------------------- */

.aim-table thead {
  background-color: var(--acc);
}

.aim-table thead th {
  color: #fff;            /* #fff on #1d3b5e: 10.8 AA ✓ */
}

.aim-table tbody tr:nth-child(even) {
  background-color: var(--surface);
}

.aim-table tbody tr:hover {
  background-color: var(--mod-b);
}

/* --------------------------------------------------------------------------
   30f. Section headers — gold rule + gold square chip
   Extends existing h3.sec (§21). Adds the gold bottom-border rule and
   before-square. Does NOT restructure markup.
   -------------------------------------------------------------------------- */

h3.sec {
  color: var(--acc);
  border-top: none;
  border-bottom: 2px solid var(--gold);  /* gold rule below */
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

h3.sec::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--gold);
  display: inline-block;
  border-radius: 2px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   30g. Dark hero band (navy bg) — .band variant for cross-monitor / hero
   Applies navy background to an existing container block (.band class).
   NOTE: .band already exists in §29 as a homepage marketing band.
   The subscriber-dashboard variant uses .band.dash to avoid conflict.
   -------------------------------------------------------------------------- */

.band.dash {
  background: var(--acc);
  color: #e9eef5;
  border-radius: 14px;
  padding: 24px;
  margin: 16px 0;
  box-shadow: 0 6px 20px rgba(22, 48, 77, 0.25);
}

.band.dash .ck { color: var(--gold); }
.band.dash .big { color: #fff; }

.flagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 6px;
}

.flag {
  font-family: var(--font-sans);
  font-size: 11.5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 7px 11px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.peer {
  font-family: var(--font-sans);
  font-size: 11px;
  background: rgba(154, 123, 63, 0.18);
  color: #f0e6d2;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(154, 123, 63, 0.4);
}

/* --------------------------------------------------------------------------
   30h. COMPOSITE GAUGE — .gauge / .gnum / .gtrack
   Treatment 1: Governance Health composite score visualised as a filled bar.
   Preserves data-kpi="governance_health_composite" on the .big element.
   -------------------------------------------------------------------------- */

.gauge {
  text-align: center;
}

.gnum {
  font-size: 54px;
  line-height: 1.1;
  color: var(--acc);
}

.gnum small {
  font-size: 16px;
  color: var(--text-muted);
}

.gtrack {
  height: 14px;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  margin: 12px 0 6px;
}

.gtrack i {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--crit), var(--high), var(--ok));
  /* Set width inline per score value, e.g. style="width:58%" */
}

/* --------------------------------------------------------------------------
   30i. COMPONENT / CONCENTRATION PROGRESS BARS — .compbar
   Treatment 2 (governance components) + Treatment 3 (concentration bars).
   .bigbar variant: taller bars for concentration page.
   -------------------------------------------------------------------------- */

.compbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 9px 0;
  font-family: var(--font-sans);
  font-size: 12px;
}

.compbar .nm {
  width: 120px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.compbar .track {
  flex: 1;
  height: 9px;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
}

.compbar .track i {
  display: block;
  height: 100%;
  border-radius: 6px;
  /* Set width + background inline per value + severity */
}

.compbar .v {
  width: 38px;
  text-align: right;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}

/* Concentration page: larger bars */
.bigbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  font-family: var(--font-sans);
}

.bigbar .nm {
  width: 150px;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  flex-shrink: 0;
}

.bigbar .track {
  flex: 1;
  height: 22px;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.bigbar .track i {
  display: block;
  height: 100%;
  border-radius: 8px;
}

.bigbar .lab {
  position: absolute;
  right: 10px;
  top: 0;
  line-height: 22px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.bigbar .trend {
  width: 100px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   30j. DELTA LEADERBOARD — .delta / .rank / .typ
   Treatment 4: numbered rank badges + type-colour tags.
   Preserves data-drawer="delta" data-key hooks on the <tr> elements.
   -------------------------------------------------------------------------- */

.delta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-subtle);
  font-family: var(--font-sans);
  font-size: 13px;
}

.delta:last-child {
  border-bottom: none;
}

.rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;            /* #fff on #1d3b5e: 10.8 AA ✓ */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.delta .typ {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Type-colour variants for delta strip tags */
.typ.crit, .typ.regulatory { background: var(--crit-b); color: var(--red); }
.typ.high, .typ.investment  { background: var(--high-b); color: var(--high-text); }
.typ.mod,  .typ.capability  { background: var(--mod-b);  color: var(--text-muted); }
.typ.ok,   .typ.governance  { background: var(--ok-b);   color: var(--green); }

/* --------------------------------------------------------------------------
   30k. KEY JUDGMENT card — .kj / .kj .id
   Existing classes; adds gold-id colour and navy border (no structural change).
   -------------------------------------------------------------------------- */

.kj {
  border-left: 4px solid var(--acc);
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--surface);
  border-radius: 0 8px 8px 0;
}

.kj .id {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   30l. Dashboard app layout with top nav band
   When .pub-head is inserted as first child of <body> ABOVE .app,
   the .app flex container must account for the sticky nav height (~62px).
   This is a minimal wrapper adjustment — no content reflow.
   -------------------------------------------------------------------------- */

body.has-topnav {
  padding-top: 0;  /* pub-head is sticky; body needs no extra offset */
}

body.has-topnav .app {
  /* .app is the full-width flex container; pub-head sits above it naturally
     because pub-head is a block-level element before .app in source order */
  min-height: calc(100vh - 62px);
}

/* On subscriber pages, the existing .pub-head sticky nav overlaps nothing
   because .app layout is below it in flow. No z-index conflicts noted. */

/* Responsive: hide pub-nav links on small screens (matches public pages) */
@media (max-width: 900px) {
  body.has-topnav .pub-nav a:not(.pub-aiu) { display: none; }
}

/* --------------------------------------------------------------------------
   31. Risk Vector Radar — BRIEF-A
   .aim-radar-mount  — outer mount div in risk-vectors.html
   Mirrors asym-intel-commons radar layout classes:
     .asym-radar-wrap, .asym-chart-wrap--radar-fill, .asym-radar-dim-list, etc.
   -------------------------------------------------------------------------- */

.aim-radar-mount {
  min-height: 320px;
  max-height: 560px;
  margin-bottom: 24px;
}

.aim-radar-wrap,
.asym-radar-wrap {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.aim-radar-chart-wrap,
.asym-chart-wrap--radar-fill {
  flex: 0 0 360px;
  min-height: 320px;
  max-height: 480px;
  position: relative;
}

.aim-radar-chart-wrap canvas,
.asym-chart-wrap--radar-fill canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.aim-radar-dim-list,
.asym-radar-dim-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

.asym-radar-dim-row {
  display: grid;
  grid-template-columns: 1fr auto 80px;
  gap: 8px;
  align-items: center;
}

.asym-radar-dim-row__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asym-radar-dim-row__note {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
  white-space: normal;
  line-height: 1.4;
}

.asym-radar-dim-row__score {
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  min-width: 64px;
}

.asym-radar-dim-row__bar-wrap {
  width: 80px;
  height: 6px;
  background: var(--line, rgba(0,0,0,0.08));
  border-radius: 3px;
  overflow: hidden;
}

.asym-radar-dim-row__bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Risk Radar section label */
#risk-radar-section {
  margin-bottom: 24px;
}

#risk-radar-section .section-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px 0;
  letter-spacing: 0.01em;
}

#risk-radar-section .section-note {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

/* Responsive: stack radar vertically on narrow screens */
@media (max-width: 700px) {
  .aim-radar-wrap,
  .asym-radar-wrap {
    flex-direction: column;
  }
  .aim-radar-chart-wrap,
  .asym-chart-wrap--radar-fill {
    flex: none;
    width: 100%;
    min-height: 260px;
  }
}