/* ============================================================================
   Holocaust Atlas — styling.

   The design brief is restraint. This is a memorial, not a dashboard: near-black
   ground, bone-coloured type, a serif for anything narrative, and colour used
   only where it carries meaning (red for killing, ochre for confinement, blue
   for flight, gold for rescue, stone for what stands there now). No gradients
   for decoration, no glow, no animation that is not showing the passage of time.
   ========================================================================== */

:root {
  --bg:        #0a0a0c;
  --bg-2:      #101014;
  --panel:     rgba(14, 14, 18, 0.95);
  --panel-2:   rgba(22, 22, 27, 0.95);
  --ink:       #e7e2d7;
  --ink-2:     #b3ada1;
  --dim:       #8b867b;
  --faint:     #625e57;
  --rule:      #26262c;
  --rule-2:    #33333b;

  --brand:     #c9b98a;
  --kill:      #b8332a;
  --kill-hi:   #e2593f;
  --ghetto:    #c9962a;
  --camp:      #7f8894;
  --stone:     #b0aa9c;
  --flight:    #4f92c9;
  --rescue:    #d9a441;
  --refusal:   #6fae7c;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --topbar-h: 56px;
  --timebar-h: 118px;
  --key-w: 326px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font-family: inherit; font-size: inherit; color: inherit; }
.hidden { display: none !important; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: .01em; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #45454f; }

/* ------------------------------------------------------------------- gate */
#gate {
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(ellipse at 50% 35%, #14141a 0%, #08080a 70%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
#gate.leaving { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.gate-inner { max-width: 660px; text-align: center; }
.gate-mark { width: 54px; height: 54px; margin: 0 auto 22px; color: var(--brand); opacity: .85; }
.gate-mark svg { width: 100%; height: 100%; }
#gate h1 {
  font-size: 40px; margin: 0 0 20px; letter-spacing: .04em; color: var(--ink);
}
.gate-lede {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.68;
  color: var(--ink-2); margin: 0 0 26px;
}
.gate-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 0 0 26px; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.gate-stat { min-width: 118px; }
.gate-stat b { display: block; font-family: var(--serif); font-size: 23px; color: var(--brand); font-weight: 500; }
.gate-stat span { display: block; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .09em; margin-top: 3px; }
.gate-note { font-size: 13px; color: var(--dim); line-height: 1.6; margin: 0 0 28px; }
.gate-btn {
  border: 1px solid var(--brand); color: var(--brand); background: transparent;
  padding: 12px 34px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .18s, color .18s;
}
.gate-btn:hover { background: var(--brand); color: #0a0a0c; }
.gate-links { margin-top: 20px; display: flex; gap: 22px; justify-content: center; }
.gate-link { color: var(--dim); font-size: 12.5px; border-bottom: 1px solid var(--rule-2); padding-bottom: 1px; }
.gate-link:hover { color: var(--ink-2); border-color: var(--dim); }

/* ---------------------------------------------------------------- topbar */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 14px; background: linear-gradient(180deg, rgba(8,8,10,.96), rgba(8,8,10,.72) 70%, transparent);
  border-bottom: 1px solid rgba(38,38,44,.7);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
a.brand:hover .brand-name { color: var(--brand); }
.logo { width: 27px; height: 27px; flex: none; }
.brand-txt { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--serif); font-size: 16px; letter-spacing: .05em; color: var(--ink); white-space: nowrap; }
.brand-sub { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tools { display: flex; align-items: center; gap: 8px; position: relative; }
#searchWrap { position: relative; }
#search {
  width: 260px; background: rgba(20,20,25,.85); border: 1px solid var(--rule-2);
  padding: 7px 11px; border-radius: 3px; outline: none;
}
#search:focus { border-color: var(--brand); }
#search::placeholder { color: var(--faint); }
#searchResults {
  position: absolute; top: 38px; right: 0; width: 400px; max-height: 60vh; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--rule-2); border-radius: 3px; z-index: 70;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
}
.sr-item { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--rule); display: flex; gap: 10px; align-items: baseline; }
.sr-item:last-child { border-bottom: 0; }
.sr-item:hover, .sr-item.sel { background: rgba(200,185,138,.08); }
.sr-item .n { color: var(--ink); flex: 1; min-width: 0; }
.sr-item .k { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; flex: none; }
.sr-item .v { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.sr-item .v.red { color: var(--kill-hi); }
.sr-item .v.gold { color: var(--rescue); }
.cta {
  border: 1px solid var(--rule-2); padding: 6px 14px; border-radius: 3px; color: var(--ink-2);
  letter-spacing: .06em; font-size: 12.5px;
}
.cta:hover { border-color: var(--brand); color: var(--brand); }
#menuBtn { font-size: 17px; padding: 4px 9px; color: var(--ink-2); }
#menuBtn:hover { color: var(--brand); }
#menu {
  position: absolute; top: 42px; right: 0; width: 262px; z-index: 70;
  background: var(--panel-2); border: 1px solid var(--rule-2); border-radius: 3px; padding: 5px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
}
.mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left; border-radius: 2px; color: var(--ink-2); }
.mi:hover { background: rgba(200,185,138,.09); color: var(--ink); }
.mi-ic { width: 16px; text-align: center; color: var(--dim); flex: none; }
.mi-tx { flex: 1; font-size: 13px; }
.mi-state { font-size: 11px; color: var(--faint); }
.mi-sep { height: 1px; background: var(--rule); margin: 5px 8px; }

