:root {
  --bg-0: #0a0e1a;
  --bg-1: #0f1424;
  --bg-2: #161b30;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.12);
  --text-0: #e6e9f2;
  --text-1: #a4acc4;
  --text-2: #6b7390;
  --accent: #8b9fff;
  --glow: 0 0 24px rgba(139, 159, 255, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  font-feature-settings: "ss01", "cv11";
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ───────────────────────── Layout ───────────────────────── */
.app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 56px 1fr;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20, 25, 45, 0.8), rgba(15, 20, 36, 0.6));
  backdrop-filter: blur(12px);
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.brand-dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: var(--glow);
}

.topbar-title {
  font-size: 14px;
  color: var(--text-0);
}

.topbar-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-left: 8px;
}

.topbar-spacer { flex: 1; }

.search {
  position: relative;
  width: 280px;
}
.search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text-0);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.search input::placeholder { color: var(--text-2); }
.search input:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.06);
}
.search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-2);
  pointer-events: none;
}

/* ───────────────────────── Sidebar ───────────────────────── */
.sidebar {
  border-right: 1px solid var(--line);
  background: var(--bg-1);
  padding: 20px 16px;
  overflow-y: auto;
}

.sidebar h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-2);
  margin-bottom: 12px;
}

.legend-group { margin-bottom: 24px; }

.legend-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.legend-header h3 { margin-bottom: 0; }
.legend-clear {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.legend-clear:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-0);
  border-color: var(--accent);
}
.legend-clear[hidden] { display: none; }

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
}
.legend-item:hover { background: rgba(255,255,255,0.04); color: var(--text-0); }
.legend-item.muted { opacity: 0.35; }
/* When a category is in the active filter set, give the row a clear "on"
   look so the user can see which filters are active at a glance. */
.legend-item.active {
  background: rgba(139, 159, 255, 0.10);
  color: var(--text-0);
  box-shadow: inset 2px 0 0 var(--accent);
}
.legend-item.active .legend-swatch {
  transform: scale(1.2);
  box-shadow: 0 0 14px currentColor;
}

.legend-swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
  box-shadow: 0 0 10px currentColor;
}

.era-item {
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text-1);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.era-item:hover { background: rgba(255,255,255,0.04); color: var(--text-0); }

.era-range {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}

/* ───────────────────────── Canvas ───────────────────────── */
.canvas-wrap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(139, 159, 255, 0.05), transparent 60%),
    radial-gradient(900px 700px at 80% 100%, rgba(240, 171, 252, 0.04), transparent 60%),
    var(--bg-0);
}

.canvas-wrap svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  user-select: none;
}
.canvas-wrap svg.dragging { cursor: grabbing; }

/* Grid background pattern */
.grid-pattern {
  fill: rgba(255,255,255,0.02);
}

/* Era columns — zebra stripe + stronger boundary */
.era-band { stroke: none; }
.era-band.era-even { fill: rgba(255,255,255,0.018); }
.era-band.era-odd  { fill: rgba(255,255,255,0.055); }

.era-divider {
  stroke: rgba(139, 159, 255, 0.45);  /* accent color, more visible */
  stroke-width: 1.8;
  stroke-dasharray: 0;
  filter: drop-shadow(0 0 4px rgba(139, 159, 255, 0.25));
}

.era-label-pill {
  fill: rgba(255,255,255,0.05);
  stroke: rgba(255,255,255,0.10);
  stroke-width: 1;
  transition: fill 0.15s, stroke 0.15s;
}
.era-label-pill.era-even { fill: rgba(255,255,255,0.04); }
.era-label-pill.era-odd  { fill: rgba(255,255,255,0.08); }
.era-label-pill:hover { fill: rgba(255,255,255,0.18); stroke: rgba(255,255,255,0.35); }
.era-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  fill: var(--text-2);
}
.era-range-label {
  font-size: 10px;
  fill: var(--text-2);
  opacity: 0.7;
}

/* Edges */
.edge {
  fill: none;
  stroke: rgba(255,255,255,0.1);
  stroke-width: 1.5;
  transition: stroke .2s, stroke-width .2s;
}
.edge.highlighted {
  stroke: rgba(139, 159, 255, 0.45);
  stroke-width: 1.4;
  opacity: 0.65;
}
/* "Requires" — incoming prereq edges (focused tech is the consumer). Cool teal/blue. */
.edge.highlighted-requires {
  stroke: #5eead4;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.75));
}
/* "Leads to" — outgoing edges (focused tech is the producer). Warm orange/amber. */
.edge.highlighted-leads-to {
  stroke: #fb923c;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.75));
}
.edge.dimmed { stroke: rgba(255,255,255,0.04); }

/* Nodes */
.node { cursor: pointer; }
.node-rect {
  fill: var(--bg-2);
  stroke: var(--line-strong);
  stroke-width: 1;
  rx: 10;
  transition: fill .2s, stroke .2s, filter .2s;
}
.node:hover .node-rect {
  fill: #1c2340;
  stroke: var(--accent);
  filter: drop-shadow(0 0 12px rgba(139, 159, 255, 0.4));
}
.node.selected .node-rect {
  fill: #1f2748;
  stroke: var(--accent);
  filter: drop-shadow(0 0 16px rgba(139, 159, 255, 0.55));
}
.node.dimmed { opacity: 0.25; }

.node-cat-bar {
  rx: 2;
}

