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

:root {
  --parchment:    #f2e8d5;
  --parchment-dk: #e0ceaf;
  --ink:          #2a1f0e;
  --ink-lt:       #5c4a2a;
  --gold:         #b8860b;
  --gold-lt:      #d4a82a;
  --crimson:      #8b1a1a;
  --panel-w:      420px;
  --timeline-h:   110px;
}

body {
  font-family: 'EB Garamond', serif;
  background: var(--ink);
  color: var(--ink);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
header {
  background: var(--ink);
  border-bottom: 2px solid var(--gold);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  z-index: 1100;
}
header h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gold-lt);
  letter-spacing: 0.08em;
}
header .subtitle {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--parchment-dk);
  opacity: 0.7;
  flex: 1;
}

/* ── Layers button & dropdown ── */
#layers-wrap {
  position: relative;
}
#layers-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gold-lt);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 5px 14px 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
#layers-btn:hover,
#layers-btn.open {
  background: var(--ink-lt);
  color: var(--gold-lt);
}
#layers-btn svg {
  flex-shrink: 0;
}
/* caret */
#layers-btn::after {
  content: '';
  display: block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--gold);
  transition: transform 0.2s;
  margin-left: 2px;
}
#layers-btn.open::after {
  transform: rotate(180deg);
}

#layers-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 4px;
  min-width: 240px;
  z-index: 800;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
}
#layers-dropdown.open { display: block; }

.layers-heading {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--ink-lt);
}

.layer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid rgba(92,74,42,0.3);
}
.layer-item:last-child { border-bottom: none; }
.layer-item:hover { background: var(--ink-lt); }

.layer-item input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s;
}
.layer-item input[type=checkbox]:checked {
  background: var(--gold);
}
.layer-item input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  top: 1px; left: 4px;
  width: 5px; height: 9px;
  border: 2px solid var(--ink);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.layer-swatch {
  width: 28px; height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.layer-info {
  flex: 1;
}
.layer-name {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--parchment);
  line-height: 1.3;
}
.layer-desc {
  font-family: 'EB Garamond', serif;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--parchment-dk);
  opacity: 0.65;
  line-height: 1.2;
}

/* ── Emperor Timeline ── */
#emperor-bar {
  background: var(--ink);
  border-top: 1px solid var(--ink-lt);
  flex-shrink: 0;
  padding: 6px 28px 4px;
  display: none; /* hidden until toggled */
}
#emperor-bar.visible { display: block; }

#emperor-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

#emperor-track {
  position: relative;
  height: 28px;
}

.emp-seg {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-right: 1px solid var(--ink);
  cursor: default;
  transition: filter 0.15s, overflow 0s;
}
.emp-seg:hover {
  filter: brightness(1.3);
  z-index: 100;
  overflow: visible;
}
.emp-seg:first-child { border-radius: 2px 0 0 2px; }
.emp-seg:last-child  { border-radius: 0 2px 2px 0; border-right: none; }

.emp-seg-label {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  color: rgba(255,255,255,0.85);
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  position: relative;
  z-index: 10;
  transition: text-overflow 0s;
}
.emp-seg:hover .emp-seg-label {
  overflow: visible;
  text-overflow: clip;
  background: inherit;
  padding: 2px 6px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 2px 2px 6px rgba(0,0,0,0.5);
}

/* Tooltip — years only on hover */
.emp-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 3px 8px;
  white-space: nowrap;
  z-index: 900;
  pointer-events: none;
}
.emp-seg:hover .emp-tooltip { display: block; }
.emp-tooltip-name {
  display: none; /* name now shown inline on the bar */
}
.emp-tooltip-years {
  font-family: 'EB Garamond', serif;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--parchment-dk);
}

.emp-seg.dimmed { opacity: 0.25; }

/* ── Thinkers Timeline ── */
#thinkers-bar {
  background: var(--ink);
  border-top: 1px solid var(--ink-lt);
  flex-shrink: 0;
  padding: 6px 28px 6px;
  display: none;
}
#thinkers-bar.visible { display: block; }

