/* ════════════════════════════════════════════════════════════════════
   BIZVITAL · financial.css
   "Financial Intelligence" design system — refined institutional-finance
   editorial aesthetic. Deep navy ink on warm bone paper, single brass
   gold accent, disciplined green/amber/red status palette. Greenfield
   stylesheet that supersedes the prior tokens.css + design-system-v2/v3
   + dashboard-v4 + bizvital + style + scorecard + health-report-overview
   stack.

   STATUS-DRIVEN. Every chart line, badge background, heat-cell, and
   border colour derives from a metric's status (healthy/watch/alert) —
   never decorative.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* Ink & paper (base) */
  --ink:        #0B1A2A;   /* deep navy — primary text, dark cards */
  --ink-2:      #13283D;
  --ink-3:      #1C394F;   /* secondary text */
  --ink-4:      #3A5269;   /* tertiary text */
  --ink-5:      #6E7E91;   /* muted / disabled */

  --paper:      #F4F1EA;   /* warm bone — page background */
  --paper-2:    #EBE6DA;   /* recessed panels, chart bg */
  --paper-3:    #E1DBCB;   /* deeper recess */
  --paper-card: #FBFAF6;   /* card surface */
  --line:       #D8D1C2;   /* hairline borders */
  --line-soft:  #E4DECF;   /* softer internal dividers */

  /* Accents (use sparingly — one gold moment per view) */
  --gold:       #C8A24B;   /* THE accent — brass */
  --gold-deep:  #A67F2E;   /* darker gold for text/labels */
  --gold-soft:  #F0E4C2;   /* tinted background */
  --teal:       #1E6E63;   /* secondary accent / "good" emphasis */
  --teal-soft:  #3E9488;
  --teal-bg:    #E2EFEC;

  /* Status palette (semantic — never improvise) */
  --healthy:    #2F7D5B;
  --healthy-bg: #E3EEE6;
  --healthy-deep: #245F45;

  --watch:      #C58A1E;
  --watch-bg:   #F4E9CF;
  --watch-deep: #946812;

  --alert:      #B23A33;
  --alert-bg:   #F2DDD9;
  --alert-deep: #8B2A24;

  --neutral:    #6E7E91;
  --neutral-bg: #ECE7DA;

  /* Shadows / radius / spacing */
  --shadow-sm: 0 1px 2px rgba(11,26,42,.06), 0 1px 3px rgba(11,26,42,.04);
  --shadow-md: 0 4px 16px rgba(11,26,42,.08), 0 2px 6px rgba(11,26,42,.05);
  --shadow-lg: 0 24px 60px rgba(11,26,42,.16), 0 8px 24px rgba(11,26,42,.08);

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-pill: 999px;

  --page-w:   1180px;
  --pad-x:    60px;
  --pad-y:    56px;

  /* Type stacks */
  --display:  'Fraunces', 'Times New Roman', serif;
  --serif:    'Newsreader', 'Iowan Old Style', Georgia, serif;
  --grotesk:  'Space Grotesk', 'Inter', system-ui, sans-serif;
  --mono:     'IBM Plex Mono', 'Menlo', 'Consolas', monospace;

  /* Motion */
  --ease:     cubic-bezier(.2,.7,.3,1);
  --t-fast:   180ms;
  --t-med:    420ms;
  --t-slow:   900ms;

  /* Common derived */
  --kicker-tracking: 0.22em;

  /* ─── Convenience aliases (semantic names used by templates) ─── */
  --ink-soft:     var(--ink-3);
  --ink-quiet:    var(--ink-5);
  --ink-mute:     var(--ink-5);
  --rule:         var(--line);
  --rule-soft:    var(--line-soft);
  --rule-strong:  #B8AE96;
  --paper-soft:   var(--paper-card);
  --paper-deep:   var(--paper-3);
  --terracotta:   var(--gold-deep);   /* legacy accent name → gold */
  --indigo:       var(--ink);          /* legacy indigo → navy ink */
  --indigo-dark:  var(--ink-2);
  --cream:        var(--paper);
  --bone:         var(--paper);
  --container:    var(--page-w);
  --shadow-1:     var(--shadow-sm);
  --shadow-2:     var(--shadow-md);
  --shadow-3:     var(--shadow-lg);

  /* scorecard.css legacy var names (Classical Scorecard view) */
  --surface-1:        var(--paper-card);
  --surface-2:        var(--paper-2);
  --border-default:   var(--line);
  --border-strong:    #B8AE96;
  --ink-primary:      var(--ink);
  --ink-secondary:    var(--ink-3);
  --ink-tertiary:     var(--ink-4);
  --accent-blue:      var(--gold-deep);   /* re-skin scorecard's #3B82F6 */
  --dur-fast:     var(--t-fast);
  --dur-med:      var(--t-med);
  --dur-slow:     var(--t-slow);
  --ff-display:   var(--display);
  --ff-body:      var(--serif);
  --ff-ui:        var(--grotesk);
  --ff-mono:      var(--mono);
}

@media (max-width: 900px) {
  :root {
    --pad-x: 24px;
    --pad-y: 32px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   BASE / RESET
   ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; }

body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 15% 8%,
      rgba(200,162,75,.06), transparent 40%),
    radial-gradient(circle at 85% 92%,
      rgba(30,110,99,.04), transparent 45%);
  background-attachment: fixed;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Subtle paper-grain texture — adds the "expensive" depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold-deep); }

::selection { background: var(--gold); color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────────
   TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.4em 0;
}
h1 { font-size: 56px; font-weight: 300; line-height: 1.04; }
h2 { font-size: 36px; font-weight: 400; line-height: 1.1; }
h3 { font-size: 24px; font-weight: 500; line-height: 1.2; }
h4 { font-size: 18px; font-weight: 500; line-height: 1.3; }

@media (max-width: 900px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}

p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 1em 0;
}

.lede {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 620px;
}

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--gold-deep);
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kicker__chip {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--gold-deep);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  letter-spacing: 0.06em;
}

.section-title {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 8px 0 12px;
}
.section-title em {
  font-style: italic;
  color: var(--teal);
  font-weight: 400;
}

.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.display { font-family: var(--display); }
.grotesk { font-family: var(--grotesk); }

.upper { text-transform: uppercase; letter-spacing: 0.16em; }
.tracked { letter-spacing: var(--kicker-tracking); }
.tnum { font-variant-numeric: tabular-nums; }

.muted   { color: var(--ink-4); }
.muted-2 { color: var(--ink-5); }
.gold    { color: var(--gold-deep); }
.teal    { color: var(--teal); }
.healthy { color: var(--healthy); }
.watch   { color: var(--watch); }
.alert   { color: var(--alert); }

/* ─────────────────────────────────────────────────────────────────────
   LAYOUT PRIMITIVES
   ───────────────────────────────────────────────────────────────────── */
.page {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.page--narrow {
  max-width: 720px;
}
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 32px; }
.stack-xl > * + * { margin-top: 56px; }

.row { display: flex; align-items: center; gap: 16px; }
.row--gap-sm { gap: 8px; }
.row--gap-lg { gap: 32px; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: 1fr 1fr; }
}

.spacer { flex: 1; }
.divider {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 32px 0;
}
.divider-soft {
  height: 1px;
  background: var(--line-soft);
  border: none;
  margin: 24px 0;
}

/* ─────────────────────────────────────────────────────────────────────
   SHEET / PAGE CARD
   ───────────────────────────────────────────────────────────────────── */
