/* Modern UI theme (additive to existing Bootstrap styles) */
:root{
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  --radius: 14px;

  /* Navigation pills should be consistent across pages */
  --pill-accent: var(--accent);
  --pill-accent-ink: var(--accent-ink);
  --pill-shadow-hover: 0 6px 18px rgba(37,99,235,.16);
  --pill-shadow-active: 0 8px 22px rgba(37,99,235,.28);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --surface: #0f172a;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --border: #1f2937;
    --accent: #60a5fa;
    --accent-ink: #0b1220;
    --shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
  }
}

/* Explicit theme variables (manual toggle support) */
html[data-theme='light']{
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}
html[data-theme='dark']{
  --bg: #000000;
  --surface: #0f172a;
  --text: #e7edf6; /* brighter for contrast */
  --muted: #a8b3c7;
  --border: #1f2937;
  --accent: #7cb0ff;
  --accent-ink: #0b1220;
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.6);

  /* Gold active state for nav pills */
  --pill-accent: #f4b41a;
  --pill-accent-ink: #0b0d14;
  --pill-shadow-hover: 0 6px 18px rgba(244,180,26,.18);
  --pill-shadow-active: 0 10px 26px rgba(244,180,26,.22);
}

/* Site theme: Parchment / paper (opt-in via settings) */
html[data-site-theme='parchment']{
  --bg: #FDF6E3;
  --surface: #EFEADD;
  --text: #2D2D2D;
  --muted: #544840;
  --border: #D7CFB8;
  --accent: #C0392B; /* brand red */
  --accent-ink: #2D2D2D;
  --trih-gold: #B7950B;
  --shadow: 0 10px 28px rgba(67, 50, 31, 0.12);

  --pill-accent: var(--trih-gold);
  --pill-accent-ink: var(--text);
  --pill-shadow-hover: 0 6px 18px rgba(67,50,31,0.12);
  --pill-shadow-active: 0 10px 26px rgba(67,50,31,0.14);
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family: 'Roboto', 'Roboto Serif', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Playfair Display', 'Roboto Serif', serif;
}

/* Sticky footer layout */
body{ display:flex; flex-direction:column; min-height:100vh; }

/* Layout */
.container-modern{ max-width:70rem; margin:0 auto; padding:1.25rem; }
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border:0;
}
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:static; width:auto; height:auto; padding:0.5rem; background:var(--accent); color:var(--accent-ink); border-radius:10px; }
.accessibility-toggle{
  font-weight: 700;
  border-width: 2px !important;
  padding: 0.35rem 0.6rem;
  line-height: 1;
}
footer .accessibility-toggle{ min-width: 42px; }

.site-theme-settings{ position: relative; display:inline-flex; align-items:center; }
.site-theme-toggle{
  font-weight: 700;
  border-width: 2px !important;
  padding: 0.35rem 0.6rem;
  line-height: 1;
  min-width: 42px;
}
.site-theme-menu{
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 0.4rem;
  display: grid;
  gap: 0.35rem;
  z-index: 50;
}
.site-theme-option{
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  text-align: left;
}
.site-theme-option:hover{
  background: rgba(37,99,235,.10);
}
html[data-site-theme='parchment'] .site-theme-option:hover{
  background: rgba(183,149,11,0.14);
}
.site-theme-option[aria-checked="true"]{
  border-color: var(--border);
  background: rgba(37,99,235,.12);
}
html[data-site-theme='parchment'] .site-theme-option[aria-checked="true"]{
  border-color: rgba(183,149,11,0.70);
  background: rgba(183,149,11,0.14);
}
.site-theme-option:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(96,165,250,.26);
}
html[data-site-theme='parchment'] .site-theme-option:focus{
  box-shadow: 0 0 0 3px rgba(183,149,11,0.22);
}

.nav-modern{ display:flex; align-items:center; gap:.75rem; min-height:56px; }
.brand-modern{ font-weight:700; letter-spacing:.2px; text-decoration:none; color:var(--text); }
.spacer{ flex:1; }
.nav-modern a{ text-decoration:none; color:var(--text); padding:.375rem .5rem; border-radius:8px; }
.nav-modern a:hover{ background:rgba(37,99,235,.12); }
html[data-site-theme='parchment'] .nav-modern a:hover{ background: rgba(183,149,11,0.14); }
.menu-btn{ display:none; border:1px solid var(--border); background:var(--surface); border-radius:10px; padding:.4rem .6rem; }

