/* ───────────────────────────────────────────────────────────────────────
   Civilization
   Dark, quiet, cartographic. Hairlines instead of boxes, one accent,
   tabular numerals everywhere a number can change.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #070809;
  --ink:       #eef1f5;
  --ink-2:     #a8b0bb;
  --ink-3:     #6e7783;
  --ink-4:     #474e58;
  --hair:      rgba(255,255,255,0.075);
  --hair-2:    rgba(255,255,255,0.14);
  --panel:     rgba(10,11,13,0.72);
  --panel-2:   rgba(14,16,19,0.94);
  --accent:    #e9a44c;

  --rail-w:    306px;
  --tl-h:      152px;
  --ease:      cubic-bezier(.22,.61,.36,1);

  --sans: "PP Mori", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --pixel: "PP NeueBit", ui-monospace, "SF Mono", Menlo, monospace;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}

@font-face { font-family: "PP Mori"; src: url("fonts/pp-mori-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("fonts/pp-mori-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("fonts/pp-mori-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "PP NeueBit"; src: url("fonts/pp-neuebit-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans);
  font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: rgba(233,164,76,0.28); }

/* A single utility for the small tracked-out labels used throughout. */
.label, .rail-head .label, .pop-title {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3); font-weight: 500;
}

/* ── globe ─────────────────────────────────────────────────────────── */
#globe { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#globe:active { cursor: grabbing; }

.labels { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.glabel {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 10.5px; letter-spacing: 0.06em; white-space: nowrap;
  color: var(--ink); text-shadow: 0 0 10px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,1);
}
.glabel.muted { color: var(--ink-2); font-size: 9.5px; opacity: 0.75; }
.glabel.event { color: var(--c); }

/* ── top bar ───────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 20;
  display: flex; align-items: center; justify-content: flex-start; gap: 18px;
  padding: 0 18px;
  background: linear-gradient(to bottom, rgba(7,8,9,0.88), rgba(7,8,9,0));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-name { font-size: 17px; letter-spacing: 0.01em; font-weight: 900; }

.topbar-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--hair); border-radius: 3px;
  font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2);
  background: rgba(12,13,16,0.55); backdrop-filter: blur(12px);
  transition: color .16s, border-color .16s, background .16s;
}
.btn:hover { color: var(--ink); border-color: var(--hair-2); background: rgba(20,22,26,0.7); }
.btn.on { color: var(--ink); border-color: var(--hair-2); }
.btn-icon { width: 28px; padding: 0; justify-content: center; }
.btn .ico { font-size: 13px; }
.chev { width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); opacity: .6; }

/* ── popovers ──────────────────────────────────────────────────────── */
.popover {
  position: fixed; top: 62px; right: 18px; z-index: 30; width: 244px;
  background: var(--panel-2); backdrop-filter: blur(20px);
  border: 1px solid var(--hair); border-radius: 4px;
  padding: 13px 14px 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.6);
  animation: pop .16s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-5px); } }
.pop-title { margin-bottom: 10px; display: block; }
.pop-sep { height: 1px; background: var(--hair); margin: 11px -14px; }
.pop-body { display: flex; flex-direction: column; gap: 1px; }

.chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 6px; border-radius: 3px; cursor: pointer;
  font-size: 11.5px; color: var(--ink-2);
  transition: background .14s, color .14s;
}
.chip:hover { background: rgba(255,255,255,0.045); color: var(--ink); }
.chip .sw { width: 12px; height: 3px; border-radius: 1px; background: var(--c); flex: none; transition: opacity .16s; }
.chip .n { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }
.chip.off { color: var(--ink-4); }
.chip.off .sw { opacity: 0.22; }

.toggle { display: flex; align-items: center; gap: 9px; padding: 5px 6px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.toggle:hover { color: var(--ink); }
.toggle input { appearance: none; width: 26px; height: 15px; border-radius: 8px; background: rgba(255,255,255,0.11); position: relative; cursor: pointer; transition: background .18s; flex: none; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink-3); transition: transform .18s var(--ease), background .18s; }
.toggle input:checked { background: rgba(233,164,76,0.30); }
.toggle input:checked::after { transform: translateX(11px); background: var(--accent); }