.sheet {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  padding: var(--pad-y) var(--pad-x);
  margin: 32px auto;
  max-width: var(--page-w);
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  animation: bv-reveal var(--t-slow) var(--ease) forwards;
}
.sheet:nth-of-type(2) { animation-delay: 80ms; }
.sheet:nth-of-type(3) { animation-delay: 160ms; }
.sheet:nth-of-type(4) { animation-delay: 240ms; }
.sheet:nth-of-type(5) { animation-delay: 320ms; }

@keyframes bv-reveal {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet:nth-of-type(n) {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Running header (top of every sheet) */
.sheet-runner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) var(--pad-y);
  background:
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper-card) 100%);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sheet-runner__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sheet-runner__brand::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold-soft);
}

.sheet-head {
  margin-bottom: 32px;
}
.sheet-head .kicker { margin-bottom: 10px; }
.sheet-head .section-title { margin: 0 0 12px; }
.sheet-head .lede { margin-top: 8px; }

/* ─────────────────────────────────────────────────────────────────────
   STAT STRIP
   ───────────────────────────────────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
@media (max-width: 900px) {
  .stat-strip { grid-template-columns: 1fr 1fr; }
}
.stat-strip__cell {
  padding: 22px 18px 18px;
  border-right: 1px solid var(--line-soft);
  position: relative;
}
.stat-strip__cell:last-child { border-right: none; }
.stat-strip__cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--neutral);
}
.stat-strip__cell--healthy::before { background: var(--healthy); }
.stat-strip__cell--watch::before   { background: var(--watch); }
.stat-strip__cell--alert::before   { background: var(--alert); }
.stat-strip__cell--gold::before    { background: var(--gold); }

.stat-strip__label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: 8px;
  display: block;
}
.stat-strip__value {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-strip__sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-5);
  margin-top: 6px;
  letter-spacing: 0.06em;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────
   DARK GAUGE CARD
   ───────────────────────────────────────────────────────────────────── */
.gauge-card {
  position: relative;
  background:
    radial-gradient(circle at 70% 30%,
      rgba(200,162,75,.18), transparent 50%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #F4F1EA;
  border-radius: var(--r-md);
  padding: 36px 36px 32px;
  overflow: hidden;
  isolation: isolate;
}
.gauge-card::before {
  /* faint grid mesh, masked to fade at edges */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
                       rgba(0,0,0,.6), transparent 70%);
          mask-image: radial-gradient(circle at 50% 50%,
                       rgba(0,0,0,.6), transparent 70%);
  pointer-events: none;
}
.gauge-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 32px;
}
.gauge-card__ring {
  flex: 0 0 auto;
}
.gauge-card__meta {
  flex: 1;
  min-width: 0;
}
.gauge-card__kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.gauge-card__title {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 300;
  color: #F4F1EA;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.gauge-card__title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.gauge-card__verdict {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: italic;
  margin-top: 8px;
}
.gauge-card__sub {
  font-family: var(--serif);
  font-size: 14px;
  color: rgba(244,241,234,.7);
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────
   TALLY CARDS (Alert / Watch / Healthy)
   ───────────────────────────────────────────────────────────────────── */
.tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .tally { grid-template-columns: 1fr; }
}
.tally-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--neutral);
  border-radius: var(--r-sm);
  padding: 22px 22px 20px;
  position: relative;
}
.tally-card--healthy { border-left-color: var(--healthy); }
.tally-card--watch   { border-left-color: var(--watch); }
.tally-card--alert   { border-left-color: var(--alert); }

.tally-card__count {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tally-card__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 10px;
}
.tally-card--healthy .tally-card__label { color: var(--healthy); }
.tally-card--watch   .tally-card__label { color: var(--watch); }
.tally-card--alert   .tally-card__label { color: var(--alert); }
.tally-card__desc {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-4);
  margin-top: 10px;
}

/* ─────────────────────────────────────────────────────────────────────
   CRITICAL INSIGHT CARDS
   ───────────────────────────────────────────────────────────────────── */
