/* ============================================================================
   EMPIRESCOPE — a classic-cartography atlas of empires.
   Paper panels · sepia ink · muted political fills · soft-blue sea · serif labels.
   ========================================================================== */

:root {
  --paper:      #f5eeda;
  --paper-2:    #efe6cd;
  --paper-3:    #e7dbbd;
  --edge:       #d7c9a4;
  --edge-soft:  #e2d7ba;

  --ink:        #2e2716;
  --ink-soft:   #5c4e2f;
  --ink-faint:  #8a7a55;

  --sea:        #a7c3d0;
  --land:       #ece3cd;

  --accent:     #a8433a;   /* carmine — playhead, active, capitals */
  --accent-ink: #7f2f28;
  --brass:      #a9803a;   /* secondary accent */
  --green:      #4c7f52;

  --playhead:   #a8433a;

  --radius:     12px;
  --radius-sm:  8px;
  --shadow:     0 8px 30px rgba(58,42,18,.20), 0 2px 6px rgba(58,42,18,.12);
  --shadow-sm:  0 3px 12px rgba(58,42,18,.16);

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --topbar-h: 58px;
  --timeline-h: 138px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sea);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; color: inherit; }
a { color: var(--accent-ink); }

#app { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; }
.maplibregl-canvas { outline: none; }

/* faint vignette so the plate feels like an engraved map, not a flat screen */
#app::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  background: radial-gradient(120% 120% at 50% 42%, transparent 58%, rgba(56,42,18,.14) 100%);
}

/* ---- MapLibre chrome ------------------------------------------------------ */
.maplibregl-ctrl-group {
  background: var(--paper) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius-sm) !important;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--edge-soft) !important; }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter: sepia(.5) saturate(.6) brightness(.55); }
/* keep the zoom control clear of the time-river + hover readout */
.maplibregl-ctrl-bottom-right { bottom: calc(var(--timeline-h) + 8px); }

/* ============================================================================
   Map labels (DOM overlay)
   ========================================================================== */
#mapLabels {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: 3;
}
.mapLabel {
  position: absolute; top: 0; left: 0;
  font-family: var(--serif);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: #2b2213;
  white-space: nowrap;
  text-shadow:
     0 0 2px var(--land), 0  0  3px var(--land),
     1px 1px 0 rgba(245,238,218,.9), -1px -1px 0 rgba(245,238,218,.9),
     1px -1px 0 rgba(245,238,218,.9), -1px 1px 0 rgba(245,238,218,.9);
  transition: opacity .18s ease;
}
.mapLabel.is-proposed { font-style: italic; color: #5a4a2c; }
.mapLabel.is-dim { opacity: .5; font-weight: 500; }
.mapLabel.is-selected {
  font-size: 15px; font-weight: 700;
  color: #241a0c;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(245,238,218,.82);
  box-shadow: inset 0 0 0 1.5px var(--chip, var(--accent)), 0 2px 8px rgba(56,42,18,.25);
  text-shadow: none;
}

/* ============================================================================
   Top bar
   ========================================================================== */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  z-index: 20;
  background: linear-gradient(180deg, rgba(247,240,224,.96), rgba(244,236,217,.9));
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 2px 14px rgba(58,42,18,.14);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }
.brand-mark { color: var(--accent); font-size: 18px; transform: translateY(1px); }
.brand-name {
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  letter-spacing: .04em; color: var(--ink);
}
.brand-sub {
  font-size: 11.5px; color: var(--ink-faint); letter-spacing: .14em;
  text-transform: uppercase;
}