/* ── rails ─────────────────────────────────────────────────────────── */
.rail {
  position: fixed; top: 66px; bottom: calc(var(--tl-h) + 8px); z-index: 10;
  width: var(--rail-w); display: flex; flex-direction: column;
  pointer-events: none;
}
.rail > * { pointer-events: auto; }
.rail-left  { left: 18px; }
.rail-right { right: 18px; align-items: stretch; }
.rail::before {
  content: ""; position: fixed; top: 0; bottom: 0; width: 420px; z-index: -1;
  pointer-events: none;
}
.rail-left::before  { left: 0;  background: linear-gradient(to right, rgba(6,7,9,0.92) 0%, rgba(6,7,9,0.72) 42%, rgba(6,7,9,0) 100%); }
.rail-right::before { right: 0; background: linear-gradient(to left,  rgba(6,7,9,0.92) 0%, rgba(6,7,9,0.72) 42%, rgba(6,7,9,0) 100%); }
body.detail-open .rail-right::before { opacity: 0; }

.yearblock { padding: 10px 0 16px; }
.year {
  font-size: 42px; line-height: 1; font-weight: 200; letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.year .suf { font-size: 17px; font-weight: 300; color: var(--ink-3); margin-left: 7px; letter-spacing: 0.06em; }
.era { margin-top: 9px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); opacity: .9; }

.rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--hair); margin-bottom: 2px;
}
.rail-head .count { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

.civlist, .eventlist {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
  padding-bottom: 20px;
}
.civlist::-webkit-scrollbar, .eventlist::-webkit-scrollbar, .detail-body::-webkit-scrollbar, .spot-results::-webkit-scrollbar { width: 3px; }
.civlist::-webkit-scrollbar-thumb, .eventlist::-webkit-scrollbar-thumb, .detail-body::-webkit-scrollbar-thumb, .spot-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.13); border-radius: 2px; }
.civlist::-webkit-scrollbar-track, .eventlist::-webkit-scrollbar-track { background: transparent; }

/* civilization row */
.civ-row {
  display: grid; grid-template-columns: 7px 1fr auto; gap: 9px; align-items: center;
  width: 100%; text-align: left; padding: 7px 8px 7px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  transition: background .14s;
  position: relative;
}
.civ-row:hover { background: rgba(255,255,255,0.04); }
.civ-row.sel { background: rgba(255,255,255,0.065); }
.civ-row.sel::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1.5px; background: var(--c); }
.civ-dot { width: 3px; height: 18px; border-radius: 1px; background: var(--c); }
.civ-flag { width: 17px; height: 13px; border-radius: 2px; object-fit: cover; display: block;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10); }
.civ-main { min-width: 0; }
.civ-name { font-size: 12.5px; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.civ-sub { font-size: 10px; color: var(--ink-4); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.civ-life { width: 42px; height: 2px; background: rgba(255,255,255,0.10); position: relative; flex: none; }
.civ-life i { position: absolute; top: -2px; width: 2px; height: 6px; background: var(--c); transform: translateX(-1px); }
.civ-life b { position: absolute; left: 0; top: 0; height: 2px; background: rgba(255,255,255,0.22); }

/* event row */
.ev-row {
  width: 100%; text-align: left; padding: 9px 8px 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  position: relative; transition: background .14s;
}
.ev-row:hover { background: rgba(255,255,255,0.04); }
.ev-row::before { content: ""; position: absolute; left: 1px; top: 11px; width: 2px; height: 15px; border-radius: 1px; background: var(--c); }
.ev-year { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); letter-spacing: 0.04em; }
.ev-title { font-size: 12.5px; margin-top: 2px; color: var(--ink); }
.ev-cat { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c); opacity: .8; margin-top: 3px; }
.empty-note { padding: 18px 4px; font-size: 11.5px; color: var(--ink-4); line-height: 1.6; }

/* ── detail panel ──────────────────────────────────────────────────── */
.detail {
  position: fixed; top: 68px; right: 18px; width: 352px; z-index: 15;
  max-height: calc(100vh - var(--tl-h) - 78px);
  background: var(--panel-2); backdrop-filter: blur(22px);
  border: 1px solid var(--hair); border-radius: 4px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.66);
  animation: slidein .26s var(--ease);
}
@keyframes slidein { from { opacity: 0; transform: translateX(14px); } }
.detail-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 22px; height: 22px; border-radius: 3px; color: var(--ink-4); font-size: 11px;
  display: flex; align-items: center; justify-content: center; transition: color .14s, background .14s;
}
.detail-close:hover { color: var(--ink); background: rgba(255,255,255,0.07); }
.detail-body { overflow-y: auto; padding: 18px 18px 20px; }