.node-title {
  font-size: 13px;
  font-weight: 600;
  fill: var(--text-0);
  pointer-events: none;
}
.node-meta {
  font-size: 10px;
  fill: var(--text-2);
  pointer-events: none;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.node-year {
  font-size: 10px;
  fill: var(--text-1);
  pointer-events: none;
  text-anchor: end;
}

/* ───────────────────────── Detail Panel ───────────────────────── */
.detail {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 340px;
  max-height: calc(100% - 32px);
  background: rgba(22, 27, 48, 0.85);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  padding: 20px;
  overflow-y: auto;
  transform: translateX(380px);
  opacity: 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.detail.open {
  transform: translateX(0);
  opacity: 1;
}

/* Tab handle on the left edge of the detail panel that toggles the extra panel.
   Only visible while the detail panel itself is open. */
.detail-expand-btn {
  position: absolute;
  top: 50%;
  right: 356px; /* 16px (detail right) + 340px (detail width) */
  transform: translate(40px, -50%);
  width: 22px;
  height: 56px;
  border: 1px solid var(--line-strong);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: rgba(22, 27, 48, 0.85);
  backdrop-filter: blur(14px);
  color: var(--text-1);
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s, right .25s cubic-bezier(.2,.8,.2,1), background .15s;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.detail-expand-btn:hover { background: rgba(40, 50, 90, 0.95); }
body.detail-open .detail-expand-btn {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}
body.extra-open .detail-expand-btn {
  right: 788px; /* 16 + 340 + 16 + 400 + 16 */
  /* Flip the arrow */
}
body.extra-open .detail-expand-btn::after { content: ""; }

/* Extended notes panel — sits to the left of the main detail panel when expanded. */
.detail-extra {
  position: absolute;
  top: 16px;
  right: 372px; /* default off-screen */
  width: 400px;
  max-height: calc(100% - 32px);
  background: rgba(22, 27, 48, 0.85);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  padding: 20px;
  overflow-y: auto;
  transform: translateX(440px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  color: var(--text-1);
  z-index: 4;
}
body.extra-open .detail-extra {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.extra-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 26px; height: 26px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--text-1);
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.extra-close:hover { background: rgba(255,255,255,0.14); color: var(--text-0); }
.detail-extra .extra-title {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 28px 8px 0;
  color: var(--text-0);
}
.detail-extra .extra-lede {
  font-style: italic;
  color: var(--text-1);
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.5;
}
.detail-extra h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin: 18px 0 6px 0;
}
.detail-extra p, .detail-extra li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-0);
  margin: 0 0 10px 0;
}
.detail-extra ul { padding-left: 18px; margin: 0 0 10px 0; }
.detail-extra li { margin-bottom: 6px; }
.detail-extra strong { color: var(--text-0); font-weight: 700; }
.detail-extra em { color: var(--text-0); }

/* Renaissance theme — match the parchment of the main detail panel. */
body.theme-renaissance .detail-extra {
  background:
    radial-gradient(800px 600px at 50% 0%, rgba(184, 134, 43, 0.16), transparent 60%),
    #f6ecca;
  border: 1px solid #8a6a3e;
  outline: 4px double #b8862b;
  outline-offset: -7px;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(60, 40, 20, 0.45);
  backdrop-filter: none;
  font-family: "EB Garamond", serif;
}
body.theme-renaissance .detail-extra .extra-title {
  color: #2c1808;
  font-family: "EB Garamond", serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
body.theme-renaissance .detail-extra .extra-lede {
  color: #5a3a1a;
  font-style: italic;
  font-size: 15px;
}
body.theme-renaissance .detail-extra h4 {
  color: #8c1a1a;
  font-family: "EB Garamond", serif;
  font-size: 13px;
  letter-spacing: 1.2px;
  border-bottom: 1px solid rgba(140, 26, 26, 0.25);
  padding-bottom: 4px;
}
body.theme-renaissance .detail-extra p,
body.theme-renaissance .detail-extra li {
  color: #3b2614;
  font-family: "EB Garamond", serif;
  font-size: 14.5px;
  line-height: 1.65;
}
body.theme-renaissance .detail-extra strong { color: #1a0d04; }
body.theme-renaissance .detail-extra em { color: #4a2a10; }
body.theme-renaissance .extra-close {
  background: rgba(140, 26, 26, 0.10);
  color: #5a1a1a;
}
body.theme-renaissance .extra-close:hover {
  background: rgba(140, 26, 26, 0.22);
  color: #2c0808;
}
body.theme-renaissance .detail-expand-btn {
  background: #f6ecca;
  border: 1px solid #8a6a3e;
  border-right: none;
  color: #5a3a1a;
}
body.theme-renaissance .detail-expand-btn:hover {
  background: #fef4d2;
  color: #2c1808;
}

/* Eras theme — dark with gold accents, matching its detail panel. */
body.theme-eras .detail-extra {
  background: linear-gradient(180deg, #1f1c18, #16130f);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
}
body.theme-eras .detail-extra h4 {
  color: var(--accent);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding-bottom: 4px;
}
body.theme-eras .detail-extra p,
body.theme-eras .detail-extra li {
  color: #e8e2d4;
}
body.theme-eras .detail-expand-btn {
  background: #1f1c18;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-right: none;
  color: #d4af37;
}

.detail-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 26px; height: 26px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--text-1);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  z-index: 2;
}
.detail-close:hover { background: rgba(255,255,255,0.12); color: var(--text-0); }

/* Detail image slot — unified duotone treatment. Source images can be photos,
   paintings, woodcuts, schematics; the filter chain forces them into one look. */
.detail-img {
  position: relative;
  width: calc(100% + 40px);
  margin: -20px -20px 16px;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 30% 25%, color-mix(in srgb, var(--cat) 22%, transparent), transparent 60%),
    linear-gradient(180deg, #11162a, #0a0e1a);
  overflow: hidden;
  border-bottom: 1px solid var(--line-strong);
}
.detail-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  /* Desaturate + slight contrast bump so wildly varied sources read as one set. */
  filter: grayscale(0.75) contrast(1.05) brightness(0.9);
  transition: opacity .25s;
}
/* Category-color tint laid on top via blend mode. */
.detail-img::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(10,14,26,0.55) 100%),
    color-mix(in srgb, var(--cat) 28%, transparent);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* When <img> errored, hide it and show the generative SVG fallback. */
.detail-img.no-img img { display: none; }
.detail-img-fallback {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.detail-img.no-img .detail-img-fallback { display: flex; }
/* Hide the duotone overlay when we're showing the SVG fallback (it's already on-brand). */
.detail-img.no-img::after { display: none; }

.detail-img-credit {
  position: absolute;
  bottom: 8px; left: 12px;
  font-size: 10px; letter-spacing: 0.4px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  z-index: 1;
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(6px);
}
.detail-img-credit:hover { color: rgba(255,255,255,0.9); }

.detail-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.detail-cat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.detail-title {
  display: block;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.2px;
  color: var(--text-0);
  text-decoration: none;
  transition: color .15s;
}
.detail-title:hover { color: var(--accent); }

.detail-title-zh {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.detail-year {
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 16px;
}

.detail-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-1);
  margin-bottom: 20px;
}

.detail-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.detail-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.detail-link {
  display: block;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-1);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background .15s, color .15s, border-color .15s;
}
.detail-link:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-0);
  border-color: var(--line-strong);
}

/* Unlocks: small flexible chips, one per resource/person/work/etc. */
.detail-unlocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.unlock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-1);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.unlock-chip:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--line-strong);
  color: var(--text-0);
}
/* Flat (non-link) chip for speculative entries with no Wikipedia article. */
.unlock-chip-flat {
  cursor: default;
  opacity: 0.85;
}
.unlock-chip-flat:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--line);
  color: var(--text-1);
}
.unlock-chip .unlock-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.unlock-chip .unlock-zh {
  color: var(--text-2);
  font-size: 11.5px;
  margin-left: 2px;
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ───────────────────────── Controls ───────────────────────── */
.controls {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  gap: 4px;
  background: rgba(22, 27, 48, 0.85);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 4px;
  backdrop-filter: blur(10px);
}
.ctrl-btn {
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--text-1);
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.ctrl-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-0); }