/* search combobox */
.search {
  position: relative; flex: 1 1 auto; max-width: 540px; margin: 0 auto;
  display: flex; align-items: center;
}
.search-icon {
  position: absolute; left: 13px; color: var(--ink-faint); font-size: 16px; pointer-events: none;
}
.search-input {
  width: 100%; height: 38px;
  padding: 0 14px 0 36px;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--edge);
  border-radius: 999px; outline: none;
  box-shadow: inset 0 1px 2px rgba(58,42,18,.08);
  transition: border-color .15s, box-shadow .15s;
}
.search-input::placeholder { color: var(--ink-faint); }
.search-input:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(169,128,58,.18), inset 0 1px 2px rgba(58,42,18,.06);
}
.search-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--paper); border: 1px solid var(--edge);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 6px; max-height: min(64vh, 520px); overflow-y: auto;
  display: none; z-index: 30;
}
.search.open .search-menu { display: block; }

.menu-section {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); padding: 8px 10px 4px;
}
.menu-msg { padding: 12px 10px; color: var(--ink-soft); font-size: 13px; }
.menu-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13.5px;
}
.menu-row.is-active { background: var(--paper-3); }
.menu-row .swatch {
  width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto;
  border: 1px solid rgba(58,42,18,.35);
}
.menu-row .name { font-family: var(--serif); font-weight: 600; color: var(--ink); flex: 1 1 auto; }
.menu-row .name mark { background: rgba(169,128,58,.32); color: inherit; border-radius: 2px; padding: 0 1px; }
.menu-row .life { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.menu-row .spark { opacity: .9; flex: 0 0 auto; }
.menu-row.absent { opacity: .62; }
.menu-row .ctx { font-size: 11px; color: var(--ink-faint); }
.menu-row .ctx.wd { color: var(--brass); }
.year-row, .surprise-row { font-family: var(--serif); }
.year-row .jump { color: var(--accent); font-size: 15px; }
.year-row .year-label { flex: 1 1 auto; font-weight: 600; }
.year-row .year-note { font-size: 11.5px; color: var(--ink-faint); }
.year-row kbd {
  font-family: var(--sans); font-size: 10.5px; color: var(--ink-soft);
  background: var(--paper-3); border: 1px solid var(--edge);
  border-radius: 4px; padding: 1px 6px;
}
.surprise-row { color: var(--accent-ink); font-weight: 600; }

/* toggles + icon buttons */
.topbar-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.seg {
  display: inline-flex; background: var(--paper-2);
  border: 1px solid var(--edge); border-radius: 999px; padding: 2px; gap: 2px;
}
.seg button {
  border: 0; background: transparent; color: var(--ink-soft);
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.seg button.active { background: var(--accent); color: #fbeee0; box-shadow: var(--shadow-sm); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--paper-2); border: 1px solid var(--edge); color: var(--ink-soft);
  font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--paper-3); color: var(--ink); }
.icon-btn.sm { width: 26px; height: 26px; font-size: 12px; }
.icon-btn.play { color: var(--accent); }
.icon-btn.play.playing { background: var(--accent); color: #fbeee0; border-color: var(--accent); }

/* ============================================================================
   Hover readout
   ========================================================================== */
#hoverReadout {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--timeline-h) + 14px);
  z-index: 12;
  background: rgba(245,238,218,.94); border: 1px solid var(--edge);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--ink);
  box-shadow: var(--shadow-sm); pointer-events: none;
  font-family: var(--serif);
}
#hoverReadout strong { font-weight: 700; }

/* ============================================================================
   Empire card
   ========================================================================== */
#card {
  position: fixed; top: calc(var(--topbar-h) + 12px); right: 14px;
  width: 358px; max-width: calc(100vw - 28px);
  max-height: calc(100vh - var(--topbar-h) - var(--timeline-h) - 30px);
  overflow-y: auto;
  background: var(--paper); border: 1px solid var(--edge);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 18px 16px; z-index: 14;
  opacity: 0; transform: translateX(18px) scale(.99);
  pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
body.card-open #card { opacity: 1; transform: none; pointer-events: auto; }