.d-sphere { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c); }
.d-name { font-size: 21px; font-weight: 300; letter-spacing: -0.012em; margin: 7px 0 3px; line-height: 1.2; }
.d-kind { font-size: 11.5px; color: var(--ink-3); }
.d-span {
  display: flex; align-items: baseline; gap: 8px; margin: 15px 0 6px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
}
.d-span .dur { margin-left: auto; color: var(--ink-4); font-size: 10px; }
.d-bar { height: 2px; background: rgba(255,255,255,0.10); position: relative; margin-bottom: 17px; }
.d-bar i { position: absolute; top: -3px; width: 2px; height: 8px; background: var(--c); box-shadow: 0 0 6px var(--c); }
.d-bar b { position: absolute; left: 0; top: 0; height: 2px; background: var(--c); opacity: .38; }
.d-blurb { font-size: 13px; line-height: 1.62; color: #d3d9e1; }
.d-meta { margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 4px; }
.d-meta div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.035); }
.d-meta dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-4); padding-top: 2px; }
.d-meta dd { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.d-actions { display: flex; gap: 6px; margin-top: 16px; }
.d-actions .btn { flex: 1; justify-content: center; }

/* ── timeline ──────────────────────────────────────────────────────── */
.timeline {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--tl-h); z-index: 18;
  background: linear-gradient(to top, rgba(6,7,8,0.97) 62%, rgba(6,7,8,0.80) 88%, rgba(6,7,8,0));
  padding: 8px 18px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.tl-controls { display: flex; align-items: center; gap: 8px; height: 24px; }
.tl-btn {
  width: 26px; height: 24px; border-radius: 3px; color: var(--ink-3); font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; transition: color .14s, background .14s, border-color .14s;
}
.tl-btn:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.tl-play { width: 30px; border-color: var(--hair); }
.tl-play .tri { width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; margin-left: 2px; }
.tl-play.playing { color: var(--accent); border-color: rgba(233,164,76,0.35); background: rgba(233,164,76,0.08); }
.tl-play.playing .tri { border: 0; width: 7px; height: 9px; margin-left: 0; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.tl-speed { display: flex; gap: 1px; margin-left: 4px; }
.tl-speed button {
  height: 22px; padding: 0 8px; font-size: 10px; font-family: var(--mono);
  color: var(--ink-4); border-radius: 3px; transition: color .14s, background .14s;
}
.tl-speed button:hover { color: var(--ink-2); }
.tl-speed button.on { color: var(--ink); background: rgba(255,255,255,0.07); }

.tl-track { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tl-eras { position: relative; height: 16px; z-index: 3; }
/* Era names sit above the ribbon, in a box tall enough for their glyphs. */
.tl-era {
  position: absolute; top: 0; height: 16px;
  border-left: 1px solid var(--hair);
  display: flex; align-items: center;
  overflow: visible;                       /* narrow bands are dropped in JS, never clipped */
}
.tl-era span {
  display: block; line-height: 16px;
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--ink-3); padding-left: 5px; white-space: nowrap;
  text-shadow: 0 0 6px rgba(6,7,8,0.95), 0 0 2px rgba(6,7,8,1);
}

.tl-surface { position: relative; flex: 1; min-height: 0; cursor: col-resize; touch-action: none; }
.tl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-span {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: color-mix(in srgb, var(--c) 13%, transparent);
  border-left: 1px solid var(--c); border-right: 1px solid var(--c);
  box-shadow: inset 0 -1px 0 var(--c);
  animation: fade .2s var(--ease);
}
.tl-playhead {
  position: absolute; top: -16px; z-index: 5; bottom: 0; width: 1px; background: var(--ink);
  box-shadow: 0 0 9px rgba(255,255,255,0.5); pointer-events: none; transform: translateX(-0.5px);
}
.tl-playhead::before {
  content: ""; position: absolute; top: 0; left: -3px; width: 7px; height: 7px;
  background: var(--ink); transform: rotate(45deg) translateY(-1px); transform-origin: center;
}
/* Both readouts sit in the era-label row, so they carry their own ground. */
.tl-readout, .tl-hover {
  position: absolute; top: -16px; z-index: 5; transform: translateX(7px);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  pointer-events: none; white-space: nowrap;
  padding: 1px 5px; border-radius: 2px; background: rgba(6,7,8,0.94);
}
.tl-readout { color: var(--ink); }
.tl-hover { color: var(--ink-4); opacity: 0; transition: opacity .14s; }
.tl-readout.flip, .tl-hover.flip { transform: translateX(calc(-100% - 7px)); }
.timeline.hovering .tl-hover { opacity: 1; }

.tl-axis { position: relative; height: 14px; margin-top: 2px; }
.tl-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--mono); font-size: 8.5px; color: var(--ink-4); letter-spacing: 0.02em;
}
.tl-tick.bce { color: rgba(110,119,131,0.75); }