.insight-card {
  position: relative;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--alert);
  border-radius: var(--r-sm);
  padding: 24px 28px 24px 70px;
  margin-bottom: 14px;
  min-height: 88px;
}
.insight-card__index {
  position: absolute;
  left: 18px;
  top: 18px;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 300;
  color: var(--paper-2);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.insight-card__title {
  font-family: var(--grotesk);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  margin: 0 0 6px;
  line-height: 1.3;
}
.insight-card__body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 10px;
}
.insight-card__delta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.insight-card__delta b { color: var(--ink); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────
   STATUS BADGE (pill)
   ───────────────────────────────────────────────────────────────────── */
.status-badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px 4px 9px;
  border-radius: var(--r-pill);
  background: var(--neutral-bg);
  color: var(--ink-4);
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-badge::before,
.status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.status-badge--healthy,
.status-pill--healthy,
.status-pill.healthy,
.status-badge.healthy {
  background: var(--healthy-bg);
  color: var(--healthy);
}
.status-badge--watch,
.status-pill--watch,
.status-pill.watch,
.status-badge.watch {
  background: var(--watch-bg);
  color: var(--watch);
}
.status-badge--alert,
.status-pill--alert,
.status-pill.alert,
.status-badge.alert {
  background: var(--alert-bg);
  color: var(--alert);
}
.status-badge--strong { background: var(--healthy-bg); color: var(--healthy); }
.status-badge--mixed  { background: var(--watch-bg);   color: var(--watch); }
.status-badge--risk   { background: var(--alert-bg);   color: var(--alert); }

/* ─────────────────────────────────────────────────────────────────────
   BLOCK HEADING (mono + hairline rule)
   ───────────────────────────────────────────────────────────────────── */
.block-h {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.block-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ─────────────────────────────────────────────────────────────────────
   METRIC CARD (the workhorse for /reports)
   ───────────────────────────────────────────────────────────────────── */
.metric-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.metric-card__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, var(--paper-card) 0%, var(--paper-2) 100%);
}
.metric-card__name {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.metric-card__nums {
  display: flex;
  gap: 22px;
  align-items: baseline;
}
.metric-card__num {
  text-align: right;
}
.metric-card__num-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: 4px;
}
.metric-card__num-value {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.metric-card__num--target .metric-card__num-value {
  color: var(--gold-deep);
  font-weight: 400;
}

.metric-card__body {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 0;
}
@media (max-width: 900px) {
  .metric-card__body { grid-template-columns: 1fr; }
}
.metric-card__chart {
  background: var(--paper-2);
  padding: 22px;
  border-right: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
@media (max-width: 900px) {
  .metric-card__chart {
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
  }
}
.metric-card__notes {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.metric-card__note-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 4px;
  display: block;
}
.metric-card__note-body {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}
.metric-card__whatif {
  background: var(--ink);
  color: rgba(244,241,234,.92);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
.metric-card__whatif .metric-card__note-title {
  color: var(--gold);
}
.metric-card__whatif .metric-card__note-body {
  color: rgba(244,241,234,.88);
}

/* ─────────────────────────────────────────────────────────────────────
   DEPENDENCY MAP (Pillar relationship diagram)
   ───────────────────────────────────────────────────────────────────── */
.dep-map {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px;
  position: relative;
}
.dep-map__grid {
  display: grid;
  gap: 28px 16px;
  position: relative;
}
.dep-map__row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
}
.dep-node {
  flex: 1 1 0;
  min-width: 140px;
  max-width: 220px;
  background: var(--paper-2);
  border: 1.5px solid var(--neutral);
  border-radius: var(--r-md);
  padding: 14px 16px 12px;
  position: relative;
  text-align: center;
}
.dep-node--healthy { border-color: var(--healthy); background: var(--healthy-bg); }
.dep-node--watch   { border-color: var(--watch);   background: var(--watch-bg); }
.dep-node--alert   { border-color: var(--alert);   background: var(--alert-bg); }
.dep-node__index {
  position: absolute;
  top: 6px;
  right: 9px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-5);
  letter-spacing: 0.12em;
}
.dep-node__name {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.dep-node__score {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dep-node__verdict {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 6px;
}
.dep-node--healthy .dep-node__verdict { color: var(--healthy); }
.dep-node--watch   .dep-node__verdict { color: var(--watch); }
.dep-node--alert   .dep-node__verdict { color: var(--alert); }

.dep-map__caption {
  margin-top: 28px;
  padding: 16px 20px;
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ─────────────────────────────────────────────────────────────────────
   ACTION ITEM (top moves list)
   ───────────────────────────────────────────────────────────────────── */
.action-list { margin: 0; padding: 0; list-style: none; }
.action-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
}
.action-item:last-child { border-bottom: none; }
.action-item__num {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 300;
  color: var(--gold);
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1;
  border-right: 1px solid var(--line);
  padding-right: 24px;
  font-variant-numeric: tabular-nums;
}
.action-item__body { min-width: 0; }
.action-item__title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.action-item__owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-bg);
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.action-item__move {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.move-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.move-pill--from { background: var(--alert-bg); color: var(--alert); }
.move-pill--to   { background: var(--healthy-bg); color: var(--healthy); }
.move-arrow {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────────
   HEAT MAP (Per-pillar performance table)
   ───────────────────────────────────────────────────────────────────── */
.heatmap {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.heatmap th, .heatmap td {
  padding: 12px 14px;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.heatmap th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-5);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.heatmap th:first-child,
.heatmap td:first-child {
  text-align: left;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.heatmap__pillar-row td {
  background: var(--paper-2);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
  padding: 14px;
}
.heatmap__pillar-row td:last-child { color: var(--gold-deep); }
.heatmap tbody tr:hover td { background: rgba(248,244,232,.7); }
.heatmap__cell { display: inline-block; }
.heatmap__cell--healthy {
  background: var(--healthy-bg); color: var(--healthy);
  padding: 4px 10px; border-radius: var(--r-pill); font-weight: 600;
}
.heatmap__cell--watch {
  background: var(--watch-bg); color: var(--watch);
  padding: 4px 10px; border-radius: var(--r-pill); font-weight: 600;
}
.heatmap__cell--alert {
  background: var(--alert-bg); color: var(--alert);
  padding: 4px 10px; border-radius: var(--r-pill); font-weight: 600;
}
.heatmap__base { color: var(--gold-deep); font-weight: 500; }
.heatmap__avg  { color: var(--ink-5); }

/* ─────────────────────────────────────────────────────────────────────
   COVER / HERO (dark variant)
   ───────────────────────────────────────────────────────────────────── */
.hero-dark {
  background:
    radial-gradient(circle at 80% 20%,
      rgba(200,162,75,.18), transparent 50%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #F4F1EA;
  border-radius: var(--r-md);
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 32px auto;
  max-width: var(--page-w);
}
.hero-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 60% 50%,
                       rgba(0,0,0,.55), transparent 75%);
          mask-image: radial-gradient(circle at 60% 50%,
                       rgba(0,0,0,.55), transparent 75%);
  pointer-events: none;
}
.hero-dark__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
}
@media (max-width: 900px) {
  .hero-dark__inner { grid-template-columns: 1fr; }
  .hero-dark { padding: 40px 24px; }
}
.hero-dark__kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.hero-dark__title {
  font-family: var(--display);
  font-size: 72px;
  font-weight: 300;
  color: #F4F1EA;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 12px;
}
.hero-dark__title strong {
  font-weight: 600;
  color: #F4F1EA;
}
.hero-dark__sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--gold);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.hero-dark__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,241,234,.7);
  margin-top: 28px;
}
.hero-dark__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-dark__meta span::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
}
.hero-dark__meta span:first-child::before { display: none; }

@media (max-width: 900px) {
  .hero-dark__title { font-size: 44px; }
  .hero-dark__sub { font-size: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────
   FORMS / INPUTS
   ───────────────────────────────────────────────────────────────────── */
label, .label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=url], input[type=search],
input[type=date], textarea, select {
  display: block;
  width: 100%;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,162,75,.18);
  background: var(--paper-card);
}
textarea { min-height: 90px; resize: vertical; }
input::placeholder, textarea::placeholder {
  color: var(--ink-5);
  font-style: italic;
}

.field, .form-row, .form-group {
  margin-bottom: 16px;
}
.field-help, .help-text {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--ink-5);
  font-style: italic;
}

/* Checkboxes / radios */
input[type=checkbox], input[type=radio] {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────── */
.btn, button.btn, a.btn, .button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #F4F1EA;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover, button:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active, button:active { transform: translateY(0); }

.btn-primary, .btn--gold, button.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.btn-primary:hover, .btn--gold:hover, button.btn-primary:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #F4F1EA;
}

.btn-ghost, .btn--ghost, button.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover, .btn--ghost:hover, button.btn-ghost:hover {
  background: var(--paper-2);
  border-color: var(--ink-4);
  color: var(--ink);
}