@media (max-width: 720px){
  nav[aria-label="Primary"]{ display:none; }
  nav[aria-label="Primary"].open{
    display:block; position:absolute; right:1rem; top:56px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:.5rem; box-shadow:var(--shadow);
  }
  .menu-btn{ display:inline-block; }
}

@media (max-width: 576px){
  .glass-nav .navbar-brand{ font-size: 0.95rem; color:#f6f7fb !important; }
  .glass-nav .nav-link{ font-size: 0.9rem; }
  #navbarNav .btn-outline-modern{ padding: 0.3rem 0.5rem; font-size: 0.85rem; }
}

main{ padding-block:2rem; flex:1 0 auto; }
body.has-hero main{ padding-block:0 2rem; }
.footer{ flex:0 0 auto; }
section{ margin-block:2.25rem; }

/* Hero */
.hero{ display:grid; gap:.75rem; }
.hero h1{ margin:0; font-size:clamp(1.75rem, 2.5vw + 1rem, 2.75rem); line-height:1.2; }
.hero p{ color:var(--muted); margin:0; }
.eyebrow{
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.78rem;
  margin: 0 0 10px;
  color: var(--muted);
}
/* Force readable hero text in dark mode */
html[data-theme='dark'] .hero h1{ color: var(--text); }
html[data-theme='dark'] .hero .lead{ color: var(--text); opacity: .92; }
/* Ensure hero muted text is readable in dark */
html[data-theme='dark'] .hero .muted{ color: var(--text) !important; opacity: 1 !important; }

/* Grid / Cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; }
.card-modern{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem; display:flex; flex-direction:column; gap:.5rem; height:100%;
}
.card-modern h3{ margin:.25rem 0; }
.muted{ color:var(--muted); }

/* Buttons */
.btn-modern{ display:inline-block; padding:.6rem .9rem; border-radius:999px; border:1px solid transparent; text-decoration:none; font-weight:600; text-align:center; transition:transform .06s ease, background .2s ease, box-shadow .2s ease; }
.btn-modern:active{ transform:translateY(1px); }
.btn-primary-modern{ background:var(--accent); color:var(--accent-ink); box-shadow:0 6px 14px rgba(37,99,235,.25); }
.btn-primary-modern:hover{ filter:brightness(1.05); }
.btn-outline-modern{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-outline-modern:hover{ background:rgba(37,99,235,.10); }
html[data-site-theme='parchment'] .btn-primary-modern{ box-shadow: 0 6px 14px rgba(192,57,43,.18); }
html[data-site-theme='parchment'] .btn-outline-modern:hover{ background: rgba(183,149,11,0.14); }

/* Bootstrap harmonization */
.btn-primary{ background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important; }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline-primary{ color: var(--accent) !important; border-color: var(--accent) !important; }
.btn-outline-primary:hover{ background-color: rgba(37,99,235,.12) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
html[data-site-theme='parchment'] .btn-outline-primary:hover{ background-color: rgba(192,57,43,.12) !important; }

.card{ background: var(--surface); border: 1px solid var(--border); display:flex; flex-direction:column; }
html[data-site-theme='parchment'] .card{ box-shadow: var(--shadow); }
.card-header{ background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text); }
.card-body{ color: var(--text); background: var(--surface) !important; flex:1 1 auto; }
/* Stronger specificity to override legacy light background */
.card.card-modern .card-body{ background-color: var(--surface) !important; }

/* Force dark theme surfaces for any card, even if legacy CSS sets light bg */
html[data-theme='dark'] .card{ background-color: var(--surface) !important; }
html[data-theme='dark'] .card-body{ background-color: var(--surface) !important; color: var(--text) !important; }
html[data-theme='dark'] .card-header{ background-color: var(--surface) !important; color: var(--text) !important; }
html[data-theme='dark'] .card .text-muted{ color: var(--muted) !important; }

.form-control, .form-select{ background: var(--surface); color: var(--text); border:1px solid var(--border); }
.form-control::placeholder{ color: var(--muted); opacity: .9; }

.alert{ border-color: var(--border); }
.alert-info{ background: rgba(96,165,250,.14); color: var(--text); }
.alert-secondary{ background: rgba(148,163,184,.18); color: var(--text); }
html[data-site-theme='parchment'] .alert-info{ background: rgba(183,149,11,0.14); }
html[data-site-theme='parchment'] .alert-secondary{ background: rgba(239,234,221,0.92); }

.footer-modern{
  background: linear-gradient(90deg, rgba(10,12,20,0.9), rgba(10,12,20,0.75));
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer-modern a{ color: var(--text); }
html[data-site-theme='parchment'] .footer-modern{
  background: rgba(239,234,221,0.95);
  border-top: 1px solid rgba(215,207,184,0.95);
}

/* Toolbar */
.toolbar{
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.5rem .75rem;
}
.toolbar label{ color:var(--muted); margin-right:.25rem; }
select, input[type="search"]{
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.5rem .6rem;
}

/* List */
.list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:.8rem; }
.item{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.75rem; display:grid; gap:.25rem; }
.item .meta{ color:var(--muted); font-size:.9rem; }

/* ------------------------------------------------------------------
   High Contrast Accessible Theme
   Activated via html[data-theme="contrast"] and/or .theme-accessible
-------------------------------------------------------------------*/
html[data-theme='contrast'], body.theme-accessible{
  --bg: #000000;
  --surface: #000000;
  --text: #ffffff;
  --muted: #e0e0e0;
  --border: #ffffff;
  --accent: #ffd700;
  --accent-ink: #000000;
  --shadow: 0 0 0 rgba(0,0,0,0);
  --pill-accent: var(--accent);
  --pill-accent-ink: var(--accent-ink);
  --pill-shadow-hover: 0 0 0 rgba(0,0,0,0);
  --pill-shadow-active: 0 0 0 rgba(0,0,0,0);

  /* Align legacy variables used by style.css */
  --bg-primary: #000000;
  --text-primary: #ffffff;
  --bg-secondary: #000000;
  --bg-tertiary: #000000;
  --border-light: #ffffff;
  --border-medium: #ffffff;
  --text-muted: #e0e0e0;
  --text-light: #e0e0e0;
  --accent-blue: #ffd700;
  --accent-blue-light: #ffd700;
  --accent-blue-dark: #ffd700;
  color: var(--text);
  background: var(--bg);
  font-family: 'Atkinson Hyperlegible', 'Verdana', 'Arial', sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   Accessible mode + Parchment site theme
   Keep the paper palette, but remove background imagery + glass effects.
-------------------------------------------------------------------*/
html[data-theme='contrast'][data-site-theme='parchment']{
  --bg: #FDF6E3;
  --surface: #EFEADD;
  --text: #1f1b17;
  --muted: #3E2723;
  --border: #BEB59C;
  --accent: #C0392B;
  --accent-ink: #FDF6E3;
  --trih-gold: #B7950B;
  --shadow: 0 0 0 rgba(0,0,0,0);

  --pill-accent: var(--trih-gold);
  --pill-accent-ink: var(--text);
}

html[data-theme='contrast'][data-site-theme='parchment'] *{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Disable hero background images/overlays in parchment-accessible mode */
html[data-theme='contrast'][data-site-theme='parchment'] .trih-hero,
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-hero,
html[data-theme='contrast'][data-site-theme='parchment'] .map-hero,
html[data-theme='contrast'][data-site-theme='parchment'] .timeline-hero,
html[data-theme='contrast'][data-site-theme='parchment'] .era-hero,
html[data-theme='contrast'][data-site-theme='parchment'] .episode-hero{
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-hero::after,
html[data-theme='contrast'][data-site-theme='parchment'] .era-hero::after,
html[data-theme='contrast'][data-site-theme='parchment'] .episode-hero::after{
  background: none !important;
  display: none !important;
}

/* Disable translucent/glass surfaces in parchment-accessible mode */
html[data-theme='contrast'][data-site-theme='parchment'] .trih-shell,
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell,
html[data-theme='contrast'][data-site-theme='parchment'] .timeline-shell,
html[data-theme='contrast'][data-site-theme='parchment'] .era-shell,
html[data-theme='contrast'][data-site-theme='parchment'] .episode-shell{
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .facet-panel,
html[data-theme='contrast'][data-site-theme='parchment'] .timeline-surface,
html[data-theme='contrast'][data-site-theme='parchment'] .panel-surface,
html[data-theme='contrast'][data-site-theme='parchment'] .trih-panel,
html[data-theme='contrast'][data-site-theme='parchment'] .card,
html[data-theme='contrast'][data-site-theme='parchment'] .card-dark,
html[data-theme='contrast'][data-site-theme='parchment'] .timeline-card,
html[data-theme='contrast'][data-site-theme='parchment'] .episode-card,
html[data-theme='contrast'][data-site-theme='parchment'] .info-card{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .tree-node{
  background: transparent !important;
  border-color: var(--border) !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] main.full-bleed{
  background: var(--bg) !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-nav,
html[data-theme='contrast'][data-site-theme='parchment'] .timeline-nav .timeline-label{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-nav .nav-dot{
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-nav .nav-dot::after{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-subway-shell{
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-subway-body::before{
  background: var(--border) !important;
}

/* Timeline page: remove era background images + translucent cards in parchment-accessible mode */
html[data-theme='contrast'][data-site-theme='parchment'] .timeline-shell .era-panel{
  background-image: none !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-shell .era-panel::before{
  background: none !important;
  display: none !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-shell .era-header{
  border-bottom-color: var(--border) !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-shell .section-heading{
  color: var(--muted) !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-shell .timeline-card,
html[data-theme='contrast'][data-site-theme='parchment'] .timeline-shell .placeholder-card{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-shell .timeline-card:hover{
  transform: none !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-shell .timeline-card .card-desc{
  opacity: 1 !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .timeline-shell .timeline-line{
  background: var(--border) !important;
}

/* Override hard-coded light text/backgrounds on explorer/map controls */
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .facet-toggle,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell .facet-toggle,
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .explorer-search-input,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell .map-search-input,
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .explorer-search-btn,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell .map-search-btn,
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .pager-btn,
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .tab-btn,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell .tab-btn,
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .tree-filter-input,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell .tree-filter-input,
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .tree-filter-clear,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell .tree-filter-clear,
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .tree-twist,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell .tree-twist{
  color: var(--text) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .explorer-search-input::placeholder,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell .map-search-input::placeholder,
html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .tree-filter-input::placeholder,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell .tree-filter-input::placeholder{
  color: var(--muted) !important;
  opacity: 1 !important;
}

html[data-theme='contrast'][data-site-theme='parchment'] .explorer-shell .tree-twist-icon,
html[data-theme='contrast'][data-site-theme='parchment'] .map-shell .tree-twist-icon{
  border-left-color: var(--text) !important;
}

/* Chips/pills used on darker pages */
html[data-theme='contrast'][data-site-theme='parchment'] .chip,
html[data-theme='contrast'][data-site-theme='parchment'] .pill-date,
html[data-theme='contrast'][data-site-theme='parchment'] .pill,
html[data-theme='contrast'][data-site-theme='parchment'] .badge-soft{
  color: var(--text) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Ensure all pages use the accessible font stack in contrast mode,
   overriding page-specific hero/title fonts (e.g. Playfair Display). */
html[data-theme='contrast'] h1,
html[data-theme='contrast'] h2,
html[data-theme='contrast'] h3,
html[data-theme='contrast'] h4,
html[data-theme='contrast'] h5,
html[data-theme='contrast'] h6,
body.theme-accessible h1,
body.theme-accessible h2,
body.theme-accessible h3,
body.theme-accessible h4,
body.theme-accessible h5,
body.theme-accessible h6{
  font-family: 'Atkinson Hyperlegible', 'Verdana', 'Arial', sans-serif !important;
}

html[data-theme='contrast'] button,
html[data-theme='contrast'] input,
html[data-theme='contrast'] select,
html[data-theme='contrast'] textarea,
body.theme-accessible button,
body.theme-accessible input,
body.theme-accessible select,
body.theme-accessible textarea{
  font-family: 'Atkinson Hyperlegible', 'Verdana', 'Arial', sans-serif !important;
}

/* Accessible mode: force readable text colors even when page CSS hard-codes low-contrast grays/opacities. */
html[data-theme='contrast'] .eyebrow,
html[data-theme='contrast'] .muted,
html[data-theme='contrast'] .meta,
html[data-theme='contrast'] .card-meta,
html[data-theme='contrast'] .count,
html[data-theme='contrast'] .section-subtitle,
html[data-theme='contrast'] .pager-label,
html[data-theme='contrast'] .tree-count,
html[data-theme='contrast'] .chip-meta,
html[data-theme='contrast'] .entity-popover-date,
body.theme-accessible .eyebrow,
body.theme-accessible .muted,
body.theme-accessible .meta,
body.theme-accessible .card-meta,
body.theme-accessible .count,
body.theme-accessible .section-subtitle,
body.theme-accessible .pager-label,
body.theme-accessible .tree-count,
body.theme-accessible .chip-meta,
body.theme-accessible .entity-popover-date{
  color: var(--muted) !important;
  opacity: 1 !important;
}

html[data-theme='contrast'] .lead,
html[data-theme='contrast'] p.lead,
body.theme-accessible .lead,
body.theme-accessible p.lead{
  color: var(--text) !important;
  opacity: 1 !important;
}

html[data-theme='contrast'] .tab-count,
body.theme-accessible .tab-count{
  opacity: 1 !important;
}

/* Page-specific secondary text that often uses custom grays */
html[data-theme='contrast'] .explorer-shell,
html[data-theme='contrast'] .map-shell,
html[data-theme='contrast'] .era-shell,
html[data-theme='contrast'] .episode-shell,
body.theme-accessible .explorer-shell,
body.theme-accessible .map-shell,
body.theme-accessible .era-shell,
body.theme-accessible .episode-shell{
  color: var(--text);
}

html[data-theme='contrast'] .explorer-shell .tree-filter-clear,
html[data-theme='contrast'] .map-shell .tree-filter-clear,
body.theme-accessible .explorer-shell .tree-filter-clear,
body.theme-accessible .map-shell .tree-filter-clear{
  color: var(--text) !important;
}

/* ------------------------------------------------------------------
   Site pill navigation (shared across pages)
-------------------------------------------------------------------*/
.site-pills{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin: 0 0 16px;
}
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.pill-row-secondary{ margin-left:auto; }
.pill-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all .15s ease;
}
.pill-link:hover{
  border-color: var(--pill-accent);
  color: var(--pill-accent);
  box-shadow: var(--pill-shadow-hover);
}
.pill-link:focus-visible{
  outline:3px solid var(--pill-accent);
  outline-offset:2px;
}
.pill-link.active{
  background: var(--pill-accent);
  border-color: var(--pill-accent);
  color: var(--pill-accent-ink);
  box-shadow: var(--pill-shadow-active);
}
.pill-link.pill-ghost{
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}
.pill-link.pill-ghost:hover{
  border-style: solid;
  color: var(--pill-accent);
}

@media (max-width: 640px){
  .pill-row-secondary{ width:100%; margin-left:0; }
  .site-pills{ gap:8px; }
}
@media (prefers-contrast: more){
  html:not([data-user-theme]) {
    --bg: #000000;
    --surface: #000000;
    --text: #ffffff;
    --muted: #e0e0e0;
    --border: #ffffff;
    --accent: #ffd700;
    --accent-ink: #000000;
    --shadow: 0 0 0 rgba(0,0,0,0);
  }
}
html[data-theme='contrast'] body{
  background: var(--bg);
}
html[data-theme='contrast'] *{
  text-shadow: none;
}
html[data-theme='contrast'] a{ color:#80ced6; text-decoration: underline; font-weight:700; }
html[data-theme='contrast'] a:hover{ color:#ffff00; }
html[data-theme='contrast'] .btn,
html[data-theme='contrast'] .btn-primary,
html[data-theme='contrast'] .btn-outline-primary,
html[data-theme='contrast'] .btn-modern,
html[data-theme='contrast'] .btn-primary-modern{
  background-color: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffff00 !important;
  box-shadow: none !important;
  font-weight: 800;
}
html[data-theme='contrast'] .btn:hover{ color:#000000 !important; background:#ffff00 !important; }
html[data-theme='contrast'] .form-control,
html[data-theme='contrast'] .form-select{
  background:#000000; color:#ffffff; border:2px solid #ffffff;
}
html[data-theme='contrast'] .card,
html[data-theme='contrast'] .card-body,
html[data-theme='contrast'] .card-header{
  background:#000000 !important; color:#ffffff !important; border:2px solid #ffffff !important;
}
html[data-theme='contrast'] .footer-modern{
  background:#000000; border-top:2px solid #ffffff;
}
html[data-theme='contrast'] .accessibility-toggle-wrap{
  background:transparent;
}
html[data-theme='contrast'] .toolbar,
html[data-theme='contrast'] .item,
html[data-theme='contrast'] .card-modern{
  border:2px solid #ffffff; background:#000000; color:#ffffff;
}
/* Strong focus indicator */
html[data-theme='contrast'] *:focus-visible{
  outline:3px solid #39ff14 !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 4px rgba(57,255,20,0.35) !important;
}
/* Provide external labels for search controls when missing native labels */
html[data-theme='contrast'] input::placeholder{
  color:#e0e000;
}
.hidden{ display:none !important; }

/* Focus */
a{ color:var(--accent); }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:3px solid rgba(37,99,235,.6); outline-offset:3px; }

/* Footer */
.footer-modern{ border-top:1px solid var(--border); color:var(--muted); padding:1.25rem 0; font-size:.95rem; }

/* Motion */
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* Typography contrast adjustments */
body, p, h1, h2, h3, h4, h5, h6{ color: var(--text); }
.lead{ color: var(--text); opacity: .92; }
.text-muted, .text-secondary, .text-body-secondary, small, .small{ color: var(--muted) !important; }

/* Background utility harmonization for dark mode */
.bg-light, .text-bg-light{ background-color: var(--surface) !important; color: var(--text) !important; }
.bg-white{ background-color: var(--surface) !important; }

/* High-contrast overrides for card content */
.card .card-header h2,
.card .card-title,
.card .card-text,
.card .card-body,
.card p,
.card li{
  color: var(--text) !important;
  opacity: 1 !important;
}
.card .text-muted{ color: var(--muted) !important; opacity: .95 !important; }

/* Force high-contrast text inside cards */
.card-title{ color: var(--text) !important; opacity: 1 !important; }
.card-body{ color: var(--text) !important; }
/* Scoped high-contrast text inside cards (non-interactive elements) */
.card-body p,
.card-body li,
.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6,
.card-body .card-text{
  color: var(--text) !important;
  opacity: 1 !important;
}
/* Preserve palettes for interactive components */
.card-body .btn,
.card-body .badge,
.card-body .nav-link,
.card-body a,
.card-body .form-control,
.card-body .form-select,
.card-body .alert{
  color: var(--text);
  opacity: initial !important;
}

/* Safer hover for both themes */
.btn-outline-primary:hover{
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}

/* Dark-mode navbar link clarity */
@media (prefers-color-scheme: dark){
  .navbar .navbar-nav .nav-link{ opacity: 1; }
}
html[data-theme='dark'] .navbar .navbar-nav .nav-link{ opacity: 1; }

/* Pagination theming */
.pagination .page-link{ 
  color: var(--text); 
  background: var(--surface); 
  border-color: var(--border);
}
.pagination .page-link:hover{ color: var(--text); background: rgba(37,99,235,.08); }
.pagination .page-item.active .page-link{ 
  background: var(--accent); 
  border-color: var(--accent); 
  color: var(--accent-ink);
}
.pagination .page-link:focus{ box-shadow: 0 0 0 .2rem rgba(37,99,235,.25); }

/* List group theming */
.list-group-item{ background: var(--surface); color: var(--text); border-color: var(--border); }
.list-group-item-action:hover, .list-group-item-action:focus{ background: rgba(37,99,235,.08); color: var(--text); }

/* Dropdown theming */
.dropdown-menu{ background: var(--surface); color: var(--text); border-color: var(--border); }
.dropdown-item{ color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus{ background: rgba(37,99,235,.10); color: var(--text); }

/* Table theming */
.table{ color: var(--text); background: var(--surface); }
.table th, .table td{ border-color: var(--border); }
.table-striped > tbody > tr:nth-of-type(odd){ background-color: rgba(148,163,184,.10); }

/* Modal theming */
.modal-content{ background: var(--surface); color: var(--text); border-color: var(--border); }
.modal-header, .modal-footer{ border-color: var(--border); }

/* Badge harmonization for better contrast */
.badge.bg-primary{ background-color: var(--accent) !important; color: var(--accent-ink) !important; }
.badge.bg-info{ background-color: var(--accent) !important; color: var(--accent-ink) !important; }

/* Small badge used for book author chips in the catalogue */
.book-author-pill{
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.3rem 0.55rem;
  opacity: 0.95;
}

/* Nav pills active state */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background-color: var(--accent); color: var(--accent-ink); }

/* Catalog navigation active state */
.catalog-nav .btn.active {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
  font-weight: 600;
}