#thinkers-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}

#thinkers-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.thinker-row {
  position: relative;
  height: 22px;
}

.thinker-seg {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  border-radius: 3px;
  overflow: hidden;
  cursor: default;
  transition: filter 0.15s, overflow 0s;
}
.thinker-seg:hover {
  filter: brightness(1.3);
  z-index: 1000;
  overflow: visible;
}

.thinker-seg-label {
  font-family: 'EB Garamond', serif;
  font-size: 0.65rem;
  font-style: italic;
  color: rgba(255,255,255,0.9);
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  position: relative;
  z-index: 10;
}
.thinker-seg:hover .thinker-seg-label {
  overflow: visible;
  text-overflow: clip;
  background: inherit;
  padding: 2px 6px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 2px 2px 6px rgba(0,0,0,0.5);
}

.thinker-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 5px 10px;
  white-space: nowrap;
  z-index: 900;
  pointer-events: none;
}
.thinker-seg:hover .thinker-tooltip { display: block; }
.thinker-tooltip-name {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  color: var(--gold-lt);
}
.thinker-tooltip-years {
  font-family: 'EB Garamond', serif;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--parchment-dk);
}
.thinker-tooltip-desc {
  font-family: 'EB Garamond', serif;
  font-size: 0.7rem;
  color: var(--parchment-dk);
  opacity: 0.8;
  max-width: 220px;
  white-space: normal;
  line-height: 1.4;
  margin-top: 2px;
}

.thinker-seg.dimmed { opacity: 0.2; }
#map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}
#map {
  width: 100%;
  height: 100%;
  background: #b8c4aa;
}

/* ── Leaflet custom tile: sepia overlay ── */
.leaflet-tile { filter: sepia(60%) saturate(70%) brightness(90%); }

/* ── Custom marker ── */
.council-marker {
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid var(--gold);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.council-marker.ecumenical  { background: var(--crimson); }
.council-marker.pre-ecumenical { background: #4a3a1a; }
.council-marker:hover,
.council-marker.selected {
  transform: rotate(-45deg) scale(1.2);
  box-shadow: 0 0 10px rgba(184,134,11,0.7);
}
.council-marker.visible { display: block; }
.council-marker.hidden  { display: none; }

/* ── Side Panel ── */
#panel {
  position: absolute;
  top: 0; right: 0;
  width: var(--panel-w);
  height: 100%;
  background: var(--parchment);
  border-left: 3px solid var(--gold);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#panel.open { transform: translateX(0); }

#panel-header {
  background: var(--ink);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
#panel-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--gold-lt);
  line-height: 1.3;
}
#panel-year-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: var(--parchment-dk);
  background: var(--ink-lt);
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 2px 8px;
  white-space: nowrap;
  margin-top: 4px;
}
#panel-close {
  background: none; border: none;
  color: var(--parchment-dk);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  padding: 2px 4px;
  transition: color 0.2s;
}
#panel-close:hover { color: var(--gold-lt); }

#panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--parchment-dk);
}

.panel-section-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 4px;
}
.panel-value {
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 16px;
}
.panel-wiki-link {
  display: inline-block;
  margin-top: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.panel-wiki-link:hover {
  border-bottom-color: var(--gold);
}
.panel-divider {
  border: none;
  border-top: 1px solid var(--parchment-dk);
  margin: 4px 0 16px;
}
.panel-type-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.badge-ecumenical    { background: var(--crimson); color: var(--parchment); }
.badge-pre-ecumenical { background: var(--ink-lt);  color: var(--parchment-dk); }

/* ── Timeline ── */
#timeline-bar {
  height: var(--timeline-h);
  background: var(--ink);
  border-top: 2px solid var(--gold);
  flex-shrink: 0;
  padding: 10px 28px 14px;
  position: relative;
  z-index: 600;
  user-select: none;
}