/* ── search results ──────────────────────────────────────────────── */
@keyframes fade { from { opacity: 0; } }
.spot-results { max-height: 46vh; overflow-y: auto; padding: 5px; }
.spot-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 11px; border-radius: 3px; transition: background .12s;
}
.spot-row.on, .spot-row:hover { background: rgba(255,255,255,0.07); }
.spot-row .sw { width: 3px; height: 16px; border-radius: 1px; background: var(--c); flex: none; }
.spot-row .flag { width: 17px; height: 13px; border-radius: 2px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.10); }
.spot-row .t { font-size: 13px; }
.spot-row .m { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.spot-empty { padding: 22px; text-align: center; color: var(--ink-4); font-size: 12px; }

/* ── help ──────────────────────────────────────────────────────────── */
.helpcard {
  position: fixed; top: 62px; right: 18px; z-index: 30; width: 262px;
  background: var(--panel-2); backdrop-filter: blur(20px);
  border: 1px solid var(--hair); border-radius: 4px; padding: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.6); animation: pop .16s var(--ease);
}
.helpcard dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 12px 0 0; }
.helpcard dt { font-family: var(--mono); font-size: 10px; color: var(--ink-2); white-space: nowrap; }
.helpcard dd { margin: 0; font-size: 11.5px; color: var(--ink-3); }


/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  :root { --rail-w: 264px; }
  .detail { width: 300px; }
}
@media (max-width: 900px) {
  :root { --tl-h: 126px; }
  .rail-right { display: none; }
  .rail-left { width: 214px; }
  .year { font-size: 32px; }
  .detail { width: min(320px, calc(100vw - 36px)); top: 66px; }
  .btn-label { display: none; }
  .btn { padding: 0 9px; }
  .rail::before { width: 300px; }
}

/* On a phone the globe is the point, so the list is capped to a short
   scrollable strip and everything else gets out of its way. */