/* Horizontal scrollbar at the bottom of the canvas. Thumb width reflects
   the visible fraction of the canvas; dragging it pans state.tx proportionally. */
.scrollbar-h {
  position: absolute;
  bottom: 22px;
  left: 132px;     /* clear of zoom controls */
  right: 80px;     /* clear of zoom-level pill */
  height: 14px;
  display: flex; align-items: center;
  z-index: 4;
  pointer-events: auto;
}
.scrollbar-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}
.scrollbar-thumb {
  position: absolute;
  top: -4px;
  height: 14px;
  background: rgba(255,255,255,0.22);
  border-radius: 7px;
  cursor: grab;
  min-width: 30px;
  transition: background .15s;
  user-select: none;
}
.scrollbar-thumb:hover { background: rgba(255,255,255,0.36); }
.scrollbar-thumb.dragging { background: var(--accent); cursor: grabbing; }
.scrollbar-h.hidden { display: none; }

/* Era marks above the scrollbar track — click to pan to that era. */
.scrollbar-era-tick {
  position: absolute;
  bottom: 14px;        /* sits above the track */
  width: 1.5px;
  height: 8px;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  z-index: 2;
  transition: background .15s, transform .15s;
}
.scrollbar-era-tick:hover {
  background: var(--accent);
  transform: scaleY(1.3);
}
.scrollbar-era-tick::after {
  content: attr(data-name);
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-2);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  background: rgba(15,20,36,0.95);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--line-strong);
}
.scrollbar-era-tick:hover::after { opacity: 1; }

.zoom-level {
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-2);
  background: rgba(22, 27, 48, 0.85);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────── Minimap ─────────────────────────
   Bottom-right overview of the entire tree. Click to pan;
   draggable viewport indicator shows current visible region. */
.minimap {
  position: absolute;
  right: 16px;
  bottom: 56px;
  width: 240px;
  height: 160px;
  background: rgba(22, 27, 48, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  z-index: 5;
  transition: width .2s, height .2s;
}
.minimap.collapsed {
  width: 28px;
  height: 28px;
}
.minimap.collapsed .minimap-svg { display: none; }
.minimap.collapsed .minimap-toggle { transform: rotate(180deg); }
.minimap-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.minimap-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--line-strong);
  color: var(--text-1);
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  z-index: 2;
}
.minimap-toggle:hover { background: rgba(0,0,0,0.6); color: var(--text-0); }
.minimap-node {
  fill: currentColor;
  stroke: none;
}
.minimap-era-band-even { fill: rgba(255,255,255,0.025); }
.minimap-era-band-odd  { fill: rgba(255,255,255,0.06); }
.minimap-viewport {
  fill: rgba(139, 159, 255, 0.18);
  stroke: var(--accent);
  stroke-width: 1.5;
  pointer-events: none;
}

/* Vertical-mode tweaks: minimap stays in same corner; some controls shift. */
body.orient-vertical .scrollbar-h {
  /* Horizontal scrollbar still works but represents the y-axis in vertical mode. */
}

/* ───────────────────────── Print / PDF export ─────────────────────────
   Hide all UI chrome and let the SVG fill the page. The export button
   sets a viewBox covering the entire tree so the printer auto-scales it
   to one or more pages with all nodes visible. */