#timeline-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#year-range-display {
  font-size: 1.1rem;
  color: var(--gold-lt);
  letter-spacing: 0.05em;
}

#track-wrap {
  position: relative;
  height: 44px;
}

/* Custom dual-range track */
#range-track {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%) translateY(-10px); /* align with thumb centres */
  height: 3px;
  background: var(--ink-lt);
  border-radius: 2px;
  pointer-events: none;
}
#range-fill {
  position: absolute;
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
}

/* tick marks */
#ticks {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 20px;
  pointer-events: none;
}
.tick {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tick-line {
  width: 1px;
  background: var(--ink-lt);
  height: 8px;
}
.tick-line.major { height: 12px; background: var(--gold); }
.tick-label {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  color: var(--ink-lt);
  white-space: nowrap;
  transform: translateY(100%) translateY(2px);
}
.tick-label.major { color: var(--parchment-dk); }

/* council dots on timeline */
#council-dots {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 20px;
  pointer-events: none;
}
.tdot {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%) translateY(-10px);
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  opacity: 0.35;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: all;
  cursor: pointer;
}
.tdot.ecumenical    { background: var(--crimson); }
.tdot.pre-ecumenical { background: var(--ink-lt); }
.tdot.active {
  opacity: 1;
  transform: translate(-50%,-50%) translateY(-10px) scale(1.5);
  border-color: var(--gold-lt);
}
.tdot.active:hover {
  transform: translate(-50%,-50%) translateY(-10px) scale(1.9);
}
.tdot.selected {
  opacity: 1;
  transform: translate(-50%,-50%) translateY(-10px) scale(2.4);
  border-color: var(--gold-lt);
  box-shadow: 0 0 6px rgba(212,168,42,0.6);
}

/* Dual range inputs — stacked, transparent tracks, only thumbs show */
.range-input {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: calc(100% - 20px);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  z-index: 3;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold-lt);
  border: 2px solid var(--ink);
  box-shadow: 0 0 6px rgba(184,134,11,0.6);
  cursor: grab;
  transition: transform 0.15s, box-shadow 0.15s;
}
.range-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(212,168,42,0.8);
}
.range-input::-moz-range-thumb {
  pointer-events: all;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold-lt);
  border: 2px solid var(--ink);
  cursor: grab;
}
.range-input::-webkit-slider-runnable-track { background: transparent; }
.range-input::-moz-range-track { background: transparent; }

/* ── Multi-council location popover ── */
.loc-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 4px;
  min-width: 220px;
  z-index: 1000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}
.loc-popover::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--gold);
}
.loc-popover-heading {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 8px 12px 5px;
  border-bottom: 1px solid var(--ink-lt);
}
.loc-popover-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(92,74,42,0.3);
  transition: background 0.12s;
}
.loc-popover-item:last-child { border-bottom: none; }
.loc-popover-item:hover { background: var(--ink-lt); }
.loc-popover-item-name {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--parchment);
  line-height: 1.3;
  flex: 1;
}
.loc-popover-item-year {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.loc-popover-item-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
.loc-popover-item-dot.ecumenical    { background: var(--crimson); border: 1px solid var(--gold); }
.loc-popover-item-dot.pre-ecumenical { background: var(--ink-lt);  border: 1px solid var(--gold); }

/* Stack badge on marker */
.marker-wrap {
  position: relative;
  width: 28px; height: 28px;
}
.stack-badge {
  display: none;
  position: absolute;
  top: -6px; right: -6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gold-lt);
  border: 1.5px solid var(--ink);
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.stack-badge.visible { display: flex; }

.loc-popover:empty {
  display: none;
}

/* show popover on marker-wrap hover, keep open while hovering popover */
.marker-wrap:hover .loc-popover,
.loc-popover:hover {
  opacity: 1;
  visibility: visible;
}

/* ── Hamburger Button ── */
#hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  margin-right: 4px;
}
#hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.2s;
}