.btn-link, button.btn-link, .btn--link {
  background: transparent;
  border: none;
  color: var(--gold-deep);
  padding: 6px 4px;
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-link:hover { color: var(--ink); background: transparent; transform: none; box-shadow: none; }

.btn-danger {
  background: var(--alert);
  border-color: var(--alert);
  color: #F4F1EA;
}
.btn-danger:hover {
  background: var(--alert-deep);
  border-color: var(--alert-deep);
}

/* Single-dash aliases (template authors use both styles) */
.btn-gold     { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #F4F1EA; }
.btn-sm       { padding: 7px 14px; font-size: 10px; }
.btn-lg       { padding: 14px 28px; font-size: 12px; }
.btn-block    { display: flex; width: 100%; }

/* Generic page container — landing + content pages */
.container {
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}
body.bv-paper { background: var(--paper); color: var(--ink); font-family: var(--serif); }

.btn--sm { padding: 7px 14px; font-size: 10px; }
.btn--lg { padding: 14px 28px; font-size: 12px; }
.btn--block { display: flex; width: 100%; }

button:disabled, .btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────
   TABLES
   ───────────────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
thead th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
}
tbody td {
  font-family: var(--grotesk);
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(248,244,232,.4); }

.table-clean { border: none; box-shadow: none; background: transparent; }
.table-clean thead th { background: transparent; border-bottom: 2px solid var(--ink); }

/* ─────────────────────────────────────────────────────────────────────
   TOPBAR / RUNNING HEADER (app-wide)
   ───────────────────────────────────────────────────────────────────── */
.topbar, .bv-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244,241,234,.92);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--pad-x);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
@media (max-width: 900px) {
  .topbar, .bv-topbar { padding: 0 24px; }
}
.topbar__brand, .bv-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.topbar__brand::before, .bv-topbar__brand::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--gold);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--gold-soft);
  transform: rotate(45deg);
}
.topbar__nav, .bv-topbar__nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.topbar__link, .bv-topbar__link, .bv-topbar a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  padding: 8px 6px;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.topbar__link:hover, .bv-topbar__link:hover, .bv-topbar a:hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
/* Active nav tab: just underline, no background */
.topbar__link.active, .bv-topbar__link.active,
.topbar__link[aria-current], .bv-topbar a.active {
  color: var(--ink) !important;
  background: transparent !important;
  border-bottom-color: var(--gold, #c8a24b) !important;
}
.bv-topbar__link.active:hover, .bv-topbar a.active:hover {
  color: var(--ink) !important;
  background: #E1DBCB !important;
  border-bottom-color: var(--gold, #c8a24b) !important;
}

/* ── Admin topbar variant (.topbar .brand / .bv-mark / nav a) ─────── */
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.topbar .bv-mark,
.topbar .brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: var(--gold-deep);
  background: var(--ink);
  border-radius: 4px;
  flex-shrink: 0;
}
.topbar .bv-mark svg,
.topbar .brand-mark svg {
  width: 18px; height: 18px;
  color: var(--gold);
}
.topbar .brand-name {
  font-family: var(--display);
  font-size: 18px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.topbar .brand-tag {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--line);
  line-height: 1.2;
}
.topbar nav {
  display: flex; align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar nav a {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.topbar nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.topbar nav a.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
@media (max-width: 1100px) {
  .topbar { gap: 18px; padding: 0 18px; height: auto; min-height: 64px; flex-wrap: wrap; }
  .topbar nav { gap: 14px; }
  .topbar nav a { font-size: 10px; letter-spacing: .1em; }
}

/* ─────────────────────────────────────────────────────────────────────
   AUTH SHEET (login / signup / forgot / otp)
   ───────────────────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 44px 44px 36px;
}
@media (max-width: 600px) { .auth-card { padding: 28px 24px; } }
.auth-card__kicker { margin-bottom: 14px; }
.auth-card__title {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 8px;
}
.auth-card__title em { font-style: italic; color: var(--teal); }
.auth-card__sub {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-3);
  margin: 0 0 28px;
  line-height: 1.5;
}
.auth-card .field { margin-bottom: 14px; }
.auth-card .btn { margin-top: 8px; }
.auth-card__footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--ink-4);
  text-align: center;
}
.auth-card__footer a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────
   FLASH / ALERTS
   ───────────────────────────────────────────────────────────────────── */
.flash, .alert, .notice {
  font-family: var(--serif);
  font-size: 14px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  border-left-width: 4px;
  background: var(--paper-card);
  margin: 0 0 16px;
}
.flash.error, .alert.error, .alert-danger,
.flash--alert, .alert--alert, .notice--alert {
  border-left-color: var(--alert);
  background: var(--alert-bg);
  color: var(--alert-deep);
}
.flash.success, .alert.success, .alert-success,
.flash--healthy, .alert--healthy, .notice--healthy {
  border-left-color: var(--healthy);
  background: var(--healthy-bg);
  color: var(--healthy-deep);
}
.flash.warning, .alert.warning, .alert-warning,
.flash--watch, .alert--watch, .notice--watch {
  border-left-color: var(--watch);
  background: var(--watch-bg);
  color: var(--watch-deep);
}
.flash.info, .alert.info, .alert-info {
  border-left-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold-deep);
}

/* ─────────────────────────────────────────────────────────────────────
   IMPERSONATION BANNER
   ───────────────────────────────────────────────────────────────────── */
.impersonation-banner, .bv-imp-banner {
  background: var(--alert);
  color: #F4F1EA;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.impersonation-banner a,
.bv-imp-banner a,
.impersonation-banner button,
.bv-imp-banner button {
  background: rgba(255,255,255,.15);
  color: #F4F1EA;
  border: 1px solid rgba(255,255,255,.3);
  padding: 6px 14px;
  font-size: 10px;
}
.impersonation-banner a:hover,
.bv-imp-banner a:hover,
.impersonation-banner button:hover,
.bv-imp-banner button:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.5);
}

/* ─────────────────────────────────────────────────────────────────────
   CHAT WIDGET
   ───────────────────────────────────────────────────────────────────── */
.chat-widget, .bv-chat, #bv-chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 500;
}
.chat-toggle, .bv-chat__toggle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-size: 22px;
}
.chat-toggle:hover, .bv-chat__toggle:hover {
  background: var(--ink-2);
  transform: translateY(-2px);
}
.chat-panel, .bv-chat__panel {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 360px;
  max-height: 520px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Full chat widget (template id="chatWidget") */
.chat-widget {
  position: fixed; right: 24px; bottom: 88px;
  width: 380px; max-height: 560px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  z-index: 500;
  font-family: var(--grotesk);
  overflow: hidden;
}
.chat-widget.hidden { display: none; }

.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid var(--ink-2);
}
.chat-title { display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
.chat-title strong {
  font-family: var(--display); font-weight: 500;
  font-size: 14px; color: var(--paper);
}
.chat-spark { color: var(--gold); font-size: 14px; }
.chat-sub.mono {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,241,234,.65);
  margin-left: 4px;
}
.chat-head-actions { display:flex; gap: 4px; }

.btn-ghost-icon {
  width: 28px; height: 28px; border-radius: 4px;
  border: 1px solid rgba(244,241,234,.18);
  background: transparent; color: rgba(244,241,234,.78);
  cursor: pointer; font-size: 14px; line-height: 1;
  display:inline-flex; align-items:center; justify-content:center;
  padding: 0;
  letter-spacing: 0;
  text-transform: none;
}
.btn-ghost-icon:hover {
  background: rgba(244,241,234,.08);
  border-color: rgba(200,162,75,.5);
  color: var(--gold);
}

.chat-body {
  flex: 1; min-height: 220px; max-height: 360px;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--paper);
  font-family: var(--serif);
  font-size: 14px; line-height: 1.55;
  color: var(--ink-3);
}
.chat-empty p { margin: 0 0 8px; }
.chat-empty .hint {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-5); margin-top: 14px;
}
.chat-empty ul {
  margin: 6px 0 0; padding-left: 18px;
  list-style: none;
}
.chat-empty ul li {
  position: relative;
  padding: 6px 0 6px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.chat-empty ul li:last-child { border-bottom: 0; }
.chat-empty ul li::before {
  content: '›';
  position: absolute; left: 0; top: 6px;
  color: var(--gold-deep);
  font-family: var(--mono);
}
.chat-empty em { font-style: italic; color: var(--ink-3); }

.chat-msg {
  margin: 0 0 10px; padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px; line-height: 1.55;
  max-width: 92%;
}
.chat-msg.user {
  background: var(--ink); color: var(--paper);
  margin-left: auto;
  font-family: var(--grotesk);
}
.chat-msg.assistant, .chat-msg.bot {
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line);
}