/* ------------------------------------------------------------------- map */
#globeViz { position: fixed; inset: 0; z-index: 1; }
#flatViz {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: var(--timebar-h);
  width: 100%; height: calc(100% - var(--topbar-h) - var(--timebar-h)); z-index: 1;
}
/* No fill here: the choropleth colour arrives as an SVG fill attribute, and a
   CSS fill would override it and paint every country the same near-black. */
#flatViz .land { stroke: #2c2c34; stroke-width: .4; vector-effect: non-scaling-stroke; }
#flatViz .land.on { cursor: pointer; }
#flatViz .land.hi { stroke: var(--brand); stroke-width: 1.1; }
#flatViz .graticule { fill: none; stroke: #17171d; stroke-width: .4; }
#tooltip {
  position: fixed; z-index: 90; pointer-events: none; max-width: 320px;
  background: rgba(10,10,13,.97); border: 1px solid var(--rule-2); border-radius: 3px;
  padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
}
#tooltip .tt-n { font-family: var(--serif); font-size: 14px; color: var(--ink); display: block; margin-bottom: 3px; }
#tooltip .tt-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
#tooltip .tt-v { color: var(--kill-hi); font-variant-numeric: tabular-nums; }
#tooltip .tt-d { color: var(--ink-2); margin-top: 5px; }
#toast {
  position: fixed; bottom: calc(var(--timebar-h) + 18px); left: 50%; transform: translateX(-50%);
  z-index: 95; background: var(--panel-2); border: 1px solid var(--rule-2);
  padding: 9px 18px; border-radius: 3px; font-size: 13px; color: var(--ink-2);
}

/* ------------------------------------------------------------ legend box */
#legendBox {
  position: fixed; top: calc(var(--topbar-h) + 12px); left: 12px; width: var(--key-w); z-index: 40;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 3px;
  padding: 12px; max-height: calc(100vh - var(--topbar-h) - var(--timebar-h) - 26px);
  overflow-y: auto; backdrop-filter: blur(7px);
}
#legendBox { overflow-x: hidden; }
#legendBox.collapsed > *:not(#legendToggle) { display: none; }
#legendToggle {
  display: none; width: 100%; text-align: left; color: var(--ink-2);
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
}
.gb-cap, .lyr-cap {
  font-size: 10px; text-transform: uppercase; letter-spacing: .11em; color: var(--dim);
  margin: 0 0 6px;
}
.lyr-cap { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--rule); }
#layerSel {
  width: 100%; background: rgba(24,24,30,.9); border: 1px solid var(--rule-2);
  padding: 7px 9px; border-radius: 3px; outline: none; cursor: pointer;
}
#layerSel:focus { border-color: var(--brand); }
.layer-desc { font-size: 11.5px; color: var(--dim); line-height: 1.45; margin: 7px 0 11px; }
.gb-stat { font-family: var(--serif); margin: 0 0 9px; }
.gb-stat #gbStat { font-size: 25px; color: var(--brand); font-variant-numeric: tabular-nums; }
.gb-stat small { font-size: 11px; color: var(--dim); font-family: var(--sans); }
.legend { display: block; }
/* Six stacked swatch rows cost ~100px of a panel that has to fit a laptop
   window. The same information reads better as one horizontal ramp. */