.card-close {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--paper-2); border: 1px solid var(--edge); color: var(--ink-soft); font-size: 12px;
}
.card-close:hover { background: var(--paper-3); color: var(--ink); }
.card-head { display: flex; align-items: center; gap: 10px; padding-right: 30px; }
.card-swatch {
  width: 18px; height: 18px; border-radius: 4px; flex: 0 0 auto;
  border: 1px solid rgba(58,42,18,.4);
}
.card-title { font-family: var(--serif); font-size: 24px; font-weight: 700; margin: 0; line-height: 1.1; color: var(--ink); }
.card-era { margin-top: 4px; color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.card-era .mut { color: var(--ink-faint); }
.card-desc {
  margin: 12px 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  font-family: var(--serif); border-left: 2px solid var(--edge); padding-left: 11px;
}
.card-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--edge-soft); font-size: 13px;
}
.card-line .k { color: var(--ink-faint); }
.card-line .v { color: var(--ink); font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
.card-line.absent .k { color: var(--accent-ink); }
.linkbtn {
  background: none; border: 0; color: var(--accent-ink); font-size: 12.5px;
  font-weight: 600; padding: 2px 4px; text-decoration: underline; text-underline-offset: 2px;
}
.card-links { display: flex; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.chip {
  font-size: 12px; text-decoration: none; color: var(--ink-soft);
  background: var(--paper-2); border: 1px solid var(--edge);
  border-radius: 999px; padding: 4px 11px; transition: background .15s;
}
.chip:hover { background: var(--paper-3); }
.card-actions { display: flex; gap: 8px; margin-top: 14px; }
.btn {
  flex: 1 1 auto; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; text-align: center;
  background: var(--accent); color: #fbeee0; border: 1px solid var(--accent);
  box-shadow: var(--shadow-sm); transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn.subtle { background: var(--paper-2); color: var(--ink-soft); border-color: var(--edge); box-shadow: none; }
.btn.subtle:hover { background: var(--paper-3); color: var(--ink); }

.card-adv { margin-top: 14px; border-top: 1px solid var(--edge-soft); padding-top: 6px; }
.card-adv summary {
  font-size: 12px; color: var(--ink-faint); cursor: pointer; padding: 6px 0;
  list-style: none; user-select: none;
}
.card-adv summary::-webkit-details-marker { display: none; }
.card-adv summary::before { content: "\25B8  "; color: var(--ink-faint); }
.card-adv[open] summary::before { content: "\25BE  "; }
.card-empty { padding: 6px 2px; }
.card-empty h2 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.card-empty p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 8px; }
.card-empty .hint { font-size: 12px; color: var(--ink-faint); }

/* QA rows / key-values shared by card + panel */
.qa-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; max-height: 230px; overflow-y: auto; }
.qa-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border-radius: 6px; font-size: 12px; text-align: left;
  background: var(--paper-2); border: 1px solid var(--edge-soft); color: var(--ink-soft);
}
.qa-row:hover { background: var(--paper-3); }
.qa-row .cid { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-faint); }
.qa-row .apx { margin-left: auto; font-variant-numeric: tabular-nums; }
.badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 4px; font-weight: 700;
}
.badge.direct { background: rgba(76,127,82,.18); color: var(--green); }
.badge.proposed { background: rgba(79,121,196,.18); color: #3f66b0; }
.badge.unnamed { background: rgba(198,95,82,.18); color: var(--accent-ink); }
.kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin-top: 10px; font-size: 12px; }
.kvs.wide { grid-template-columns: 1fr; }
.kvs > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--edge); padding-bottom: 3px; }
.kvs .k { color: var(--ink-faint); }
.card-adv pre {
  font-size: 11px; background: var(--paper-2); border: 1px solid var(--edge-soft);
  border-radius: 6px; padding: 10px; overflow-x: auto; color: var(--ink-soft); max-height: 260px;
}
.mut { color: var(--ink-faint); }

/* ============================================================================
   Advanced / QA panel
   ========================================================================== */
