:root {
  --bg: #f4f1ea;
  --panel: #fbfaf6;
  --ink: #2b2620;
  --muted: #837a6c;
  --line: #ddd5c5;
  --axis: #b8ad97;
  --geonim: #b45309;
  --rishonim: #1d4ed8;
  --acharonim: #047857;
  --event: #9333ea;
  --event-j: #0d7a6f;
  --shift: #b7791f;
  --sea: #e8eef2;
  --land: #e3dcc8;
  --land-edge: #cdc4ab;

  --px-year: 2.6px;     /* vertical scale */
  --start-year: 1;
  --end-year: 2000;
  --axis-w: 64px;       /* year-axis gutter (right) */
  --evt-gutter: 250px;  /* events rail (left) */
  --lane-w: 158px;      /* per-lane column width */
  --lane-gap: 12px;     /* space between lanes */
  --rail-w: 20px;       /* reserved edge rail for book markers */
}

* { box-sizing: border-box; }

/* warning banner: data is auto-generated and unverified */
.data-warning {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: 13.5px; font-weight: 500; line-height: 1.45;
  color: #7a4a00; background: #fef3c7;
  border-bottom: 1px solid #f0d98a;
}
.data-warning[hidden] { display: none; }
.data-warning .dw-icon { flex: 0 0 auto; font-size: 16px; display: inline-flex; }
.data-warning .dw-text { flex: 1 1 auto; }
.data-warning .dw-close {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: #7a4a00; font-size: 17px; line-height: 1; padding: 0 4px;
  display: inline-flex; align-items: center;
  opacity: .7; transition: opacity .12s ease;
}
.data-warning .dw-close:hover { opacity: 1; }

/* ---------- inline icons (vendored Lucide line icons; see icons.js) ---------- */
.ic { width: 1em; height: 1em; display: inline-block; flex: 0 0 auto; vertical-align: -0.14em; }
button .ic, a .ic, .edot .ic, .region-reset .x .ic,
.eflag .emark .ic, .eflag .smark .ic { vertical-align: middle; }
/* icons that label flowing text get a small gap from it */
.ic-book, .ic-pin, .ic-go { margin-inline-end: 5px; }
.tooltip h4 .ic-book { vertical-align: -0.12em; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: "Rubik", "Heebo", system-ui, sans-serif;
}
body { display: flex; flex-direction: column; height: 100vh; }

/* ---------- Top bar ----------
   Two deliberate rows, each filled on both ends so the title row is never left
   empty: row 1 = identity (title) + view controls (language, year, events,
   about); row 2 = the era key (which doubles as the period filter) + name
   search. Everything stays visible — nothing hides behind a menu. The region
   filter floats over the chart (see .region-reset), so toggling it never
   reflows this bar. */
.topbar {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 22px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.topbar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 24px; flex-wrap: wrap;
}
.title-block h1 {
  margin: 0; font-family: "Rubik", sans-serif; font-weight: 700;
  font-size: 24px; letter-spacing: -0.3px;
}
.subtitle { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }

/* view settings cluster, anchored to the bar's end edge */
.view-controls {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: flex-end;
}