.chat-form {
  display: flex; align-items: stretch; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--paper-card);
}
.chat-form textarea {
  flex: 1; resize: none;
  font-family: var(--grotesk);
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.chat-form textarea:focus { border-color: var(--gold); }
.chat-send {
  align-self: stretch;
  min-width: 40px;
  padding: 0 12px;
  font-size: 16px;
}

.chat-open-btn {
  position: fixed; right: 24px; bottom: 24px;
  z-index: 499;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--gold);
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.chat-open-btn:hover { background: var(--ink-2); transform: translateY(-2px); }
.chat-open-btn .chat-spark { color: var(--gold); }

/* ─────────────────────────────────────────────────────────────────────
   FEATURE / FEATURETTE GRID (landing)
   ───────────────────────────────────────────────────────────────────── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr; } }
.feat {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 32px 28px;
  position: relative;
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feat__num {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  margin-bottom: 16px;
}
.feat__title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.feat__body {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   METHODOLOGY LEGEND
   ───────────────────────────────────────────────────────────────────── */
.legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) { .legend-grid { grid-template-columns: 1fr; } }
.legend-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}
.legend-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}
.legend-card--healthy .legend-card__icon { background: var(--healthy-bg); color: var(--healthy); }
.legend-card--watch   .legend-card__icon { background: var(--watch-bg);   color: var(--watch); }
.legend-card--alert   .legend-card__icon { background: var(--alert-bg);   color: var(--alert); }
.legend-card--neutral .legend-card__icon { background: var(--neutral-bg); color: var(--ink-4); }
.legend-card__title {
  font-family: var(--grotesk);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.legend-card__body {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-4);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   PROGRESS / BARS (current vs target)
   ───────────────────────────────────────────────────────────────────── */
.progress {
  position: relative;
  height: 10px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.progress__fill {
  height: 100%;
  background: var(--neutral);
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease);
}
.progress--healthy .progress__fill { background: var(--healthy); }
.progress--watch   .progress__fill { background: var(--watch); }
.progress--alert   .progress__fill { background: var(--alert); }
.progress__target {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  background: var(--gold);
  border-radius: 1px;
}
.progress__target-lbl {
  position: absolute;
  top: -22px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transform: translateX(-50%);
}

/* Risk-ranking horizontal bars */
.risk-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}
.risk-bar__track {
  height: 28px;
  border-radius: var(--r-xs);
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}
.risk-bar__fill {
  height: 100%;
  background: var(--ink-3);
  display: flex;
  align-items: center;
  padding-left: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #F4F1EA;
  text-transform: uppercase;
  white-space: nowrap;
  transition: width var(--t-slow) var(--ease);
}
.risk-bar__fill--healthy { background: var(--healthy); }
.risk-bar__fill--watch   { background: var(--watch); }
.risk-bar__fill--alert   { background: var(--alert); }
.risk-bar__value {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 70px;
}

/* ─────────────────────────────────────────────────────────────────────
   MODAL
   ───────────────────────────────────────────────────────────────────── */
.modal-backdrop, .bv-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,26,42,.48);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal, .bv-modal {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 32px;
}
.modal__title, .bv-modal__title {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
}

/* ─────────────────────────────────────────────────────────────────────
   CHART HOLDERS — referenced by chart-engine.js
   ───────────────────────────────────────────────────────────────────── */
.chart-holder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-holder svg { max-width: 100%; height: auto; }

/* SVG chart classes (consumed by chart-engine.js) */
.bv-chart text {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--ink-5);
  letter-spacing: 0.06em;
}
.bv-chart .bv-axis    { stroke: var(--line); stroke-width: 0.6; }
.bv-chart .bv-grid    { stroke: var(--line-soft); stroke-width: 0.4; }
.bv-chart .bv-line    { fill: none; stroke-width: 1.8; }
.bv-chart .bv-line--healthy { stroke: var(--healthy); }
.bv-chart .bv-line--watch   { stroke: var(--watch); }
.bv-chart .bv-line--alert   { stroke: var(--alert); }
.bv-chart .bv-line--neutral { stroke: var(--ink-3); }
.bv-chart .bv-target  { stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 4 3; }
.bv-chart .bv-dot     { fill: currentColor; }
.bv-chart .bv-label   { fill: var(--ink-3); font-weight: 600; }
.bv-chart .bv-ring-track { stroke: var(--paper-3); fill: none; }
.bv-chart .bv-ring-arc   { fill: none; stroke-linecap: round;
                            transition: stroke-dashoffset var(--t-slow) var(--ease); }
.bv-chart .bv-ring-arc--healthy { stroke: var(--healthy); }
.bv-chart .bv-ring-arc--watch   { stroke: var(--watch); }
.bv-chart .bv-ring-arc--alert   { stroke: var(--alert); }
.bv-chart .bv-ring-arc--gold    { stroke: var(--gold); }
.bv-chart .bv-ring-center {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  fill: var(--ink);
  letter-spacing: -0.02em;
}
.bv-chart .bv-ring-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  fill: var(--ink-5);
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────
   LEGACY-CLASS RESCUE (re-skin old classnames so unmigrated templates
   inherit the new aesthetic without breaking JS hooks). Anything that
   stays on a page from before is mapped here.
   ───────────────────────────────────────────────────────────────────── */

/* Cards (very common in old templates) */
.card, .bv-card, .panel, .box {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card-header, .panel-header { margin-bottom: 14px; }
.card-title, .panel-title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
}

/* Pills / chips (old) */
.pill, .chip, .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--ink-4);
  border: 1px solid var(--line);
}
.pill--gold, .chip--gold, .tag--gold {
  background: var(--gold-soft); color: var(--gold-deep); border-color: var(--gold);
}
.pill--healthy { background: var(--healthy-bg); color: var(--healthy); border-color: transparent; }
.pill--watch   { background: var(--watch-bg);   color: var(--watch);   border-color: transparent; }
.pill--alert   { background: var(--alert-bg);   color: var(--alert);   border-color: transparent; }

/* Old "score" / "kpi" / "tile" classes */
.kpi, .kpi-tile, .score-tile, .stat-tile {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 20px 18px;
  box-shadow: var(--shadow-sm);
}
.kpi__label, .kpi-label, .score-tile__label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: 6px;
}
.kpi__value, .kpi-value, .score-tile__value {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* View switcher (me.html had .bv-vs-* classes) */
.bv-view-switcher {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin: 0 auto 24px;
  max-width: var(--page-w);
}
.bv-vs-row {
  display: flex; align-items: center; gap: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.bv-vs-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-5);
}
.bv-vs-tabs {
  display: inline-flex;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  padding: 4px;
  border-radius: var(--r-pill);
  gap: 2px;
}
.bv-vs-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  cursor: pointer;
}
.bv-vs-tab.active {
  background: var(--ink);
  color: var(--gold);
}
.bv-vs-tab:hover:not(.active) { color: var(--ink); }

