/*
 * dashboard-v2.css — multi-theme styling for the CLI-generated analysis
 * pages (Spirit, Letterpress, Original, Orchid, Studio, Expedition — see
 * dashboard-tokens.css for the theme definitions and partials/footer.html
 * for the picker UI).
 *
 * Component rules below read colors/fonts entirely through the
 * --v17-* and --font-* custom properties dashboard-tokens.css defines, so a
 * theme switch re-skins the whole page without touching anything in this
 * file. Was originally aligned 1:1 with talepal.org v17 tokens_v17.css —
 * deliberately decoupled from that homepage-mirrored file now that
 * dashboard-v2 has its own multi-theme identity; tokens_v17.css/
 * fonts_v17.css are untouched and still used elsewhere.
 *
 * Loaded from each generated page via:
 *   <link rel="stylesheet" href="assets/css/dashboard-v2.css">
 * (The DashboardGeneratorV2 emits that tag — see
 *  src/reengineering/dashboardGeneratorV2.ts:964.)
 */

@import url('dashboard-fonts.css');
@import url('dashboard-tokens.css');

/* ─── Legacy variable aliases ──────────────────────────────────────
 * The page-level HTML templates in assets/templates/dashboard-v2/
 * embed sizeable inline <style> blocks that reference the OLD purple
 * dashboard token scheme: --bg-card, --primary, --text-primary,
 * --gradient-primary, --space-lg, --shadow-md, etc.
 *
 * Rather than touch every template, we map every legacy name to the
 * matching v17 token here. New CSS should use --v17-* directly.
 * This block is the bridge — when the inline styles get migrated,
 * we delete the bridge.
 */
:root {
  /* Surfaces */
  --bg-body:           var(--v17-bg);
  --bg-card:           var(--v17-bg-soft);
  --bg-card-hover:     var(--v17-bg-soft);
  --bg-elevated:       var(--v17-bg-panel);
  --bg-input:          var(--v17-bg-soft);

  /* Text */
  --text-primary:      var(--v17-ink);
  --text-secondary:    var(--v17-mute);
  --text-muted:        var(--v17-mute-2);
  --text-on-primary:   var(--v17-bg-soft);

  /* Borders + shadows — keep them whisper-quiet under v17 */
  --border-subtle:     var(--v17-line-2);
  --border-card:       var(--v17-line);
  --shadow-sm:         0 1px 2px rgba(15, 16, 19, 0.04);
  --shadow-md:         0 2px 6px rgba(15, 16, 19, 0.06);
  --shadow-lg:         0 8px 16px rgba(15, 16, 19, 0.08);
  --shadow-card:       0 1px 2px rgba(15, 16, 19, 0.05);

  /* Primary action colour — was purple, now ink */
  --primary:           var(--v17-ink);
  --primary-hover:     var(--v17-primary-hover, #000);
  --primary-light:     var(--v17-ink-2);
  --primary-dark:      var(--v17-ink);

  /* "Accent" tints + badge colours — neutralised so old templates
     don't paint rainbows. Style guide §7: "use ink/mute shades, not
     rainbow". */
  --accent-green:      var(--v17-ink-2);
  --accent-blue:       var(--v17-ink-2);
  --accent-yellow:     var(--v17-ink-2);
  --accent-red:        var(--v17-ink-2);
  --accent-pink:       var(--v17-ink-2);
  --badge-protagonist: var(--v17-ink);
  --badge-main:        var(--v17-ink-2);
  --badge-supporting:  var(--v17-mute);
  --badge-mentioned:   var(--v17-mute-2);

  /* Gradients — kill them flat */
  --gradient-primary:  var(--v17-ink);
  --gradient-header:   var(--v17-bg-soft);

  /* Spacing scale (kept intact for layout math) */
  --space-xs:          0.25rem;
  --space-sm:          0.5rem;
  --space-md:          1rem;
  --space-lg:          1.5rem;
  --space-xl:          2rem;
  --space-2xl:         3rem;

  /* Radii */
  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --radius-xl:         14px;
  --radius-full:       9999px;

  /* Transitions */
  --transition-fast:   0.1s ease;
  --transition-normal: 0.15s ease;
  --transition-slow:   0.3s ease;
}

/*
 * Inline templates use a `-webkit-background-clip: text` gradient trick
 * on .chapter-num / .char-card-num to paint the number in purple. Force
 * it back to a plain mute colour so the trick degrades gracefully.
 */
.chapter-num,
.char-card-num {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  background-clip: initial !important;
  color: var(--v17-mute) !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
}

/* ───────────────────────────────────────────────────────────────────
   1. Reset + page chrome
   ─────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  /* tokens_v17.css already sets body type. This restates the page bg
     for clarity — analysis pages get ash-white, not pure white. */
  background: var(--v17-bg);
  color: var(--v17-ink-2);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--v17-ink); }

.dashboard-container {
  max-width: 1100px;
  margin: 0 auto;
  /* Top breathing room so the brand block doesn't hug the page edge. */
  padding: 1.6rem 1.5rem 0;
}

/* ───────────────────────────────────────────────────────────────────
   2. Header + nav
   ───────────────────────────────────────────────────────────────────
   .header-v2 is the page chrome that sits ABOVE the hero. It carries
   the wordmark + a thin nav bar. Visually quiet — the hero pull-band
   below is what actually frames the title.
*/

.header-v2 {
  background: transparent;
  border-bottom: 1px solid var(--v17-line);
  padding: 1.1rem 0;
}

.header-v2 > .dashboard-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Brand block: logo sits LEFT of the title/subtitle text, vertically
   centred — not stacked above it. */
.header-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Portrait feather mark — keep its aspect, don't force a square (that was
   squashing it). Crisp SVG instead of the old 120px raster. */
.header-logo img {
  display: block;
  height: 34px;
  width: auto;
}

.header-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--v17-ink);
  line-height: 1.15;
}

.header-subtitle {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--v17-mute);
  margin-top: 0.15rem;
}