/* second row: era key on the start edge, search on the end edge */
.legend-block { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.legend-cap {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.toggle { display: inline-flex; background: #ece6da; border-radius: 999px; padding: 3px; }
.seg {
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--muted); padding: 7px 16px; border-radius: 999px; transition: all .15s ease;
}
.seg.active { background: var(--ink); color: #fbfaf6; }
/* name search — type to dim non-matches and jump to the first hit */
.search-wrap { position: relative; display: inline-flex; }
.search-box {
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  width: 150px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  transition: width .16s ease, border-color .14s ease;
}
.search-box:focus { outline: none; border-color: var(--axis); width: 188px; }
.search-box::placeholder { color: var(--muted); }

.search-menu {
  position: absolute; top: calc(100% + 6px);
  inset-inline-start: auto; inset-inline-end: 0;   /* anchor to the box edge, grow inward */
  z-index: 40; width: 264px; max-width: calc(100vw - 24px);
  max-height: 326px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 5px;
}
.search-menu[hidden] { display: none; }
.search-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font-family: inherit; font-size: 13.5px; color: var(--ink); text-align: start;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer; padding: 7px 9px;
}
.search-opt:hover, .search-opt.active { background: #ece6da; }
.search-opt .so-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.search-opt .so-name {
  flex: 1 1 auto; min-width: 0; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-opt .so-yrs { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.legend { display: flex; gap: 8px; flex-wrap: wrap; }
.legend .item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; transition: all .14s ease;
}
.legend .item:hover { background: #ece6da; }
.legend .item.on { background: var(--ink); color: #fbfaf6; }
.legend .item.off { opacity: .4; }
.legend .item.off:hover { opacity: .7; }
.legend .dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
/* events toggle — a clear on/off switch (purple = on, matching the event colour) */
.evt-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  cursor: pointer; user-select: none;
}
.evt-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.evt-toggle .switch {
  position: relative; flex: 0 0 auto; width: 40px; height: 22px;
  border-radius: 999px; background: #cfc7b6;
  transition: background .16s ease;
}
.evt-toggle .switch::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: inset-inline-start .16s ease;
}
.evt-toggle input:checked + .switch { background: var(--event); }
.evt-toggle input:checked + .switch::after { inset-inline-start: 20px; }
.evt-toggle input:checked ~ .evt-label { color: var(--ink); }
.evt-toggle input:focus-visible + .switch {
  outline: 2px solid var(--event); outline-offset: 2px;
}

/* active region filter — a floating chip over the chart (NOT in the topbar, so
   selecting/clearing regions never reflows the bar). Centred at the top edge,
   clear of the events rail (left) and the year axis (right). */
.region-reset {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 12;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--shift); color: var(--ink);
  background: color-mix(in srgb, var(--shift) 8%, #fff);
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.region-reset i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.region-reset .x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-inline-start: 2px; border-radius: 50%;
  color: var(--muted); font-weight: 700; font-size: 11px;
}
.region-reset:hover { background: color-mix(in srgb, var(--shift) 15%, #fff); }
.region-reset:hover .x { background: rgba(0,0,0,.08); color: var(--ink); }
.region-reset[hidden] { display: none; }

/* ---------- Chart ---------- */
/* chart-area is a row: the scroller on the right (RTL start), the events
   sidebar pinned on the physical left. The sidebar lives OUTSIDE the scroller,
   so figures never slide under it and horizontal scroll can't grow the page. */
.chart-area { flex: 1; display: flex; flex-direction: row; min-height: 0; overflow: hidden; position: relative; }
.chart-wrap { flex: 1 1 auto; min-width: 0; overflow: auto; position: relative; }
.chart { position: relative; }

/* canvas holds the dated content */
.canvas { position: relative; padding-top: 14px; }

/* horizontal century gridlines + year labels */
.grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.grid .row { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.grid .row.major { border-top-color: var(--axis); opacity: .8; }
.grid .row.minor { opacity: .4; }
.grid .ylabel {
  position: absolute; inset-inline-start: 0; width: var(--axis-w);
  transform: translateY(-50%); text-align: center;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  background: var(--bg); padding: 1px 0;
}
.grid .ylabel .heb { font-family: "Rubik", sans-serif; font-weight: 700; color: var(--ink); font-size: 13px; }

/* events: a left sidebar with a spine, dots at the exact year, de-clustered labels.
   It's a flex column beside the scroller (NOT inside it), so figures never slide
   under it and horizontal scroll can't grow the scrollable width. .einner is
   translated by -scrollTop to track the timeline's vertical scroll. */
.events {
  position: relative; z-index: 5;
  flex: 0 0 var(--evt-gutter); width: var(--evt-gutter);
  overflow: hidden;        /* clip flags to the chart viewport, top and bottom */
  background: var(--bg);
  border-inline-start: 1px solid var(--line);  /* divider faces the chart */
  box-shadow: 7px 0 16px -10px rgba(0,0,0,.22);
}
[dir="ltr"] .events { box-shadow: -7px 0 16px -10px rgba(0,0,0,.22); }
.events[hidden] { display: none; }
.events .einner {
  position: absolute; left: 0; top: 0; width: 100%;
  will-change: transform;  /* JS translateY(-scrollTop) tracks vertical scroll */
}
.events .espine { position: absolute; left: 0; top: 0; overflow: visible; }
.events .espine .spine-line { stroke: var(--axis); stroke-width: 1; opacity: .55; }
.events .eflags { position: absolute; left: 0; top: 0; }
/* pinned legend for the event types — stays put while flags scroll under it */
.events .elegend {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 12px 8px; background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 5px 10px -7px rgba(0,0,0,.28);
  font-size: 11.5px; font-weight: 600;
  /* takes pointer events so legend clicks don't fall through to a flag that has
     scrolled underneath, and so the items can act as event-type filters */
  pointer-events: auto;
}
.events .elegend .eitem {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; color: inherit; background: none; border: 0;
  padding: 1px 2px; margin: 0; border-radius: 4px; cursor: pointer;
  text-align: start; transition: opacity .12s ease, background .12s ease;
}
.events .elegend .eitem:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.events .elegend .eitem.off { opacity: .38; }   /* type currently filtered out */
.events .elegend .edot {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; line-height: 1;
}
.events .elegend .edot .ic { width: 9px; height: 9px; }
.events .elegend .edot.world  { background: var(--event); }
.events .elegend .edot.jewish { background: var(--event-j); }
.events .elegend .edot.shift  { background: var(--shift); }
/* drag handle on the rail's inner edge to resize the gutter */
.events .erail-handle {  /* on the rail's inner (chart-facing) edge */
  position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px;
  cursor: col-resize; pointer-events: auto; z-index: 9;
}
.events .erail-handle::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px;
  background: var(--shift); opacity: 0; transition: opacity .12s ease;
}
.events .erail-handle:hover::after,
.events.resizing .erail-handle::after { opacity: .6; width: 2px; }
body.col-resizing { cursor: col-resize; user-select: none; }
/* full-width correlation line, fixed across the chart, revealed on hover */
.ehl {
  position: fixed; left: 0; width: 100vw; height: 0; z-index: 4;
  border-top: 1px dashed var(--event); opacity: 0; transition: opacity .12s ease;
  pointer-events: none;
}
.ehl.show { opacity: .45; }
/* a pinned sage's pair stays put until unpinned — solid and a touch bolder so it
   reads as anchored next to the dashed hover/event lines */
.ehl.pin { border-top-style: solid; }
.ehl.pin.show { opacity: .7; }
.events .eflag {
  position: absolute; transform: translateY(-50%);
  background: #fff; border: 1px solid var(--event); color: var(--event);
  font-size: 11px; font-weight: 600; padding: 1.5px 7px; border-radius: 5px;
  white-space: nowrap; pointer-events: auto; cursor: pointer; line-height: 1.45;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.events .eflag:hover { z-index: 8; box-shadow: 0 3px 9px rgba(0,0,0,.18); }
.events .eflag .yr { opacity: .6; font-weight: 500; margin-inline-start: 5px; font-variant-numeric: tabular-nums; }
.events .eflag .emark { margin-inline-end: 4px; font-size: 9.5px; opacity: .85; }
.events .eflag.jewish { border-color: var(--event-j); color: var(--event-j); }
.events .eflag.shift {
  border-color: var(--shift); color: var(--shift);
  background: color-mix(in srgb, var(--shift) 7%, #fff);
  font-weight: 700;
}
.events .eflag .smark { margin-inline-end: 4px; font-size: 10px; }

/* columns: axis gutter + one full-width field of lane-packed bars */
.cols { position: relative; display: flex; flex-direction: row; z-index: 2; }
.axis-col { width: var(--axis-w); flex: 0 0 var(--axis-w); }
.field { position: relative; flex: 0 0 auto; }

/* lifespan bars — horizontal name, edge rail for book markers */
.bar {
  position: absolute;
  border-radius: 10px; cursor: pointer; color: var(--ink);
  /* soft tinted card; --c is the era colour, set per bar in JS */
  background: color-mix(in srgb, var(--c) 13%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--c) 28%, #ffffff);
  border-inline-start: 4px solid var(--c); /* accent on the reading-start edge */
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  /* book rail sits on the reading-end edge; keep text clear of it */
  padding: 8px 12px 7px; padding-inline-end: var(--rail-w); overflow: hidden;
  transition: box-shadow .12s ease, transform .08s ease, opacity .15s ease;
}
/* a chosen search result: a calm ring in the era colour, with an entry pulse */
.bar.search-hit {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 65%, #fff), 0 6px 18px rgba(0,0,0,.16);
  z-index: 6;
}
.bar.search-hit.pulse { animation: barpulse 1.5s ease-out 1; }
@keyframes barpulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent), 0 6px 18px rgba(0,0,0,.16); }
  70%  { box-shadow: 0 0 0 12px transparent, 0 6px 18px rgba(0,0,0,.16); }
  100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 65%, #fff), 0 6px 18px rgba(0,0,0,.16); }
}
.bar::before { /* subtle rail divider */
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: var(--rail-w);
  border-inline-end: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
}
.bar:hover { box-shadow: 0 5px 16px rgba(0,0,0,.14); transform: translateY(-1px); z-index: 6; }
.bar .name {
  display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2;
  color: var(--ink); letter-spacing: -0.2px;
}
.bar .yrs {
  display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.bar.circa .yrs::before { content: "± "; }
.bar .yrs .age { display: block; opacity: .8; font-weight: 500; }
.bar .region {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 10.5px; font-weight: 600; color: var(--ink);
  background: rgba(0,0,0,.05); padding: 2px 8px; border-radius: 999px;
  cursor: pointer; max-width: 100%;
}
.bar .region i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.bar .region:hover { background: rgba(0,0,0,.1); }

/* pin toggle — sits in the reading-end top corner, over the book rail.
   Hidden until the bar is hovered; stays visible (and tinted) while pinned. */
.bar-pin {
  position: absolute; top: 3px; inset-inline-end: 1px; z-index: 7;
  display: grid; place-items: center; width: 18px; height: 18px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer; color: var(--muted);
  background: color-mix(in srgb, var(--c) 16%, #fff);
  font-size: 11px; line-height: 0; opacity: 0;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.bar:hover .bar-pin, .bar.pinned .bar-pin { opacity: 1; }
.bar-pin:hover { color: var(--c); background: color-mix(in srgb, var(--c) 28%, #fff); }
.bar.pinned .bar-pin {
  color: #fff; background: var(--c);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--c) 45%, transparent);
}
/* a pinned sage gets a calm ring in its era colour so it reads as "held" */
.bar.pinned { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 60%, #fff), 0 5px 16px rgba(0,0,0,.14); }

/* book markers — pinned to the left rail at their publication year */
.book {
  position: absolute; inset-inline-end: calc(var(--rail-w) / 2 - 5.5px); transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c); border: 2px solid #fff; cursor: pointer; z-index: 7;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent);
}
.book:hover { transform: translateY(-50%) scale(1.45); }

.hint {
  text-align: center; color: var(--muted); font-size: 12.5px;
  padding: 8px; background: var(--panel); border-top: 1px solid var(--line);
}

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed; z-index: 50; max-width: 290px;
  background: #2b2620; color: #f7f4ee; border-radius: 10px; padding: 11px 13px;
  font-size: 13px; line-height: 1.5; pointer-events: none;
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
}
.tooltip h4 { margin: 0 0 4px; font-family: "Rubik", sans-serif; font-size: 16px; }
.tooltip .en { color: #c9c1b1; font-size: 12px; margin-bottom: 6px; }
.tooltip .meta { color: #b7ae9d; font-size: 12px; margin-top: 6px; }
.tooltip .books { margin-top: 7px; border-top: 1px solid #46402f; padding-top: 6px; }
.tooltip .books .b { font-size: 12.5px; margin-top: 3px; }
.tooltip .books .b .by { color: #9b9384; font-variant-numeric: tabular-nums; }
.tooltip .region-tip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; }
.tooltip .region-tip i { width: 8px; height: 8px; border-radius: 50%; }
.tooltip .go { margin-top: 8px; color: #e9bf7e; font-size: 12px; font-weight: 600; }

/* ---------- world map panel ---------- */
.map-panel {
  position: fixed; bottom: 46px; left: 16px; z-index: 30;
  width: 260px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,.16); overflow: hidden;
}
.map-btns { display: inline-flex; align-items: center; gap: 2px; }
/* free-resize grip in the bottom corner; svg width:100% scales to any width.
   diagonal strokes clipped to the corner triangle = the classic resize grip */
.map-resize {
  position: absolute; bottom: 4px; right: 4px; width: 13px; height: 13px;
  cursor: nwse-resize; touch-action: none; z-index: 2; opacity: .5;
  background: repeating-linear-gradient(45deg,
    var(--muted) 0 1.5px, transparent 1.5px 4px);
  -webkit-mask: linear-gradient(135deg, transparent 0 48%, #000 52%);
          mask: linear-gradient(135deg, transparent 0 48%, #000 52%);
}
.map-resize:hover { opacity: .85; }
.map-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--bg);
  cursor: move; touch-action: none; user-select: none;
}
.map-head.dragging { cursor: move; }
.map-title { font-family: "Rubik", sans-serif; font-weight: 700; font-size: 13.5px; }
.map-toggle {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 18px; line-height: 1; padding: 2px 4px; transition: transform .15s ease;
}
/* in LTR, float the map bottom-right to mirror the layout */
[dir="ltr"] .map-panel { left: auto; right: 16px; }
.map-panel.collapsed .map-toggle { transform: rotate(-90deg); }
/* panel is bottom-right in LTR, so mirror the collapse chevron to point inward */
[dir="ltr"] .map-panel.collapsed .map-toggle { transform: rotate(90deg); }
.map-panel.collapsed .map-body { display: none; }
.map-body { padding: 8px 8px 6px; }
.map-body svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.map-hint { text-align: center; color: var(--muted); font-size: 11px; margin-top: 4px; }
/* date scrubber for the political-border overlay: drag to any year (snaps to the
   nearest border slice); also auto-tracks the hovered sage's date. Direction is
   inherited from the UI dir, so the thumb travels oldest→present the natural way
   for each language (RTL: present on the left; LTR: present on the right). */
.map-slider { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.map-slider-year {
  flex: 0 0 auto; font-size: 10px; color: var(--muted); min-width: 52px;
  text-align: start; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85;
}
/* a thin, restrained scrubber: 3px hairline track, small circular thumb that
   warms to --shift on interaction. Custom-styled per engine (no native chrome). */
.map-slider input[type="range"] {
  flex: 1 1 auto; min-width: 0; height: 14px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.map-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 28%, transparent);
}
.map-slider input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 28%, transparent);
}
.map-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--panel); border: 1.5px solid var(--muted);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.map-slider input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--muted);
  background: var(--panel);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.map-slider input[type="range"]:hover::-webkit-slider-thumb,
.map-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  border-color: var(--shift); transform: scale(1.12);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shift) 18%, transparent);
}
.map-slider input[type="range"]:hover::-moz-range-thumb,
.map-slider input[type="range"]:focus-visible::-moz-range-thumb {
  border-color: var(--shift); transform: scale(1.12);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shift) 18%, transparent);
}
.map-slider input[type="range"]:active::-webkit-slider-thumb {
  border-color: var(--shift); background: var(--shift);
}
.map-slider input[type="range"]:active::-moz-range-thumb {
  border-color: var(--shift); background: var(--shift);
}
.map-slider input[type="range"]:focus { outline: none; }

/* era political borders, shown while hovering a sage */
#map-borders { pointer-events: none; }
#map-borders .bder {
  fill: var(--ink); fill-opacity: .05;
  stroke: #7a5b2e; stroke-width: .5; stroke-opacity: .55;
  stroke-linejoin: round;
}
#map-borders .blabel {
  font-family: "Rubik", sans-serif; font-size: 6px; font-weight: 700;
  fill: #5a4326; paint-order: stroke; stroke: var(--panel); stroke-width: 1.8px;
  stroke-linejoin: round; text-anchor: middle;
}
#map-borders .bcap {
  font-family: "Rubik", sans-serif; font-size: 8px; font-weight: 700;
  fill: var(--muted); paint-order: stroke; stroke: var(--panel); stroke-width: 2.4px;
  stroke-linejoin: round;
}
/* loading ring while a border slice fetches — same idea as the Wikipedia
   drawer's .dspinner, scaled down and toned to the border palette. */