#qaPanel {
  position: fixed; top: calc(var(--topbar-h) + 12px); left: 14px;
  width: 300px; max-width: calc(100vw - 28px);
  background: var(--paper); border: 1px solid var(--edge);
  border-radius: var(--radius); box-shadow: var(--shadow);
  z-index: 15; overflow: hidden;
  opacity: 0; transform: translateX(-18px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
body.qa-open #qaPanel { opacity: 1; transform: none; pointer-events: auto; }
.qaHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--edge-soft);
  font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--ink);
}
.qaBody { padding: 12px 14px 14px; }
.qa-h { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-right: 6px; }
.qa-modes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.qa-mode {
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--edge); color: var(--ink-soft); font-weight: 600;
}
.qa-mode.active { background: var(--brass); color: #fbf2df; border-color: var(--brass); }
.qa-toggles { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.qa-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.qa-chk input { accent-color: var(--accent); }
.qa-stats { margin-bottom: 10px; }
.statbar {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--paper-3); border: 1px solid var(--edge-soft);
}
.statseg { height: 100%; }
.qa-nums { font-size: 11px; color: var(--ink-faint); margin-top: 5px; font-variant-numeric: tabular-nums; }
.qa-listwrap { margin-top: 6px; }

/* ============================================================================
   Time-river
   ========================================================================== */
#timeline {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--timeline-h);
  z-index: 16;
  background: linear-gradient(180deg, rgba(245,238,218,.90), rgba(240,231,205,.97));
  border-top: 1px solid var(--edge);
  box-shadow: 0 -3px 18px rgba(58,42,18,.16);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column;
  padding: 8px 16px 10px;
  user-select: none;
}
.timeline-top { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.transport { display: flex; align-items: center; gap: 6px; }
.transport .icon-btn { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
.speedBtn {
  min-width: 38px; height: 30px; padding: 0 8px; border-radius: 8px;
  background: var(--paper-2); border: 1px solid var(--edge); color: var(--ink-soft);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.year-display { display: flex; align-items: baseline; gap: 5px; margin: 0 auto 0 4px; position: relative; }
.year-main {
  font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.year-era { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: .06em; }
.year-note {
  position: absolute; top: calc(100% + 2px); left: 0; white-space: nowrap;
  font-size: 11px; color: var(--ink-faint);
}
.tl-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.zoomReset {
  height: 30px; padding: 0 12px; border-radius: 8px;
  background: var(--paper-2); border: 1px solid var(--edge); color: var(--ink-soft);
  font-size: 12px; font-weight: 600;
}
.zoomReset:hover { background: var(--paper-3); color: var(--ink); }

/* the river itself */
.river {
  position: relative; flex: 1 1 auto; min-height: 54px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(231,219,189,.55), rgba(236,227,205,.35));
  border: 1px solid var(--edge-soft);
  overflow: hidden;
}
.riverCanvas, .eraBands, .lifespanBands, .axisTicks, .ghost, .playhead {
  position: absolute; inset: 0; pointer-events: none;
}
.riverCanvas { z-index: 1; }
.eraBands { z-index: 2; }
.axisTicks { z-index: 3; }
.lifespanBands { z-index: 4; }
.ghost { z-index: 5; }
.playhead { z-index: 6; }
/* one unified scrub target on top so the whole river is draggable (no dead zones) */
.river-track {
  position: absolute; inset: 0; z-index: 7;
  pointer-events: auto; cursor: ew-resize; outline: none;
}
.river-track:focus-visible { box-shadow: inset 0 0 0 2px rgba(169,128,58,.5); border-radius: var(--radius-sm); }
#timeline.scrubbing .river-track { cursor: grabbing; }

/* era bands */
.eraBand { position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-start; overflow: hidden; }
.eraBand.alt { background: rgba(120,98,60,.05); }
.eraBand span {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); padding: 3px 6px; white-space: nowrap;
}
.eraBand + .eraBand { border-left: 1px solid rgba(120,98,60,.14); }

/* axis ticks */
.axisTick {
  position: absolute; top: auto; bottom: 3px; transform: translateX(-50%);
  font-size: 10.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.axisTick::before {
  content: ""; position: absolute; left: 50%; bottom: 100%;
  width: 1px; height: 6px; background: rgba(72,55,34,.3); transform: translateX(-50%);
}
.axisTick.pivot { color: var(--accent-ink); font-weight: 700; }

/* lifespan bands */
.lifespanBar {
  position: absolute; height: 5px; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(46,34,16,.28) inset, 0 1px 3px var(--glow, rgba(46,34,16,.2));
}
.lifespanBar.primary { height: 7px; box-shadow: 0 0 0 1px rgba(46,34,16,.4) inset, 0 1px 6px var(--glow, rgba(46,34,16,.3)); }
.bandConnector { position: absolute; height: 0; border-top: 1.5px dotted var(--band, rgba(46,34,16,.4)); }
.peakMark {
  position: absolute; width: 7px; height: 7px; transform: translate(-50%, -1px) rotate(45deg);
  border: 1px solid rgba(46,34,16,.55); border-radius: 1px;
}

/* ghost (hover preview) + playhead */
.ghost .ghostLabel {
  position: absolute; top: 2px; left: 0; transform: translateX(-50%);
  font-size: 10.5px; color: var(--ink-soft); background: rgba(245,238,218,.9);
  border: 1px solid var(--edge); border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.ghost::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  border-left: 1px dashed rgba(72,55,34,.45);
}
.playhead { right: auto; width: 0; }
.playhead .playhead-stem {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: var(--tint, var(--playhead)); transform: translateX(-1px);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--tint, var(--playhead)) 55%, transparent);
}
.playhead .playhead-stem::before,
.playhead .playhead-stem::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.playhead .playhead-stem::before { top: -1px; border-top: 6px solid var(--tint, var(--playhead)); }
.playhead .playhead-stem::after { bottom: -1px; border-bottom: 6px solid var(--tint, var(--playhead)); }
.playhead.offscreen { opacity: 0; }

/* overview rail (mini-map of the whole span, when zoomed) */
.overviewRail {
  position: relative; height: 8px; margin-top: 8px; border-radius: 999px;
  background: var(--paper-3); border: 1px solid var(--edge-soft);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.overviewRail.zoomed { opacity: 1; pointer-events: auto; cursor: pointer; }
.overviewBrush {
  position: absolute; top: -1px; bottom: -1px;
  background: rgba(169,128,58,.28); border: 1px solid var(--brass); border-radius: 999px;
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 720px) {
  :root { --timeline-h: 128px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 18px; }
  #card { top: auto; bottom: calc(var(--timeline-h) + 10px); right: 8px; left: 8px; width: auto; max-height: 46vh; }
  #qaPanel { left: 8px; right: 8px; width: auto; }
  .search { max-width: none; }
  .search-input::placeholder { color: transparent; }
}

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

/* ---- Reimagined atlas layers -------------------------------------------- */
#app::before {
  content: "";
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: .026;
  background-image:
    url("data:image/png;base64,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"),
    repeating-radial-gradient(circle at 17% 23%, #3c2d18 0 .35px, transparent .55px 4px),
    repeating-radial-gradient(circle at 71% 67%, #fff 0 .3px, transparent .5px 5px);
  background-size: 64px 64px, 11px 13px, 17px 19px;
  mix-blend-mode: multiply;
}

.band-crossfade-frame {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 1; transition: opacity 160ms ease-out;
}
.band-crossfade-frame.fade { opacity: 0; }

#card.empty {
  opacity: .96; transform: none; pointer-events: auto;
  top: calc(var(--topbar-h) + 18px); right: 18px;
}
.empty-stories { display: grid; gap: 6px; margin: 12px 0; }
.story-pick {
  text-align: left; border: 1px solid var(--edge); background: var(--paper-2);
  border-radius: 8px; padding: 8px 10px; font-family: var(--serif); font-weight: 700;
}
.story-pick:hover { background: var(--paper-3); }

.mapLabel.tier-minor { font-size: 11.5px; font-style: italic; font-weight: 500; }
.mapLabel.tier-medium { font-size: 15px; }
.mapLabel.tier-major { font-size: 18px; letter-spacing: .1em; font-variant: small-caps; }
.cityLabel {
  position: absolute; top: 0; left: 0; font-family: var(--serif); font-size: 11px;
  color: #394441; white-space: nowrap; text-shadow: 0 0 3px var(--land), 1px 1px var(--land);
}
.cityLabel.is-capital { color: #7f2f28; font-weight: 700; }
.cityLabel.is-capital::before { content: "★ "; font-size: 8px; }

#hoverReadout.cursor-tip {
  left: 0; bottom: auto; transform: none; border-radius: 8px; padding: 6px 10px;
}

.life-track {
  position: relative; width: 62px; height: 8px; flex: 0 0 62px;
  border-radius: 999px; background: rgba(120,98,60,.13); overflow: hidden;
}
.life-track i { position: absolute; top: 1px; bottom: 1px; border-radius: 999px; }
.story-row strong { display: block; font-family: var(--serif); }
.story-row .ctx { display: block; margin-top: 2px; }
.thread-section { color: var(--accent-ink); border-top: 1px solid var(--edge-soft); font-family: var(--serif); text-transform: none; letter-spacing: .02em; }
.preset-row, .showall-row { color: var(--accent-ink); font-weight: 650; }

.presence { margin: 10px 0 4px; font-size: 12.5px; color: var(--green); }
.presence.absent { color: var(--accent-ink); }
.area-chart-wrap { position: relative; margin: 13px 0 8px; }
.chart-label { display: flex; justify-content: space-between; color: var(--ink-faint); font-size: 10.5px; margin-bottom: 4px; }
.area-chart { display: block; width: 100%; height: 58px; cursor: ew-resize; border-bottom: 1px solid var(--edge); }
.area-fill { opacity: .42; }
.area-line { fill: none; stroke: var(--ink-soft); stroke-width: 1.2; }
.peak-cursor { stroke: var(--brass); stroke-width: 1; stroke-dasharray: 2 2; }
.current-cursor { stroke: var(--accent); stroke-width: 1.5; }
.chart-hover {
  position: absolute; bottom: 2px; transform: translate(-50%, 100%); z-index: 2;
  font-size: 10px; white-space: nowrap; background: var(--ink); color: var(--paper); padding: 2px 5px; border-radius: 4px;
}
.superlative { margin: 10px 0; font-family: var(--serif); color: var(--accent-ink); font-size: 13px; }
.succession { display: grid; gap: 5px; margin: 10px 0; }
.succession-chip { border: 1px solid var(--edge); background: var(--paper-2); border-radius: 999px; padding: 5px 9px; text-align: left; font-size: 11.5px; }
.card-actions { flex-wrap: wrap; }
.card-actions .primary { flex-basis: 100%; }
.qa-language { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-soft); margin: 4px 0 12px; }
.qa-language select { background: var(--paper-2); color: var(--ink); border: 1px solid var(--edge); border-radius: 6px; padding: 4px 7px; }

.eraBand { overflow: hidden; }
.eraBand.row-bottom { align-items: flex-start; }
.eraBand.row-bottom span { margin-top: 14px; }
.eraBand.era-0 { background: rgba(157,111,50,.055); }
.eraBand.era-1 { background: rgba(139,72,48,.045); }
.eraBand.era-2 { background: rgba(177,135,45,.045); }
.eraBand.era-3 { background: rgba(70,79,119,.04); }
.eraBand.era-4 { background: rgba(79,111,94,.045); }
.eraBand.era-5 { background: rgba(65,88,123,.045); }
.lifespanBar { pointer-events: auto; cursor: pointer; }
.lifespanBands { z-index: 8; }
.eventPips { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.eventPip {
  position: absolute; top: 43%; width: 5px; height: 5px; transform: translate(-50%,-50%);
  border: 0; border-radius: 50%; padding: 0; background: var(--accent); pointer-events: auto;
  box-shadow: 0 0 0 2px rgba(245,238,218,.7);
}

#attribution {
  position: fixed; left: 8px; bottom: calc(var(--timeline-h) + 5px); z-index: 13;
  padding: 3px 7px; border-radius: 5px; background: rgba(245,238,218,.78);
  color: #66583a; font-size: 9.5px; pointer-events: auto; backdrop-filter: blur(3px);
}
#attribution a { color: inherit; text-decoration-color: rgba(102,88,58,.45); }

#storyCard {
  position: fixed; left: 14px; bottom: calc(var(--timeline-h) + 26px); z-index: 19;
  width: min(390px, calc(100vw - 28px)); padding: 16px 18px;
  border: 1px solid var(--edge); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow);
}
.story-close { position: absolute; right: 10px; top: 10px; border: 0; background: transparent; }
.story-kicker { padding-right: 25px; color: var(--accent-ink); font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; }
#storyCard h2 { font: 700 21px var(--serif); margin: 5px 24px 6px 0; }
#storyCard p { font: 14px/1.5 var(--serif); color: var(--ink-soft); margin: 0 0 14px; }
.story-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.story-nav button { border: 1px solid var(--edge); background: var(--paper-2); border-radius: 7px; padding: 6px 9px; }
.story-dots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.story-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--edge); }
.story-dot.active { background: var(--accent); transform: scale(1.35); }
#resumeStory { position: fixed; left: 16px; bottom: calc(var(--timeline-h) + 12px); z-index: 20; background: var(--ink); color: var(--paper); padding: 7px 10px; border-radius: 999px; font-size: 12px; }
#resumeStory button { border: 0; background: transparent; color: #f4d698; text-decoration: underline; }