.header-nav {
  margin-left: auto;
  margin-top: 0.9rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.header-nav a,
.nav-link {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--v17-ink-2);
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.header-nav a:hover,
.nav-link:hover,
.nav-link.active {
  color: var(--v17-ink);
  border-bottom-color: var(--v17-highlight);
}

/* ───────────────────────────────────────────────────────────────────
   Theme picker — 4-way swatch group, fixed bottom-right on every
   dashboard-v2 page (see partials/footer.html for the markup + JS).
   Each swatch previews its theme's bg/accent so the picker itself
   demonstrates the choice, not just a labeled list.
   ─────────────────────────────────────────────────────────────────── */

.theme-picker {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  background: var(--v17-bg-soft);
  border: 1px solid var(--v17-line);
  border-radius: var(--v17-radius-pill);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.theme-swatch {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  display: block;
  transition: transform 0.15s, border-color 0.15s;
}

.theme-swatch:hover {
  transform: scale(1.1);
}

.theme-swatch.active {
  border-color: var(--v17-ink);
}

.theme-swatch[data-swatch="spirit"]      { background: linear-gradient(135deg, #1a1624 50%, #ff79c6 50%); }
.theme-swatch[data-swatch="letterpress"] { background: linear-gradient(135deg, #f2e9da 50%, #a6472b 50%); }
.theme-swatch[data-swatch="original"]    { background: linear-gradient(135deg, #f6f6f9 50%, #b8523c 50%); }
.theme-swatch[data-swatch="orchid"]      { background: linear-gradient(135deg, #faf6fb 50%, #c026d3 50%); }
.theme-swatch[data-swatch="studio"]      { background: linear-gradient(135deg, #ffffff 50%, #ff4d00 50%); }
.theme-swatch[data-swatch="expedition"]  { background: linear-gradient(135deg, #f4efe3 50%, #b5651d 50%); }

@media (max-width: 480px) {
  .theme-picker { right: 0.75rem; bottom: 0.75rem; padding: 0.3rem; gap: 0.3rem; }
  .theme-swatch { width: 22px; height: 22px; }
}

/* ───────────────────────────────────────────────────────────────────
   3. Hero — pull-band header
   ───────────────────────────────────────────────────────────────────
   The pull-band is a thin slate-coloured strip above the hero title.
   It mirrors the rim look on the homepage hero and gives the page a
   clear editorial start without a flat-coloured banner.
*/

.hero-section {
  background: transparent;
  border-bottom: 1px solid var(--v17-line);
  padding: 4rem 0 3.5rem;
  position: relative;
}

.hero-section::before {
  /* The pull-band rim. Sits flush against the top of the hero, full
     width, a single slate hairline plus a thin lighter band for depth. */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background:
    linear-gradient(to bottom,
      var(--v17-highlight) 0,
      var(--v17-highlight) 2px,
      var(--v17-bg-panel) 2px,
      var(--v17-bg-panel) 100%);
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 44rem;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--v17-ink);
  margin: 0;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  color: var(--v17-mute);
  font-size: 0.9rem;
}

.hero-stat,
.hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--v17-mute);
  white-space: nowrap;
}

.hero-stat strong,
.hero-meta-item strong,
.stat-value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--v17-ink);
  letter-spacing: 0;
}

.hero-stat-icon,
.detail-icon,
.event-icon,
.loc-icon {
  width: 14px;
  height: 14px;
  color: var(--v17-mute-2);
  flex-shrink: 0;
}

.stat-item,
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--v17-mute);
}

/* ───────────────────────────────────────────────────────────────────
   4. Progress bars
   ─────────────────────────────────────────────────────────────────── */

.progress-bar,
.chapter-progress-bar {
  position: relative;
  height: 4px;
  background: var(--v17-bg-panel);
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
}

.progress-fill,
.chapter-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--v17-ink);
  border-radius: 999px;
}

.progress-text,
.chapter-percent {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--v17-mute);
}

/* ───────────────────────────────────────────────────────────────────
   5. Sections + cards
   ───────────────────────────────────────────────────────────────────
   Each .section is a page block. Inside, content lives in .card
   (white surface, hairline, 14px radius). Optional .section-badge
   on .card-header carries the section's icon — neutralised to a
   single ink-on-panel look (no per-section colour washes).
*/

.section {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--v17-line-2);
}

.section:last-of-type {
  border-bottom: 0;
}

.section-head,
.section-description {
  max-width: 44rem;
}

.section-description {
  color: var(--v17-mute);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0.5rem 0 1.5rem;
}

.card {
  background: var(--v17-bg-soft);
  border: 1px solid var(--v17-line);
  border-radius: var(--v17-radius-card);
  padding: 1.75rem 1.75rem 1.5rem;
}

.card + .card { margin-top: 1rem; }

/*
 * In any grid/flex layout the `.card + .card { margin-top }` rule
 * above pushes the 2nd+3rd card down 16 px, so a 3-column row visibly
 * staggers (Core Traits / Motivations / Story Role). Reset inside
 * grids and ensure the cells share a row height + top-align so the
 * headings line up cleanly.
 */
.info-grid > .card,
.relationships-grid > .card,
.psychology-grid > .card,
[class*="-grid"] > .card {
  margin-top: 0 !important;
  height: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}

.info-grid { align-items: stretch !important; }

/*
 * NOTE: A previous v17 rule styled .role-content as a filled-ink pill
 * (mono / uppercase / border-radius:999px / ink background). That was a
 * mistake — .role-content holds the full "Story Role" prose ({{roleInStory}}),
 * not a short role label, so the pill rendered as a black oval of uppercase
 * monospace text. The short role badge is .char-role-badge / .char-badge-*
 * (see below). We deliberately do NOT style .role-content here; it falls
 * back to the clean body style in character-detail.html
 * (.motivations-content, .role-content { color/line-height/font-size }).
 */

.card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  letter-spacing: -0.02em;
  color: var(--v17-ink);
  line-height: 1.2;
  margin: 0;
}

.card-content,
.card-content p {
  color: var(--v17-ink-2);
  font-size: 1rem;
  line-height: 1.65;
}

.card-content p { margin: 0 0 1rem; }
.card-content p:last-child { margin: 0; }

/*
 * Section badge — was per-section coloured (.purple, .amber, .blue).
 * Flattened to a single neutral look: a panel-tinted square with the
 * icon stroked in mute ink. The icon itself gives the distinction.
 * Single-accent rule wins (see STYLE_GUIDE.md §2).
 */
.section-badge,
.section-badge.purple,
.section-badge.amber,
.section-badge.blue,
.section-badge.green,
.section-badge.pink,
.section-badge.red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--v17-bg-panel);
  color: var(--v17-ink-2);
  flex-shrink: 0;
}

.section-badge svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* ───────────────────────────────────────────────────────────────────
   6. Themes / chart container (legacy patterns inside .section)
   ─────────────────────────────────────────────────────────────────── */

.chart-container {
  background: var(--v17-bg-soft);
  border: 1px solid var(--v17-line);
  border-radius: var(--v17-radius-card);
  padding: 1.5rem 1.75rem;
}

/*
 * Chart.js needs a fixed-height parent or the canvas will grow forever
 * (maintainAspectRatio: false in the chart options). We bound it here
 * rather than per-canvas so any chart living in .chart-container is safe.
 */
.chart-container canvas {
  max-height: 360px;
  width: 100% !important;
}

.chart-title,
.themes-section h3,
.theme-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  color: var(--v17-ink);
  margin: 0 0 0.75rem;
}

.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

/* Main Themes → outline pills sitting in a wrapping row, not stretched
   grid cells. */
.themes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.theme-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--v17-mute-2);
  border-radius: 999px;
  background: transparent;
  color: var(--v17-ink-2);
  font-size: 0.85rem;
  line-height: 1.2;
}

.theme-card,
.narrative-focus {
  background: var(--v17-bg-soft);
  border: 1px solid var(--v17-line);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  transition: border-color 0.15s, transform 0.15s;
}

.theme-card:hover { border-color: var(--v17-mute-2); }

.theme-card p {
  color: var(--v17-mute);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0.4rem 0 0;
}

/* ───────────────────────────────────────────────────────────────────
   7. Nav grid (cross-page links)
   ─────────────────────────────────────────────────────────────────── */

.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}

.nav-card {
  background: var(--v17-bg-soft);
  border: 1px solid var(--v17-line);
  border-radius: 12px;
  padding: 1.3rem 1.4rem;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
}

.nav-card:hover {
  border-color: var(--v17-ink);
  transform: translateY(-1px);
}

.nav-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--v17-ink);
  margin-bottom: 0.25rem;
}

.nav-card-desc {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--v17-mute);
}

/* ───────────────────────────────────────────────────────────────────
   8. Chapter cards (chapters.html)
   ─────────────────────────────────────────────────────────────────── */

.chapter-card-link { display: block; }