.legend-ramp { display: flex; height: 10px; border: 1px solid var(--rule-2); }
.legend-ramp i { flex: 1; }
.legend-ticks {
  display: flex; justify-content: space-between; margin-top: 3px;
  font-size: 9.5px; color: var(--dim); font-variant-numeric: tabular-nums;
}
.legend-nd { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--faint); margin-top: 5px; }
.legend-nd i { width: 16px; height: 8px; background: #16161b; border: 1px solid var(--rule-2); display: inline-block; }
.lg-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.lg-sw { width: 22px; height: 9px; border-radius: 1px; flex: none; }
/* The key panel outgrew the window once the movement layers arrived: its
   content ran to ~970px inside a ~560px box, so the options at the bottom were
   silently clipped. The groups now collapse, and the toggles sit in two
   columns, so the whole panel fits without scrolling on a short laptop screen. */
.lyr-cap.fold {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; width: 100%; text-align: left;
}
.lyr-cap.fold:hover { color: var(--ink-2); }
.lyr-cap.fold .fold-ar { transition: transform .18s; font-size: 9px; opacity: .8; }
.lyr-cap.fold.closed .fold-ar { transform: rotate(-90deg); }
.fold-body.closed { display: none; }
.site-toggles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px 6px; }
.site-toggles.one-col { grid-template-columns: minmax(0, 1fr); }
.st-row {
  display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 2px;
  cursor: pointer; font-size: 11.5px; color: var(--dim); user-select: none;
}
.st-row:hover { background: rgba(255,255,255,.03); }
.st-row.on { color: var(--ink); }
.st-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; opacity: .35; }
.st-row.on .st-dot { opacity: 1; }
.st-row .st-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row .st-c { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.st-row.line .st-dot { border-radius: 0; height: 2px; width: 13px; }
.lyr-foot { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 7px; }
.chk { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--dim); cursor: pointer; }
.chk input { accent-color: var(--brand); }
.chk:hover { color: var(--ink-2); }

/* ------------------------------------------------------------ side panel */
#panel {
  position: fixed; top: calc(var(--topbar-h) + 12px); right: 12px; width: 400px; z-index: 45;
  max-height: calc(100vh - var(--topbar-h) - var(--timebar-h) - 26px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 3px;
  backdrop-filter: blur(7px);
}
#panelClose {
  position: sticky; top: 0; float: right; margin: 6px 8px 0 0; font-size: 20px; line-height: 1;
  color: var(--dim); z-index: 2;
}
#panelClose:hover { color: var(--ink); }
#panelBody { padding: 16px 18px 20px; }

.pn-kicker { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
.pn-title { font-family: var(--serif); font-size: 22px; line-height: 1.22; margin: 0 0 3px; color: var(--ink); }
.pn-sub { font-size: 12.5px; color: var(--dim); margin-bottom: 14px; }
.pn-sub em { font-style: normal; color: var(--ink-2); }

.pn-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 0 0 15px; }
.pn-fig { background: var(--bg-2); padding: 10px 11px; }
.pn-fig b { display: block; font-family: var(--serif); font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }
.pn-fig b.red { color: var(--kill-hi); }
.pn-fig b.gold { color: var(--rescue); }
.pn-fig b.blue { color: var(--flight); }
.pn-fig span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin-top: 3px; }
.pn-fig small { display: block; font-size: 10.5px; color: var(--faint); margin-top: 3px; }
.pn-fig.wide { grid-column: 1 / -1; }