#map-borders .bloader-dim {
  fill: #fff; opacity: .45;                      /* dim the map under the spinner */
}
#map-borders .bloader-msg {
  fill: #7a5b2e; font-size: 9px; font-weight: 600;
  text-anchor: middle; dominant-baseline: hanging;
}
#map-borders .bloader-track {
  fill: none; stroke: var(--line); stroke-width: 2; opacity: .5;
}
#map-borders .bloader-arc {
  fill: none; stroke: #7a5b2e; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 20 62; opacity: .85;         /* arc ≈ a quarter of the ring */
  transform-box: fill-box; transform-origin: center;
  animation: bloader-spin .8s linear infinite;
}
@keyframes bloader-spin { to { transform: rotate(360deg); } }

#map-routes path {
  fill: none; stroke: var(--shift); stroke-width: 1.3;
  stroke-dasharray: 3 3; opacity: .5; pointer-events: none;
}
#mig-arrow path { fill: var(--shift); }
#map-dots circle { cursor: pointer; transition: r .12s ease, opacity .12s ease; }
#map-dots .mdot:hover circle { r: 5.6px; }
#map-dots .mlabel {
  font-family: "Rubik", sans-serif; font-size: 9px; font-weight: 700;
  fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 2.6px;
  stroke-linejoin: round; pointer-events: none;
}
#map-dots .moff {
  font-size: 12px; font-weight: 700; fill: var(--muted);
  paint-order: stroke; stroke: var(--panel); stroke-width: 2.4px;
  stroke-linejoin: round; pointer-events: none;
  /* keep the « pointing left (off-frame) — without this it bidi-mirrors in RTL */
  direction: ltr; unicode-bidi: bidi-override;
}
#map-dots .mdot.active circle { stroke: #fff; stroke-width: 2px; r: 5.6px; }
#map-dots .mdot.dim { opacity: .25; }
/* region labels show at rest; while a sage is hovered the whole #map-dots group
   is hidden by .pinned, so they only ever appear when nothing is hovered */