.chapter-card-v2 {
  background: var(--v17-bg-soft);
  border: 1px solid var(--v17-line);
  border-radius: 12px;
  padding: 1.4rem 1.55rem;
  transition: border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.chapter-card-link:hover .chapter-card-v2 {
  border-color: var(--v17-ink);
  transform: translateY(-1px);
}

.chapter-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.chapter-num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--v17-mute);
}

.chapter-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  color: var(--v17-ink);
  line-height: 1.2;
  margin: 0;
}

.chapter-location {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--v17-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chapter-summary {
  color: var(--v17-ink-2);
  font-size: 1rem;
  line-height: 1.6;
}

.chapter-characters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.1rem;
}

.chapter-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--v17-mute);
}

.chapter-words {
  font-variant-numeric: tabular-nums;
  color: var(--v17-mute);
}

/* ───────────────────────────────────────────────────────────────────
   9. Character cards (characters.html)
   ─────────────────────────────────────────────────────────────────── */

.char-card-v2 {
  background: var(--v17-bg-soft);
  border: 1px solid var(--v17-line);
  border-radius: 12px;
  padding: 1.4rem 1.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color 0.15s, transform 0.15s;
}

.char-card-v2:hover {
  border-color: var(--v17-ink);
  transform: translateY(-1px);
}

.char-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.char-card-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  color: var(--v17-ink);
  margin: 0;
  line-height: 1.2;
}

.char-card-chapters {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--v17-mute);
  font-variant-numeric: tabular-nums;
}

.char-card-range,
.char-card-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v17-mute);
}

.char-card-link { color: var(--v17-ink); }

.char-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--v17-mute);
}

/*
 * Sanfte Differenzierung der Rollen — no rainbow fills, no per-role
 * accent colour. The differentiation comes from:
 *   - protagonist: a slim ink rule on the left (the page's "lead")
 *   - main: default card
 *   - supporting: slight opacity reduction
 *   - mentioned: more muted + lighter border
 * One terracotta accent per viewport stays for headings only.
 */
.char-card-v2.char-protagonist {
  border-left: 3px solid var(--v17-ink);
  padding-left: calc(1.35rem - 2px); /* compensate the thicker rule */
}

.char-card-v2.char-supporting { opacity: 0.92; }
.char-card-v2.char-mentioned {
  opacity: 0.82;
  border-color: var(--v17-line-2);
}

/* ───────────────────────────────────────────────────────────────────
   10. Char tags (inline character mentions inside chapter cards)
   ─────────────────────────────────────────────────────────────────── */

.char-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--v17-bg-panel);
  color: var(--v17-ink-2);
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Role variants: same shape, different ink-shade weight. */
.char-tag.char-protagonist {
  background: var(--v17-ink);
  color: var(--v17-bg-soft);
}

.char-tag.char-main {
  background: var(--v17-bg-soft);
  border-color: var(--v17-ink);
  color: var(--v17-ink);
}

.char-tag.char-supporting {
  background: var(--v17-bg-panel);
  color: var(--v17-ink-2);
}

.char-tag.char-mentioned {
  background: transparent;
  color: var(--v17-mute);
  border-color: var(--v17-line);
}

/* Variant subtags (e.g. "Mr. Harker", "Jon" — different surface forms
   of the same character). Smaller, dimmer. */
.char-variants-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.char-variant-tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--v17-line);
  color: var(--v17-mute);
}

.char-variant-tag.variant-low {
  opacity: 0.75;
}

.char-variant-tag.minor {
  color: var(--v17-mute-2);
  border-color: var(--v17-line-2);
}

/*
 * Variant + role overrides — the inline <style> blocks in characters.html
 * paint these in rainbow rgba (purple high, indigo medium, green
 * protagonist). The inline block loads after this file, so we use
 * !important to keep the sanfte-Differenzierung discipline.
 * Style guide §7: "use ink/mute shades, not rainbow".
 */
.char-variant-tag.variant-high {
  background: var(--v17-bg-soft) !important;
  color: var(--v17-ink) !important;
  border: 1px solid var(--v17-ink) !important;
}

.char-variant-tag.variant-medium {
  background: var(--v17-bg-panel) !important;
  color: var(--v17-ink-2) !important;
  border: 1px solid var(--v17-line) !important;
}

.char-variant-tag.variant-low {
  background: transparent !important;
  color: var(--v17-mute) !important;
  border: 1px solid var(--v17-line-2) !important;
  opacity: 1 !important;
}

/* ───────────────────────────────────────────────────────────────────
 * Plot + Timeline inline-style neutraliser
 *
 * plot.html and enhanced-timeline.html ship sizeable inline <style>
 * blocks that paint purple/blue/green/amber gradients, rainbow
 * nth-child character badges, coloured left rules per phase, etc.
 * All of it violates the single-accent + ink-only discipline, so
 * we wipe it with !important here. When the templates get migrated
 * the !important block can go.
 * ─────────────────────────────────────────────────────────────── */

/* Hero / stat strip with purple-blue wash → flat panel */
.plot-overview-stats,
.plot-hero-stats,
.stats-strip,
.stats-bar {
  background: var(--v17-bg-soft) !important;
  border: 1px solid var(--v17-line) !important;
}

.stat-item {
  background: transparent !important;
  border: 0 !important;
}

/* Section icon / stat-value gradient text → flat ink */
.section-icon,
.section-icon-tag,
.stat-value,
.gradient-text,
.gradient-number {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--v17-ink) !important;
}

/* Chapter-count / chapter-range pills (were purple / green washes) */
.chapter-range,
.chapter-count,
.chapter-count-badge {
  background: var(--v17-bg-panel) !important;
  color: var(--v17-ink-2) !important;
  border: 1px solid transparent !important;
  font-family: var(--font-mono) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.06em !important;
}

/* Confidence-percent pill — a distinct "pass" signal, not a generic
   meta badge, so it gets the status-pass green instead of neutral ink.
   Plain rule (no !important): this is the sole definition once the
   duplicate inline copies in plot.html / character-detail.html are
   removed, not an override fighting inline CSS. */
.confidence-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  background: var(--v17-status-pass-bg);
  color: var(--v17-status-pass-fg);
}

/* Character page: profiles merged into this one (Step 3), with the model's
   confidence; the reasoning folds open (no hover — phones have none). */
/* An alias's note (name cleanup, Step 3) is a remark, not a score — plain
   small text, not the green confidence badge it used to borrow. */
.variant-note { margin-top: 0.35rem; font-size: 0.8rem; color: var(--v17-mute); line-height: 1.4; }
.merged-block { margin-top: 1.25rem; }
.merged-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v17-mute);
  margin: 0 0 0.6rem;
}
.merge-reasoning { margin-top: 0.5rem; font-size: 0.85rem; color: var(--v17-ink-2); }
.merge-reasoning summary { cursor: pointer; color: var(--v17-mute); font-size: 0.8rem; }
.merge-reasoning p { margin: 0.4rem 0 0; line-height: 1.5; }

/* The amber "Notes:" callout above the structure → neutral note */
.notes,
.note-callout,
.notes-block,
.callout-notes,
.structure-deviations {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 3px solid var(--v17-mute-2) !important;
  color: var(--v17-ink-2) !important;
}

