/* ═══════════════════════════════════════════
   MAP — "Rome Through Time" (full page, worldmap module)
   Same page/panel shell as At a Glance (.ag-page/.ag-panel); the map,
   chapter panel and year slider are driven by js/roman-map.js. Loaded
   after core/css/style.css, so these rules win over its world-map (.cm-*)
   styles.
═══════════════════════════════════════════ */
body.map-page-open #app,
body.map-page-open #scroll-hint { display:none; }

.cm-page {
  --cm-roman:#c9a844;
  --cm-successor:#b4606f;
  --cm-power:#5f978a;
  --cm-other:#2b2735;
}
.cm-header { margin-bottom:30px; }
.cm-subtitle { max-width:760px; }

/* The map spans the full width; the chapter panel (.cm-side) floats over
   its right side. fitAspect() in js/roman-map.js measures the panel so
   chapter views are framed in the uncovered area to its left. */
.cm-body {
  --cm-side-w:clamp(449px, calc(33.35% + 58px), 600px);
  position:relative;
  isolation:isolate; /* keeps the overlays below the sticky .cm-controls */
  container-type:inline-size; /* lets .cm-stage size its height off this width */
}

/* ── Map stage ── */
.cm-stage {
  position:relative;
  /* Tall enough for the chapter panel, but short enough that the map and
     its legend fit under the pinned controls (nav + title + controls ≈ 280px). */
  height:calc(100cqw * 7.4 / 16 + 50px);
  min-height:540px;
  max-height:max(540px, calc(100vh - 280px));
  background:#0b0913;
  overflow:hidden;
  touch-action:none;
  user-select:none;
}
.cm-stage > svg { display:block; width:100%; height:100%; cursor:grab; }
.cm-stage > svg.is-dragging { cursor:grabbing; }
/* Icons inside the stage keep their own size: core's world-map rule
   (.cm-stage svg) sizes every svg in the stage like the map. */