@media (max-width: 620px) {
  :root { --tl-h: 116px; --rail-w: 100%; }
  .topbar { height: 44px; padding: 0 12px; }
  .rail-left { left: 12px; right: 12px; width: auto; top: 44px; }
  .rail-left::before { width: 100%; height: 420px; bottom: auto;
    background: linear-gradient(to bottom, rgba(6,7,9,0.94) 0%, rgba(6,7,9,0.72) 55%, rgba(6,7,9,0) 100%); }
  .yearblock { padding: 4px 0 10px; }
  .year { font-size: 30px; }
  .era { margin-top: 5px; font-size: 10px; }
  .civlist { max-height: 30vh; flex: none; }
  .civ-row { padding: 5px 6px 5px 3px; }
  .civ-name { font-size: 12px; }
  .civ-sub { display: none; }
  .civ-life { width: 30px; }
  .brand-name { display: none; }
  .detail { top: auto; bottom: calc(var(--tl-h) + 10px); right: 12px; left: 12px; width: auto;
    max-height: 46vh; }
  .tl-speed { display: none; }
  .helpcard, .popover { right: 12px; width: calc(100vw - 24px); max-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* The detail panel occupies the same corner as the right rail. */
body.detail-open .rail-right { visibility: hidden; }
.civ-row.hov { background: rgba(255,255,255,0.05); }


/* ── left-rail additions ───────────────────────────────────────────── */
.subline { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.subline b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

.legend { margin: -4px 0 16px; }
.legend-bar {
  height: 5px; border-radius: 1px;
  background: linear-gradient(to right, #243446 0%, #2f6272 25%, #4f9b8f 45%, #c9b25a 62%, #ec8446 80%, #fff0d2 100%);
}
.legend-ticks { position: relative; height: 13px; margin-top: 4px; }
.legend-ticks span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 9px; color: var(--ink-4); }
.legend-unit { font-size: 9.5px; color: var(--ink-4); letter-spacing: 0.04em; }

.civ-row { grid-template-columns: 17px 1fr auto auto; }
.civ-row .civ-dot { justify-self: center; }
.civ-val { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.civ-val:empty { display: none; }

.ev-row.milestone { cursor: default; padding-left: 12px; }
.ev-row.milestone::before { background: var(--accent); }
.ev-row.milestone .ev-title { font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.ev-row.milestone:hover { background: none; }

/* ── detail additions ──────────────────────────────────────────────── */
.d-span .arr { color: var(--ink-4); }
.d-kind.mono { font-family: var(--mono); }
.d-figure { margin: 14px 0 12px; display: flex; align-items: baseline; gap: 8px; }
.d-figure span { font-size: 26px; font-weight: 200; letter-spacing: -0.015em; }
.d-figure small { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 16px;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.d-stats div { padding: 8px 0; }
.d-stats dt { font-size: 9px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-4); }
.d-stats dd { margin: 3px 0 0; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }

.d-chart { margin: 16px 0 4px; }
.d-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.d-chart-val { font-family: var(--mono); font-size: 10px; color: var(--ink-2); }
.spark { display: block; width: 100%; height: 54px; overflow: visible; }
.spark-area { fill: var(--c); opacity: 0.16; }
.spark-line { fill: none; stroke: var(--c); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.spark-now { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.d-chart-axis { display: flex; justify-content: space-between; margin-top: 4px;
  font-family: var(--mono); font-size: 9px; color: var(--ink-4); }

.d-also { margin-top: 14px; }
.d-also .label { display: block; margin-bottom: 7px; }
.d-also-list { display: flex; flex-wrap: wrap; gap: 5px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border: 1px solid var(--hair); border-radius: 11px; font-size: 11px; color: var(--ink-2);
  transition: border-color .14s, color .14s;
}
.pill:hover { color: var(--ink); border-color: var(--hair-2); }
.pill .sw { width: 10px; height: 3px; border-radius: 1px; background: var(--c); }
.btn.wide { width: 100%; justify-content: center; }

@media (max-width: 900px) {
}
/* On a phone there is no room beside the brand and actions, so the view
   switcher gets its own full-width row and the rail moves down to make room. */
@media (max-width: 620px) {
  .detail { top: auto; }
  .legend { margin-bottom: 10px; }
}


/* ── countries view ────────────────────────────────────────────────── */
.colorby { margin: -4px 0 14px; }
.colorby .label { display: block; margin-bottom: 7px; }
.colorby-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.colorby-opts button {
  height: 22px; padding: 0 9px; border-radius: 11px; font-size: 10.5px; letter-spacing: 0.03em;
  color: var(--ink-3); border: 1px solid var(--hair); transition: color .14s, border-color .14s, background .14s;
}
.colorby-opts button:hover { color: var(--ink); border-color: var(--hair-2); }
.colorby-opts button.on { color: var(--ink); border-color: var(--hair-2); background: rgba(255,255,255,0.07); }
.colorby-key { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px 11px; font-size: 10px; color: var(--ink-3); }
.colorby-key:empty { display: none; }
.colorby-key .k { display: inline-flex; align-items: center; gap: 5px; }
.colorby-key .k i { width: 10px; height: 3px; border-radius: 1px; background: var(--c); }
.colorby-key .ramp { width: 100%; height: 5px; border-radius: 1px; }
.colorby-key .ramp-ends { width: 100%; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--ink-4); }

/* stacked composition bar + key */
.comp { margin: 16px 0 4px; }
.comp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.comp-note { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }
.comp-bar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,0.06); }
.comp-bar span { display: block; height: 100%; background: var(--c); transition: width .25s var(--ease); }
.comp-bar span + span { box-shadow: -1px 0 0 rgba(8,9,11,0.7); }
.comp-rows { margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 11.5px; }
.comp-rows .n { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); min-width: 0; }
.comp-rows .n i { width: 10px; height: 3px; border-radius: 1px; background: var(--c); flex: none; }
.comp-rows .n em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-rows .v { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); text-align: right; }
.comp-empty { font-size: 11.5px; color: var(--ink-4); line-height: 1.55; }
.stack { display: block; width: 100%; height: 64px; margin-top: 10px; }
.stack .now { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.idx { display: inline-flex; gap: 6px; align-items: baseline; font-size: 10px; color: var(--ink-4); }
.idx b { font-family: var(--mono); font-weight: 500; color: var(--ink); font-size: 11px; }

.hist { margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 4px; }
.hist-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; width: 100%; text-align: left;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.035); font-size: 11.5px; color: var(--ink-2); }
.hist-row:hover { color: var(--ink); }
.hist-row .d { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.hist-row.now { color: var(--ink); }
.hist-row.now .d { color: var(--c); }

.empty-note .btn { margin-top: 10px; }

/* ── small labels in PP NeueBit ─────────────────────────────────────── */
.label, .rail-head .label, .pop-title, .d-sphere, .ev-cat, .tl-era span, .colorby .label, .legend-unit {
  font-family: var(--pixel); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 0.06em;
}
.era { font-family: var(--pixel); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; margin-top: 8px; }
.tl-era span { font-size: 12px; line-height: 16px; letter-spacing: 0.05em; }
.ev-cat { font-size: 13px; margin-top: 4px; opacity: 0.9; }
.d-sphere { font-size: 14px; }

/* ── flags ─────────────────────────────────────────────────────────── */
.civ-mark { display: flex; align-items: center; justify-content: center; width: 17px; }
/* A flag hangs from the top of the name's first line rather than floating
   in the middle of the two-line row. --flag-drop is set from font metrics. */
.civ-row:has(.civ-flag:not([hidden])) { align-items: start; }
.civ-row:has(.civ-flag:not([hidden])) .civ-mark { padding-top: var(--flag-drop, 5px); }
.civ-row:has(.civ-flag:not([hidden])) .civ-val,
.civ-row:has(.civ-flag:not([hidden])) .civ-life { align-self: center; }
.civ-flag.dim { opacity: 0.5; filter: saturate(0.4); }
.d-name:has(.d-flag:not([hidden])) { display: flex; align-items: flex-start; gap: 10px; }
.d-name .d-flag { width: 24px; height: 18px; border-radius: 2px; object-fit: cover; flex: none;
  margin-top: var(--dflag-drop, 5px); box-shadow: 0 0 0 1px rgba(255,255,255,0.10); }
.ev-flag { width: 14px; height: 10px; border-radius: 1px; object-fit: cover; vertical-align: 0; margin-right: 7px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10); }

/* ── rolling counters (port of rare-ui's AnimatedCounter) ───────────── */
/* Measured: the digit cells already sit on the surrounding text's baseline. */
.ac { display: inline-flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ac-d, .ac-m { margin-block: -0.25em; }       /* 1.5em windows, but the line keeps its height */
.ac-d { position: relative; display: inline-grid; overflow: hidden; height: 1.5em; line-height: 1.5;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 5.5%, rgba(0,0,0,0.5) 11%, rgba(0,0,0,0.94) 16.5%, #000 22%, #000 78%, rgba(0,0,0,0.94) 83.5%, rgba(0,0,0,0.5) 89%, rgba(0,0,0,0.06) 94.5%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 5.5%, rgba(0,0,0,0.5) 11%, rgba(0,0,0,0.94) 16.5%, #000 22%, #000 78%, rgba(0,0,0,0.94) 83.5%, rgba(0,0,0,0.5) 89%, rgba(0,0,0,0.06) 94.5%, rgba(0,0,0,0) 100%); }
.ac-s { grid-area: 1 / 1; visibility: hidden; }
.ac-box { display: inline-flex; align-items: center; user-select: none; }
.ac-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ac-w { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.ac-w > span { display: flex; align-items: center; justify-content: center; height: 1.5em; }
.ac-m { display: inline-block; line-height: 1.5; }
.ac-in { animation: ac-in .22s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ac-in { from { opacity: 0; } }
#sub-num:empty { display: none; }

/* ── opening sequence ──────────────────────────────────────────────────
   One line: it arrives word by word, holds, and leaves. The timing is pure
   CSS on opacity and transform, so it keeps playing on the compositor while
   the globe is built on the main thread underneath it. */
.intro { position: fixed; inset: 0; z-index: 90; background: #050607; overflow: hidden; cursor: default; }
.intro-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(55% 45% at 50% 58%, rgba(233,164,76,0.11), transparent 62%),
              radial-gradient(38% 36% at 50% 46%, rgba(111,178,220,0.07), transparent 70%);
  animation: glow-drift 14s ease-in-out infinite alternate;
}
@keyframes glow-drift { to { transform: translate3d(0, -3%, 0) scale(1.08); } }
.intro-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 8vw; }
.finale { text-align: center; max-width: 1100px; }

/* The title rises word by word out of a mask. */
.welcome-title {
  margin: 0; color: var(--ink);
  font-family: var(--sans); font-weight: 900; font-size: clamp(46px, 9.2vw, 156px); line-height: 0.98; letter-spacing: -0.035em;
}
.welcome-title .wm { display: inline-block; overflow: hidden; padding: 0.04em 0.02em 0.12em; margin: -0.04em -0.02em -0.12em; vertical-align: top; }
.welcome-title .w {
  display: inline-block; transform: translate3d(0, 110%, 0);
  animation: word-rise 1s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--title-at) + var(--i) * 110ms);
}
@keyframes word-rise { to { transform: none; } }

.finale-wait {
  margin: 30px 0 0; opacity: 0; transition: opacity .4s;
  font-family: var(--pixel); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--ink-3);
}
.intro.waiting .finale-wait { opacity: 0.7; animation: wait-pulse 1.4s ease-in-out infinite; }
@keyframes wait-pulse { 50% { opacity: 0.3; } }

.intro-skip {
  position: absolute; right: 22px; bottom: 20px; padding: 6px 11px;
  font-family: var(--pixel); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: 4px; background: rgba(255,255,255,0.02);
  opacity: 0; animation: skip-in .6s var(--ease) 1s both; transition: color .15s, border-color .15s;
}
@keyframes skip-in { to { opacity: 1; } }
.intro-skip:hover { color: var(--ink); border-color: var(--hair-2); }

/* Skipped: the line lands at once, then leaves. */
.intro.skipped .welcome-title .w { animation-delay: calc(var(--i) * 40ms) !important; animation-duration: .5s !important; }
.intro.skipped .intro-skip { display: none; }

/* Out: the line lifts away and the black dissolves into the globe. */
/* Out: the words drop back up through their masks, then the black dissolves into the globe. */
.intro.out { animation: intro-out 1.1s cubic-bezier(.65, 0, .35, 1) .6s both; pointer-events: none; }
.intro.out .welcome-title .w { animation: word-out .7s cubic-bezier(.7, 0, .84, 0) both; animation-delay: calc(var(--i) * 70ms) !important; }
.intro.out .finale-wait { opacity: 0; }
@keyframes word-out { from { transform: none; } to { transform: translate3d(0, -110%, 0); } }
@keyframes intro-out { to { opacity: 0; } }

/* ── entrance: the interface arrives from its edges as the globe flies in ── */
body.preload .topbar, body.preload .rail-left, body.preload .rail-right,
body.preload .timeline, body.preload #labels, body.preload #globe { opacity: 0; }
body.preload .topbar { transform: translate3d(0, -16px, 0); }
body.preload .rail-left { transform: translate3d(-28px, 0, 0); }
body.preload .rail-right { transform: translate3d(28px, 0, 0); }
body.preload .timeline { transform: translate3d(0, 28px, 0); }
body.entering .topbar, body.entering .rail-left, body.entering .rail-right, body.entering .timeline, body.entering #labels {
  transition: opacity 1s var(--ease), transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
body.entering #globe { transition: opacity 1.8s var(--ease); }
body.entering .topbar { transition-delay: .6s; }
body.entering .timeline { transition-delay: .75s; }
body.entering .rail-left { transition-delay: .9s; }
body.entering .rail-right { transition-delay: 1s; }
body.entering #labels { transition-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .intro-glow { animation: none; }
  body.entering .topbar, body.entering .rail-left, body.entering .rail-right, body.entering .timeline { transform: none; }
}