.deviations-label,
.notes-label,
.callout-label {
  color: var(--v17-ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

/* phase-event (inner mini event card) — was purple wash + purple
   left rule, nested inside the already-bordered .phase-card. Drop
   the second border, fall back to a clean panel. */
.phase-event,
.phase-event-mini,
.plot-point {
  background: var(--v17-bg-panel) !important;
  border-left: 0 !important;
  border-radius: 6px !important;
  background-image: none !important;
}

/* Character badges that go rainbow by nth-child position — flatten
   to the same neutral pill as char-tag. */
.character-badge,
.character-badge:nth-child(3n+1),
.character-badge:nth-child(3n+2),
.character-badge:nth-child(3n+3) {
  background: var(--v17-bg-panel) !important;
  color: var(--v17-ink-2) !important;
  border: 1px solid transparent !important;
  font-family: var(--font-mono) !important;
  font-size: 0.74rem !important;
}

/* Subplot / theme resolution callout (the green "Resolution:" box) */
.subplot-resolution,
.theme-resolution,
.resolution-callout {
  background: var(--v17-bg-panel) !important;
  border: 0 !important;
  background-image: none !important;
  border-left: 3px solid var(--v17-mute-2) !important;
  color: var(--v17-ink-2) !important;
}

/* Phase + period cards: drop the per-phase colour, keep the single
   slate rim from the main rule. */
.phase-card,
.phase-card.phase-setup,
.phase-card.phase-conflict,
.phase-card.phase-confrontation,
.phase-card.phase-climax,
.phase-card.phase-resolution,
.period-card,
.act,
.act-1, .act-2, .act-3 {
  border-left: 3px solid var(--v17-highlight) !important;
  background: var(--v17-bg-soft) !important;
  background-image: none !important;
}

/* Some templates draw `::before` strips on .act-* — kill them */
.act::before,
.act-1::before,
.act-2::before,
.act-3::before {
  display: none !important;
}

/* Major theme / subplot card backgrounds — flatten the soft-green wash */
.theme-card,
.subplot-card,
.narrative-focus,
.tension-block {
  background: var(--v17-bg-soft) !important;
  background-image: none !important;
  border: 1px solid var(--v17-line) !important;
}

/* Section-badge variants used on plot.html — same flat panel as main */
.section-badge.section-badge-red,
.section-badge.section-badge-amber,
.section-badge.section-badge-emerald,
.section-badge.section-badge-purple,
.section-badge.section-badge-blue {
  background: var(--v17-bg-panel) !important;
  color: var(--v17-ink-2) !important;
}

/* ─── Timeline page (enhanced-timeline.html) ─────────────────────── */

/* The timeline event ring + connectors. .timeline-event and
   .timeline-item are POSITION wrappers — leave them transparent so
   the inner .event-card / .event-card-v2 isn't doubled by an outer
   box border. */
.timeline-event,
.timeline-item {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.event-card,
.event-card-v2 {
  background: var(--v17-bg-soft) !important;
  background-image: none !important;
  border: 1px solid var(--v17-line) !important;
}

.event-icon,
.loc-icon {
  background: var(--v17-bg-soft) !important;
  border-color: var(--v17-highlight) !important;
  color: var(--v17-mute-2) !important;
}

/* Char-detail Chapter Timeline marker (label "Ch 4" etc.) — was
   getting var(--primary) text colour, which through the legacy alias
   becomes ink. Force it to mute so the "Ch X" reads as a quiet
   tabular label, not a heading. */
.timeline-marker {
  color: var(--v17-mute) !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}

/* event-type chips (was red/blue/green/etc per category) */
.event-type,
.event-tag,
.event-category {
  background: var(--v17-bg-panel) !important;
  color: var(--v17-ink-2) !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
}

/* ─── Enhanced Timeline page — deep neutraliser ──────────────────
 * enhanced_timeline_overview.html ships about 80 rgba/gradient rules
 * with nth-child rainbow colouring. Brute-force flat-ink everything
 * here so the page reads in one ink shade. */

/* Card icons (the small location pin / book / sparkle squares) —
   were tinted per section. Flatten to panel + ink-2 stroke. */
.card-icon,
.section:nth-of-type(3) .card-icon,
.section:nth-of-type(4) .card-icon,
.section:nth-of-type(5) .card-icon {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border: 0 !important;
}

.card-icon svg { stroke: currentColor !important; }

/* Recommended layer badge — was purple */
.recommended-badge {
  background: var(--v17-bg-panel) !important;
  color: var(--v17-ink-2) !important;
  background-image: none !important;
  border: 1px solid transparent !important;
}

/* Layer selector tabs — drop the cool-grey-panel bg that read as
   "off / slightly purple" and use the lighter line tone instead. */
.layer-selector {
  background: transparent !important;
  border: 1px solid var(--v17-line) !important;
  padding: 0.4rem !important;
}

.layer-tab,
.layer-tab:hover,
.layer-tab.active {
  background: var(--v17-bg-soft) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border: 1px solid var(--v17-line) !important;
  box-shadow: none !important;
}

.layer-tab.active {
  border-color: var(--v17-ink) !important;
  color: var(--v17-ink) !important;
}

/* Layer-tab icons — each layer gets a subtle data-palette tint on the
   icon background so the three layers feel intentional rather than
   "indistinguishable grey". Background stays panel-neutral; the
   accent comes from the icon stroke colour. */
.layer-tab .layer-icon,
.layer-tab:nth-child(1) .layer-icon,
.layer-tab:nth-child(2) .layer-icon,
.layer-tab:nth-child(3) .layer-icon {
  background: var(--v17-bg-soft) !important;
  background-image: none !important;
  border: 1px solid var(--v17-line) !important;
  color: var(--v17-data-slate) !important;
}

.layer-tab:nth-child(1) .layer-icon { color: var(--v17-data-moss) !important; }
.layer-tab:nth-child(2) .layer-icon { color: var(--v17-data-slate) !important; }
.layer-tab:nth-child(3) .layer-icon { color: var(--v17-data-bronze) !important; }

.layer-tab .layer-name { color: var(--v17-ink) !important; }
.layer-tab .layer-desc { color: var(--v17-mute) !important; }

/* "Intelligent N-Layer Analysis" callout (light blue wash). The bg-panel
   token reads a hair purple in isolation, so use the lighter line tone
   here for a more neutral wash. */
.layer-heading {
  background: transparent !important;
  background-image: none !important;
  border-top: 1px solid var(--v17-line) !important;
  border-bottom: 1px solid var(--v17-line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  color: var(--v17-ink-2) !important;
  padding: 0.85rem 1.1rem !important;
}

/* The SVG icon inside .layer-heading was hex-coloured #a78bfa with
   a gradient background panel. Strip the background, give the stroke
   a data-slate tint so the section identity feels intentional. */
.layer-heading svg {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  color: var(--v17-data-slate) !important;
}
.layer-heading svg * {
  stroke: var(--v17-data-slate) !important;
  fill: none !important;
  color: var(--v17-data-slate) !important;
}

/* Literary framing cards (prologue green, epilogue blue) */
.framing-card,
.framing-card.prologue,
.framing-card.epilogue {
  background: var(--v17-bg-soft) !important;
  background-image: none !important;
  border: 1px solid var(--v17-line) !important;
  color: var(--v17-ink-2) !important;
}

.framing-card h3 svg,
.framing-card.prologue h3 svg,
.framing-card.epilogue h3 svg {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  border: 0 !important;
  stroke: var(--v17-mute-2) !important;
  color: var(--v17-mute-2) !important;
}

/* Phase cards — numbered rainbow + per-phase ::before colour bars */
.phase-card::before,
.phase-card:nth-child(2)::before,
.phase-card:nth-child(3)::before,
.phase-card:nth-child(4)::before {
  border-color: var(--v17-highlight) !important;
  background: var(--v17-highlight) !important;
}

.phase-number,
.phase-card:nth-child(2) .phase-number,
.phase-card:nth-child(3) .phase-number,
.phase-card:nth-child(4) .phase-number {
  background: var(--v17-ink) !important;
  background-image: none !important;
  color: var(--v17-bg-soft) !important;
  font-family: var(--font-mono) !important;
  box-shadow: none !important;
}

/* Time-period (Layer 2) cards — uniform thin border all around: no thick
   coloured top border, no slate left rim. Just a clean hairline card. */
.period-card,
.period-card:nth-child(1),
.period-card:nth-child(2),
.period-card:nth-child(3),
.period-card:nth-child(4) {
  border: 1px solid var(--v17-line) !important;
  background: var(--v17-bg-soft) !important;
}

/* The vertical rainbow connecting line on the phase column */
.timeline-vertical::before,
.phases-container::before,
.layer-content .timeline-vertical::before {
  background: var(--v17-line) !important;
  background-image: none !important;
}

/* Timeline event dots (major/moderate/minor — were tinted red/amber/blue) */
.timeline-event::before,
.timeline-event.major::before,
.timeline-event.moderate::before,
.timeline-event.minor::before {
  background: var(--v17-bg-soft) !important;
  border-color: var(--v17-highlight) !important;
  box-shadow: none !important;
}

/* Event count badge ("N key events", lavender pill) */
.event-count-badge {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-mute) !important;
  border: 0 !important;
}

/* Layer 3 events: give them a card so they read as separate items (the base
   .timeline-event is a transparent position-wrapper). Scoped to the Layer-3
   list so the stacked-bar chart's .timeline-event is untouched. */
.timeline-vertical .timeline-event {
  background: var(--v17-bg-soft) !important;
  border: 1px solid var(--v17-line) !important;
  border-radius: 12px !important;
  padding: 1.1rem 1.25rem !important;
}

/* Layer 3 chapter marker (right of the event title) — a rounded outline pill
   with ink text instead of the pale neutral fill. */
.chapter-badge,
.timeline-event .event-date {
  background: var(--v17-bg-soft) !important;
  border: 1px solid var(--v17-mute-2) !important;
  border-radius: 999px !important;
  color: var(--v17-ink) !important;
}

/* Narrative-focus highlight (was amber) */
.narrative-focus {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 3px solid var(--v17-highlight) !important;
  color: var(--v17-ink-2) !important;
}

/* ─── Chapter-detail page neutraliser ─────────────────────────────
 * chapter_*.html inline <style> blocks paint roughly 50 purple + 7
 * green + 10 amber spots: hero icon, section-icon-purple/blue/green/
 * amber, event cards with timeline track scrollbar, char-cards by
 * role with coloured rails, .location-* (primary/secondary/atmosphere/
 * environment) cards, .theme-badge nth-child rainbow, foreshadowing
 * amber callout. Flat-ink everything below — the heading text already
 * carries the section identity. */

.chapter-hero-icon,
.character-hero-icon {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border: 0 !important;
}

.chapter-hero-icon svg,
.character-hero-icon svg {
  stroke: currentColor !important;
  color: var(--v17-ink-2) !important;
}

/* Section-icon-{colour} squares — all become neutral panel */
.section-icon-purple,
.section-icon-blue,
.section-icon-green,
.section-icon-amber,
.section-icon-red,
.section-icon-emerald,
.section-icon-pink,
.section-icon-gray,
.section-icon.arc,
.section-icon.relationships,
.section-icon.variants,
.section-icon.chart,
.section-icon.psychology,
.section-icon.moments,
.section-icon.story {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border: 0 !important;
}

/* Event cards within the chapter timeline strip */
.event-card,
.event-card:hover {
  background: var(--v17-bg-soft) !important;
  background-image: none !important;
  border: 1px solid var(--v17-line) !important;
  box-shadow: none !important;
}

.event-number,
.event-position,
.event-date {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border: 1px solid transparent !important;
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Chapter-detail timeline scrollbar — neutralise its purple thumb */
.timeline-events::-webkit-scrollbar-thumb {
  background: var(--v17-mute-2) !important;
}

.timeline-track {
  background: var(--v17-line) !important;
}

/* Char-cards inside a chapter (role-coloured by inline CSS) */
.char-card.char-protagonist,
.char-card.char-antagonist,
.char-card.char-main,
.char-card.char-supporting,
.char-card.char-minor,
.char-card.char-mentioned,
.char-card.char-protagonist:hover,
.char-card.char-antagonist:hover,
.char-card.char-main:hover,
.char-card.char-supporting:hover,
.char-card.char-minor:hover {
  background: var(--v17-bg-soft) !important;
  background-image: none !important;
  border: 1px solid var(--v17-line) !important;
  box-shadow: none !important;
}

/* Protagonist + antagonist keep a tiny role indicator on the rail —
   ink for protagonist (the lead), ink + outline for antagonist
   (mirrored). Others stay rail-less. Style guide §7: sanfte
   Differenzierung, no rainbow. */
.char-card.char-protagonist {
  border-left: 3px solid var(--v17-ink) !important;
}

.char-card.char-antagonist {
  border-left: 3px solid var(--v17-ink-2) !important;
}

.char-role-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.char-badge-protagonist,
.char-badge-antagonist,
.char-badge-main,
.char-badge-supporting,
.char-badge-minor,
.char-badge-mentioned {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/*
 * Chapter-role badges with the data-tier palette — same role→colour
 * mapping the character-detail chart uses, so a reader sees the same
 * cue in two places (chart bar + chapter-detail role pill). Light
 * touch: filled badges in moss/clay/ink/slate/bronze, white text.
 */
/* Always fully opaque — mirrors the old .role-protagonist force-override
   (System B, removed): character cards apply an inline opacity based on
   role confidence %, but "is/isn't protagonist" is binary, so this pill
   ignores that and never looks faded. */
.char-badge-protagonist {
  background: var(--v17-data-moss) !important;
  color: var(--v17-bg-soft) !important;
  opacity: 1 !important;
}

.char-badge-antagonist {
  background: var(--v17-data-clay) !important;
  color: var(--v17-bg-soft) !important;
}

.char-badge-main {
  background: var(--v17-data-ink) !important;
  color: var(--v17-bg-soft) !important;
}

/* narrator reuses the same slate tone the old System-B .role-narrator
   used — also closes a pre-existing gap: character-detail.html's hero
   badge can already emit char-badge-narrator for a narrator-primaryRole
   character, but had no color rule for it until now (unstyled badge). */
.char-badge-supporting,
.char-badge-narrator {
  background: var(--v17-data-slate) !important;
  color: var(--v17-bg-soft) !important;
}

.char-badge-minor,
.char-badge-mentioned {
  background: var(--v17-data-bronze) !important;
  color: var(--v17-bg-soft) !important;
}

/*
 * Book-role pill ("book: main", "book: protagonist", …) was a
 * near-invisible panel-on-panel chip. Outline the pill with a
 * data-slate hairline + readable ink text — clearly secondary to
 * the filled chapter-role pill next to it, but legible. */
.char-badge-book {
  background: var(--v17-bg-soft) !important;
  color: var(--v17-ink-2) !important;
  border: 1px solid var(--v17-data-slate) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.08em !important;
  padding: 0.16rem 0.5rem !important;
  border-radius: 999px !important;
}

/* Location category cards (primary/secondary/atmosphere/environment) —
   were 4 different colour-coded backgrounds. Flatten to a single
   neutral panel card; the text label carries the category. */
.location-primary,
.location-secondary,
.location-atmosphere,
.location-environment {
  background: var(--v17-bg-soft) !important;
  background-image: none !important;
  border: 1px solid var(--v17-line) !important;
  color: var(--v17-ink-2) !important;
}

/* Location-label-badge (PRIMARY/SECONDARY/ATMOSPHERE/ENVIRONMENTAL) has
   inline rgba colours hard-coded in the rendered HTML. Force-override
   to a single neutral mono pill — the text already carries the
   category. Same treatment for the FORESHADOWING label. */
.location-label-badge,
.foreshadowing-label {
  background: var(--v17-bg-panel) !important;
  color: var(--v17-ink-2) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  padding: 0.18rem 0.55rem !important;
  border-radius: 999px !important;
}

/* Theme badges with nth-child rainbow tinting */
.theme-badge,
.theme-badge:nth-child(4n+1),
.theme-badge:nth-child(4n+2),
.theme-badge:nth-child(4n+3),
.theme-badge:nth-child(4n+4) {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.04em !important;
}

/* Foreshadowing amber callout in chapter detail */
.foreshadowing-box {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 3px solid var(--v17-mute-2) !important;
  color: var(--v17-ink-2) !important;
}

.foreshadowing-box h4 {
  color: var(--v17-ink) !important;
}

/*
 * Chapter Content preview block — when the inline-markdown runtime
 * has done its pass it adds .chapter-preview-rendered and splits the
 * verbatim manuscript dump into proper paragraphs + headings.
 * Style them so the block reads like a quiet typeset excerpt.
 */
.chapter-preview-rendered {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--v17-ink-2);
}

.chapter-preview-rendered h3,
.chapter-preview-rendered h4,
.chapter-preview-rendered h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--v17-ink);
  margin: 0.4em 0 0.3em;
}

.chapter-preview-rendered h3 { font-size: 1.4rem; }
.chapter-preview-rendered h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v17-mute);
  margin: 0.9em 0 0.3em;
}
.chapter-preview-rendered h5 { font-size: 1.05rem; }