/* ── Nav Overlay & Drawer ── */
#nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
}
#nav-overlay.open { display: block; }

#nav-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 290px;
  height: 100%;
  background: var(--ink);
  border-right: 2px solid var(--gold);
  z-index: 1200;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}
#nav-drawer.open { transform: translateX(0); }

#nav-drawer-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--ink-lt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
#nav-drawer-title {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
#nav-close {
  background: none;
  border: none;
  color: var(--parchment-dk);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  transition: color 0.2s;
}
#nav-close:hover { color: var(--gold-lt); }

#nav-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.nav-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 20px;
  text-decoration: none;
  border-bottom: 1px solid rgba(92,74,42,0.25);
  transition: background 0.12s;
}
.nav-item:hover { background: var(--ink-lt); }
.nav-item.active {
  background: rgba(184,134,11,0.08);
  border-left: 3px solid var(--gold);
  padding-left: 17px;
}
.nav-item-icon { flex-shrink: 0; margin-top: 3px; }
.nav-item-title {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: var(--parchment);
  line-height: 1.3;
}
.nav-item.active .nav-item-title { color: var(--gold-lt); }
.nav-item-subtitle {
  font-family: 'EB Garamond', serif;
  font-size: 0.77rem;
  font-style: italic;
  color: var(--parchment-dk);
  opacity: 0.65;
  margin-top: 3px;
}

/* ── Writings Page ── */
#writings-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#writings-canvas {
  flex: 1;
  width: 100%;
  display: block;
  cursor: grab;
  min-height: 0;
}
#writings-canvas.grabbing { cursor: grabbing; }

/* ── Tooltip (canvas hover) ── */
#writing-tooltip {
  display: none;
  position: fixed;
  background: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 7px 12px;
  pointer-events: none;
  z-index: 900;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  white-space: nowrap;
}
.writing-tooltip-name {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--gold-lt);
  margin-bottom: 2px;
}
.writing-tooltip-dates {
  font-family: 'EB Garamond', serif;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--parchment-dk);
  margin-bottom: 2px;
}
.writing-tooltip-author {
  font-family: 'EB Garamond', serif;
  font-size: 0.7rem;
  color: var(--parchment-dk);
  opacity: 0.75;
}

/* ── Minimap timeline bar (writings page) ── */
#writings-container #timeline-bar {
  padding: 8px 28px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#writings-container #timeline-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.timeline-hint {
  font-family: 'EB Garamond', serif;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--parchment-dk);
  opacity: 0.5;
  letter-spacing: 0;
}

#minimap-track {
  flex: 1;
  position: relative;
  min-height: 0;
}
#minimap-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

/* ── Writing Side Panel ── */
#writing-panel {
  position: absolute;
  top: 0; right: 0;
  width: var(--panel-w);
  height: calc(100% - var(--timeline-h));
  background: var(--parchment);
  border-left: 3px solid var(--gold);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#writing-panel.open { transform: translateX(0); }

#writing-panel-header {
  background: var(--ink);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
#writing-panel-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: var(--gold-lt);
  line-height: 1.3;
}
#writing-panel-dates {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--parchment-dk);
  background: var(--ink-lt);
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 2px 8px;
  white-space: nowrap;
  margin-top: 5px;
  display: inline-block;
}
#writing-panel-close {
  background: none; border: none;
  color: var(--parchment-dk);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  padding: 2px 4px;
  transition: color 0.2s;
}
#writing-panel-close:hover { color: var(--gold-lt); }

#writing-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--parchment-dk);
}

/* ── Thinkers Page ── */
#thinkers-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#thinkers-canvas {
  flex: 1;
  width: 100%;
  display: block;
  cursor: grab;
  min-height: 0;
}
#thinkers-canvas.grabbing { cursor: grabbing; }