#map-dots .mlabel { opacity: 1; transition: opacity .12s ease; }
/* while a sage is hovered, hide the region-filter dots and the Torah-center
   migration arrows, showing only the pin */
#map-svg.pinned #map-dots,
#map-svg.pinned #map-routes { opacity: 0; pointer-events: none; }
#map-dots, #map-routes { transition: opacity .12s ease; }
#map-pin {
  pointer-events: none;
  animation: pin-drop .28s cubic-bezier(.2,1.15,.45,1) both;
}
#map-pin .pin-shadow { fill: rgba(0,0,0,.32); }
#map-pin .pin-origin {
  stroke: #fff; stroke-width: 1.6;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45));
}
#map-pin .pin-move {
  stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 3 3; opacity: .9;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.4));
}
#map-pin .pin-move-head { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.4)); }
#map-pin .pin-approx {
  fill: none; stroke-width: 1.1; stroke-dasharray: 2.5 2.5; opacity: .7;
}
#map-pin .pin-label {
  font-family: "Rubik", sans-serif; font-size: 8px; font-weight: 700;
  fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 2.6px;
  stroke-linejoin: round; text-anchor: middle; pointer-events: none;
}
#map-pin .pin-label.dest { font-size: 9.5px; }
#map-pin .pin-body {
  stroke: #fff; stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 1.2px 1.6px rgba(0,0,0,.45));
}
@keyframes pin-drop {
  0%   { transform: translateY(-9px) scale(.6); opacity: 0; }
  65%  { transform: translateY(0) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---------- Wikipedia drawer ---------- */
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
  width: min(540px, 94vw); display: flex; flex-direction: column;
  background: var(--panel); box-shadow: 6px 0 30px rgba(0,0,0,.22);
  border-right: 1px solid var(--line);
  animation: slideIn .18s ease;
}
.drawer[hidden] { display: none; }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.dtabs { display: inline-flex; background: #ece6da; border-radius: 999px; padding: 3px; }
.dtab {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 5px 14px; border-radius: 999px;
}
.dtab.active { background: var(--ink); color: #fbfaf6; }
.dtitle { flex: 1 1 auto; font-weight: 700; font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dopen, .dclose, .dmobile {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 15px; cursor: pointer; text-decoration: none;
}
.dopen:hover, .dclose:hover, .dmobile:hover { background: #f1ece1; }
.dmobile { font-size: 14px; }
.dmobile.active {
  background: color-mix(in srgb, var(--event) 14%, #fff);
  border-color: color-mix(in srgb, var(--event) 45%, #fff);
}
.dframe-wrap { flex: 1 1 auto; position: relative; background: #fff; }
.dframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dloader { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: #fff; }
.dloader[hidden] { display: none; }
.dspinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink); animation: dspin 0.8s linear infinite; }
@keyframes dspin { to { transform: rotate(360deg); } }

/* ---------- About modal ---------- */
.about-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.about-btn:hover { background: #f1ece1; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(20,16,10,.45);
  animation: fadeIn .15s ease;
}
.modal-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(620px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3);
  animation: popIn .18s ease;
}
@keyframes popIn { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg);
  border-radius: 14px 14px 0 0;
}
.modal-title { flex: 1 1 auto; font-family: "Rubik", sans-serif; font-weight: 700; font-size: 16px; }
.modal-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 15px; cursor: pointer;
}
.modal-close:hover { background: #f1ece1; }
.modal-body { padding: 4px 18px 18px; overflow-y: auto; }
.modal-body h3 {
  font-family: "Rubik", sans-serif; font-size: 14px; font-weight: 700;
  margin: 17px 0 3px; color: var(--ink);
}
.modal-body p { margin: 4px 0; color: #4a4338; font-size: 14px; line-height: 1.62; }
.modal-body code {
  background: #ece6da; border-radius: 4px; padding: 0 4px;
  font-size: 13px; font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- Mobile ----------
   Compact the chrome so the timeline gets the screen. The events gutter and
   lane width are driven from JS (see app.js isMobile), not here. */
@media (max-width: 640px) {
  :root { --axis-w: 50px; }

  .topbar { gap: 8px; padding: 9px 14px; }
  .title-block h1 { font-size: 18px; }
  .subtitle { display: none; }            /* the legend already names the eras */
  .topbar-row { gap: 8px 14px; }
  .view-controls { gap: 8px 12px; }
  .search-box { width: 138px; }
  .search-box:focus { width: 168px; }

  .toggle { padding: 2px; }
  .seg { font-size: 13px; padding: 6px 13px; }

  /* legend: let it wrap instead of running off the edge */
  .legend { flex-wrap: wrap; gap: 7px 12px; }
  .legend .item { font-size: 12.5px; }
  .legend .dot { width: 10px; height: 10px; }
  .legend-cap { display: none; }

  .evt-toggle { font-size: 13px; }
  .region-reset { font-size: 12px; padding: 6px 12px; }

  /* the hint talks about hovering — meaningless on touch; reclaim the space */
  .hint { display: none; }

  /* events rail is narrow on phones — shrink flags so names fit the gutter */
  .events .eflag { font-size: 10px; padding: 1.5px 5px; }
  .events .eflag .yr { margin-inline-start: 3px; }

  /* map: smaller and tucked into the corner; collapsed by default via JS */
  .map-panel { width: 190px; bottom: 12px; left: 10px; }
  .map-title { font-size: 12.5px; }

  .tooltip { max-width: 240px; }
}