/* ==========================================================================
   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
   11. App shell layout
   12. Topbar
   13. Content area
   14. Card grid layout primitives (.row .r2 .r3 .r4)
   15. Card (legacy mockup variant — .card)
   16. Card header label (.ck)
   17. Tag chips (mockup .tag variants)
   18. Sub-text helper
   19. Bar chart primitive
   20. Export link chip (.exp)
   21. Section heading (.sec)
   22. Gap block (.gap)
   23. Layer row (.layer) — EU AI Act 7-layer tracker
   24. Status dot (.dotg)
   25. Footer (.foot)
   26. Absence-contract empty state (.aim-empty-state)
   27. Responsive overrides
   28. Rich site footer
   §29. Public / marketing pages (homepage, login, brief, api)
   §30. Semantic severity + designer treatment classes
        30a. Severity tag chips  30b. Confidence chips  30c. Direction arrows
        30d. KPI severity        30e. Table styles       30f. Section headers
        30g. Dark hero band      30h. Composite gauge    30i–l. misc
   31. Risk vector radar — BRIEF-A
   §AIC-DASHBOARD-V2  — cockpit shell + code-panel
   §AIC-SUBNAV        — shared subnav (all pages with aim-subnav)
   §AIC-TOPNAV-SHARED — explicit contrast pins (light + dark mode)
   §AIC-BRIEF-RAIL    — right-rail subnav for brief.html

   NOTE on §AIC-TOPNAV-SHARED: .pub-mast and .pub-nav have two rule blocks.
   Sections 29/structural define font-family, size, weight, flex layout.
   §AIC-TOPNAV-SHARED pins explicit colours to cure the var(--text) dark-mode
   bleed. These are ADDITIVE, not duplicates — both blocks must be present.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   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;
}

/* Gap state colours on the left ID box — class fix (data-gap-state on <li>).
   Applies to all gaps-register uses across the site. */