#thinker-tooltip {
  display: none;
  position: fixed;
  background: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 7px 12px;
  pointer-events: none;
  z-index: 900;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  white-space: nowrap;
}
.thinker-tt-name {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--gold-lt);
  margin-bottom: 2px;
}
.thinker-tt-dates {
  font-family: 'EB Garamond', serif;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--parchment-dk);
  margin-bottom: 2px;
}
.thinker-tt-desc {
  font-family: 'EB Garamond', serif;
  font-size: 0.7rem;
  color: var(--parchment-dk);
  opacity: 0.8;
  max-width: 260px;
  white-space: normal;
  line-height: 1.4;
}

#thinkers-container #timeline-bar {
  padding: 8px 28px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#thinkers-container #timeline-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#thinkers-chart {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#thinkers-chart-guides {
  position: absolute;
  inset: 14px 28px;
  pointer-events: none;
  z-index: 0;
}

.century-guide {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(92,74,42,0.2);
}

.century-guide-label {
  position: absolute;
  top: 2px;
  font-family: 'Cinzel', serif;
  font-size: 0.52rem;
  color: var(--ink-lt);
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0.7;
}

#thinkers-chart-rows {
  position: absolute;
  inset: 14px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.thinker-page-row {
  flex: 1;
  position: relative;
}

.thinker-page-seg {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  border-radius: 3px;
  overflow: hidden;
  max-height: 2rem;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.3s;
}
.thinker-page-seg:hover {
  filter: brightness(1.25);
  z-index: 100;
  overflow: visible;
}
.thinker-page-seg.selected {
  filter: brightness(1.3);
  outline: 2px solid var(--gold-lt);
  outline-offset: 1px;
  z-index: 200;
  overflow: visible;
}
.thinker-page-seg.dimmed { opacity: 0.15; }

.thinker-page-seg-label {
  font-family: 'EB Garamond', serif;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255,255,255,0.92);
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65);
}
.thinker-page-seg:hover .thinker-page-seg-label,
.thinker-page-seg.selected .thinker-page-seg-label {
  overflow: visible;
  text-overflow: clip;
}

.thinker-page-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 8px 12px;
  white-space: nowrap;
  z-index: 900;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.thinker-page-seg:hover .thinker-page-tooltip { display: block; }
.thinker-page-tooltip-name {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--gold-lt);
  margin-bottom: 2px;
}
.thinker-page-tooltip-dates {
  font-family: 'EB Garamond', serif;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--parchment-dk);
  margin-bottom: 4px;
}
.thinker-page-tooltip-desc {
  font-family: 'EB Garamond', serif;
  font-size: 0.72rem;
  color: var(--parchment-dk);
  opacity: 0.85;
  max-width: 240px;
  white-space: normal;
  line-height: 1.4;
}

/* ── Thinker Side Panel ── */
#thinker-panel {
  position: absolute;
  top: 0; right: 0;
  width: var(--panel-w);
  height: calc(100% - var(--timeline-h));
  background: var(--parchment);
  border-left: 3px solid var(--gold);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#thinker-panel.open { transform: translateX(0); }

#thinker-panel-header {
  background: var(--ink);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
#thinker-panel-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: var(--gold-lt);
  line-height: 1.3;
}
#thinker-panel-dates {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--parchment-dk);
  background: var(--ink-lt);
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 2px 8px;
  white-space: nowrap;
  margin-top: 5px;
  display: inline-block;
}
#thinker-panel-close {
  background: none; border: none;
  color: var(--parchment-dk);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  padding: 2px 4px;
  transition: color 0.2s;
}
#thinker-panel-close:hover { color: var(--gold-lt); }

#thinker-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--parchment-dk);
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  /* Anchor dropdown to header so it spans full width */
  #layers-wrap {
    position: static;
  }

  #layers-dropdown {
    left: 0;
    right: 0;
    width: auto;
    min-width: unset;
    top: 100%;
  }

  /* Side panels full width */
  #panel,
  #writing-panel,
  #thinker-panel {
    width: 100%;
  }

  /* Nav drawer full width */
  #nav-drawer {
    width: 100%;
  }
}