@media print {
  @page { margin: 12mm; size: landscape; }
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  .app { display: block !important; height: auto !important; }
  .topbar, .sidebar, .controls, .scrollbar-h, .minimap, .zoom-level, .detail {
    display: none !important;
  }
  .canvas-wrap {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    background: #fff !important;
    overflow: visible !important;
  }
  .canvas-wrap svg {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    cursor: auto !important;
  }
  /* Print-friendly colors: light backdrop, dark text + edges. */
  .node-rect { fill: #fff !important; stroke: #333 !important; }
  .node-title { fill: #000 !important; }
  .node-meta, .node-year { fill: #555 !important; }
  .era-label { fill: #222 !important; }
  .era-label-pill { fill: #f0f0f0 !important; stroke: #ccc !important; }
  .era-band { fill: rgba(0,0,0,0.025) !important; }
  .era-band.era-odd { fill: rgba(0,0,0,0.06) !important; }
  .edge { stroke: #999 !important; }
  .grid-bg { display: none !important; }
}

/* Mobile / touch tweaks. Larger tap targets, looser spacing. */
@media (hover: none), (pointer: coarse) {
  .ctrl-btn { width: 40px; height: 40px; font-size: 18px; }
  .legend-item { padding: 10px 8px; font-size: 14px; }
  .era-item { padding: 12px 10px; font-size: 14px; }
  .minimap { width: 180px; height: 130px; bottom: 60px; right: 8px; }
  .scrollbar-thumb { height: 18px; top: -6px; }
  .scrollbar-track { height: 8px; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* Plain-text index link in topbar. */
.topbar-link {
  color: var(--text-1);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 6px 12px;
  border-radius: 7px;
  margin-right: 10px;
  border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.topbar-link:hover {
  color: var(--text-0);
  border-color: var(--line-strong);
  background: rgba(255,255,255,0.04);
}

/* Theme toggle button (lives in topbar). */
.theme-toggle {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  color: var(--text-1);
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  cursor: pointer;
  margin-right: 14px;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
  user-select: none;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-0);
  border-color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════════
   RENAISSANCE THEME
   Parchment background, sepia/burgundy/gold palette, Cinzel + EB Garamond
   serifs, illuminated border on the detail panel, dropcap on the title.
   Activated by adding class="theme-renaissance" to <body>.
   ════════════════════════════════════════════════════════════════════════ */
body.theme-renaissance {
  --bg-0: #efe2bc;
  --bg-1: #e7d8a8;
  --bg-2: #f6ecca;
  --line: rgba(80, 50, 20, 0.20);
  --line-strong: rgba(80, 50, 20, 0.36);
  --text-0: #3b2614;
  --text-1: #6b4a26;
  --text-2: #8a6a3e;
  --accent: #8c1a1a;          /* Florentine red */
  --gold: #b8862b;
  --glow: 0 0 18px rgba(184, 134, 43, 0.45);
  font-family: "EB Garamond", Georgia, "Songti SC", serif;
}

/* Subtle paper texture: tiny noise via radial gradients + a couple of
   illumination spots top-left / bottom-right. */
body.theme-renaissance .canvas-wrap,
body.theme-renaissance {
  background:
    radial-gradient(1500px 1000px at 12% 4%, rgba(184, 134, 43, 0.18), transparent 55%),
    radial-gradient(1200px 900px at 88% 96%, rgba(140, 26, 26, 0.10), transparent 55%),
    repeating-linear-gradient(0deg,
      rgba(80,50,20,0.025) 0px, rgba(80,50,20,0.025) 1px,
      transparent 1px, transparent 3px),
    var(--bg-0);
}

body.theme-renaissance .topbar {
  background: linear-gradient(180deg, #e7d6a4 0%, #ddc890 100%);
  border-bottom: 3px double #8a6a3e;
  backdrop-filter: none;
}
body.theme-renaissance .topbar-title {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #3b2614;
}
body.theme-renaissance .topbar-sub {
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #6b4a26;
}
body.theme-renaissance .brand-dot {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(184, 134, 43, 0.7);
}

body.theme-renaissance .theme-toggle {
  background: rgba(184, 134, 43, 0.10);
  border: 1px solid #8a6a3e;
  color: #6b4a26;
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
body.theme-renaissance .theme-toggle:hover {
  background: rgba(184, 134, 43, 0.22);
  color: #3b2614;
  border-color: #8c1a1a;
}

body.theme-renaissance .search input {
  background: rgba(255, 250, 230, 0.55);
  border: 1px solid rgba(80, 50, 20, 0.30);
  color: #3b2614;
  font-family: "EB Garamond", serif;
  font-size: 14px;
}
body.theme-renaissance .search input::placeholder { color: #8a6a3e; font-style: italic; }
body.theme-renaissance .search input:focus {
  border-color: #8c1a1a;
  background: rgba(255, 250, 230, 0.92);
}
body.theme-renaissance .search-icon { color: #8a6a3e; }

body.theme-renaissance .sidebar {
  background: linear-gradient(180deg, #ebd9a8, #ddc890);
  border-right: 3px double #8a6a3e;
}
body.theme-renaissance .sidebar h3 {
  font-family: "Cinzel", serif;
  color: #6b4a26;
  letter-spacing: 2.5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(80,50,20,0.20);
  padding-bottom: 6px;
}
body.theme-renaissance .legend-item,
body.theme-renaissance .era-item {
  font-family: "EB Garamond", serif;
  color: #4b3818;
  font-size: 14px;
}
body.theme-renaissance .legend-item:hover,
body.theme-renaissance .era-item:hover {
  background: rgba(184, 134, 43, 0.18);
  color: #3b2614;
}
body.theme-renaissance .era-range {
  font-style: italic;
  color: #8a6a3e;
}
body.theme-renaissance .legend-swatch { box-shadow: 0 0 6px currentColor; }

/* Era bands and dividers — zebra parchment + bold sepia rule */
body.theme-renaissance .era-band { stroke: none; }
body.theme-renaissance .era-band.era-even { fill: rgba(184, 134, 43, 0.04); }
body.theme-renaissance .era-band.era-odd  { fill: rgba(184, 134, 43, 0.12); }
body.theme-renaissance .era-divider {
  stroke: rgba(140, 90, 30, 0.75);   /* deeper sepia */
  stroke-width: 2.2;
  stroke-dasharray: 0;
  filter: drop-shadow(0 0 3px rgba(184, 134, 43, 0.35));
}
body.theme-renaissance .era-label-pill {
  fill: rgba(245, 233, 201, 0.7);
  stroke: rgba(140, 90, 30, 0.5);
  stroke-width: 1.2;
}
body.theme-renaissance .era-label-pill.era-even { fill: rgba(245, 233, 201, 0.55); }
body.theme-renaissance .era-label-pill.era-odd  { fill: rgba(245, 233, 201, 0.85); }
body.theme-renaissance .era-label {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.8px;
  fill: #6b4a26;
}
body.theme-renaissance .era-range-label {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 11px;
  fill: #8a6a3e;
  opacity: 1;
}

/* Nodes — parchment cards with sepia rule */
body.theme-renaissance .node-rect {
  fill: #f6ecca;
  stroke: rgba(80, 50, 20, 0.42);
  stroke-width: 1;
}
body.theme-renaissance .node:hover .node-rect {
  fill: #fdf2cf;
  stroke: #8c1a1a;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 8px rgba(184, 134, 43, 0.55));
}
body.theme-renaissance .node.selected .node-rect {
  fill: #fef4d2;
  stroke: #8c1a1a;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 14px rgba(184, 134, 43, 0.75));
}
body.theme-renaissance .node-meta {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  fill: #6b4a26;
}
body.theme-renaissance .node-title {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 14px;
  fill: #3b2614;
}
body.theme-renaissance .node-year {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 11px;
  fill: #8a6a3e;
}

/* Edges — like ink on aged paper */
body.theme-renaissance .edge {
  stroke: rgba(80, 50, 20, 0.32);
  stroke-width: 1.2;
}
body.theme-renaissance .edge.highlighted {
  stroke: rgba(80, 50, 20, 0.35);
  stroke-width: 1.2;
  opacity: 0.7;
  filter: none;
}
/* Requires — deep ink-blue (cool, foundational) */
body.theme-renaissance .edge.highlighted-requires {
  stroke: #1e4a7a;
  stroke-width: 2.6;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(30, 74, 122, 0.55));
}
/* Leads to — vermillion red (warm, advancing) */
body.theme-renaissance .edge.highlighted-leads-to {
  stroke: #8c1a1a;
  stroke-width: 2.6;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(140, 26, 26, 0.7));
}
body.theme-renaissance .edge.dimmed {
  stroke: rgba(80, 50, 20, 0.10);
}

/* Detail panel — open vellum with double rule + dropcap */
body.theme-renaissance .detail {
  background:
    radial-gradient(800px 600px at 50% 0%, rgba(184, 134, 43, 0.16), transparent 60%),
    #f6ecca;
  border: 1px solid #8a6a3e;
  outline: 4px double #b8862b;
  outline-offset: -7px;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(60, 40, 20, 0.45);
  backdrop-filter: none;
}
body.theme-renaissance .detail-img {
  border-bottom: 2px solid #8a6a3e;
}
body.theme-renaissance .detail-img img {
  filter: sepia(0.5) contrast(0.95) brightness(0.92);
}
body.theme-renaissance .detail-img::after {
  background:
    linear-gradient(180deg, transparent 50%, rgba(60, 40, 20, 0.45) 100%),
    color-mix(in srgb, var(--cat) 22%, transparent);
}
body.theme-renaissance .detail-close {
  background: rgba(184, 134, 43, 0.15);
  color: #6b4a26;
  border: 1px solid #8a6a3e;
}
body.theme-renaissance .detail-close:hover {
  background: rgba(184, 134, 43, 0.30);
  color: #3b2614;
}
body.theme-renaissance .detail-cat {
  font-family: "Cinzel", serif;
  font-size: 10.5px;
  letter-spacing: 1.8px;
}
body.theme-renaissance .detail-title {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  color: #3b2614;
  letter-spacing: 0;
}
/* Illuminated dropcap on the first letter of the detail title. */
body.theme-renaissance .detail-title::first-letter {
  font-family: "Cinzel", "EB Garamond", serif;
  font-weight: 700;
  font-size: 1.7em;
  color: #8c1a1a;
  margin-right: 2px;
  text-shadow: 0 1px 0 rgba(184, 134, 43, 0.3);
}
body.theme-renaissance .detail-title-zh {
  font-family: "EB Garamond", "Songti SC", serif;
  font-style: italic;
  font-size: 15px;
  color: #6b4a26;
  letter-spacing: 1px;
}
body.theme-renaissance .detail-year {
  color: #8c1a1a;
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 13.5px;
}
body.theme-renaissance .detail-desc {
  color: #3b2614;
  font-family: "EB Garamond", serif;
  font-size: 14.5px;
  line-height: 1.65;
}
body.theme-renaissance .detail-section {
  border-top: 1px solid rgba(80, 50, 20, 0.25);
  margin-top: 18px;
  padding-top: 18px;
}
/* A small fleuron centered in the rule above each section. */
body.theme-renaissance .detail-section::before {
  content: "❦";
  display: block;
  text-align: center;
  color: var(--gold);
  font-size: 14px;
  margin-top: -28px;
  margin-bottom: 8px;
  background: #f6ecca;
  width: 30px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: -2px;
}
body.theme-renaissance .detail-section-title {
  font-family: "Cinzel", serif;
  color: #6b4a26;
  letter-spacing: 1.8px;
  font-weight: 600;
}
body.theme-renaissance .detail-link {
  background: rgba(184, 134, 43, 0.10);
  border: 1px solid rgba(80, 50, 20, 0.20);
  color: #3b2614;
  font-family: "EB Garamond", serif;
  font-size: 14px;
}
body.theme-renaissance .detail-link:hover {
  background: rgba(184, 134, 43, 0.22);
  border-color: #8c1a1a;
  color: #3b2614;
}
body.theme-renaissance .unlock-chip {
  background: rgba(184, 134, 43, 0.10);
  border: 1px solid rgba(80, 50, 20, 0.22);
  color: #3b2614;
  font-family: "EB Garamond", serif;
  font-size: 12.5px;
}
body.theme-renaissance .unlock-chip:hover {
  background: rgba(184, 134, 43, 0.22);
  border-color: #8c1a1a;
  color: #3b2614;
}
body.theme-renaissance .unlock-chip .unlock-zh {
  color: #8a6a3e;
  font-style: italic;
}

/* Controls (zoom buttons, scrollbar) */
body.theme-renaissance .controls {
  background: rgba(245, 233, 201, 0.92);
  border: 1px solid #8a6a3e;
  backdrop-filter: none;
}
body.theme-renaissance .ctrl-btn { color: #6b4a26; }
body.theme-renaissance .ctrl-btn:hover {
  background: rgba(184, 134, 43, 0.22);
  color: #3b2614;
}
body.theme-renaissance .zoom-level {
  background: rgba(245, 233, 201, 0.92);
  border: 1px solid #8a6a3e;
  color: #6b4a26;
  font-family: "EB Garamond", serif;
  font-style: italic;
}
body.theme-renaissance .scrollbar-track {
  background: rgba(80, 50, 20, 0.12);
}
body.theme-renaissance .scrollbar-thumb {
  background: rgba(140, 100, 50, 0.50);
}
body.theme-renaissance .scrollbar-thumb:hover { background: rgba(140, 100, 50, 0.72); }
body.theme-renaissance .scrollbar-thumb.dragging { background: #8c1a1a; }
body.theme-renaissance .scrollbar-era-tick {
  background: rgba(140, 100, 50, 0.62);
}
body.theme-renaissance .scrollbar-era-tick:hover {
  background: #8c1a1a;
  transform: scaleY(1.3);
}
body.theme-renaissance .scrollbar-era-tick::after {
  background: #f6ecca;
  border: 1px solid #8a6a3e;
  color: #3b2614;
  font-family: "Cinzel", serif;
}

/* Webkit scrollbar in Renaissance theme */
body.theme-renaissance ::-webkit-scrollbar-thumb {
  background: rgba(80, 50, 20, 0.25);
}
body.theme-renaissance ::-webkit-scrollbar-thumb:hover {
  background: rgba(80, 50, 20, 0.45);
}

/* ════════════════════════════════════════════════════════════════════════
   ERA-NATIVE THEME
   Each era's column gets its own palette + typography pulled from that
   period's visual culture. Backdrop is neutral charcoal so era bands stand
   out as distinct bands of color.
   ════════════════════════════════════════════════════════════════════════ */
body.theme-eras {
  --bg-0: #1a1815;
  --bg-1: #211e1a;
  --bg-2: #2a2620;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text-0: #ece6d8;
  --text-1: #b6ad9a;
  --text-2: #7a7466;
  --accent: #d4af37;
  --glow: 0 0 18px rgba(212, 175, 55, 0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}

/* Backdrop reads as a gradient *across the timeline*: warm earth on the
   left (ancient), neutral charcoal in the middle (industrial/modern), and
   cool violet/cyan on the right (futuristic). Reinforces the macro arc. */
body.theme-eras .canvas-wrap,
body.theme-eras {
  background:
    linear-gradient(90deg,
      rgba(80, 45, 20, 0.35) 0%,
      rgba(60, 40, 25, 0.18) 18%,
      rgba(15, 18, 24, 0.0) 50%,
      rgba(40, 25, 80, 0.20) 82%,
      rgba(70, 35, 130, 0.40) 100%),
    radial-gradient(1400px 900px at 8% 6%, rgba(180, 100, 40, 0.18), transparent 55%),
    radial-gradient(1400px 900px at 92% 94%, rgba(160, 100, 255, 0.20), transparent 55%),
    var(--bg-0);
}

body.theme-eras .topbar {
  background: linear-gradient(180deg, #2a2620 0%, #1a1815 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.30);
  backdrop-filter: none;
}
body.theme-eras .topbar-title {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
}
body.theme-eras .brand-dot { background: var(--accent); }
body.theme-eras .theme-toggle {
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.40);
  color: var(--text-1);
}
body.theme-eras .theme-toggle:hover {
  background: rgba(212, 175, 55, 0.22);
  color: var(--text-0);
}

body.theme-eras .sidebar {
  background: linear-gradient(180deg, #211e1a, #1a1815);
  border-right: 1px solid rgba(212, 175, 55, 0.25);
}

/* Edges: faint, era-neutral. */
body.theme-eras .edge { stroke: rgba(255, 255, 255, 0.14); }
body.theme-eras .edge.highlighted {
  stroke: rgba(212, 175, 55, 0.40);
  stroke-width: 1.4;
  opacity: 0.65;
  filter: none;
}
/* Requires — cool blue */
body.theme-eras .edge.highlighted-requires {
  stroke: #6db8ff;
  stroke-width: 3;
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(109, 184, 255, 0.7));
}
/* Leads to — warm gold (the era theme's accent) */
body.theme-eras .edge.highlighted-leads-to {
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8));
}

/* ── Default node look (overridden per era below) ── */
body.theme-eras .node-rect {
  fill: rgba(0, 0, 0, 0.35);
  stroke: rgba(255, 255, 255, 0.20);
}
body.theme-eras .node:hover .node-rect {
  filter: drop-shadow(0 0 10px currentColor);
}

/* ────────────────────────────────────────────────────────────────────────
   Group-level shape language. Three macro periods, each with a distinct
   silhouette so even at low zoom the eye can tell ancient from modern from
   futuristic at a glance.

     Ancient (Stone → Bronze):  squared corners, thick chiseled strokes
     Classical → Industrial:    soft rounded corners, period accent stroke
     Modern → Information:      crisp 10px radius, thin lines
     Future / Far-Future:       pill-shape, translucent fill, neon glow
   ──────────────────────────────────────────────────────────────────────── */

/* Ancient — chiseled stone-tablet silhouette */
body.theme-eras .node.era-lower-paleo  .node-rect,
body.theme-eras .node.era-middle-paleo .node-rect,
body.theme-eras .node.era-upper-paleo  .node-rect,
body.theme-eras .node.era-mesolithic   .node-rect,
body.theme-eras .node.era-neolithic    .node-rect,
body.theme-eras .node.era-bronze       .node-rect {
  rx: 1; ry: 1;
  stroke-width: 2.5;
}

/* Classical → Industrial — period-soft corners */
body.theme-eras .node.era-classical     .node-rect,
body.theme-eras .node.era-medieval      .node-rect,
body.theme-eras .node.era-renaissance   .node-rect,
body.theme-eras .node.era-enlightenment .node-rect,
body.theme-eras .node.era-industrial    .node-rect {
  rx: 4; ry: 4;
  stroke-width: 1.6;
}

/* Modern transition — crisp, current radius */
body.theme-eras .node.era-modern      .node-rect,
body.theme-eras .node.era-atomic      .node-rect,
body.theme-eras .node.era-information .node-rect {
  rx: 10; ry: 10;
  stroke-width: 1.2;
}

/* Future / Far-Future — pill silhouette + always-on glow */
body.theme-eras .node.era-future     .node-rect,
body.theme-eras .node.era-far-future .node-rect {
  rx: 22; ry: 22;
  stroke-width: 1.1;
}
body.theme-eras .node.era-future,
body.theme-eras .node.era-far-future {
  filter: drop-shadow(0 0 6px currentColor);
}
body.theme-eras .node.era-future .node-rect     { color: #a0d8ff; }
body.theme-eras .node.era-far-future .node-rect { color: #c896ff; }

/* ════════════════════════════════════════════════════════════════════════
   Per-era styling. For each era we set:
     • era-band fill (the column wash)
     • era-label fill + font feel
     • era-divider stroke
     • era-label-pill fill
     • node-rect fill / stroke / title font + color
   ════════════════════════════════════════════════════════════════════════ */

/* ── Stone Age (Lower / Middle / Upper Paleolithic + Mesolithic):
      cave-painting palette — deep umber, ochre, charcoal, bone. */
body.theme-eras .era-band.era-lower-paleo,
body.theme-eras .era-band.era-middle-paleo,
body.theme-eras .era-band.era-upper-paleo,
body.theme-eras .era-band.era-mesolithic {
  fill: rgba(70, 35, 18, 0.85);
}
body.theme-eras .era-divider.era-lower-paleo,
body.theme-eras .era-divider.era-middle-paleo,
body.theme-eras .era-divider.era-upper-paleo,
body.theme-eras .era-divider.era-mesolithic {
  stroke: #b5651d; stroke-width: 2;
}
body.theme-eras .era-label-pill.era-lower-paleo,
body.theme-eras .era-label-pill.era-middle-paleo,
body.theme-eras .era-label-pill.era-upper-paleo,
body.theme-eras .era-label-pill.era-mesolithic {
  fill: rgba(50, 28, 15, 0.85); stroke: #b5651d;
}
body.theme-eras .era-label.era-lower-paleo,
body.theme-eras .era-label.era-middle-paleo,
body.theme-eras .era-label.era-upper-paleo,
body.theme-eras .era-label.era-mesolithic {
  fill: #f0c878;
  font-family: "Papyrus", "Marker Felt", fantasy;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
}
body.theme-eras .node.era-lower-paleo .node-rect,
body.theme-eras .node.era-middle-paleo .node-rect,
body.theme-eras .node.era-upper-paleo .node-rect,
body.theme-eras .node.era-mesolithic .node-rect {
  fill: #2a1810; stroke: #8b5a2b;
}
body.theme-eras .node.era-lower-paleo .node-title,
body.theme-eras .node.era-middle-paleo .node-title,
body.theme-eras .node.era-upper-paleo .node-title,
body.theme-eras .node.era-mesolithic .node-title {
  fill: #f0d9a8;
  font-family: "Papyrus", "Marker Felt", fantasy;
  letter-spacing: 0.5px;
}
body.theme-eras .node.era-lower-paleo .node-year,
body.theme-eras .node.era-middle-paleo .node-year,
body.theme-eras .node.era-upper-paleo .node-year,
body.theme-eras .node.era-mesolithic .node-year { fill: #c9a062; }

/* ── Neolithic: terracotta / pottery, painted clay. */
body.theme-eras .era-band.era-neolithic { fill: rgba(160, 70, 30, 0.55); }
body.theme-eras .era-divider.era-neolithic { stroke: #c14d2a; stroke-width: 2; }
body.theme-eras .era-label-pill.era-neolithic { fill: rgba(120, 50, 28, 0.80); stroke: #c14d2a; }
body.theme-eras .era-label.era-neolithic {
  fill: #f4d2a8;
  font-family: "Papyrus", Georgia, serif;
  letter-spacing: 2.5px;
}
body.theme-eras .node.era-neolithic .node-rect { fill: #3d1f12; stroke: #c14d2a; }
body.theme-eras .node.era-neolithic .node-title {
  fill: #f7dab1; font-family: Georgia, serif;
}
body.theme-eras .node.era-neolithic .node-year { fill: #e0a070; }

/* ── Bronze Age: dark bronze + gold accents (Mesopotamian/Egyptian). */
body.theme-eras .era-band.era-bronze { fill: rgba(110, 80, 28, 0.65); }
body.theme-eras .era-divider.era-bronze { stroke: #d4a042; stroke-width: 2.2; }
body.theme-eras .era-label-pill.era-bronze { fill: rgba(70, 55, 22, 0.85); stroke: #d4a042; }
body.theme-eras .era-label.era-bronze {
  fill: #f0d27a;
  font-family: "Trajan Pro", "Cinzel", Georgia, serif;
  letter-spacing: 3px;
}
body.theme-eras .node.era-bronze .node-rect { fill: #2c2412; stroke: #b8862b; }
body.theme-eras .node.era-bronze .node-title {
  fill: #f4d676; font-family: "Trajan Pro", "Cinzel", Georgia, serif;
  font-weight: 700; letter-spacing: 0.6px;
}
body.theme-eras .node.era-bronze .node-year { fill: #c8a050; font-style: italic; }

/* ── Classical Antiquity: white marble with engraved Roman lettering.
      Light cream panels, dark sepia text, weathered marble band. */
body.theme-eras .era-band.era-classical { fill: rgba(232, 222, 196, 0.30); }
body.theme-eras .era-divider.era-classical { stroke: #6b3e1f; stroke-width: 2.4; }
body.theme-eras .era-label-pill.era-classical {
  fill: rgba(238, 230, 208, 0.92); stroke: #6b3e1f; stroke-width: 1.4;
}
body.theme-eras .era-label.era-classical {
  fill: #2a1a0a;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-weight: 700; letter-spacing: 4.5px;
}
body.theme-eras .era-range-label.era-classical { fill: #6b4a26; opacity: 0.95; }
body.theme-eras .node.era-classical .node-rect {
  fill: #ece4cd; stroke: #6b3e1f; stroke-width: 1.4;
}
body.theme-eras .node.era-classical .node-title {
  fill: #2a1808;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  font-size: 12.5px;
}
body.theme-eras .node.era-classical .node-meta {
  fill: #6b3e1f !important;
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
}
body.theme-eras .node.era-classical .node-year {
  fill: #6b3e1f; font-family: "Cinzel", Georgia, serif; font-style: normal;
}

/* ── Medieval: illuminated manuscript — warm vellum panels, deep crimson
      script, gold leaf rule. Like opening a Book of Hours. */
body.theme-eras .era-band.era-medieval { fill: rgba(220, 175, 95, 0.18); }
body.theme-eras .era-divider.era-medieval { stroke: #8a1a1a; stroke-width: 2.5; }
body.theme-eras .era-label-pill.era-medieval {
  fill: rgba(60, 18, 22, 0.94); stroke: #d4a042; stroke-width: 1.6;
}
body.theme-eras .era-label.era-medieval {
  fill: #f0d27a;
  font-family: "UnifrakturMaguntia", "Luminari", "Blackadder ITC", fantasy;
  font-size: 14px; letter-spacing: 1.5px;
}
body.theme-eras .node.era-medieval .node-rect {
  fill: #ecd9a4; stroke: #8a1a1a; stroke-width: 1.6;
}
body.theme-eras .node.era-medieval .node-title {
  fill: #5a0e10;
  font-family: "UnifrakturMaguntia", "Luminari", "Blackadder ITC", Georgia, serif;
  font-weight: 700; font-size: 14px; letter-spacing: 0.4px;
}
body.theme-eras .node.era-medieval .node-meta {
  fill: #6b4a16 !important;
  font-family: "EB Garamond", Georgia, serif; font-style: italic;
}
body.theme-eras .node.era-medieval .node-year {
  fill: #6b4a16; font-family: "EB Garamond", Georgia, serif; font-style: italic;
}

/* ── Renaissance: parchment cream + sepia + gold leaf — open vellum page. */
body.theme-eras .era-band.era-renaissance { fill: rgba(220, 188, 128, 0.28); }
body.theme-eras .era-divider.era-renaissance { stroke: #8a4a18; stroke-width: 2.2; }
body.theme-eras .era-label-pill.era-renaissance {
  fill: rgba(246, 236, 202, 0.92); stroke: #8a4a18; stroke-width: 1.4;
}
body.theme-eras .era-label.era-renaissance {
  fill: #3b2614;
  font-family: "Cinzel", "EB Garamond", Georgia, serif;
  font-weight: 700; letter-spacing: 3.5px;
}
body.theme-eras .era-range-label.era-renaissance { fill: #6b4a26; opacity: 0.95; }
body.theme-eras .node.era-renaissance .node-rect {
  fill: #f3e6c1; stroke: #8a4a18; stroke-width: 1.5;
}
body.theme-eras .node.era-renaissance .node-title {
  fill: #2e1a06;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 700; font-size: 14.5px;
}
body.theme-eras .node.era-renaissance .node-meta {
  fill: #6b4a26 !important;
  font-family: "EB Garamond", Georgia, serif; font-style: italic;
}
body.theme-eras .node.era-renaissance .node-year {
  fill: #8c1a1a; font-family: "EB Garamond", Georgia, serif; font-style: italic;
}

/* ── Enlightenment: ivory + iron-gall ink — encyclopedia-plate feel. */
body.theme-eras .era-band.era-enlightenment { fill: rgba(232, 224, 198, 0.30); }
body.theme-eras .era-divider.era-enlightenment { stroke: #1a2540; stroke-width: 1.8; }
body.theme-eras .era-label-pill.era-enlightenment {
  fill: rgba(238, 230, 208, 0.92); stroke: #1a2540; stroke-width: 1.4;
}
body.theme-eras .era-label.era-enlightenment {
  fill: #1a2540;
  font-family: "Baskerville", "Didot", Georgia, serif;
  font-weight: 700; letter-spacing: 3px;
}
body.theme-eras .era-range-label.era-enlightenment { fill: #1a2540; opacity: 0.7; }
body.theme-eras .node.era-enlightenment .node-rect {
  fill: #ece4cc; stroke: #1a2540; stroke-width: 1.4;
}
body.theme-eras .node.era-enlightenment .node-title {
  fill: #0e1830;
  font-family: "Baskerville", "Didot", Georgia, serif;
  font-weight: 600; font-size: 14px; letter-spacing: 0.3px;
}
body.theme-eras .node.era-enlightenment .node-meta {
  fill: #4a5878 !important;
  font-family: "Baskerville", Georgia, serif; font-style: italic;
}
body.theme-eras .node.era-enlightenment .node-year {
  fill: #4a5878; font-family: "Baskerville", Georgia, serif; font-style: italic;
}

/* ── Industrial: brass / steampunk — dark iron with copper rivets. */
body.theme-eras .era-band.era-industrial { fill: rgba(90, 55, 25, 0.40); }
body.theme-eras .era-divider.era-industrial { stroke: #c4793a; stroke-width: 2.5; }
body.theme-eras .era-label-pill.era-industrial { fill: rgba(45, 30, 18, 0.92); stroke: #c4793a; }
body.theme-eras .era-label.era-industrial {
  fill: #e8a87c;
  font-family: "Rockwell", "Courier New", monospace;
  font-weight: 700; letter-spacing: 2px;
}
body.theme-eras .node.era-industrial .node-rect {
  fill: #261b12; stroke: #c4793a;
}
body.theme-eras .node.era-industrial .node-title {
  fill: #f0c898;
  font-family: "Rockwell", "Courier New", monospace;
  font-weight: 700;
}
body.theme-eras .node.era-industrial .node-year { fill: #b87650; }

/* ── Modern (early-20th c.): art deco navy + cream + scarlet accent. */
body.theme-eras .era-band.era-modern { fill: rgba(20, 35, 70, 0.45); }
body.theme-eras .era-divider.era-modern { stroke: #d4af37; stroke-width: 2.2; }
body.theme-eras .era-label-pill.era-modern { fill: rgba(15, 25, 50, 0.92); stroke: #d4af37; }
body.theme-eras .era-label.era-modern {
  fill: #f0d870;
  font-family: "Futura", "Century Gothic", sans-serif;
  font-weight: 700; letter-spacing: 4px;
}
body.theme-eras .node.era-modern .node-rect {
  fill: #0e1a36; stroke: #d4af37;
}
body.theme-eras .node.era-modern .node-title {
  fill: #f4e8cc;
  font-family: "Futura", "Century Gothic", sans-serif;
  font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  font-size: 12px;
}
body.theme-eras .node.era-modern .node-year { fill: #d4af37; }

/* ── Atomic Age: googie / mid-century — dark teal with atomic red+yellow. */
body.theme-eras .era-band.era-atomic { fill: rgba(20, 60, 70, 0.45); }
body.theme-eras .era-divider.era-atomic { stroke: #ff6b3d; stroke-width: 2.2; }
body.theme-eras .era-label-pill.era-atomic { fill: rgba(15, 40, 50, 0.92); stroke: #ff6b3d; }
body.theme-eras .era-label.era-atomic {
  fill: #ffd24d;
  font-family: "Futura", "Bahnschrift", sans-serif;
  font-weight: 700; letter-spacing: 3.5px;
}
body.theme-eras .node.era-atomic .node-rect {
  fill: #0e2d34; stroke: #ff6b3d;
}
body.theme-eras .node.era-atomic .node-title {
  fill: #ffe8a8;
  font-family: "Futura", "Bahnschrift", sans-serif;
  font-weight: 700; letter-spacing: 0.5px;
}
body.theme-eras .node.era-atomic .node-year { fill: #ffb070; }

/* ── Information: terminal-cyan cyber dark. */
body.theme-eras .era-band.era-information { fill: rgba(20, 50, 60, 0.40); }
body.theme-eras .era-divider.era-information { stroke: #4be0d4; stroke-width: 1.8; }
body.theme-eras .era-label-pill.era-information { fill: rgba(10, 25, 35, 0.92); stroke: #4be0d4; }
body.theme-eras .era-label.era-information {
  fill: #8feee0;
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-weight: 600; letter-spacing: 2.5px;
}
body.theme-eras .node.era-information .node-rect {
  fill: #0a1820; stroke: #4be0d4;
}
body.theme-eras .node.era-information .node-title {
  fill: #cdf3ee;
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-weight: 600; letter-spacing: 0.2px;
}
body.theme-eras .node.era-information .node-year { fill: #4be0d4; }

/* ── Future: minimal glass / soft cyan, near-white panels on dark.
      Heavy glow + translucent fills give the "holographic" feel. */
body.theme-eras .era-band.era-future {
  fill: rgba(80, 180, 240, 0.16);
  filter: drop-shadow(0 0 18px rgba(120, 200, 255, 0.25));
}
body.theme-eras .era-divider.era-future {
  stroke: #5fc8ff; stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(95, 200, 255, 0.85));
}
body.theme-eras .era-label-pill.era-future {
  fill: rgba(40, 80, 120, 0.55); stroke: #5fc8ff; stroke-width: 1.2;
}
body.theme-eras .era-label.era-future {
  fill: #e4f4ff;
  font-family: "Orbitron", "Inter", "Helvetica Neue", sans-serif;
  font-weight: 400; letter-spacing: 6px;
}
body.theme-eras .node.era-future .node-rect {
  fill: rgba(40, 90, 130, 0.40); stroke: #5fc8ff;
}
body.theme-eras .node.era-future .node-title {
  fill: #f0f8ff;
  font-family: "Orbitron", "Inter", "Helvetica Neue", sans-serif;
  font-weight: 400; letter-spacing: 1px;
}
body.theme-eras .node.era-future .node-year { fill: #5fc8ff; font-weight: 400; }

/* ── Far Future: cosmic — deep violet wash with lavender + electric magenta. */
body.theme-eras .era-band.era-far-future {
  fill: rgba(90, 35, 145, 0.55);
  filter: drop-shadow(0 0 22px rgba(180, 100, 255, 0.30));
}
body.theme-eras .era-divider.era-far-future {
  stroke: #d8a8ff; stroke-width: 1.8;
  filter: drop-shadow(0 0 8px rgba(216, 168, 255, 0.85));
}
body.theme-eras .era-label-pill.era-far-future {
  fill: rgba(50, 22, 90, 0.92); stroke: #d8a8ff; stroke-width: 1.2;
}
body.theme-eras .era-label.era-far-future {
  fill: #f4e4ff;
  font-family: "Orbitron", "Inter", sans-serif;
  font-weight: 500; letter-spacing: 5px;
  text-transform: uppercase;
}
body.theme-eras .node.era-far-future .node-rect {
  fill: rgba(50, 24, 90, 0.55); stroke: #d8a8ff;
}
body.theme-eras .node.era-far-future .node-title {
  fill: #f4e4ff;
  font-family: "Orbitron", "Inter", sans-serif;
  font-weight: 500; letter-spacing: 1.2px;
}
body.theme-eras .node.era-far-future .node-year { fill: #d8a8ff; }

/* ── Selected/hovered glow uses each era's accent via currentColor on stroke ── */
body.theme-eras .node:hover .node-rect,
body.theme-eras .node.selected .node-rect {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.25));
}

/* Range labels stay subtle in every era. */
body.theme-eras .era-range-label { fill: var(--text-2); opacity: 0.85; }