.gaps-register__item[data-gap-state="assessed"]  .gaps-register__id { color: var(--amber, #c9a356); }
.gaps-register__item[data-gap-state="confirmed"] .gaps-register__id { color: var(--red,   #e05252); }
.gaps-register__item[data-gap-state="possible"]  .gaps-register__id { color: var(--text-muted); }
.gaps-register__item[data-gap-state="open"]       .gaps-register__id { color: var(--amber, #c9a356); }
.gaps-register__item[data-gap-state="resolved"]  .gaps-register__id { color: var(--green, #4caf50); }

.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;
}

[data-theme="dark"] .side {
  background-color: #15294a;  /* darker navy for dark-mode contrast */
  border-right-color: #2e3a4e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .side {
    background-color: #15294a;
    border-right-color: #2e3a4e;
  }
}

.brand {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 19px;
  padding: 0 20px 16px;
  border-bottom: 2px solid rgba(255,255,255,0.25);
  color: #f5f1e8;
}

.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: #c8cfdb;  /* light slate — legible on #1d3b5e navy */
  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: rgba(255,255,255,0.08);  /* subtle lighten on navy */
  color: #ffffff;
}

.snav a.on {
  color: #ffffff;  /* white on navy — active state */
  background-color: rgba(255,255,255,0.12);
  border-left: 3px solid var(--gold);  /* gold left edge preserved */
  font-weight: 600;
}

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

.acct {
  padding: 14px 20px;
  font-size: 13.8px;  /* 11.5px × 1.2 — operator +20% 2026-06-10 */
  color: #b8c2d1;
  border-top: 1px solid rgba(255,255,255,0.18);
  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: 20px;
  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;
}
/* Inside cockpit, content fills its grid cell — no artificial cap */
.app--cockpit .content {
  max-width: none;
}

/* --------------------------------------------------------------------------
   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: 18px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 6px;
}
.meth-p { font-size: 15px; line-height: var(--leading-relaxed); margin: 8px 0; max-width: 860px; }
.meth-p--muted { color: var(--text-muted); }
.meth-list { font-size: 15px; 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: 1400px; margin: 0 auto; padding: 0 40px; }

.pub-head { border-bottom: 2px solid rgba(255,255,255,.15); padding: 18px 0; position: sticky; top: 0; background-color: rgba(29,59,94,.97); backdrop-filter: blur(8px); z-index: 20; }
.pub-head__inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 16px; }
.pub-head__inner > div:first-child { flex-shrink: 0; }
.pub-mast { font-size: 23px; letter-spacing: .4px; font-weight: 700; line-height: 1; text-decoration: none; color: var(--text); font-family: Georgia, "Times New Roman", serif; } /* 2026-06-13: site name 26->23px (-11.5%) per operator "title smaller by 10-15%". PR#1 wrongly bumped this 23->26; reversed here. */
.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 { flex-wrap: wrap; }
.pub-nav a,
.pub-nav-dropdown__trigger { font-family: var(--font-sans); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); text-decoration: none; margin-left: 18px; } /* 2026-06-13: nav headings 12->14px (+16.7%) per operator "headings larger by 10-15%". This is the actual change PR#1 was meant to make. */
.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;
  }
}

/* ==========================================================================
   §AIC-DASHBOARD-V2 — Cockpit shell + code-panel (BRIEF-AIC-DASHBOARD-V2)
   Authority: AD-2026-06-10-AIC-DASHBOARD-V2-CLUSTER-UNIFICATION
   Authored: 2026-06-10 by arti-architect
   ========================================================================== */

/* §AIC-DASHBOARD-V2 — .app--cockpit: true 3-column grid.
   Promotes the dashboard-only inline override from dashboard.html L33-43
   into the global component stylesheet so all 13 cluster pages share it. */
.app.app--cockpit {
  grid-template-columns: 228px 1fr;
  gap: 18px;
}

@media (max-width: 900px) {
  .app.app--cockpit { grid-template-columns: 1fr; }
}

/* §AIC-RESTRUCTURE-BATCH1 — code-panel: dark container with wrapping pre
   Used in .aim-page-outer right column on standalone cluster pages.
   Authority: operator direction 2026-06-11 */
.code-panel {
  background-color: #0F172A;
  border: 1px solid #1E293B;
  border-radius: 12px;
  padding: 24px;
  height: fit-content;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: sticky;
  top: 80px;
  align-self: start;
}
.code-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid #1E293B;
  padding-bottom: 8px;
}
.code-panel__method {
  background: #5b8dbf;
  color: #0F172A;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.code-panel__path {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 11px;
  color: #94a3b8;
  flex: 1;
}
.code-panel pre,
.code-panel__body {
  margin: 0;
  padding: 8px;
  background-color: transparent;
  border: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-radius: 4px;
}
.code-panel code {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #F8FAFC;
  background-color: transparent;
  border: none;
  padding: 0;
}
/* Syntax token colours */
.code-panel .tok-key    { color: #38BDF8; }  /* sky blue — attr/property */
.code-panel .tok-str    { color: #34D399; }  /* mint green — strings */
.code-panel .tok-num    { color: #F472B6; }  /* soft pink — numbers */
.code-panel .tok-bool   { color: #fb923c; }  /* orange — booleans */
.code-panel .tok-null   { color: #64748B; }  /* muted slate — null */
.code-panel .tok-punct  { color: #64748B; }  /* muted slate — punctuation */
.code-panel .tok-comment{ color: #475569; font-style: italic; }
/* hljs compatibility */
.hljs-string, .token.string     { color: #34D399; }
.hljs-number, .token.number     { color: #F472B6; }
.hljs-attr, .token.property     { color: #38BDF8; }
.hljs-punctuation, .token.punctuation { color: #64748B; }

@media (max-width: 1024px) {
  .code-panel { position: static; }
}

/* §AIC-SUBNAV — brief-rail style applied to all page subnavs.
   Column position is controlled by the parent grid (228px 1fr for dashboard,
   1fr 216px for brief-outer). This class controls only visual style.
   Authority: operator direction 2026-06-11 — brief.html rail is the reference. */
.aim-subnav {
  position: sticky;
  top: 72px;
  padding: 16px;
  background-color: #1d3b5e;
  border-right: 1px solid #152d4a;
  align-self: start;
  min-height: calc(100vh - 72px);
}
[data-theme="dark"] .aim-subnav {
  background-color: #15294a;
  border-right-color: #2e3a4e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aim-subnav {
    background-color: #15294a;
    border-right-color: #2e3a4e;
  }
}

.aim-subnav__nav a {
  display: block;
  padding: 6px 4px;
  font-size: 15px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -18px;
  padding-left: 16px;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aim-subnav__nav a:hover {
  color: #fff;
  border-left-color: rgba(255,255,255,0.5);
}
.aim-subnav__nav a.on {
  color: #fff;
  border-left-color: var(--gold);
  font-weight: 600;
}
.aim-subnav__footer {
  padding: 6px 4px 6px 16px;
  margin-left: -18px;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 10px;
  padding-top: 10px;
}
.aim-subnav__footer a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
}
.aim-subnav__footer a:hover { text-decoration: underline; color: #f5f1e8; }
@media (max-width: 900px) {
  .aim-subnav { display: none; }
}

/* §AIC-RESTRUCTURE-BATCH1 — standalone cluster page outer grid
   70% main content (left), 30% code panel (right).
   Authority: operator direction 2026-06-11 */
.aim-page-outer {
  display: grid;
  grid-template-columns: 260px 1fr;  /* 260px fixed left code-panel; fluid right col fills to viewport */
  gap: 2.5rem;
  width: 100%;                  /* full viewport width — no max-width, no right padding */
  padding-left: 40px;           /* left breathing room only — matches pub-head__inner 40px; right col reaches viewport edge like .app .content */
  box-sizing: border-box;
  align-items: start;
}
/* Gap above code-panel only — margin-top on the aside, not on the wrapper.
   padding-top on wrapper would also push main content down; margin-top here is isolated to the left col. */
.aim-page-outer > aside {
  margin-top: 24px;
}
@media (max-width: 1024px) {
  .aim-page-outer {
    grid-template-columns: 1fr;
    padding: 16px 20px;
  }
  .aim-page-outer > aside {
    margin-top: 0;
  }
}


/* End §AIC-DASHBOARD-V2 */

/* ── Full Page link (cockpit top bar) — 2026-06-10 ──────────────────────────
   Replaces AI-UNVERIFIED .aiu span in the cockpit .top bar.
   Gold border/text box, links to page URL in new tab.
   The AI-Unverified disclosure remains in the footer. */
.ck-fullpage {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--gold, #9a7b3f);
  color: var(--gold, #9a7b3f);
  padding: 4px 10px;
  border-radius: var(--radius-sm, 3px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}
.ck-fullpage:hover {
  background: rgba(154, 123, 63, 0.10);
  color: var(--gold, #9a7b3f);
}


/* ==========================================================================
   §AIC-TOPNAV-SHARED — explicit contrast pins (moved from per-page inline style)

   Root cause of prior contrast bug: base.css binds .pub-mast and .pub-kick
   to var(--text), and base.css ALSO contains an @media (prefers-color-scheme: dark)
   block that re-binds --text to #e8e4dc (light) for any visitor whose OS
   prefers dark, EVEN when they have user-toggled the page to light theme.

   Cure: pin .pub-mast + .pub-kick + .pub-nav a to EXPLICIT hex values
   in both light and dark modes, bypassing the broken var(--text) cascade.

   Authority: cure 2026-06-10 PR #20; moved to components.css 2026-06-11
   (session arti-2026-06-11-0736) per FE architecture Rule 1 — no per-consumer
   fork of shared primitives.
   ========================================================================== */

.pub-head__inner { display: flex; align-items: center; gap: 16px; }
.pub-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }

/* LIGHT MODE (default) — pin to dark text on cream */
/* §AIC-TOPNAV-SHARED — navy background (#1d3b5e, matches subnav/rail); all text pinned to white/near-white for contrast */
.pub-mast { color: #ffffff; }
.pub-mast em { color: #f0c96e; }
.pub-kick { color: rgba(255,255,255,.65); }
.pub-nav a { color: rgba(255,255,255,.80); text-decoration: none; }
.pub-nav a.on { color: #ffffff; font-weight: 700; border-bottom: 2px solid #f0c96e; padding-bottom: 3px; }
.pub-nav a:hover { color: #ffffff; }
/* dropdown trigger colour pinned in .pub-nav-dropdown__trigger rule below */

/* DARK MODE — explicit toggle */
/* DARK MODE — navy bg unchanged; keep white text consistent */
[data-theme="dark"] .pub-mast { color: #ffffff; }
[data-theme="dark"] .pub-mast em { color: #f0c96e; }
[data-theme="dark"] .pub-kick { color: rgba(255,255,255,.60); }
[data-theme="dark"] .pub-nav a { color: rgba(255,255,255,.78); }
[data-theme="dark"] .pub-nav a.on { color: #ffffff; font-weight: 700; border-bottom: 2px solid #f0c96e; padding-bottom: 3px; }

/* PREFERS-COLOR-SCHEME fallback — navy bg; same white text regardless of OS dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pub-mast { color: #ffffff; }
  :root:not([data-theme="light"]) .pub-mast em { color: #f0c96e; }
  :root:not([data-theme="light"]) .pub-kick { color: rgba(255,255,255,.60); }
  :root:not([data-theme="light"]) .pub-nav a { color: rgba(255,255,255,.78); }
  :root:not([data-theme="light"]) .pub-nav a.on { color: #ffffff; font-weight: 700; border-bottom: 2px solid #f0c96e; padding-bottom: 3px; }
}

/* PUB-HEAD background — navy for all themes; dark mode slightly deeper navy */
[data-theme="dark"] .pub-head {
  background-color: rgba(21,41,74,.97);
  border-bottom-color: rgba(255,255,255,.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pub-head {
    background-color: rgba(21,41,74,.97);
    border-bottom-color: rgba(255,255,255,.10);
  }
}

/* Intelligence dropdown */
.pub-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pub-nav-dropdown__trigger {
  background: none;
  border: none;
  padding: 0;
  color: rgba(255,255,255,.80); /* navy bar — white text */
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}
[data-theme="dark"] .pub-nav-dropdown__trigger,
.pub-nav-dropdown__trigger:where([data-theme-parent="dark"] *) { color: rgba(255,255,255,.78); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pub-nav-dropdown__trigger { color: rgba(255,255,255,.78); }
}
.pub-nav-dropdown__trigger:hover { color: #ffffff; }
[data-theme="dark"] .pub-nav-dropdown__trigger:hover { color: #fff; }
.pub-nav-dropdown__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #1d3b5e;
  border: 1px solid #2a5285;
  border-radius: 0 0 6px 6px;
  padding: 8px 0 6px;
  min-width: 200px;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.pub-nav-dropdown__panel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.pub-nav-dropdown:hover .pub-nav-dropdown__panel,
.pub-nav-dropdown__trigger[aria-expanded="true"] + .pub-nav-dropdown__panel {
  display: block;
}
.pub-nav-dropdown__panel a {
  display: block;
  padding: 7px 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.8) !important;
  text-decoration: none;
  white-space: nowrap;
}
.pub-nav-dropdown__panel a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff !important;
}
.pub-nav-dropdown__panel a.on {
  color: var(--gold) !important;
  font-weight: 600;
}
/* Mobile drawer section label */
.pub-nav-drawer__section {
  padding: 8px 16px 4px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint, #999);
  font-weight: 600;
}
/* Theme toggle button */
.pub-theme-toggle {
  background: none; border: 1px solid rgba(255,255,255,.30); color: rgba(255,255,255,.70);
  border-radius: 50%; width: 28px; height: 28px; padding: 0;
  font-size: 16px; line-height: 26px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.pub-theme-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.60); color: #fff; }
/* Base hide — overridden by aim-mobile.css @media(max-width:640px) when --open */
.pub-nav-drawer { display: none; }


/* ==========================================================================
   §AIC-BRIEF-RAIL — right-rail subnav for brief.html
   Moved from brief.html inline <style> block 2026-06-11 (FE audit C5).
   Visual spec: navy #1d3b5e background, gold active indicator, 15px links.
   .brief-outer grid layout also lives here (was page-specific, promoted
   because it governs the brief shell composition shared across brief sections).
   Authority: operator direction 2026-06-11 — brief rail is the reference subnav.
   ========================================================================== */

.brief-outer {
  display: grid;
  grid-template-columns: 1fr 216px;
  gap: 32px;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.brief-rail {
  position: sticky;
  top: 72px;
  padding: 16px;
  background-color: #1d3b5e;
  border-left: none;
  border-radius: 6px;
  align-self: start;
}
.brief-rail__label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding: 0 0 10px 4px;
  font-weight: 600;
}
.brief-rail__nav a {
  display: block;
  padding: 6px 4px;
  font-size: 15px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -18px;
  padding-left: 16px;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.brief-rail__nav a:hover {
  color: #fff;
  border-left-color: rgba(255,255,255,0.5);
}
.brief-rail__nav a.active {
  color: #fff;
  border-left-color: var(--gold);
  font-weight: 600;
}
.brief-rail__divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 10px 0;
}
.brief-rail__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 6px 16px;
  font-size: 14px; /* 2026-06-13: subnav items 12->14px (+16.7%) per operator "[All past issues][Dashboard][Signal Feed][Gaps Register] 10-15% larger". */
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
}
.brief-rail__link:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .brief-outer { grid-template-columns: 1fr; }
  .brief-rail { display: none; }
}

/* ============================================================
   §ASYM-READ-SINGLE-FORMAT (2026-06-13, BRIEF-AIC-ASYM-READ-SINGLE-FORMAT)
   Canonical, shared definition of the Asymmetric-read box. Lives here (not
   inline per-page) so every page that links components.css renders the box
   identically — current pages and any future brief snapshot, with no per-page
   CSS edit. The box is ALWAYS a self-contained light card with dark text, even
   inside the dark .brief-section-block--alt stripe, and regardless of whether
   the upstream producer emits <p class="asym-read"> or <div class="asym-read">.

   Specificity note: each brief/snapshot page carries an inline <style> rule
   `.brief-section-block--alt .asym-read { background: rgba(255,255,255,.08) }`
   that loads AFTER this file and would otherwise win on source order. The
   `body` prefix below raises specificity to (0,3,0) so this shared rule wins
   over the inline (0,2,0) rule on every page without needing to touch each
   page's inline <style>. Fixes the white-on-dark invisible variant. */
body .asym-read,
body .brief-section-block--alt .asym-read {
  border-left: 3px solid #f0c96e;
  background: #fbf3dd;
  color: #1d3b5e;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
}
body .asym-read,
body .asym-read *,
body .brief-section-block--alt .asym-read,
body .brief-section-block--alt .asym-read * {
  color: #1d3b5e;
}
body .asym-read .asym-label,
body .brief-section-block--alt .asym-read .asym-label {
  color: #8a6d1f;
}
body .asym-read a,
body .brief-section-block--alt .asym-read a {
  color: #1d3b5e;
  text-decoration: underline;
}
body .asym-read a:hover,
body .brief-section-block--alt .asym-read a:hover {
  color: #0f2238;
}

/* §AIC-POSTURE — dashboard posture/persona lens selector.
   Injected by /assets/js/posture.js into the top of .aim-subnav (dark navy rail).
   Prototype delivery layer (operator note "introduce a posture setting").
   Pattern: Advennt single-page reorder/show-hide + URL ?view= shareable state.
   Authority: operator direction 2026-06-13 ("as you rec"). */
.aic-posture {
  margin: 0 -18px 14px -18px;
  padding: 0 16px 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.aic-posture__lead {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.aic-posture__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.aic-posture__pills button {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.aic-posture__pills button:hover {
  color: #fff;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.4);
}
.aic-posture__pills button.on {
  color: #1d3b5e;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}
.aic-posture__pills button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.aic-posture__hint {
  margin: 10px 0 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.62);
}
/* visually-hidden live region for a11y announcements (no global sr-only exists) */
.aic-posture .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Concentration snapshot — per-domain card (AIC-BRIEF-CONCENTRATION-ENRICH) ──
   Surfaces module_14 per-domain trend + actors + note on /brief.
   Uses the WCAG-verified semantic tokens from base.css (light theme). */
.concentration-card { display: flex; flex-direction: column; gap: 10px; }
.concentration-domain { background: var(--surface); border: 1px solid var(--line-subtle); border-radius: 6px; padding: 10px 14px; }
.concentration-domain > strong { font-size: 16px; color: var(--text); }
.concentration-trend { font-family: var(--font-sans); display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.concentration-trend--concentrating { background: rgba(181,70,46,.14); color: var(--crit); }
.concentration-trend--dispersing   { background: rgba(58,125,84,.14); color: var(--ok); }
.concentration-trend--stable        { background: var(--card-hover); color: var(--text-muted); }
.concentration-domain__actors { font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); margin-top: 5px; }
.concentration-domain__note { font-size: 15px; color: var(--text); line-height: 1.5; margin-top: 7px; border-left: 3px solid var(--gold); padding-left: 10px; }
.concentration-crosslink { margin-top: 4px; }
.concentration-crosslink a { font-family: var(--font-sans); font-size: 13px; color: var(--acc); text-decoration: none; font-weight: 600; }
.concentration-crosslink a:hover { text-decoration: underline; }

/* ── Asymmetric-signals subhead (BRIEF) ──────────────────────────────────────
   Token-based replacement for the previous inline `color:#1d3b5e` on the
   "⚡ Asymmetric signals — underweighted" <h3>. Colour now follows the theme
   (--acc) so it adapts to the background in light and dark. Sized to sit just
   above the pub-card grid the same way the <h2> section heads do. The
   underweighted cards themselves reuse .pub-card / .pub-card__title /
   .pub-card__body (no inline styles), so their size + contrast match
   "Top commercial signals" automatically. */
.brief-subhead {
  margin: 24px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--acc);
}