.chapter-preview-rendered p {
  margin: 0 0 1em;
}

.chapter-preview-rendered p:last-child { margin-bottom: 0; }

.chapter-preview-rendered em {
  font-style: italic;
  color: var(--v17-ink);
}

/* ─── Character-detail page neutraliser ───────────────────────────
 * Smaller scope (~20 purple): mostly trait/variation badge chips and
 * section-icon squares. */

.trait-tag,
.variation-badge {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border: 1px solid transparent !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
}

/* ─── Timeline Layer 3 (Daily Events) — reviewer-flagged ─────────
 * The default-view (Layer 1) is already clean. Layer 3 surfaces a
 * .significance-badge legend (Major=purple / Moderate=amber / Minor=
 * green) and per-event .event-date badges in purple. The active-tab
 * border was blue. Flat-ink all of them — significance is a glyph +
 * text job, not a colour job. */

.significance-badge,
.significance-badge.major,
.significance-badge.moderate,
.significance-badge.minor {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/*
 * "Intelligent N-Layer Analysis" adaptive-notice — the purple wash
 * the reviewer caught on Layer 1 (the one I missed earlier because
 * I styled .layer-heading not .adaptive-notice). */
.adaptive-notice {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 3px solid var(--v17-highlight) !important;
  color: var(--v17-ink-2) !important;
}

.adaptive-notice strong { color: var(--v17-ink) !important; }
.adaptive-notice .adaptive-icon {
  background: transparent !important;
  color: var(--v17-mute-2) !important;
}

/* Phase-period pill (was purple) */
.phase-period {
  background: var(--v17-bg-panel) !important;
  color: var(--v17-mute) !important;
  font-family: var(--font-mono) !important;
}

/* The Plot page also has a `.resolution` label class that I missed
 * — the reviewer flagged the green "Resolution:" text. Different
 * from .subplot-resolution / .theme-resolution (which were the
 * callout containers); this is the inline label. */
.resolution,
.resolution-label {
  color: var(--v17-ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* ─── Reader's Digest neutraliser ─────────────────────────────────
 * readers-digest.html is a separate 2-page output (step 10) with its
 * own inline <style> block. Same purple/blue/orange palette as the
 * other detail pages — flat-ink it the same way. */

.act-range-pill,
.event-chip,
.event-chip:hover {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.06em !important;
}

/* Inline character links in prose — were "muted orange" per the
   inline-style comment. Drop to ink with a subtle underline; the
   accent slot is reserved for italic emphasis, not generic links. */
.character-link {
  color: var(--v17-ink) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--v17-line) !important;
  text-decoration: none !important;
  padding: 0 !important;
}

.character-link:hover {
  border-bottom-color: var(--v17-ink) !important;
}

/* Closing "Was bleibt" / "What stays" callout — was a warm orange
   card with rounded surface. Neutralise to a slate-rimmed panel
   matching the other callouts on the page. */
.takeaway-resolution {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 3px solid var(--v17-highlight) !important;
  color: var(--v17-ink-2) !important;
}

.takeaway-resolution h3,
.takeaway-resolution h4,
.takeaway-resolution strong {
  color: var(--v17-ink) !important;
}

.back-to-dashboard {
  color: var(--v17-ink) !important;
}

.back-to-dashboard:hover {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink) !important;
}

/*
 * .time-period-card had a 4px solid var(--primary) left border. With
 * --primary aliased to ink, that became a thick BLACK rail that
 * clashed with everything else. Reduce to a slate hairline rim so
 * it stays a card, not a slab.
 */
.time-period-card {
  background: var(--v17-bg-soft) !important;
  background-image: none !important;
  border: 1px solid var(--v17-line) !important;
  border-left: 3px solid var(--v17-highlight) !important;
}

/* The .time-period-card .card-icon (When & Where pin) was tinted amber
   #FBBF24 with an amber border. Force neutral panel + ink-2 stroke
   like every other section badge. */
.time-period-card .card-icon,
.time-period-card .card-icon svg,
.time-period-card .card-icon svg * {
  background: var(--v17-bg-panel) !important;
  background-image: none !important;
  color: var(--v17-ink-2) !important;
  border-color: transparent !important;
  stroke: currentColor !important;
}

/* ───────────────────────────────────────────────────────────────────
   11. Meta badges (small qualifier pills used throughout)
   ─────────────────────────────────────────────────────────────────── */

.meta-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 4px;
  background: var(--v17-bg-panel);
  color: var(--v17-mute);
}