#miniCard {
  position: fixed; left: 50%; top: calc(var(--topbar-h) + 16px); transform: translateX(-50%);
  z-index: 18; width: min(330px, calc(100vw - 24px)); padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow);
}
#miniCard h3 { margin: 0 24px 5px 0; font: 700 18px var(--serif); }
#miniCard p { margin: 4px 0; font-size: 12.5px; color: var(--ink-soft); }
.mini-close { position: absolute; right: 8px; top: 8px; border: 0; background: transparent; }

#placePanel {
  position: fixed; left: 14px; top: calc(var(--topbar-h) + 14px); bottom: calc(var(--timeline-h) + 26px);
  z-index: 18; width: min(340px, calc(100vw - 28px)); overflow: auto;
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
}
#placePanel h2 { font: 700 21px var(--serif); margin: 0 28px 4px 0; }
.place-strip { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.place-run { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; border: 1px solid var(--edge-soft); background: var(--paper-2); border-radius: 7px; padding: 7px; text-align: left; }
.place-run i { align-self: stretch; border-radius: 4px; }
.place-run small { color: var(--ink-faint); }
.place-pick-mode #map { cursor: crosshair; }

#eventToasts { position: fixed; inset: 0; z-index: 18; pointer-events: none; }
.event-toast { position: absolute; transform: translate(-50%,-120%); background: rgba(245,238,218,.94); border: 1px solid var(--edge); box-shadow: var(--shadow-sm); border-radius: 9px; padding: 8px 11px; font: 13px var(--serif); animation: eventBloom 1.5s ease both; white-space: nowrap; }
@keyframes eventBloom { 0% { opacity: 0; transform: translate(-50%,-120%) scale(.85); } 20%,70% { opacity: 1; transform: translate(-50%,-120%); } 100% { opacity: 0; transform: translate(-50%,calc(-120% - 8px)); } }

#compareStrip {
  position: fixed; left: 50%; bottom: calc(var(--timeline-h) + 7px); transform: translateX(-50%);
  z-index: 14; width: min(620px, calc(100vw - 36px)); padding: 7px 9px;
  border: 1px solid var(--edge); border-radius: 9px; background: rgba(245,238,218,.92); box-shadow: var(--shadow-sm);
}
.compare-title { font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 3px; }
.compare-row { width: 100%; display: grid; grid-template-columns: 10px minmax(75px,1fr) 40px 90px 92px 16px; align-items: center; gap: 6px; border: 0; background: transparent; padding: 2px; font-size: 10.5px; text-align: left; }
.compare-swatch { width: 9px; height: 9px; border-radius: 2px; }
.compare-live { text-align: right; color: var(--ink-faint); }
.compare-bar { height: 5px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.compare-bar i { display: block; height: 100%; border-radius: inherit; transition: width .18s linear; }
.compare-row svg { width: 92px; height: 22px; }
.compare-row svg path { fill: none; stroke: var(--ink-faint); stroke-width: 1; }
.compare-remove { text-align: center; color: var(--accent-ink); font-size: 15px; }

#overture { position: fixed; inset: 0; z-index: 40; pointer-events: none; background: radial-gradient(circle, transparent 35%, rgba(32,24,12,.35)); }
.overture-skip { position: absolute; right: 18px; top: 18px; pointer-events: auto; border: 1px solid rgba(255,255,255,.5); background: rgba(32,24,12,.55); color: white; border-radius: 999px; padding: 7px 12px; }
.overture-era { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); color: #fff9e8; text-shadow: 0 2px 10px #1d160b; font: 700 clamp(23px,4vw,48px) var(--serif); white-space: nowrap; }
.overture-era.is-entering { animation: overtureEra 3.9s ease both; }
@keyframes overtureEra { 0% { opacity: 0; transform: translate(-50%,8px); } 12%,84% { opacity: 1; transform: translate(-50%,0); } 100% { opacity: 0; transform: translate(-50%,-5px); } }
.coachmark { position: fixed; z-index: 42; width: 260px; background: var(--ink); color: var(--paper); border-radius: 9px; padding: 10px 12px; box-shadow: var(--shadow); font: 13px/1.4 var(--serif); animation: coach 2.3s ease both; }
@keyframes coach { 0%,100% { opacity: 0; transform: translateY(5px); } 12%,82% { opacity: 1; transform: none; } }

#recordDialog {
  width: min(470px, calc(100vw - 28px)); padding: 0; color: var(--ink);
  border: 1px solid var(--edge); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow);
}
#recordDialog::backdrop { background: rgba(30,23,13,.42); backdrop-filter: blur(2px); }
#recordForm { position: relative; padding: 22px; }
#recordForm h2 { margin: 0 30px 7px 0; font: 700 23px var(--serif); }
#recordForm p { margin: 0 0 18px; color: var(--ink-soft); font: 13px/1.5 var(--serif); }
.record-close { position: absolute; right: 12px; top: 12px; border: 0; background: transparent; }
.record-years { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.record-years label { color: var(--ink-faint); font-size: 11px; }
.record-years input { display: block; width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--edge); border-radius: 7px; background: var(--paper-2); color: var(--ink); font: 650 14px var(--sans); }
.record-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
#recordBtn.recording { color: #a51f20; animation: recordPulse 1s ease infinite alternate; }
@keyframes recordPulse { to { opacity: .45; } }

@media (max-width: 720px) {
  #card.empty { left: 8px; right: 8px; top: auto; }
  body.story-open #card { opacity: 0; visibility: hidden; pointer-events: none; }
  #storyCard { left: 8px; bottom: calc(var(--timeline-h) + 8px); }
  #compareStrip { display: none; }
  #attribution { max-width: calc(100vw - 86px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right .seg, #recordBtn { display: none; }
  .topbar-right { gap: 4px; }
  .topbar-right .icon-btn { width: 32px; }
  .overture-era { white-space: normal; width: 90vw; text-align: center; }
}

@media (hover: none) {
  #hoverReadout { left: 50% !important; top: auto !important; bottom: calc(var(--timeline-h) + 14px); transform: translateX(-50%); border-radius: 999px; }
}

@media (prefers-reduced-motion: reduce) {
  .event-toast { animation: none; opacity: 1; }
  .overture-era.is-entering { animation: none; opacity: 1; }
}