/* Common topbar variant from existing _user_topbar.html */
.bv-tb, .bv-tb-bar, .bv-tb-wrap {
  background: rgba(244,241,234,.92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.bv-tb-link, .bv-tb a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.bv-tb-link:hover, .bv-tb a:hover { color: var(--gold-deep); }

/* Common older button class variants */
.btn-secondary, .btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover, .btn-outline:hover {
  background: var(--paper-2);
  border-color: var(--ink-4);
}

/* Sidebars (admin pages) */
.sidebar, .bv-sidebar, aside.sidebar {
  background: var(--paper-2);
  border-right: 1px solid var(--line);
}
.sidebar a, .bv-sidebar a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  display: block;
  padding: 10px 16px;
  border-left: 3px solid transparent;
}
.sidebar a:hover, .bv-sidebar a:hover {
  background: var(--paper);
  border-left-color: var(--gold);
  color: var(--ink);
}
.sidebar a.active, .bv-sidebar a.active {
  background: var(--paper-card);
  border-left-color: var(--gold);
  color: var(--ink);
  font-weight: 600;
}

/* Status-like utility classes (older codebase variants) */
.text-healthy, .text-good, .text-green { color: var(--healthy); }
.text-watch, .text-warn, .text-amber   { color: var(--watch); }
.text-alert, .text-bad, .text-red      { color: var(--alert); }
.text-gold { color: var(--gold-deep); }
.text-teal { color: var(--teal); }
.text-ink  { color: var(--ink); }
.text-muted { color: var(--ink-4); }

.bg-paper { background: var(--paper); }
.bg-card  { background: var(--paper-card); }
.bg-recess{ background: var(--paper-2); }

/* ─────────────────────────────────────────────────────────────────────
   ANIMATION UTILITIES
   ───────────────────────────────────────────────────────────────────── */
.fade-in { opacity: 0; animation: bv-fadein var(--t-med) var(--ease) forwards; }
@keyframes bv-fadein { to { opacity: 1; } }
.slide-up {
  opacity: 0; transform: translateY(14px);
  animation: bv-slideup var(--t-slow) var(--ease) forwards;
}
@keyframes bv-slideup { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   PRINT (PDF export from web view)
   ───────────────────────────────────────────────────────────────────── */
@media print {
  body { background: white; }
  body::before { display: none; }
  .topbar, .bv-topbar, .chat-widget, .bv-chat, .impersonation-banner { display: none; }
  .sheet, .hero-dark, .metric-card { break-inside: avoid; box-shadow: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   FOOTER (small mono confidential line)
   ───────────────────────────────────────────────────────────────────── */
.page-footer {
  max-width: var(--page-w);
  margin: 56px auto 32px;
  padding: 0 var(--pad-x);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-5);
  text-align: center;
}
.page-footer a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }


/* ═════════════════════════════════════════════════════════════════════
   CASCADE RESCUE — me.html / reports.html / result.html
   These styles replace the old design-system-v2 / dashboard-v4 / bizvital
   CSS that templates were authored against. Class names, attribute hooks,
   and JS bindings are preserved verbatim; only the visual language moves
   to the Financial Intelligence design system.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Page shell (me.html, reports.html) ─────────────────────────────── */
body { background: var(--paper); color: var(--ink); font-family: var(--serif); }
.cc-main, .rep-main, .prof-main, .bm-main, .sg-shell {
  max-width: var(--page-w); margin: 0 auto;
  padding: 32px 28px 80px;
}
@media (max-width: 720px) {
  .cc-main, .rep-main, .prof-main, .bm-main { padding: 22px 18px 60px; }
}

/* ── Sections + section heads ───────────────────────────────────────── */
.cc-section { margin-bottom: 40px; position: relative; }
.cc-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.cc-section-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: 22px; letter-spacing: -.005em;
  color: var(--ink); margin: 0;
}
.cc-section-head .head-sub {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep);
}

/* ── Upload card ────────────────────────────────────────────────────── */
.cc-upload {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px 30px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.cc-upload::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold);
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.cc-upload .upload-lede {
  font-family: var(--serif); font-size: 15px;
  line-height: 1.6; color: var(--ink-3);
  margin: 0 0 22px;
  max-width: 64ch;
}
.cc-upload-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-bottom: 6px;
}
@media (max-width: 860px) { .cc-upload-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cc-upload-grid { grid-template-columns: 1fr; } }

/* ── Form fields (legacy .field-group + label/input/select) ─────────── */
.field-group { margin-bottom: 14px; }
.field-group label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 6px;
}
.field-group input[type="text"],
.field-group input[type="email"],
.field-group input[type="number"],
.field-group input[type="tel"],
.field-group input[type="url"],
.field-group input[type="search"],
.field-group input[type="password"],
.field-group select,
.field-group textarea {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px;
  font-family: var(--grotesk); font-size: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,162,75,.18);
}
.field-group select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231C394F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
}

/* ── Statement-type radio cards ─────────────────────────────────────── */
.stmt-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-top: 8px;
}
@media (max-width: 620px) { .stmt-cards { grid-template-columns: 1fr; } }
.stmt-card {
  position: relative; display: block; cursor: pointer;
  padding: 16px 18px 16px 46px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.stmt-card:hover {
  border-color: var(--gold);
  background: rgba(200,162,75,.04);
  transform: translateY(-1px);
}
.stmt-card input[type="radio"] {
  position: absolute; left: 16px; top: 18px;
  width: 18px; height: 18px;
  margin: 0; accent-color: var(--gold-deep);
  cursor: pointer;
}
.stmt-card:has(input:checked) {
  border-color: var(--gold);
  background: rgba(200,162,75,.06);
  box-shadow: 0 0 0 1px var(--gold) inset, var(--shadow-sm);
}
.stmt-card-body { display: flex; flex-direction: column; gap: 4px; }
.stmt-card-title {
  font-family: var(--display); font-weight: 500;
  font-size: 15px; color: var(--ink); letter-spacing: -.005em;
}
.stmt-card-desc {
  font-family: var(--serif); font-size: 13px;
  color: var(--ink-3); line-height: 1.5;
}
.stmt-card-tag {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--mono); font-size: 10px;
  font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--healthy-deep);
  background: var(--healthy-bg);
  padding: 3px 8px; border-radius: var(--r-xs);
  align-self: flex-start;
}