/* ───────────────────────────────────────────────────────────────────
   12. Plot phases + period cards (plot.html)
   ─────────────────────────────────────────────────────────────────── */

.phase-card,
.period-card,
.act {
  background: var(--v17-bg-soft);
  border: 1px solid var(--v17-line);
  border-radius: var(--v17-radius-card);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
}

/* v17: drop the vestigial slate left-rim on plot phase cards — they now
   match the even all-round border of the character/timeline cards. (Wins
   over the grouped !important rule above via later source order.) */
.phase-card { border-left: 0 !important; }

/* The act-1/act-2/act-3 (and phase-setup/-conflict/-climax/-resolution)
   variants all stay neutral — the heading text + chapter range already
   says what kind they are. No coloured backgrounds. */
.phase-card.phase-setup,
.phase-card.phase-conflict,
.phase-card.phase-climax,
.phase-card.phase-resolution { /* same as base */ }

.phase-header h3,
.event-title,
.act h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--v17-ink);
  margin: 0;
}

.phase-chapters,
.phase-event-chapter,
.event-date,
.chapter-ref {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v17-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.phase-description,
.act-content p {
  color: var(--v17-ink-2);
  line-height: 1.65;
  margin: 0.4rem 0 0.85rem;
}

.phase-events {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.75rem;
}

.phase-event,
.plot-point {
  background: var(--v17-bg);
  border-left: 2px solid var(--v17-line);
  padding: 0.7rem 0.95rem;
  border-radius: 0 8px 8px 0;
}

.phase-event-name,
.plot-point h4,
.plot-point-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--v17-ink);
  display: block;
  margin-bottom: 0.15rem;
}