/* ── people ─────────────────────────────────────────────────────────── */
.fields .colorby-opts { flex-wrap: wrap; }
.fields .colorby-opts button i { display: inline-block; width: 10px; height: 3px; border-radius: 1px; background: var(--c); margin-right: 6px; vertical-align: middle; }
.d-age { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin: -9px 0 14px; }
.d-sec { margin-top: 20px; }
.d-sec > .label { display: block; margin-bottom: 8px; }
.peers { display: flex; flex-direction: column; }
.peer { display: grid; grid-template-columns: 3px 1fr auto; gap: 10px; align-items: center; padding: 6px 4px; border-radius: 4px; text-align: left; color: var(--ink); font-size: 12.5px; }
.peer:hover { background: rgba(255,255,255,0.045); }
.peer i { width: 3px; height: 14px; border-radius: 1px; background: var(--c); }
.peer em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.life-events { display: flex; flex-direction: column; border-left: 1px solid var(--hair); margin-left: 1px; }
.life-ev { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 5px 4px 5px 12px; text-align: left; font-size: 12px; color: var(--ink-2); border-radius: 0 4px 4px 0; }
.life-ev::before { content: ""; position: absolute; left: -2px; top: 8px; width: 3px; height: 11px; border-radius: 1px; background: var(--c); }
.life-ev:hover { background: rgba(255,255,255,0.045); color: var(--ink); }
.life-ev .y { font-family: var(--mono); font-size: 10px; color: var(--ink-4); padding-top: 1px; }
.d-link { display: inline-block; margin-top: 16px; font-size: 11.5px; color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--hair-2); padding-bottom: 1px; }
.d-link:hover { color: var(--ink); }
.timeline.picking .tl-surface { cursor: pointer; }