/* ── Drop zone ──────────────────────────────────────────────────────── */
.cc-drop-zone {
  display: block; cursor: pointer;
  margin-top: 22px;
  padding: 40px 24px;
  background: var(--paper);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  text-align: center;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.cc-drop-zone:hover, .cc-drop-zone.drag-over {
  border-color: var(--gold);
  background: rgba(200,162,75,.04);
}
.cc-drop-zone .drop-icon {
  font-size: 30px;
  color: var(--gold-deep);
  margin-bottom: 10px;
  line-height: 1;
}
.cc-drop-zone .drop-text {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.cc-drop-zone .drop-text strong {
  color: var(--ink); font-weight: 600;
}
.cc-drop-zone .drop-sub {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-5);
}
.pdf-chip {
  display: inline-block; margin-top: 12px;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  padding: 5px 12px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 11px;
  font-weight: 600; letter-spacing: .08em;
}

/* ── Buttons (cascade rescue for legacy names) ──────────────────────── */
.btn, .btn-primary, button.submit, .form-submit {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--r-xs);
  cursor: pointer; text-decoration: none;
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:hover, .btn-primary:hover, button.submit:hover, .form-submit:hover {
  background: var(--gold-deep); border-color: var(--gold-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-secondary, .btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.btn-secondary:hover, .btn-ghost:hover {
  border-color: var(--gold); color: var(--gold-deep);
}
.btn-ghost-icon {
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 6px 11px; cursor: pointer;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; color: var(--ink-3);
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn-ghost-icon:hover { border-color: var(--gold); color: var(--gold-deep); }

/* ── Process button row (process & generate report) ─────────────────── */
.cc-upload .form-actions, .cc-upload .submit-row {
  margin-top: 22px; display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.cc-upload button[type="submit"], .cc-upload .btn-submit, #meUploadForm button[type="submit"] {
  padding: 14px 26px; font-size: 12px;
}

/* ── Status pills + alerts ──────────────────────────────────────────── */
.status { padding: 10px 14px; border-radius: var(--r-xs);
          font-family: var(--serif); font-size: 13.5px; line-height: 1.5; }
.status.ok    {
  background: var(--healthy-bg);
  color: var(--healthy-deep);
  border: 1px solid var(--healthy);
}
.status.error {
  background: var(--alert-bg);
  color: var(--alert-deep);
  border: 1px solid var(--alert);
}
.status.warn  {
  background: var(--watch-bg);
  color: var(--watch-deep);
  border: 1px solid var(--watch);
}
.hidden { display: none !important; }
.mono { font-family: var(--mono); }

.pill-good {
  background: var(--healthy-bg); color: var(--healthy-deep);
  padding: 3px 10px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.pill-warn {
  background: var(--watch-bg); color: var(--watch-deep);
  padding: 3px 10px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}

/* ── Loader (.me-loader) ────────────────────────────────────────────── */
.me-loader {
  margin-top: 18px; padding: 18px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.me-loader-track {
  height: 4px; background: var(--line);
  border-radius: var(--r-pill); overflow: hidden;
  margin-bottom: 14px;
}
.me-loader-fill {
  height: 100%; width: 25%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-radius: var(--r-pill);
  transition: width var(--t-med) var(--ease);
}
.me-loader-step {
  font-family: var(--mono); font-size: 11px;
  font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink); margin-bottom: 4px;
}
.me-loader-tip {
  font-family: var(--serif); font-size: 13px;
  color: var(--ink-3); line-height: 1.5; margin-bottom: 10px;
}
.me-loader-checklist {
  list-style: none; padding: 0; margin: 10px 0 0;
  font-family: var(--grotesk); font-size: 12.5px;
  color: var(--ink-4);
}
.me-loader-checklist li {
  padding: 4px 0 4px 22px; position: relative;
}
.me-loader-checklist .dot {
  position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background var(--t-fast) var(--ease);
}
.me-loader-checklist li.is-active   .dot { background: var(--gold); animation: bv-pulse 1.6s infinite; }
.me-loader-checklist li.is-done     .dot { background: var(--healthy); }
.me-loader-checklist li.is-error    .dot { background: var(--alert); }
@keyframes bv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,162,75,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(200,162,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,162,75,0); }
}

/* ── Tables (info-table — admin pages, collaborator card) ──────────── */
.info-table { width: 100%; border-collapse: collapse;
              font-family: var(--grotesk); font-size: 13.5px; }
.info-table th, .info-table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.info-table th {
  font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.info-table td { color: var(--ink); }

/* ── Collab card ────────────────────────────────────────────────────── */
.cc-collab-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

/* ── Dialog ─────────────────────────────────────────────────────────── */
.tpl-dialog {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  background: var(--paper-card);
  box-shadow: var(--shadow-lg);
  max-width: 540px;
}
.tpl-dialog::backdrop {
  background: rgba(11,26,42,.6);
  backdrop-filter: blur(6px);
}

/* ── View switcher (Overview ↔ Classical) ───────────────────────────── */
.bv-view-switcher { max-width: var(--page-w); margin: 0 auto 24px; }
.bv-vs-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.bv-vs-label {
  font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.bv-vs-tabs {
  display: inline-flex; background: var(--paper-2);
  padding: 4px; border-radius: var(--r-sm); gap: 2px;
}
.bv-vs-tab {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent;
  padding: 8px 16px; border-radius: var(--r-xs);
  font-family: var(--grotesk); font-size: 13px; font-weight: 500;
  color: var(--ink-4); cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.bv-vs-tab:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.bv-vs-tab.is-active, .bv-vs-tab.active {
  background: var(--paper-card); color: var(--ink);
  font-weight: 600; box-shadow: var(--shadow-sm);
}
.bv-vs-tab.is-active::after, .bv-vs-tab.active::after {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold); margin-left: 2px;
}
.bv-vs-tag {
  display: inline-block; margin-left: 4px;
  padding: 2px 6px;
  background: var(--gold-soft); color: var(--gold-deep);
  font-family: var(--mono); font-size: 9.5px;
  font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
}

/* ── Reports page (rep-*) cascade rescue ────────────────────────────── */
.rep-toolbar {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.rep-toolbar .rep-toolbar-label {
  font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.rep-toolbar select, .rep-toolbar input {
  padding: 8px 12px;
  font-family: var(--grotesk); font-size: 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--ink);
}
.rep-toolbar button, .rep-toolbar .btn {
  padding: 9px 16px; font-size: 11px;
}
.rep-page {
  max-width: var(--rep-max-width, var(--page-w));
  margin: 0 auto;
  padding: 32px 28px 80px;
  font-size: calc(15px * var(--rep-font-scale, 1));
}
.rep-page h1 {
  font-family: var(--display); font-weight: 500;
  font-size: 32px; color: var(--ink);
  letter-spacing: -.015em;
  margin: 0 0 8px;
}
.rep-page h2 {
  font-family: var(--display); font-weight: 500;
  font-size: 22px; color: var(--ink);
  letter-spacing: -.005em;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.rep-page h3 {
  font-family: var(--display); font-weight: 500;
  font-size: 17px; color: var(--ink);
  margin: 18px 0 6px;
}
.rep-page p { font-family: var(--serif); line-height: 1.65; color: var(--ink-2); }
.rep-card, .rep-section, .rep-block, .rep-pillar {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.rep-card::before, .rep-pillar::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold);
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.rep-kicker {
  display: inline-block;
  font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.rep-cover-picker {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 14px 0;
}

/* Status pills used on reports */
.status-pill, .pill-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
}
.status-pill.healthy, .pill-status.healthy {
  background: var(--healthy-bg); color: var(--healthy-deep);
}
.status-pill.watch, .pill-status.watch {
  background: var(--watch-bg); color: var(--watch-deep);
}
.status-pill.alert, .pill-status.alert {
  background: var(--alert-bg); color: var(--alert-deep);
}

/* ── Result page table styles rescue ────────────────────────────────── */
.val-section-total {
  background: var(--paper-2) !important;
  border-top: 1.5px solid var(--ink) !important;
  border-bottom: 1.5px solid var(--ink) !important;
  font-weight: 600;
}

/* ── Generic .card / .panel rescue ──────────────────────────────────── */
.card, .panel, .bv-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}

/* ── Auth-card legacy classes (some templates use .auth-card) ───────── */
.auth-card {
  max-width: 460px; width: 100%;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
  position: relative;
}
.auth-card::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold);
  border-radius: var(--r-md) 0 0 var(--r-md);
}

/* ════════════════════════════════════════════════════════════════════
   CASCADE RESCUE — Health Report Overview (.hro-*)
   The "Overview" dashboard view (vs Classical Scorecard). Originally
   styled by health-report-overview.css with a green/red palette;
   re-themed here with the Financial Intelligence design system.
   ════════════════════════════════════════════════════════════════════ */
.hro-page {
  background: var(--paper);
  padding: 32px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  font-family: var(--sans);
  color: var(--ink);
  max-width: 1240px;
  margin: 0 auto 32px;
  position: relative;
}
.hro-page::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

/* ── Title bar ────────────────────────────────────────────── */
.hro-title-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.hro-title {
  font-family: var(--display);
  font-size: 32px; font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.hro-title::before {
  content: 'OVERVIEW';
  display: block;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: .22em;
  margin-bottom: 6px;
}
.hro-brand {
  display: flex; align-items: center; gap: 12px;
  padding-left: 16px;
}
.hro-brand-name {
  font-family: var(--display);
  font-size: 20px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hro-brand-icon {
  color: var(--gold-deep);
  font-size: 22px;
}
.hro-score-gauge { margin-left: 4px; }

/* ── Card baseline ────────────────────────────────────────── */
.hro-card {
  background: var(--paper-card);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.hro-sec-title {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.hro-sec-title-sm {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-4);
  margin: 0 0 10px;
}

/* ── Top grid: KPI cards + funnel | Risk panel ────────────── */
.hro-grid-top {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 18px;
  margin-bottom: 18px;
}
.hro-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.hro-kpi-card { padding: 18px 20px; }
.hro-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.hro-card-label {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.hro-card-icon { color: var(--gold-deep); font-size: 18px; }
.hro-kpi-val {
  font-family: var(--display);
  font-size: 34px; font-weight: 500;
  color: var(--ink);
  margin-top: 10px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hro-kpi-unit {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-5);
  font-weight: 500;
  margin-left: 4px;
}
.hro-kpi-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-5);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 8px;
}
.hro-kpi-sub-success { color: var(--healthy-deep); font-weight: 600; }

/* ── Repeating Mistakes funnel ─────────────────────────────── */
.hro-funnel-card { padding: 18px 20px; }
.hro-funnel-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 22px;
  align-items: center;
}
.hro-funnel-svg { width: 100%; max-width: 200px; }
.hro-funnel-legend { display: flex; flex-direction: column; gap: 10px; }
.hro-funnel-key {
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--alert);
  line-height: 1.35;
}
.hro-funnel-key b {
  display: block;
  font-family: var(--serif);
  font-size: 13px; font-weight: 500;
  color: var(--ink);
}
.hro-funnel-key span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-5);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Top Risk panel ────────────────────────────────────────── */
.hro-risk-card { padding: 18px 20px; }
.hro-risk-head {
  display: flex; justify-content: space-between; align-items: center;
}
.hro-risk-title {
  font-family: var(--display);
  font-size: 17px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hro-risk-head-icon { color: var(--gold-deep); font-size: 20px; }
.hro-risk-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--alert-deep);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 4px 0 12px;
}
.hro-risk-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hro-risk-row:last-child { border-bottom: none; padding-bottom: 4px; }
.hro-risk-row-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.hro-risk-name {
  font-family: var(--serif);
  font-size: 13px; font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  flex: 1 1 auto; margin-right: 8px;
}
.hro-risk-pct {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-5);
  letter-spacing: .08em;
  flex: 0 0 auto; white-space: nowrap;
}
.hro-risk-amt {
  font-family: var(--display);
  font-size: 22px; font-weight: 500;
  color: var(--alert-deep);
  letter-spacing: -0.01em;
  text-align: right;
}

/* ── Departments ───────────────────────────────────────────── */
.hro-dept-card { margin-bottom: 18px; padding: 20px 22px; }
.hro-dept-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
}
.hro-dept-item { text-align: center; }
.hro-dept-gauge { width: 100%; max-width: 160px; }
.hro-dept-name {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--alert-deep);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 6px;
}
.hro-dept-amt {
  font-family: var(--display);
  font-size: 18px; font-weight: 500;
  color: var(--healthy-deep);
  margin-top: 4px;
  letter-spacing: -0.01em;
}