.phase-event-desc,
.plot-point p,
.plot-point-event {
  color: var(--v17-mute);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0.25rem 0 0;
}

.plot-point-chapter { /* alias for chapter-ref styling */
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--v17-mute);
  text-transform: uppercase;
}

/* ───────────────────────────────────────────────────────────────────
   13. Timeline events (enhanced_timeline_overview.html)
   ─────────────────────────────────────────────────────────────────── */

.timeline-section,
.timeline-visual,
.timeline-container {
  position: relative;
}

/*
 * Earlier this file shipped its own .timeline-marker dot styling
 * (position absolute, 10x10 px). Char-detail's Chapter Timeline
 * uses the same class as a 60-px-wide "Ch X" label, so my rule
 * was compressing the label to 10 px tall and making the text
 * look strikethrough. The various pages already style their own
 * .timeline-marker inline — don't fight them here.
 */

.timeline-content,
.event-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--v17-ink);
}

.timeline-content p {
  color: var(--v17-mute);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0.3rem 0 0;
}

.timeline-meta,
.event-meta {
  display: flex;
  gap: 0.85rem;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--v17-mute);
}

.event-count-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--v17-bg-panel);
  color: var(--v17-ink-2);
  font-variant-numeric: tabular-nums;
}

/*
 * Status / confidence indicators — NOT terracotta. Glyph + neutral
 * background. The functional state needs to read at a glance without
 * stealing the accent slot from editorial italic phrases.
 */
.confidence,
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
}

.status-indicator.complete         { background: var(--v17-status-pass-bg); color: var(--v17-status-pass-fg); }
.status-indicator.in-progress      { background: var(--v17-status-flag-bg); color: var(--v17-status-flag-fg); }
.status-indicator.not-started      { background: var(--v17-bg-panel);       color: var(--v17-mute); }
.status-indicator.error            { background: var(--v17-status-warn-bg); color: var(--v17-status-warn-fg); }

/* ───────────────────────────────────────────────────────────────────
   14. Footer
   ─────────────────────────────────────────────────────────────────── */

.footer {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--v17-line);
  color: var(--v17-mute);
  font-size: 0.85rem;
  text-align: center;
}

.footer a {
  color: var(--v17-ink-2);
  border-bottom: 1px solid var(--v17-line);
}

/* ───────────────────────────────────────────────────────────────────
   15. Breadcrumb
   ─────────────────────────────────────────────────────────────────── */

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--v17-mute);
  text-transform: uppercase;
  margin: 1.5rem 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.breadcrumb a { color: var(--v17-mute); }
.breadcrumb a:hover { color: var(--v17-ink); border-bottom: 1px solid var(--v17-highlight); }
.breadcrumb .separator { color: var(--v17-mute-2); }
.breadcrumb .current { color: var(--v17-ink); }

/* ───────────────────────────────────────────────────────────────────
   16. Mobile breakpoints
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 780px) {
  .dashboard-container { padding: 0 1rem; }

  .header-v2 > .dashboard-container { flex-wrap: wrap; }
  .header-nav { width: 100%; margin-left: 0; gap: 1.1rem; flex-wrap: wrap; }

  .hero-section { padding: 3rem 0 2.5rem; }
  .hero-title  { font-size: clamp(1.9rem, 7vw, 2.6rem); }

  .section { padding: 2.25rem 0; }

  .nav-grid,
  .themes-container,
  .themes-grid { grid-template-columns: 1fr; }

  .card,
  .phase-card,
  .period-card { padding: 1.25rem 1.25rem 1.1rem; }
}

@media (max-width: 480px) {
  .header-nav { font-size: 0.85rem; gap: 0.85rem; }
  .hero-meta { gap: 0.85rem 1.25rem; }
  .chapter-card-header,
  .char-card-header,
  .phase-header,
  .event-header { flex-wrap: wrap; gap: 0.35rem; }
}

/* ───────────────────────────────────────────────────────────────────
   17. Shared Components (dashboard-v2 pages)

   Components that were byte-for-byte (or near-identical) duplicated
   across 2+ page templates' inline <style> blocks. Canonical version
   lives here; pages that need a small delta from this base (e.g. a
   different align-items) keep a short residual rule in their own
   inline <style>, commented as pointing back to this section.
   ─────────────────────────────────────────────────────────────────── */

.section-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border: 1px solid var(--border-card);
}

.section-card h2 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.section-card h2 svg {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.stat-value {
  font-weight: 700;
}

.event-header,
.variant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.char-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

/* ───────────────────────────────────────────────────────────────────
   18. Plot page — card family (plot.html)

   .act-card / .subplot-card / .theme-card were byte-for-byte identical
   local rules. background/border for subplot-card and theme-card were
   already force-flattened by pre-existing !important rules written for
   an unrelated template family that happens to share this stylesheet
   (see the "Plot + Timeline inline-style neutraliser" section above) —
   those are untouched and keep cascading harmlessly; this section only
   centralizes the padding/radius/transition/hover that were still
   genuinely live and duplicated per page.
   ─────────────────────────────────────────────────────────────────── */

.act-card,
.subplot-card,
.theme-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  border: 1px solid var(--border-card);
  transition: transform 0.2s, box-shadow 0.2s;
}

.act-card:hover,
.subplot-card:hover,
.theme-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ───────────────────────────────────────────────────────────────────
   19. Elevated card family (character-detail.html / chapter-detail.html)

   .relationship-card / .variant-card / .location-card share the same
   base treatment but aren't byte-identical — page-specific deltas
   (hover-lift, asymmetric padding) stay as short residuals in each
   template's own inline <style>.
   ─────────────────────────────────────────────────────────────────── */

.relationship-card,
.variant-card,
.location-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid var(--border-subtle);
}

/* ───────────────────────────────────────────────────────────────────
   20. Header-row family

   Two distinct shapes shared across pages, plus a third group whose
   pages only truly agree on display/align-items — gap/margin-bottom/
   flex-wrap differ per page and stay as short residuals there.
   ─────────────────────────────────────────────────────────────────── */

/* column layout (plot.html) — byte-identical to each other */
.subplot-header,
.theme-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* row layout, page-specific gap/margin-bottom kept as residuals */
.act-header,
.relationship-header,
.context-header {
  display: flex;
  align-items: center;
}