/* ── top bar: brand · views · search · tools ──────────────────────────
   The views, search and projection switch are the main controls, so they
   share one solid, raised treatment that holds up over any part of the globe. */
.views, .search, .proj {
  border: 1px solid rgba(255,255,255,0.18); border-radius: 9px;
  background: rgba(18,20,24,0.88); backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.views { display: flex; flex: none; padding: 4px; gap: 3px; }
.views button, .proj button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 17px; border-radius: 6px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.005em; color: var(--ink-2); white-space: nowrap;
  transition: color .16s, background .16s, box-shadow .16s;
}
.views button:hover, .proj button:hover { color: var(--ink); background: rgba(255,255,255,0.08); }
.views button.on, .proj button.on { color: #0b0c0e; background: var(--ink); box-shadow: 0 2px 14px rgba(238,241,245,0.16); }

.search {
  position: relative; margin-left: auto; flex: 0 1 340px; min-width: 170px;
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 9px 0 38px;
  transition: border-color .16s, background .16s;
}
.search:focus-within { border-color: rgba(233,164,76,0.65); background: rgba(22,24,28,0.96); }
.search-ico { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
  fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0;
  background: transparent; color: var(--ink); font-family: var(--sans); font-size: 14px; }
.search input::placeholder { color: var(--ink-3); }
.search-kbd { flex: none; font-family: var(--pixel); font-weight: 700; font-size: 13px; line-height: 1;
  color: var(--ink-3); padding: 4px 6px 3px; border: 1px solid var(--hair-2); border-radius: 4px; transition: opacity .16s; }
.search:focus-within .search-kbd { opacity: 0; }
.search .spot-results {
  position: absolute; top: calc(100% + 8px); right: 0; width: max(100%, 440px); max-width: calc(100vw - 24px);
  max-height: 62vh; background: var(--panel-2); backdrop-filter: blur(24px);
  border: 1px solid var(--hair-2); border-radius: 8px; box-shadow: 0 32px 90px rgba(0,0,0,0.75);
  animation: pop .16s var(--ease);
}

.topbar-actions .btn { height: 36px; padding: 0 12px; border-radius: 7px; font-size: 12px; }
.topbar-actions .btn-icon { width: 36px; padding: 0; }
.ico-svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* Views in the middle, then a divider, then Globe / Map beside them. */
.nav-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; }
.nav-div { width: 1px; height: 28px; background: rgba(255,255,255,0.22); flex: none; }
.proj { display: flex; flex: none; padding: 4px; gap: 3px; }
.proj svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
body[data-projection="map"] #globe { cursor: grab; }
.topbar-actions { margin-left: auto; }