/* The before/after bar — the single most important graphic in the atlas. */
.ba { margin: 0 0 16px; }
.ba-lab { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .07em; }
.ba-bar { height: 26px; background: #1a1a20; border: 1px solid var(--rule-2); display: flex; overflow: hidden; }
.ba-seg { height: 100%; position: relative; }
.ba-seg.killed { background: repeating-linear-gradient(135deg, #8e2820, #8e2820 5px, #7c221b 5px, #7c221b 10px); }
.ba-seg.fled { background: #2c4f6b; }
.ba-seg.survived { background: #4a4a3c; }
.ba-key { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; font-size: 11px; color: var(--dim); }
.ba-key i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; }

.pn-sec { margin: 17px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.pn-sec:first-child { border-top: 0; padding-top: 0; }
.pn-sec h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin: 0 0 9px; font-family: var(--sans); font-weight: 600; }
.pn-txt { font-family: var(--serif); font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.pn-txt + .pn-txt { margin-top: 9px; }
.pn-note { font-size: 12px; color: var(--dim); line-height: 1.55; font-style: italic; }

.pn-list { display: flex; flex-direction: column; gap: 1px; }
.pn-li {
  display: flex; align-items: baseline; gap: 9px; padding: 6px 7px; background: rgba(255,255,255,.017);
  border-left: 2px solid var(--rule-2); cursor: pointer; font-size: 12.5px;
}
.pn-li:hover { background: rgba(200,185,138,.07); border-left-color: var(--brand); }
.pn-li .li-n { flex: 1; color: var(--ink-2); min-width: 0; }
.pn-li .li-d { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.pn-li .li-v { font-size: 11.5px; color: var(--kill-hi); font-variant-numeric: tabular-nums; flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 10.5px; padding: 3px 8px; border: 1px solid var(--rule-2); border-radius: 11px; color: var(--dim); }
.chip.g-jewish { border-color: #6d3a34; color: #d08a7c; }
.chip.g-roma { border-color: #5b4a2a; color: #c3a76a; }
.chip.g-soviet_pow { border-color: #33485c; color: #86a8c4; }
.chip.g-polish { border-color: #4a4a52; color: #a8a8b2; }
.chip.g-disabled { border-color: #46375a; color: #a891c4; }

.conf { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--dim); }
.conf i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.conf.confirmed i { background: #6fae7c; } .conf.high i { background: #9bb06a; }
.conf.medium i { background: #c9962a; } .conf.low i { background: #b06a3a; }
.conf.disputed i { background: #a8514a; }

.srcs { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--rule); }
.srcs a, .srcs span.nolink { display: block; font-size: 11.5px; color: var(--dim); text-decoration: none; padding: 2px 0; }
.srcs a:hover { color: var(--brand); text-decoration: underline; }
.srcs a::before, .srcs span.nolink::before { content: '— '; color: var(--faint); }

.pn-act { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.pn-act button {
  font-size: 11.5px; padding: 6px 11px; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-2);
}
.pn-act button:hover { border-color: var(--brand); color: var(--brand); }

/* --------------------------------------------------------------- timebar */
#timebar {
  position: fixed; bottom: 0; left: 0; right: 0; height: auto; z-index: 50;
  background: linear-gradient(0deg, rgba(8,8,10,.97) 55%, rgba(8,8,10,.82));
  border-top: 1px solid var(--rule); padding: 7px 16px 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.tb-top { display: flex; align-items: center; gap: 14px; flex: none; }
#playBtn {
  width: 32px; height: 32px; border: 1px solid var(--rule-2); border-radius: 50%;
  color: var(--ink-2); font-size: 11px; flex: none; display: flex; align-items: center; justify-content: center;
}
#playBtn:hover { border-color: var(--brand); color: var(--brand); }
#playBtn.playing { border-color: var(--kill); color: var(--kill-hi); }
.tb-date { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; }
#tbDate { font-family: var(--serif); font-size: 20px; color: var(--ink); letter-spacing: .03em; flex: none; }
.tb-event { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-event b { color: var(--ink-2); font-weight: 400; }
.tb-counter { text-align: right; flex: none; }
.tb-counter #tbCount { font-family: var(--serif); font-size: 21px; color: var(--kill-hi); font-variant-numeric: tabular-nums; display: block; line-height: 1.1; }
.tb-counter small { font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .09em; }
.tb-speed { font-size: 11px; color: var(--dim); border: 1px solid var(--rule-2); padding: 3px 8px; border-radius: 2px; flex: none; }
.tb-speed:hover { color: var(--brand); border-color: var(--brand); }
.tb-track { position: relative; height: 56px; flex: none; }
#curve { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 54px; pointer-events: none; }
#timeSlider {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 18px;
  -webkit-appearance: none; appearance: none; background: transparent; outline: none; margin: 0;
}
#timeSlider::-webkit-slider-runnable-track { height: 2px; background: var(--rule-2); }
#timeSlider::-moz-range-track { height: 2px; background: var(--rule-2); }
#timeSlider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 3px; height: 46px; background: var(--brand);
  margin-top: -34px; cursor: ew-resize; border-radius: 0;
}
#timeSlider::-moz-range-thumb { width: 3px; height: 46px; background: var(--brand); border: 0; border-radius: 0; cursor: ew-resize; }
#tbTicks { position: relative; height: 13px; flex: none; pointer-events: none; }
.tb-tick { position: absolute; top: 0; font-size: 9.5px; line-height: 13px; color: var(--faint); transform: translateX(-50%); }

/* ---------------------------------------------------------------- modals */
#modalWrap { position: fixed; inset: 0; z-index: 150; }
#modalBg { position: absolute; inset: 0; background: rgba(4,4,6,.86); backdrop-filter: blur(3px); }
#modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(940px, calc(100vw - 40px)); max-height: calc(100vh - 60px); overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--rule-2); border-radius: 3px;
  box-shadow: 0 30px 90px rgba(0,0,0,.8);
}
#modalClose { position: sticky; top: 0; float: right; margin: 10px 12px 0 0; font-size: 24px; line-height: 1; color: var(--dim); z-index: 3; }
#modalClose:hover { color: var(--ink); }
#modalBody { padding: 26px 32px 34px; }
#modalBody h2 { font-size: 26px; margin: 0 0 6px; }
#modalBody h3 { font-size: 17px; margin: 26px 0 9px; color: var(--brand); }
#modalBody h3:first-child { margin-top: 0; }
#modalBody p { font-family: var(--serif); font-size: 15px; line-height: 1.68; color: var(--ink-2); margin: 0 0 12px; max-width: 74ch; }
#modalBody p.sub { font-family: var(--sans); font-size: 13px; color: var(--dim); margin-bottom: 20px; }
#modalBody ul { font-family: var(--serif); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); padding-left: 20px; max-width: 74ch; }
#modalBody li { margin-bottom: 7px; }
#modalBody a { color: var(--brand); }

table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
table.tbl th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--dim);
  padding: 8px 9px; border-bottom: 1px solid var(--rule-2); position: sticky; top: 0; background: var(--bg-2);
  cursor: pointer; white-space: nowrap; font-weight: 600;
}
table.tbl th:hover { color: var(--brand); }
table.tbl th.num, table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl td { padding: 7px 9px; border-bottom: 1px solid rgba(38,38,44,.55); color: var(--ink-2); }
table.tbl tr:hover td { background: rgba(200,185,138,.05); }
table.tbl tr.clickable { cursor: pointer; }
table.tbl td.name { color: var(--ink); }
table.tbl td.red { color: var(--kill-hi); }
.pctbar { position: relative; display: block; height: 15px; background: #1c1c22; min-width: 54px; }
.pctbar i { position: absolute; left: 0; top: 0; bottom: 0; background: #8e2820; }
.pctbar span { position: relative; display: block; text-align: right; padding-right: 4px; font-size: 10.5px; line-height: 15px; color: var(--ink); }

.mod-scroll { max-height: 62vh; overflow-y: auto; border: 1px solid var(--rule); }
.mod-filter { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.mod-filter input, .mod-filter select {
  background: rgba(24,24,30,.9); border: 1px solid var(--rule-2); padding: 6px 9px; border-radius: 3px; outline: none;
}
.mod-filter input:focus, .mod-filter select:focus { border-color: var(--brand); }

/* ------------------------------------------------------------ story rail */
#storyRail {
  position: fixed; top: calc(var(--topbar-h) + 12px); right: 12px; width: 380px; z-index: 55;
  max-height: calc(100vh - var(--topbar-h) - var(--timebar-h) - 26px); overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--rule-2); border-radius: 3px;
  padding: 18px; backdrop-filter: blur(7px);
}
#storyClose { position: absolute; top: 8px; right: 10px; font-size: 20px; color: var(--dim); }
#storyClose:hover { color: var(--ink); }
.sr-head h3 { font-size: 19px; margin: 0 0 3px; }
.sr-head p { font-size: 12.5px; color: var(--dim); margin: 0 0 16px; }
.sr-card {
  padding: 12px 13px; border: 1px solid var(--rule); border-left: 2px solid var(--rule-2);
  margin-bottom: 8px; cursor: pointer;
}
.sr-card:hover { border-left-color: var(--brand); background: rgba(200,185,138,.05); }
.sr-card b { display: block; font-family: var(--serif); font-size: 15px; color: var(--ink); font-weight: 500; margin-bottom: 3px; }
.sr-card span { font-size: 12px; color: var(--dim); line-height: 1.5; display: block; }
.sr-card small { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; display: block; }
.sr-progress { height: 2px; background: var(--rule); margin-bottom: 15px; }
#srBar { height: 100%; background: var(--brand); transition: width .3s; }
#srBody h4 { font-family: var(--serif); font-size: 17px; margin: 0 0 8px; color: var(--ink); }
#srBody .yr { font-size: 11px; color: var(--brand); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
#srBody p { font-family: var(--serif); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 11px; }
.sr-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--rule); }
.sr-nav button { font-size: 12px; color: var(--ink-2); padding: 5px 10px; border: 1px solid var(--rule-2); border-radius: 2px; }
.sr-nav button:hover { border-color: var(--brand); color: var(--brand); }
.sr-nav button:disabled { opacity: .3; cursor: default; border-color: var(--rule); }
#srCount { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- loading */
#loading { position: fixed; inset: 0; z-index: 190; background: var(--bg); display: flex; align-items: center; justify-content: center; }
#loading.done { opacity: 0; pointer-events: none; transition: opacity .4s; }
.ld-inner { text-align: center; color: var(--dim); font-size: 12.5px; letter-spacing: .08em; }
.ld-mark { width: 26px; height: 26px; border: 1px solid var(--rule-2); border-top-color: var(--brand); border-radius: 50%; margin: 0 auto 13px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  #panel { width: 344px; }
  #search { width: 190px; }
}
@media (max-width: 900px) {
  :root { --timebar-h: 112px; }
  .brand-sub { display: none; }
  #legendBox { width: 214px; padding: 9px; }
  #legendToggle { display: block; }
  #legendBox.collapsed { width: auto; }
  #panel { width: min(360px, calc(100vw - 24px)); }
  #storyRail { width: min(360px, calc(100vw - 24px)); }
  #search { width: 140px; }
  #modalBody { padding: 20px 18px 26px; }
}
@media (max-width: 620px) {
  #legendBox { top: auto; bottom: calc(var(--timebar-h) + 10px); max-height: 42vh; }
  #panel { top: calc(var(--topbar-h) + 8px); left: 8px; right: 8px; width: auto; max-height: 52vh; }
  #storyRail { top: auto; bottom: calc(var(--timebar-h) + 10px); left: 8px; right: 8px; width: auto; max-height: 50vh; }
  .brand-name { font-size: 14px; }
  #searchWrap { position: static; }
  #searchResults { width: calc(100vw - 24px); right: 12px; }
  .cta { padding: 5px 9px; font-size: 11px; }
  .pn-figs { grid-template-columns: 1fr; }
}
/* Short windows — a 13-inch laptop with browser chrome leaves ~620px. Drop the
   explanatory prose and tighten the type so the key panel still fits whole. */
@media (max-height: 720px) {
  :root { --timebar-h: 104px; }
  .layer-desc { display: none; }
  .gb-stat #gbStat { font-size: 20px; }
  .gb-cap, .lyr-cap { margin-bottom: 4px; }
  .lyr-cap { margin-top: 10px; padding-top: 8px; }
  #legendBox { padding: 9px 10px; }
  .st-row { padding: 2px 4px; font-size: 11px; }
  #layerSel { padding: 5px 8px; }
}
@media (max-height: 560px) {
  #legendBox { max-height: calc(100vh - var(--topbar-h) - var(--timebar-h) - 16px); }
  .gb-stat { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------- the walker
   Step-by-step navigation through the site register: a small bar above the
   timeline that walks the current sort order one place at a time. */
#walker {
  position: fixed; right: 14px; bottom: calc(var(--timebar-h) + 14px); z-index: 56;
  background: var(--panel-2); border: 1px solid var(--rule-2); border-radius: 3px;
  padding: 9px 11px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55); max-width: min(480px, calc(100vw - 28px));
}
#walker .wk-btn {
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 5px 11px;
  color: var(--ink-2); font-size: 13px; flex: none;
}
#walker .wk-btn:hover { border-color: var(--brand); color: var(--brand); }
#walker .wk-btn:disabled { opacity: .3; cursor: default; }
#walker .wk-mid { min-width: 0; flex: 1; text-align: center; }
#walker .wk-name {
  font-family: var(--serif); font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#walker .wk-sub { font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
#walker .wk-x { color: var(--dim); font-size: 16px; padding: 0 3px; flex: none; }
#walker .wk-x:hover { color: var(--ink); }
table.tbl tr.cur td { background: rgba(201,185,138,.13); }
@media (max-width: 620px) {
  #walker { left: 8px; right: 8px; }
}