/* ───────────────────────────────────────────────────────────────────
   21. Grid wrapper family

   Every one of these is display:grid with a column-width/gap tuned per
   section — that sizing is real, intentional per-page variation, kept
   as a residual on every page. Only `display: grid` and (for the 8 that
   already agreed) the 768px collapse-to-1-column breakpoint are shared.
   .locations-grid / .period-grid didn't have a mobile collapse at all
   before this — added here as a small, intentional fix, not a silent
   side effect of the dedup.

   !important on the mobile collapse: this external stylesheet loads
   BEFORE each page's own inline <style>, so at any viewport width the
   page's unguarded local `grid-template-columns: <Npx>` residual would
   otherwise always win the cascade tie over this media-guarded rule —
   silently defeating the collapse at every width, not just accidentally
   losing it below 768px. Same reasoning as the other !important blocks
   in this file.
   ─────────────────────────────────────────────────────────────────── */

.chars-grid,
.relationships-grid,
.psychology-grid,
.acts-grid,
.subplots-grid,
.themes-grid,
.characters-grid-v2,
.chapters-grid-v2,
.locations-grid,
.period-grid {
  display: grid;
}

@media (max-width: 768px) {
  .chars-grid,
  .relationships-grid,
  .psychology-grid,
  .acts-grid,
  .subplots-grid,
  .themes-grid,
  .characters-grid-v2,
  .chapters-grid-v2,
  .locations-grid,
  .period-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ───────────────────────────────────────────────────────────────────
   22. Timeline page — phase/period card shared base (enhanced-timeline.html only)

   .phase-card here is enhanced-timeline.html's hover-interactive card,
   NOT plot.html's identically-named but differently-shaped static one
   (see comment at plot.html's own .phase-card definition — not
   consolidated, same treatment as .timeline-event in the first pass).
   Deliberately scoped to only background/radius/padding/border — NOT
   position/transition/margin-bottom, which stay as page-local residuals
   on each of the two instances below, so this rule can never leak
   .phase-card-only properties onto plot.html's differently-shaped card
   (plot.html's own residual doesn't redeclare `position`, so a shared
   `position:relative` here would have nothing local to override it).
   ─────────────────────────────────────────────────────────────────── */

.phase-card,
.period-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--border-card);
}

/* ───────────────────────────────────────────────────────────────────
   23. Gradient pill badge geometry

   Color/gradient for all 3 are already fully neutralized to flat tokens
   by the "Enhanced Timeline page — deep neutraliser" / "Character-detail
   page neutraliser" !important blocks earlier in this file — this
   section only centralizes the geometry (padding/radius/font) that was
   still genuinely live and duplicated per page.

   .event-count-badge intentionally does NOT get display/font-family/
   letter-spacing/font-variant-numeric here: an unrelated, non-!important
   .event-count-badge definition belonging to a different, older template
   family (also linking this stylesheet) already leaks those specific
   properties onto enhanced-timeline.html today. Adding them here would
   reinforce that pre-existing leak rather than just not making it worse
   — left as a separately-flagged, out-of-scope issue.
   ─────────────────────────────────────────────────────────────────── */

.recommended-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.event-count-badge {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
}

.variation-badge {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ───────────────────────────────────────────────────────────────────
   Story-phase key-events accordion (enhanced-timeline.html, Layer 1)
   Each phase card's "N key events" badge is a native <details> summary;
   opening it reveals the phase's events inline. No JS required.
   ─────────────────────────────────────────────────────────────────── */
.phase-events {
  width: 100%;
}
.phase-events-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.phase-events-summary::-webkit-details-marker {
  display: none;
}
.phase-events-summary:hover .event-count-badge {
  filter: brightness(0.95);
}
.phase-events-caret {
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.phase-events[open] .phase-events-caret {
  transform: rotate(180deg);
}
.phase-events-list {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  text-align: left;
}
.phase-event {
  background: var(--v17-bg-panel);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.phase-event.major { border-left-color: var(--primary); }
.phase-event.moderate { border-left-color: var(--v17-data-bronze); }
.phase-event.minor { border-left-color: var(--v17-line); }
.phase-event-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 4px;
}
.phase-event-title {
  font-weight: 600;
  color: var(--text-primary);
}
.phase-event-date {
  flex: none;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.phase-event-desc {
  margin: 0 0 var(--space-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}
.phase-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
/* Readable meta chips (chapter / location / character). Deliberately NOT
   the faint uppercase-mono .meta-badge, whose panel-coloured background
   matched the event card and washed out. A border gives contrast; normal
   case keeps names legible. */
.phase-event-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  line-height: 1.3;
  padding: 0.16rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--v17-bg-soft);
  border: 1px solid var(--v17-line);
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Chapter chip: the clickable one — accent-outlined, fills on hover. */
a.phase-event-tag--chapter {
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
a.phase-event-tag--chapter:hover,
a.phase-event-tag--chapter:focus-visible {
  background: var(--primary);
  color: var(--text-on-primary);
  outline: none;
}
.phase-event-tag--chapter.is-static {
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}
.phase-event-tag--char {
  color: var(--text-primary);
}
.phase-event-tag-label {
  color: var(--v17-mute);
  font-weight: 600;
  margin-right: 0.25rem;
}

/* ─── Spirit accent layer ──────────────────────────────────────────
 * The neutralisers above flatten every accent to ink, which suits the
 * paper themes but leaves Spirit grey. Spirit should read like the
 * TalePal panel in VS Code: pink links and chapter refs, purple icon
 * tiles, bolder headings. Applies only with no [data-theme] (default)
 * or [data-theme="spirit"]; the light themes are untouched. */

:is(html:not([data-theme]), html[data-theme="spirit"]) :is(
  .card-title, .section-card h2, .nav-card-title, .chapter-card-title,
  .hero-title, h1
) {
  font-weight: 600 !important;
}

:is(html:not([data-theme]), html[data-theme="spirit"]) :is(
  .char-card-link, .char-link, .moment-chapter, .phase-chapters,
  .phase-event-chapter, .chapter-ref, .plot-point-chapter,
  .variant-chapters, .chapter-nav a
) {
  color: var(--v17-accent) !important;
}

:is(html:not([data-theme]), html[data-theme="spirit"]) :is(
  .section-icon, .section-icon-tag, .card-icon,
  .chapter-hero-icon, .character-hero-icon,
  .section-icon-purple, .section-icon-blue, .section-icon-green,
  .section-icon-amber, .section-icon-red, .section-icon-emerald,
  .section-icon-pink, .section-icon-gray, .section-icon.arc,
  .section-icon.relationships, .section-icon.variants, .section-icon.chart,
  .section-icon.psychology, .section-icon.moments, .section-icon.story,
  .section-card h2 svg
) {
  background: rgba(189, 147, 249, 0.14) !important;
  color: var(--v17-highlight) !important;
}

:is(html:not([data-theme]), html[data-theme="spirit"]) :is(
  .chapter-hero-icon svg, .character-hero-icon svg
) {
  color: var(--v17-highlight) !important;
}

:is(html:not([data-theme]), html[data-theme="spirit"]) :is(
  .stat-value, .hero-stat-value
) {
  color: var(--v17-accent) !important;
  -webkit-text-fill-color: var(--v17-accent) !important;
}

:is(html:not([data-theme]), html[data-theme="spirit"]) .event-number {
  color: var(--v17-accent) !important;
}

:is(html:not([data-theme]), html[data-theme="spirit"]) :is(
  .header-nav a:hover, .nav-link:hover, .nav-link.active
) {
  border-bottom-color: var(--v17-accent);
}