/* Search heads the right column: exactly as wide as the panel below it,
   and so are its results. The rail and detail panel start beneath it. */
#search.search { position: fixed; z-index: 21; top: 68px; right: 18px; width: var(--rail-w); margin: 0; }
#search .spot-results { width: 100%; max-width: none; }
.rail-right { top: 124px; }
.detail { top: 124px; max-height: calc(100vh - var(--tl-h) - 134px); }
body.preload #search { opacity: 0; transform: translate3d(0, -12px, 0); }
body.entering #search { transition: opacity 1s var(--ease), transform 1.2s cubic-bezier(.16, 1, .3, 1); transition-delay: 1.05s; }

@media (max-width: 1180px) {
  .topbar { gap: 14px; }
  .nav-center { gap: 10px; }
  .views button { padding: 0 12px; font-size: 13px; }
  .proj button { padding: 0 11px; font-size: 13px; }
  .topbar-actions .btn-label, .topbar-actions .chev { display: none; }
  .topbar-actions .btn { width: 36px; padding: 0; justify-content: center; }
}
@media (max-width: 940px) { .brand { display: none; } }
@media (max-width: 860px) { .views .amp { display: none; } .views button { padding: 0 10px; } }
/* Narrow: search and tools on the first row, the views on a full-width row below. */
@media (max-width: 760px) {
  .topbar { height: 56px; padding: 0 12px; gap: 8px; }
  #search.search { top: auto; left: 12px; right: 12px; width: auto; height: 40px; bottom: calc(var(--tl-h) + 10px); }
  #search .spot-results { top: auto; bottom: calc(100% + 8px); }
  body.detail-open #search { display: none; }
  .rail-left { bottom: calc(var(--tl-h) + 60px); }
  /* The group dissolves: tabs take their own row, Globe / Map stays up top. */
  .nav-center { display: contents; }
  .nav-div { display: none; }
  .search-kbd { display: none; }
  .views { position: fixed; top: 58px; left: 12px; right: 12px; }
  .views button { flex: 1 1 0; min-width: 0; padding: 0 4px; height: 32px; font-size: 12.5px; justify-content: center; }
  .rail-left, .rail-right { top: 106px; }
  .popover, .helpcard { top: 56px; }
  .proj button { height: 32px; padding: 0 12px; font-size: 12.5px; }
}
/* The projection switch keeps its words at every width: they are the point. */
.proj .btn-label { display: inline; }
/* Tab labels are plain text (the "& Events" part can drop away), so they lay out inline, not as flex items. */
.views button { display: inline-block; line-height: 34px; text-align: center; }
@media (max-width: 760px) { .views button { line-height: 32px; } }
/* Phone tabs size to their words, so "Population" gets the room it needs. */
@media (max-width: 760px) { .views button { flex: 1 1 auto; padding: 0 4px; font-size: 12px; } }
@media (max-width: 900px) { #search.search { width: 280px; } }
@media (max-width: 760px) { #search.search { width: auto; } }
/* On phones the detail panel stays anchored above the timeline. */
@media (max-width: 620px) { .detail { top: auto; max-height: 46vh; } }