.cm-stage svg:not(#cm-svg) { cursor:inherit; }
.cm-stage .cm-map-btns svg { width:18px; height:18px; }
.cm-stage .cm-sw-star { width:13px; height:13px; }
.cm-loading {
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-ui); font-size:15px; color:var(--white-dim);
}
.cm-sea, .cm-lakes { fill:#0b0913; }
.cm-land { fill:#1b1822; }
.cm-rivers { fill:none; stroke:#22324a; stroke-width:1.1; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:0.85; pointer-events:none; }
.cm-roads { fill:none; stroke:#e8d9b0; stroke-width:1; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:0.5; pointer-events:none; }
.cm-ref { fill:none; stroke:#f3e7c9; stroke-width:1.6; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; opacity:0.85; pointer-events:none; }

.cm-reg {
  stroke:#0b0913; stroke-width:0.7; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  transition:opacity 0.7s ease, fill 0.7s ease;
}
.cm-reg.off { opacity:0; pointer-events:none; }
.cm-reg.k-other { fill:var(--cm-other); }
.cm-reg.k-power { fill:var(--cm-power); fill-opacity:0.8; }
.cm-reg.k-successor { fill:var(--cm-successor); fill-opacity:0.9; }
.cm-reg.k-roman { fill:var(--cm-roman); fill-opacity:0.9; }
.cm-reg:hover { filter:brightness(1.2); stroke:#f4ecd6; stroke-width:1.1; }

/* Labels, capitals and markers live in scale(unit) groups (applyVB), so
   their sizes below are on-screen pixels at every zoom level. */
.cm-label {
  font-family:var(--f-ui); font-size:11.5px; font-weight:600; letter-spacing:0.04em;
  fill:rgba(255,255,255,0.88); text-anchor:middle; dominant-baseline:middle;
  paint-order:stroke; stroke:rgba(8,6,15,0.75); stroke-width:3px; stroke-linejoin:round;
  pointer-events:none; transition:opacity 0.6s ease;
}
.cm-label.k-roman {
  font-family:var(--f-heading); font-size:13px; font-weight:700; letter-spacing:0.06em;
  fill:#1f1606; stroke:rgba(255,236,186,0.55);
}
.cm-label.off { opacity:0; }

.cm-capital path { fill:#fff; stroke:#08060f; stroke-width:1.2px; transform:scale(0.62); }
.cm-capital text {
  font-family:var(--f-heading); font-size:12.5px; font-weight:700; fill:#fff;
  paint-order:stroke; stroke:#08060f; stroke-width:3px; stroke-linejoin:round;
}
.cm-capital, .cm-capital * { pointer-events:none; }
#cm-capitals.no-names text { display:none; }

.cm-marker { cursor:pointer; animation:cm-marker-in 0.5s ease both; }
@keyframes cm-marker-in { from { opacity:0; } to { opacity:1; } }
.cm-mk-halo { fill:rgba(8,6,15,0.35); stroke:currentColor; stroke-width:1.5px; }
.cm-mk-core { fill:currentColor; stroke:#08060f; stroke-width:1px; transform-box:fill-box; transform-origin:center; transition:transform 0.2s ease; }
.cm-marker.hi .cm-mk-core { transform:scale(1.55); }
.cm-marker.hi .cm-mk-halo { animation:cm-pulse 1.4s ease-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes cm-pulse { 0% { transform:scale(1); opacity:1; } 100% { transform:scale(2.2); opacity:0; } }

/* Event-type colours: map markers, Key Events dots and tooltips. */
.t-gain { color:#7fc98f; }
.t-loss { color:#e0707a; }
.t-battle { color:#e8b04b; }
.t-treaty { color:#8fb6e8; }
.t-founding { color:#c9a0e8; }
.t-ruler { color:#f3e7c9; }
.t-other { color:#a19d95; }

.cm-year-badge {
  position:absolute; left:20px; top:20px; z-index:3; pointer-events:none;
  max-width:min(420px, calc(100% - var(--cm-side-w) - 120px));
  padding:14px 22px 14px 20px;
  background:rgba(8,6,16,0.62);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.cm-year {
  font-family:var(--f-heading); font-weight:600;
  font-size:clamp(30px, 4vw, 48px); line-height:1.05;
  color:var(--white); font-variant-numeric:tabular-nums;
}
.cm-era {
  margin-top:6px;
  font-family:var(--f-ui); font-size:15px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase; color:var(--gold);
}
.cm-state { margin-top:4px; font-family:var(--f-ui); font-size:14px; line-height:1.35; color:var(--white-mid); }
.cm-state:empty { display:none; }
/* Area of the Roman state's outlines for the shown year; details in the (i) tooltip. */
.cm-area {
  display:flex; align-items:center; gap:10px;
  margin-top:10px;
  font-family:var(--f-ui); font-size:17px; font-weight:500; color:var(--white);
  font-variant-numeric:tabular-nums;
}
.cm-area[hidden] { display:none; }
.cm-area svg { width:22px; height:22px; flex:none; }
.cm-area-icon { color:var(--gold); }
.cm-area-info {
  display:grid; place-items:center; flex:none;
  margin-left:2px; padding:0; color:var(--gold);
  pointer-events:auto; cursor:help; border-radius:50%;
  transition:color 0.2s;
}
.cm-area-info:hover, .cm-area-info:focus-visible { color:var(--white); outline:none; }

.cm-map-btns { position:absolute; right:calc(var(--cm-side-w) + 44px); top:16px; z-index:3; display:flex; flex-direction:column; gap:6px; }
.cm-map-btns button {
  display:grid; place-items:center;
  width:38px; height:38px;
  background:rgba(8,6,16,0.85);
  border:1px solid rgba(201,168,68,0.35);
  color:var(--gold);
  transition:background 0.2s, color 0.2s, border-color 0.2s;
}
.cm-map-btns button:hover,
.cm-map-btns button:focus-visible { background:var(--gold); border-color:var(--gold); color:var(--dark); outline:none; }

.cm-hint {
  position:absolute; left:calc((100% - var(--cm-side-w) - 44px) / 2); top:16px; z-index:3; transform:translateX(-50%);
  padding:8px 14px;
  background:rgba(8,6,16,0.88); border:1px solid rgba(201,168,68,0.3);
  font-family:var(--f-ui); font-size:14px; color:var(--white);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity 0.25s ease;
}
.cm-hint.is-visible { opacity:1; }
@media (hover:none) { .cm-hint { display:none; } }

.cm-tip {
  position:absolute; z-index:6; max-width:290px;
  padding:10px 12px;
  background:rgba(15,11,25,0.97);
  border:1px solid rgba(201,168,68,0.3);
  box-shadow:0 10px 28px rgba(0,0,0,0.5);
  font-family:var(--f-ui); font-size:14px; line-height:1.4; color:var(--white-mid);
  pointer-events:none; opacity:0; transition:opacity 0.15s;
}
.cm-tip.is-visible { opacity:1; }
.cm-tip b { display:block; margin-bottom:4px; font-family:var(--f-heading); font-size:16px; font-weight:600; color:var(--white); }
.cm-tip-status { display:flex; align-items:center; gap:7px; color:var(--white); }
.cm-tip-note { margin-top:6px; color:var(--white-dim); }
.cm-tip-hint { margin-top:6px; font-size:12.5px; color:var(--gold); }
.cm-tip .cm-dot { width:9px; height:9px; flex:none; border-radius:50%; background:currentColor; }

/* Legend swatches (also used by the tooltip and the "Key powers" line). */
.cm-sw { display:inline-block; width:11px; height:11px; flex:none; }
.cm-sw--roman { background:var(--cm-roman); }
.cm-sw--successor { background:var(--cm-successor); }
.cm-sw--power { background:var(--cm-power); }
.cm-sw--other { background:var(--cm-other); outline:1px solid rgba(255,255,255,0.18); outline-offset:-1px; }
.cm-sw-star { width:13px; height:13px; flex:none; fill:#fff; }

/* ── Chapter panel — a translucent overlay on the right of the map. Its
   height follows the map; long chapters scroll inside it. ── */
.cm-side {
  position:absolute; top:16px; right:32px; bottom:16px; z-index:4;
  width:var(--cm-side-w);
  display:flex; flex-direction:column;
  padding:24px 36px 28px 38px;
  background:rgba(8,6,16,0.66);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
/* Only the Key Events list scrolls; the chapter text above it stays put.
   The inner wrapper only scrolls as a fallback when the text alone leaves
   the list less than its min-height (long chapters on short screens). */
.cm-side-inner {
  flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto;
  display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:rgba(201,168,68,0.35) transparent;
}
.cm-side-inner > * { flex:none; }
.cm-side-inner > .cm-events {
  flex:1 1 auto; min-height:150px; margin-bottom:0; padding-right:6px;
  overflow-x:hidden; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(201,168,68,0.35) transparent;
}
.cm-side-inner.is-fading { animation:cm-fade 0.5s ease; }
@keyframes cm-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.cm-chapter-kicker {
  font-family:var(--f-ui); font-size:14px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase; color:var(--gold);
}
.cm-chapter-title {
  margin:6px 0 8px;
  font-family:var(--f-heading); font-weight:600; font-size:24px; line-height:1.15;
  color:var(--white);
}
.cm-chapter-text { font-size:15.5px; line-height:1.5; color:var(--white-mid); }

/* Who was in power — a card that opens the ruler's profile (or Wikipedia). */
.cm-facts { margin-top:16px; }
.cm-ruler {
  display:flex; align-items:center; gap:12px; width:100%; min-width:0;
  padding:7px 12px 7px 7px; text-align:left; color:inherit;
  border:1px solid rgba(255,255,255,0.12); border-radius:4px;
  transition:background 0.2s, border-color 0.2s;
}
.cm-ruler:hover, .cm-ruler:focus-visible { border-color:rgba(201,168,68,0.45); }
.cm-ruler:hover, .cm-ruler:focus-visible { background:rgba(201,168,68,0.08); outline:none; }
/* Capital · territory, on one line under the ruler card. */
.cm-meta {
  display:flex; flex-wrap:wrap; gap:4px 22px;
  margin-top:10px;
  font-family:var(--f-ui); font-size:14px; line-height:1.4; color:var(--white);
}
.cm-fact-label {
  margin-right:4px;
  font-family:var(--f-ui); font-size:11.5px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--white-dim);
}
.cm-ruler-portrait {
  display:grid; place-items:center; flex:none; overflow:hidden;
  width:40px; height:48px; border-radius:3px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(201,168,68,0.3);
}
.cm-ruler-portrait img { width:100%; height:100%; object-fit:cover; object-position:top; }
.cm-ruler-portrait .cm-ruler-ph { width:26px; height:32px; object-fit:contain; opacity:0.6; }
.cm-ruler-meta { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cm-ruler-name { font-family:var(--f-heading); font-size:16px; font-weight:600; line-height:1.2; color:var(--white); transition:color 0.2s; }
.cm-ruler:hover .cm-ruler-name { color:var(--gold); }
.cm-ruler-title { font-family:var(--f-ui); font-size:13px; line-height:1.3; color:var(--white-dim); }
.cm-ruler-go { flex:none; margin-left:auto; color:var(--gold); font-size:15px; }
.cm-ruler-go svg { display:block; }

.cm-powers {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  margin-top:6px;
  font-family:var(--f-ui); font-size:14px; line-height:1.4; color:var(--white-mid);
}
.cm-powers:empty { display:none; }
.cm-powers-label {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--white-dim);
}

/* Key Events: timeline rows like the Christianity map's (date · coloured
   dot on a thin vertical line · title). x of the line = 92px date + 16px
   gap + 4px (half the 9px dot). Same-date rows drop the date and dot. */
.cm-events-heading { margin:24px 0 6px; }
.cm-events .ag-event {
  flex:none;
  grid-template-columns:92px 9px minmax(0, 1fr);
  align-items:start; column-gap:16px;
  padding:7px 8px 7px 0; border-bottom:none; border-radius:3px;
}
.cm-events .ag-event::before { top:0; bottom:0; width:1px; left:112px; background:var(--rail-line); }
.cm-events .ag-event:first-child::before { background:linear-gradient(to bottom, transparent, var(--rail-line) 18px); }
.cm-events .ag-event:last-child::before { background:linear-gradient(to bottom, var(--rail-line) calc(100% - 12px), transparent); }
.cm-events .ag-event:only-child::before { display:none; }
.cm-events .ag-event--grouped { padding-top:0; }
.cm-events .ag-event-dot { margin-top:6px; width:9px; height:9px; background:currentColor; box-shadow:none; }
.cm-events .ag-event--grouped .ag-event-dot { visibility:hidden; }
.cm-events .ag-event-year { font-family:var(--f-ui); font-size:14px; line-height:1.4; text-align:right; white-space:nowrap; color:var(--white-dim); }
.cm-events .ag-event-text { font-family:var(--f-ui); font-weight:400; font-size:16px; line-height:1.35; }
.cm-events .cm-ext { font-size:12px; color:var(--white-dim); transition:color 0.2s; }
.cm-events .ag-event.is-hi { background:rgba(201,168,68,0.08); }
.cm-events .ag-event.is-hi .ag-event-text,
.cm-events .ag-event:hover .ag-event-text { color:var(--gold); }
.cm-events .ag-event:hover .cm-ext { color:var(--gold); }

.cm-side-nav {
  display:flex; align-items:center; gap:12px;
  margin-top:18px;
}
.cm-chapter-count {
  flex:1; text-align:center;
  font-family:var(--f-ui); font-size:15px; color:var(--white-dim); font-variant-numeric:tabular-nums;
}
.cm-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px;
  border:1px solid rgba(201,168,68,0.75); border-radius:4px;
  font-family:var(--f-ui); font-size:16px; font-weight:600; color:var(--gold);
  transition:background 0.2s, color 0.2s, border-color 0.2s;
}
.cm-btn:hover:not(:disabled),
.cm-btn:focus-visible { background:var(--gold); border-color:var(--gold); color:var(--dark); outline:none; }
.cm-btn:disabled { opacity:0.3; cursor:default; }

/* ── Timeline controls ── */
/* Desktop/tablet: pins just below the title bar once scrolled (same offset,
   edge-to-edge bleed and .is-stuck shadow as .ag-era-list), so the eras and
   slider stay reachable while reading further down. main.js also snaps the
   first scroll down from the header straight to this position. */
.cm-controls {
  position:sticky; top:18px; z-index:5;
  margin:0 -56px 22px; padding:10px 56px 4px;
  background:rgba(8,6,16,0.97);
  border-bottom:1px solid transparent;
  box-shadow:0 8px 14px -8px rgba(0,0,0,0);
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.cm-controls.is-stuck {
  border-bottom-color:rgba(255,255,255,0.14);
  box-shadow:0 8px 14px -8px rgba(0,0,0,0.5);
}
/* Fifteen eras don't fit one row, so they scroll sideways; the active one
   is kept centred (centerEra) and the arrows/fades show there is more. */
.cm-eras-wrap { position:relative; }
.cm-eras {
  display:flex; gap:6px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.cm-eras::-webkit-scrollbar { display:none; }
.cm-eras-wrap.has-prev .cm-eras { -webkit-mask-image:linear-gradient(to right, transparent 0, #000 64px); mask-image:linear-gradient(to right, transparent 0, #000 64px); }
.cm-eras-wrap.has-next .cm-eras { -webkit-mask-image:linear-gradient(to left, transparent 0, #000 64px); mask-image:linear-gradient(to left, transparent 0, #000 64px); }
.cm-eras-wrap.has-prev.has-next .cm-eras {
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.cm-eras-arrow {
  position:absolute; top:50%; z-index:1; transform:translateY(-50%);
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:rgba(8,6,16,0.92); border:1px solid rgba(201,168,68,0.4); color:var(--gold);
  transition:background 0.2s, color 0.2s;
}
.cm-eras-arrow--prev { left:-4px; }
.cm-eras-arrow--next { right:-4px; }
.cm-eras-arrow[hidden] { display:none; }
.cm-eras-arrow:hover, .cm-eras-arrow:focus-visible { background:var(--gold); color:var(--dark); outline:none; }
.cm-eras button {
  flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,0.14);
  font-family:var(--f-ui); font-size:14px; line-height:1.25; color:var(--white-mid); text-align:center;
  transition:border-color 0.2s, background 0.2s, color 0.2s;
}
.cm-era-name { display:block; font-family:var(--f-heading); font-size:14px; color:var(--gold); white-space:nowrap; }
.cm-eras button small { font-size:12.5px; color:var(--white-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cm-eras button:hover { border-color:rgba(201,168,68,0.45); color:var(--white); }
.cm-eras button.on { border-color:rgba(201,168,68,0.6); background:rgba(201,168,68,0.1); color:var(--white); }

/* Top-aligned so the slider line (22px into .cm-track) sits level with
   the 48px Play button's centre. */
.cm-bar { display:flex; align-items:flex-start; gap:16px; margin-top:12px; }
.cm-play {
  display:inline-flex; align-items:center; gap:12px; flex:none;
  height:48px; padding:0 22px 0 18px;
  background:var(--gold); border:1px solid var(--gold); border-radius:4px; color:var(--dark);
  font-family:var(--f-ui); font-size:17px; font-weight:600; white-space:nowrap;
  transition:background 0.2s, border-color 0.2s;
}
.cm-play:hover { background:var(--gold-dim); border-color:var(--gold-dim); }
.cm-play .cm-icon-pause,
.cm-play.is-playing .cm-icon-play { display:none; }
.cm-play.is-playing .cm-icon-pause { display:block; }

.cm-track { position:relative; flex:1; min-width:0; height:60px; margin-top:2px; }
.cm-segs { position:absolute; left:0; right:0; top:19px; height:6px; display:flex; overflow:hidden; }
.cm-segs div { flex:none; height:100%; background:rgba(201,168,68,0.3); box-shadow:inset -2px 0 0 #08060f; transition:background 0.3s; }
.cm-segs div.on { background:var(--gold); }
.cm-ticks { position:absolute; left:0; right:0; top:0; height:44px; pointer-events:none; }
.cm-ticks i { position:absolute; top:17px; width:1px; height:10px; margin-left:0; background:var(--white); opacity:0.22; }
.cm-ticks i.cur { width:2px; top:15px; height:14px; margin-left:-1px; opacity:1; background:var(--gold); }
/* Chapter years under the ticks (below the slider's 44px hit area);
   overlapping ones are hidden by layoutTickLabels in js/roman-map.js. */
.cm-tick-labels { position:absolute; left:0; right:0; top:36px; height:18px; }
.cm-tick-labels button {
  position:absolute; top:0; transform:translateX(-50%);
  padding:1px 2px;
  font-family:var(--f-ui); font-size:10.5px; line-height:1.4; color:var(--white-dim);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:color 0.2s;
}
.cm-tick-labels button.is-hidden { visibility:hidden; }
.cm-tick-labels button:hover { color:var(--white); }
.cm-tick-labels button.cur { color:var(--gold); font-weight:600; }
.cm-track input {
  position:absolute; left:0; right:0; top:0; width:100%; height:44px; margin:0;
  background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.cm-track input:focus { outline:none; }
.cm-track input::-webkit-slider-runnable-track { height:44px; background:transparent; }
.cm-track input::-moz-range-track { height:44px; background:transparent; }
.cm-track input::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; margin-top:12px; border-radius:50%;
  background:var(--dark); border:3px solid var(--gold);
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.cm-track input::-moz-range-thumb { width:15px; height:15px; border-radius:50%; background:var(--dark); border:3px solid var(--gold); }
.cm-track input:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px var(--gold-glow); }

.cm-options { display:flex; align-items:center; gap:10px; flex:none; height:48px; }
.cm-speed { display:flex; }
.cm-speed button,
.cm-follow {
  padding:6px 10px;
  border:1px solid rgba(255,255,255,0.14);
  font-family:var(--f-ui); font-size:14px; color:var(--white-mid);
  transition:border-color 0.2s, color 0.2s, background 0.2s;
}
.cm-speed button + button { border-left:none; }
.cm-speed button:hover,
.cm-follow:hover { color:var(--white); border-color:rgba(201,168,68,0.45); }
.cm-speed button.on { color:var(--gold); background:rgba(201,168,68,0.1); }
.cm-follow[aria-pressed="true"] { color:var(--dark); background:var(--gold); border-color:var(--gold); }

/* ── Legend + layer switches — overlays the bottom of the map. fitAspect()
   in js/roman-map.js measures it so chapter views frame the map area above
   it rather than disappearing behind it. ── */
.cm-legend {
  position:absolute; left:12px; bottom:12px; z-index:3;
  max-width:calc(100% - var(--cm-side-w) - 56px);
  display:grid; grid-template-columns:auto auto;
  padding:12px 16px 14px;
  background:rgba(8,6,16,0.55);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cm-legend-col { min-width:0; }
.cm-legend-col + .cm-legend-col {
  margin-left:20px; padding-left:20px;
  border-left:1px solid rgba(255,255,255,0.14);
}
.cm-legend-heading {
  margin:0 0 8px;
  font-family:var(--f-heading); font-size:14px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--gold);
}
.cm-lg { display:flex; flex-direction:column; gap:5px; }
.cm-lg span, .cm-lg label { display:flex; align-items:center; gap:8px; font-family:var(--f-ui); font-size:12.5px; line-height:1.3; color:var(--white-mid); }
.cm-lg--layers label { position:relative; cursor:pointer; transition:color 0.2s; }
.cm-lg--layers label:hover { color:var(--white); }
.cm-lg--layers input { position:absolute; opacity:0; width:1px; height:1px; }
.cm-lg .cm-switch {
  position:relative; flex:none; display:block; width:26px; height:14px; border-radius:7px;
  background:rgba(255,255,255,0.16); transition:background 0.2s;
}
.cm-switch::after {
  content:""; position:absolute; left:2px; top:2px; width:10px; height:10px; border-radius:50%;
  background:var(--white-mid); transition:transform 0.2s, background 0.2s;
}
.cm-lg--layers input:checked + .cm-switch { background:rgba(201,168,68,0.55); }
.cm-lg--layers input:checked + .cm-switch::after { transform:translateX(12px); background:var(--gold); }
.cm-lg--layers input:focus-visible + .cm-switch { box-shadow:0 0 0 3px var(--gold-glow); }

.cm-notes {
  margin-top:20px; max-width:1000px;
  font-family:var(--f-ui); font-size:13.5px; line-height:1.55; color:var(--white-dim);
}

/* Sources footer: one line that progressively reveals through the arrows
   (initModalSourceSlider), like the event modal's. */
.cm-panel .cm-footer { flex-wrap:nowrap; }
.cm-footer .modal-source-links { flex:1 1 auto; min-width:0; flex-wrap:nowrap; }
.cm-footer .modal-source-label { flex:0 0 auto; margin-bottom:0; }
.cm-footer .modal-source-slider { flex:1 1 auto; min-width:0; overflow-x:hidden; scroll-behavior:smooth; scrollbar-width:none; }
.cm-footer .modal-source-slider::-webkit-scrollbar { display:none; }
.cm-footer .modal-source-slider .modal-source-list { width:max-content; margin-left:0; flex-wrap:nowrap; white-space:nowrap; }

@media (prefers-reduced-motion: reduce) {
  .cm-reg, .cm-label { transition:none; }
  .cm-marker, .cm-marker.hi .cm-mk-halo, .cm-side-inner.is-fading { animation:none; }
}

/* iPad: once the controls pin, drop the era dates so the map gets the room. */
@media (min-width:761px) and (max-width:1200px) {
  .cm-controls.is-stuck .cm-eras button small { display:none; }
  .cm-play { height:38px; gap:10px; padding:0 18px 0 14px; font-size:14px; }
  .cm-play svg { width:16px; height:16px; }
  .cm-options { height:38px; }
  .cm-track { margin-top:-3px; }
}
@media (max-width:1100px) {
  .cm-body { --cm-side-w:clamp(400px, calc(39.1% + 40px), 480px); }
  .cm-stage { min-height:520px; }
  .cm-eras button { padding:7px 10px; }
  .cm-era-name { font-size:13px; }
  .cm-eras button small { font-size:12px; }
  .cm-side { padding:20px 26px 22px 28px; }
}
@media (max-width:900px) {
  .cm-body { --cm-side-w:0px; }
  .cm-stage { height:auto; min-height:0; max-height:none; }
  .cm-stage > svg { height:auto; aspect-ratio:4 / 3.1; }
  .cm-map-btns { right:12px; }
  .cm-hint { left:50%; }
  .cm-year-badge { max-width:calc(100% - 90px); }
  /* Too tall to pin on phones (the bar wraps). */
  .cm-controls { position:static; margin:0 0 22px; padding:0; background:none; box-shadow:none; border-bottom:none; }
  .cm-legend {
    position:static; max-width:none; grid-template-columns:1fr 1fr;
    border:none; border-top:1px solid rgba(255,255,255,0.12); border-radius:0;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  /* Two legend columns side by side down to 560px (core stacks them here). */
  .cm-legend-col + .cm-legend-col { margin:0 0 0 20px; padding:0 0 0 20px; border-top:none; border-left:1px solid rgba(255,255,255,0.14); }
  .cm-stage .cm-area-icon, .cm-stage .cm-sw-star, .cm-stage .cm-map-btns svg { aspect-ratio:auto; }
  .cm-side {
    position:static; width:auto; padding:0; margin-top:28px;
    background:none; border:none; border-radius:0;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .cm-side-inner { overflow:visible; }
  .cm-side-inner > .cm-events { min-height:0; overflow:visible; }
  .cm-bar { flex-wrap:wrap; }
  .cm-track { flex:1 1 calc(100% - 64px); }
  .cm-options { width:100%; justify-content:space-between; }
  .cm-eras-arrow { display:none; }
}
@media (max-width:760px) {
  .cm-panel .cm-footer { display:grid; grid-template-columns:minmax(0, 1fr) 34px 34px; gap:10px 8px; }
  .cm-footer .modal-source-links { display:grid; gap:4px; }
  .cm-footer .modal-mistake-btn { grid-column:1 / -1; justify-self:start; white-space:normal; }
}
@media (max-width:560px) {
  /* Phones: a squarer map and a compact badge (year, era, area) so the
     badge doesn't cover the small map. */
  .cm-stage > svg { aspect-ratio:1 / 1; }
  .cm-year-badge { left:8px; top:8px; padding:6px 10px 7px; max-width:calc(100% - 64px); }
  .cm-year { font-size:22px; }
  .cm-era { margin-top:3px; font-size:10.5px; letter-spacing:1.2px; }
  .cm-state { display:none; }
  .cm-area { gap:6px; margin-top:4px; font-size:13px; }
  .cm-stage .cm-area svg { width:16px; height:16px; }
  .cm-map-btns button { width:34px; height:34px; }
  .cm-chapter-title { font-size:19.5px; }
  .cm-eras button { padding:6px 9px; }
  .cm-legend { grid-template-columns:1fr; }
  .cm-legend-col + .cm-legend-col { margin:14px 0 0; padding:14px 0 0; border-left:none; border-top:1px solid rgba(255,255,255,0.1); }
  .cm-events .ag-event { grid-template-columns:76px 9px minmax(0, 1fr); column-gap:12px; }
  .cm-events .ag-event::before { left:92px; }
  .cm-events .ag-event-year { font-size:12.5px; }
  .cm-events .ag-event-text { font-size:15px; }
  .cm-btn { padding:10px 14px; }
}

/* "Rome in YEAR" map thumbnails (event modal, timeline): the Roman
   state that year in gold; early Rome is ringed (renderThumb in js/roman-map.js). */
.em-map-thumb .on path { fill:var(--gold); }
.em-map-thumb .ring { fill:none; stroke:var(--gold); }
.em-map-thumb .on { filter:drop-shadow(0 0 6px rgba(201,168,68,0.6)); }