/* ── Bottom grid: YoY | Impact | Collaborate ───────────────── */
.hro-grid-bottom {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr 0.75fr;
  gap: 16px;
}
.hro-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
}
.hro-bar-label {
  color: var(--ink-3);
  text-align: right;
  font-weight: 500;
  letter-spacing: .04em;
}
.hro-bar-track {
  background: var(--paper-3);
  border-radius: 2px;
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.hro-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transition: width 600ms var(--ease);
}

/* ── Impact card ───────────────────────────────────────────── */
.hro-impact-card { background: var(--paper-card); }
.hro-impact-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hro-impact-row:last-child { border-bottom: none; padding-bottom: 4px; }
.hro-impact-name {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 2px;
}
.hro-impact-amt {
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  color: var(--healthy-deep);
  text-align: right;
  letter-spacing: -0.01em;
}

/* ── Collaborate card ──────────────────────────────────────── */
.hro-collab-card { padding: 16px 18px; }
.hro-collab-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.hro-collab-icon { color: var(--gold-deep); font-size: 18px; }
.hro-collab-title {
  font-family: var(--display);
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hro-collab-role {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-soft);
}
.hro-collab-link {
  display: block;
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--gold-deep);
  padding: 4px 0;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.hro-collab-link:hover { color: var(--ink); text-decoration: underline; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 880px) {
  .hro-grid-top { grid-template-columns: 1fr; }
  .hro-grid-bottom { grid-template-columns: 1fr; }
  .hro-dept-grid { grid-template-columns: 1fr; gap: 14px; }
  .hro-title { font-size: 26px; }
  .hro-page { padding: 22px 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   CASCADE OVERRIDE — Classical Scorecard (.bv-sc-*) re-skin
   scorecard.css ships its own layout but hardcodes a blue accent (#3B82F6)
   and Inter font. Re-paint with the new gold + Fraunces design language.
   ════════════════════════════════════════════════════════════════════ */
.bv-scorecard {
  font-family: var(--sans) !important;
  background: var(--paper-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  position: relative;
}
.bv-scorecard::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold);
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.bv-sc-title h2,
.bv-sc-kpi-value,
.bv-sc-gauge-score {
  font-family: var(--display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
.bv-sc-title-accent { color: var(--gold-deep) !important; }
.bv-sc-subtitle,
.bv-sc-meta-label,
.bv-sc-meta-value,
.bv-sc-kpi-label,
.bv-sc-kpi-delta,
.bv-sc-kpi-fy,
.bv-sc-section-title,
.bv-sc-focus-label,
.bv-sc-ft-label {
  font-family: var(--mono) !important;
}
.bv-sc-section-title {
  text-transform: uppercase;
  letter-spacing: .18em !important;
  color: var(--ink-3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.bv-sc-kpi-tile {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
}
.bv-sc-kpi-tile[data-tone="revenue"] .bv-sc-kpi-icon { background: var(--gold) !important; color: var(--ink) !important; }
.bv-sc-kpi-tile[data-tone="profit"]  .bv-sc-kpi-icon { background: var(--healthy) !important; color: var(--paper) !important; }
.bv-sc-kpi-tile[data-tone="margin"]  .bv-sc-kpi-icon { background: var(--watch) !important; color: var(--ink) !important; }
.bv-sc-kpi-tile[data-tone="overall"] .bv-sc-kpi-icon { background: var(--ink) !important; color: var(--gold) !important; }
.bv-sc-kpi-status.healthy,
.bv-sc-kpi-status.strong { color: var(--healthy-deep) !important; }
.bv-sc-kpi-status.moderate,
.bv-sc-kpi-status.watch  { color: var(--watch-deep) !important; }
.bv-sc-kpi-status.weak,
.bv-sc-kpi-status.alert  { color: var(--alert-deep) !important; }
.bv-sc-ft-icon { color: var(--gold-deep) !important; }
.bv-sc-gauge-pill[data-tone="strong"]    { background: var(--healthy-bg) !important; color: var(--healthy-deep) !important; }
.bv-sc-gauge-pill[data-tone="moderate"]  { background: var(--paper-2)   !important; color: var(--ink-2)        !important; }
.bv-sc-gauge-pill[data-tone="watch"]     { background: var(--watch-bg)  !important; color: var(--watch-deep)   !important; }
.bv-sc-gauge-pill[data-tone="alert"]     { background: var(--alert-bg)  !important; color: var(--alert-deep)   !important; }
.bv-sc-focus-pill.alert  { background: var(--alert-bg)   !important; color: var(--alert-deep)   !important; }
.bv-sc-focus-pill.watch  { background: var(--watch-bg)   !important; color: var(--watch-deep)   !important; }
.bv-sc-focus-pill.healthy{ background: var(--healthy-bg) !important; color: var(--healthy-deep) !important; }