/* ============================================================
   SALVO RESEARCH — essay skin
   Linked AFTER each essay's inline <style> so it wins the cascade.
   Re-skins the ported AI-Studies-Institute academic template
   (cream paper / navy / copper, serif) → Salvo identity
   (near-black / warm off-white / red, Work Sans + Inter + JetBrains Mono).
   Role-aware: navy-as-background stays dark, navy-as-text becomes light.
   ============================================================ */

:root {
  --salvo-bg:        #020202;
  --salvo-surface:   #0b0f17;
  --salvo-surface-2: #11161f;
  --salvo-border:    rgba(242,237,228,0.12);
  --salvo-text:      #f2ede4;
  --salvo-muted:     #b3aa9c;
  --salvo-dim:       #7d766b;
  --salvo-red:       #ff4054;
  --salvo-red-soft:  #ff5478;
  --salvo-amber:     #ffd54a;

  /* remap the inherited template vars as a catch-all for anything
     not explicitly overridden below */
  --asi-navy:        #0b0f17;   /* was a dark bg in most uses */
  --asi-navy-dark:   #f2ede4;   /* was dark text → light */
  --asi-navy-light:  #11161f;
  --asi-accent:      #ff5478;
  --asi-copper:      #ff4054;   /* the accent → Salvo red */
  --asi-copper-light:#ffd54a;
  --text-primary:    #f2ede4;
  --text-secondary:  #b3aa9c;
  --bg-subtle:       #0b0f17;
}

/* ---------- shell ---------- */
body {
  background: var(--salvo-bg) !important;
  color: var(--salvo-text) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
::selection { background: var(--salvo-red); color: #020202; }
a { color: var(--salvo-red-soft); }
strong { color: var(--salvo-text); }

/* ---------- header ---------- */
header {
  background: var(--salvo-surface) !important;
  border-bottom: 1px solid rgba(255,84,120,0.22);
}
.back-link { color: rgba(242,237,228,0.65) !important; }
.back-link:hover { color: #fff !important; }
.paper-type {
  color: var(--salvo-red) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 2px;
}
.subtitle { color: rgba(242,237,228,0.82) !important; }
.meta { color: rgba(242,237,228,0.5) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ---------- display type ---------- */
h1, h2, h3, .kicker, .card-name, .stat-number, .pullstat, .card-tension {
  font-family: 'Work Sans', system-ui, sans-serif !important;
}
h1 { font-weight: 800 !important; letter-spacing: -0.015em; color: var(--salvo-text); }
h2 { font-weight: 700 !important; color: var(--salvo-text) !important; }
h2::before { background: var(--salvo-red) !important; }
h3 { font-weight: 600 !important; color: var(--salvo-text) !important; }

/* ---------- body content ---------- */
.lead { color: var(--salvo-muted) !important; }
.lead::first-letter { color: var(--salvo-red) !important;
  font-family: 'Work Sans', sans-serif !important; }

.abstract {
  background: var(--salvo-surface) !important;
  border-left-color: var(--salvo-red) !important;
}
.abstract-label {
  color: var(--salvo-red) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

.pullstat {
  background: linear-gradient(to right, rgba(255,64,84,0.10), rgba(255,64,84,0)) !important;
  border-left-color: var(--salvo-red) !important;
  color: var(--salvo-text) !important;
}
.pullstat strong { color: var(--salvo-red-soft) !important; }
.kicker { color: var(--salvo-text) !important; }

/* ---------- figures / native charts ---------- */
figure { color: var(--salvo-muted); }
.chart {
  background: var(--salvo-surface) !important;
  border: 1px solid var(--salvo-border) !important;
  box-shadow: none !important;
}
.cv text { fill: var(--salvo-muted) !important; }
.c-title { fill: var(--salvo-text) !important; }
.c-sub  { fill: var(--salvo-dim) !important; }
.c-axis { fill: var(--salvo-dim) !important; }
.c-note { fill: var(--salvo-red-soft) !important; }
.c-lbl, .c-val, .c-zone { fill: var(--salvo-muted); }
.gl   { stroke: rgba(242,237,228,0.07) !important; }
.axln { stroke: rgba(242,237,228,0.18) !important; }
.refln{ stroke: var(--salvo-red) !important; }

figcaption {
  color: var(--salvo-muted) !important;
  border-left-color: var(--salvo-red) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
figcaption strong { color: var(--salvo-text) !important; }

/* ---------- character / content cards ---------- */
.card {
  background: var(--salvo-surface) !important;
  /* no !important on borders → inline per-family accent colors still win */
  border: 1px solid var(--salvo-border);
  border-left: 4px solid var(--salvo-red);
}
.card-fam  { font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  color: var(--salvo-red-soft); }
.card-name { color: var(--salvo-text) !important; }
.card-body { color: var(--salvo-muted) !important; }
.card-tension {
  background: var(--salvo-surface-2) !important;
  color: var(--salvo-text) !important;
  border-left: 4px solid var(--salvo-red);
}

/* ---------- stat boxes ---------- */
.stat-box   { background: var(--salvo-surface) !important;
  border: 1px solid var(--salvo-border) !important; }
.stat-number{ color: var(--salvo-amber) !important; }
.stat-label { color: var(--salvo-dim) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ---------- citation / sources ---------- */
.cite-block {
  background: var(--salvo-surface) !important;
  border-left-color: var(--salvo-red) !important;
  color: var(--salvo-muted) !important;
}
.cite-label {
  color: var(--salvo-red) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
.sources { color: var(--salvo-muted) !important; border-top-color: var(--salvo-border) !important; }
.sources a { color: var(--salvo-red-soft) !important; }

/* ---------- five-factor / radar viz (.fp-*) ---------- */
.fp { background: var(--salvo-surface) !important; border-color: var(--salvo-border) !important; }
.fp-grid, .fp-spoke { stroke: rgba(242,237,228,0.14) !important; }
.fp-poly  { stroke: var(--salvo-red) !important; fill: rgba(255,64,84,0.14) !important; }
.fp-vertex{ fill: var(--salvo-red) !important; }
.fp-axis-label { fill: var(--salvo-text) !important; }
.fp-axis-sub   { fill: var(--salvo-dim) !important; }
.fp-chip  { background: var(--salvo-surface-2) !important; color: var(--salvo-muted) !important;
  border-color: var(--salvo-border) !important; }
.fp-legend, .fp-tip { color: var(--salvo-muted) !important; }

/* ---------- mindmap viz (.mm-*) ---------- */
.mindmap { background: var(--salvo-surface) !important; border-color: var(--salvo-border) !important; }
.mm-controls .mm-btn, .mm-btn {
  background: var(--salvo-surface-2) !important; color: var(--salvo-text) !important;
  border: 1px solid var(--salvo-border) !important;
}
.mm-btn:hover, .mm-btn.on { background: var(--salvo-red) !important; color: #020202 !important;
  border-color: var(--salvo-red) !important; }
.mm-legend, .mm-hint, .mm-tip, .mm-count { color: var(--salvo-muted) !important; }

/* ---------- reading progress bar ---------- */
.reading-progress { background: var(--salvo-red) !important; }

/* ---------- tables / code (ai-is-an-attractor) ---------- */
table { color: var(--salvo-text); border-color: var(--salvo-border) !important; }
th, td { border-color: var(--salvo-border) !important; }
th { color: var(--salvo-text); }
code, pre { background: var(--salvo-surface-2) !important; color: var(--salvo-amber) !important; }
blockquote { color: var(--salvo-muted) !important; border-left-color: var(--salvo-red) !important; }