/*
 * dashboard-v2.css — TalePal v17 "Minimalist Light" styling for the
 * CLI-generated analysis pages.
 *
 * Aligns with talepal.org v17 (lora display serif, plus jakarta sans body,
 * jetbrains mono labels, terracotta accent on italic phrases only, cool
 * ash-white surfaces).
 *
 * Style source of truth: /Users/khz/devel/talepal_home/docs/STYLE_GUIDE.md
 *
 * 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.)
 *
 * Light theme only. Dark theme is reserved for v17 §9.
 */

@import url('fonts_v17.css');
@import url('tokens_v17.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:     #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;
  padding: 0 1.5rem;
}

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

.header-logo,
.header-logo img {
  display: block;
  width: 36px;
  height: 36px;
}

.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;
  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-toggle {
  /* Light-only in v17 — hide until v17 §9 (dark) lands.
     Style as a faint disabled button if we ever want to surface it. */
  display: none;
}

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

/*
 * Story Role inside the character-detail info-grid currently renders as
 * plain mute body text. Style it as a filled-ink badge so the role
 * reads as a tag (same treatment as the role badges on the Characters
 * list). Antagonist gets the outline variant via the text-content
 * sibling selector trick below — kept simple, no template change.
 */
.role-content {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.32rem 0.75rem !important;
  border-radius: 999px !important;
  background: var(--v17-ink) !important;
  color: var(--v17-bg-soft) !important;
  align-self: flex-start;
}

.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-container,
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

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

/* Role pills above the name (PROTAGONIST / ANTAGONIST / etc.) — same
   neutralisation. The role itself reads from the text content, not the
   colour. */
.char-role-tag,
.role-protagonist,
.role-antagonist,
.role-main,
.role-supporting,
.role-mentioned {
  background: var(--v17-ink) !important;
  color: var(--v17-bg-soft) !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.18rem 0.6rem !important;
  border-radius: 4px !important;
}

.role-antagonist {
  /* visual flip: outline rather than fill, but same neutral tone */
  background: var(--v17-bg-soft) !important;
  color: var(--v17-ink) !important;
  box-shadow: inset 0 0 0 1px var(--v17-ink) !important;
}

.role-supporting,
.role-mentioned {
  background: var(--v17-bg-panel) !important;
  color: var(--v17-mute) !important;
}

/*
 * Secondary / candidate protagonist — the data sometimes flags multiple
 * characters as protagonist and the template renders the non-primary
 * one with inline style="opacity: 0.35". That made the badge look
 * faded next to a solid one. Force ALL .role-protagonist to the
 * filled-ink treatment regardless of inline opacity — one style for
 * the role, period. The role is binary (is/isn't protagonist), so
 * a quiet "secondary" visual would just be confusing.
 */
.role-protagonist,
.role-protagonist[style*="opacity"] {
  opacity: 1 !important;
  background: var(--v17-ink) !important;
  color: var(--v17-bg-soft) !important;
  box-shadow: none !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,
.confidence-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;
}

/* 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 cards (4 of them, top border in 4 different colours) */
.period-card,
.period-card:nth-child(1),
.period-card:nth-child(2),
.period-card:nth-child(3),
.period-card:nth-child(4) {
  border-top-color: var(--v17-highlight) !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;
}

/* 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.arc,
.section-icon.relationships,
.section-icon.variants,
.section-icon.chart,
.section-icon.psychology,
.section-icon.moments {
  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-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.
 */
.char-badge-protagonist {
  background: var(--v17-data-moss) !important;
  color: var(--v17-bg-soft) !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;
}

.char-badge-supporting {
  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;
}

.phase-card { border-left: 3px solid var(--v17-highlight); }

/* 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,
.event-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

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