/* ════════════════════════════════════════
   MAP — "The Making of the United States" (full page)
   Loaded after core/css/style.css, whose cm-* rules (the worldmap
   module's page, written for Christianity's map) this restates or
   overrides where the USA map differs; the map, chapter panel and year
   slider are driven by js/usa-map.js.
════════════════════════════════════════ */
.cm-header { margin-bottom:30px; }
.cm-header .ag-kicker { color:var(--gold); }
.cm-subtitle { max-width:760px; }

/* The map spans the full width; the chapter panel (.cm-side) floats over
   its right side. fitAspect() in js/usa-map.js measures the panel so
   chapter views are framed in the uncovered area to its left. */
.cm-body {
  --cm-side-w:clamp(420px, calc(31% + 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;
  height:calc(100cqw * 6.4 / 16 + 50px);
  min-height:500px;
  max-height:max(500px, calc(70vh + 8px));
  background:radial-gradient(ellipse at 40% 45%, #111a24 0%, #0b0f16 60%, #08090f 100%);
  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; }
.cm-loading {
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-ui); font-size:15px; color:var(--white-dim);
}
#cm-context path { fill:#1b232c; stroke:#2f3a44; stroke-width:0.6; vector-effect:non-scaling-stroke; }
.cm-region {
  stroke:#0c1117; stroke-width:0.8; vector-effect:non-scaling-stroke; cursor:pointer;
  transition:fill 0.6s ease;
}
.cm-region:hover { stroke:#fff7de; stroke-width:1.6; filter:brightness(1.18); }
.cm-region.flash { animation:cm-region-flash 1.3s ease; }
@keyframes cm-region-flash { 0% { filter:brightness(1.8); } 100% { filter:brightness(1); } }

/* Status colours — shared by the map, legend swatches and tooltip. */
.cm-state     { fill:#45aa85; }
.cm-territory { fill:#e3c57b; }
.cm-claim     { fill:url(#cm-claim); }
.cm-north     { fill:#679bc2; }
.cm-south     { fill:#c67d6b; }
.cm-border    { fill:#b99a4e; }
.cm-sw { width:11px; height:11px; flex:none; display:inline-block; border:1px solid rgba(255,255,255,0.25); }
.cm-sw--state     { background:#45aa85; }
.cm-sw--territory { background:#e3c57b; }
.cm-sw--claim     { background:repeating-linear-gradient(135deg, #363c42 0 4px, #899199 4px 5px); }
.cm-sw--north     { background:#679bc2; }
.cm-sw--south     { background:#c67d6b; }
.cm-sw--border    { background:#b99a4e; }

#cm-labels text {
  font-family:var(--f-ui); font-weight:700; fill:#0e1a1f; text-anchor:middle;
  paint-order:stroke; stroke:rgba(255,255,255,0.18); stroke-linejoin:round;
  pointer-events:none;
}
.cm-ocean text { fill:#5d7180; font:10px var(--f-ui); letter-spacing:3px; pointer-events:none; }

.cm-year-badge {
  position:absolute; left:20px; top:20px; z-index:3; pointer-events:none;
  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-stats { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin-top:10px; }
.cm-stat {
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-ui); font-size:17px; font-weight:500; color:var(--white);
  font-variant-numeric:tabular-nums;
}
.cm-stat[hidden] { display:none; }
.cm-stat-icon { flex:none; color:var(--gold); }
/* Core's .cm-stage svg (the map itself) would stretch these icons, and its
   .cm-pop sits on its own line. */
.cm-stage .cm-stats svg { width:20px; height:20px; cursor:inherit; }
.cm-stage .cm-stats .cm-pop > .cm-stat-icon { width:22px; height:22px; }
.cm-stats .cm-pop { margin-top:0; }
.cm-pop-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-pop-info:hover, .cm-pop-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:5; 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-mid); }
.cm-tip-note { margin-top:6px; color:var(--white-dim); }
.cm-tip-note:empty { display:none; }

/* ── 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 40px 30px 42px;
  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);
}
/* Only the Key Events list scrolls; the chapter text above it stays put.
   The inner wrapper only scrolls as a fallback on very short maps. */
.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:80px; padding-right:6px;
  overflow-x:hidden; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(201,168,68,0.35) transparent;
}
.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 10px;
  font-family:var(--f-heading); font-weight:600; font-size:25.5px; line-height:1.15;
  color:var(--white);
}
.cm-chapter-text { font-size:16px; line-height:1.55; color:var(--white-mid); }
.cm-chapter-stat {
  margin-top:10px; padding:6px 12px;
  border-left:2px solid var(--gold);
  background:rgba(201,168,68,0.06);
  font-family:var(--f-ui); font-size:14px; line-height:1.4; color:var(--white);
}
.cm-chapter-stat:not([hidden]) { display:flex; align-items:flex-start; gap:8px; }
.cm-chapter-stat[hidden] { display:none; }
.cm-chapter-stat-icon {
  flex:none; width:16px; height:16px; margin-top:2px;
  fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linejoin:round;
}

/* Who was president at the end of the chapter's year. */
.cm-power { margin-top:16px; }
.cm-power:empty { display:none; }
.cm-power-card {
  display:flex; align-items:center; gap:14px;
  padding:6px; margin:-6px; border-radius:4px;
  color:var(--white); text-decoration:none;
  transition:background-color 0.2s;
}
.cm-power-card:hover, .cm-power-card:focus-visible { background:rgba(201,168,68,0.06); outline:none; }
.cm-power-card img { width:44px; height:54px; flex:none; object-fit:cover; border-radius:3px; border:1px solid rgba(255,255,255,0.12); }
.cm-power-card span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cm-power-card strong { font-family:var(--f-heading); font-size:18px; font-weight:600; line-height:1.2; transition:color 0.2s; }
.cm-power-card:hover strong, .cm-power-card:focus-visible strong { color:var(--gold); }
.cm-power-card small { font-family:var(--f-ui); font-size:13px; color:var(--white-dim); }
.cm-power-note { font-family:var(--f-ui); font-size:14px; line-height:1.5; color:var(--white-dim); }

/* Key Events: core's .cm-events .ag-event rows (year · dot on a thin
   vertical line · title); only the heading sits closer to the text. */
.cm-events-heading { margin:30px 0 6px; }
.cm-events .ag-event:only-child::before { display:none; }

.cm-side-nav {
  display:flex; align-items:center; gap:12px;
  margin-top:20px;
}
.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:6;
  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);
}
.cm-eras { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; }
.cm-eras button {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:0; padding:8px 10px;
  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:15px; color:var(--gold); }
.cm-eras button small { font-size:12.5px; color:var(--white-dim); font-variant-numeric:tabular-nums; }
.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:#d8b955; border-color:#d8b955; }
.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; height:60px; margin-top:2px; }
.cm-segs { position:absolute; left:0; right:0; top:19px; height:6px; display:flex; overflow:hidden; }
.cm-segs div { height:100%; background:rgba(201,168,68,0.35); transition:background 0.3s; }
.cm-segs div + div { border-left:2px solid rgba(8,6,16,0.97); }
.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:15px; width:2px; height:14px; margin-left:-1px; background:var(--white); opacity:0.3; }
.cm-ticks i.cur { opacity:1; background:var(--gold); }
/* Chapter years under the ticks (below the slider's 44px hit area). */
.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:11px; line-height:1.4; color:var(--white-dim);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:color 0.2s;
}
.cm-tick-labels button:hover { color:var(--white); }
.cm-tick-labels button.cur { color:var(--gold); }
.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); }

.cm-controls button:focus-visible,
.cm-map-btns button:focus-visible,
.cm-side a:focus-visible { outline:2px solid #fff2c0; outline-offset:2px; }

/* ── Legend — overlays the bottom of the map. fitAspect() measures it so
   chapter views frame the map area above 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.4);
  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; transition:opacity 0.3s; }
.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 { display:flex; align-items:center; gap:7px; font-family:var(--f-ui); font-size:12.5px; line-height:1.3; color:var(--white-mid); transition:opacity 0.3s; }
/* Colours not in use at the shown date stay listed but dimmed. */
.cm-lg span.is-off, .cm-legend-col.is-off { opacity:0.4; }

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

/* Every chapter year stays labelled down to 900px (core thins them out
   from 1400px for Christianity's denser chapter list). */
.cm-tick-labels button:has(+ .cur),
.cm-tick-labels button.cur + button { visibility:visible; }
@media (min-width:901px) {
  .cm-tick-labels button:nth-child(even):not(.cur) { display:block; }
}

@media (max-width:1100px) {
  .cm-body { --cm-side-w:clamp(400px, calc(37% + 58px), 500px); }
  .cm-stage { min-height:480px; }
  .cm-eras { gap:4px; }
  .cm-eras button { padding:7px 7px; font-size:13px; }
  .cm-era-name { font-size:14px; }
  .cm-eras button small { font-size:12px; }
}
@media (max-width:900px) {
  .cm-body { --cm-side-w:0px; }
  .cm-stage { height:auto; min-height:0; max-height:none; }
  .cm-map-btns { right:12px; }
  .cm-hint { left:50%; }
  /* Too tall to pin on phones (eras wrap to two rows, the bar wraps too). */
  .cm-controls { position:static; margin:0 0 22px; padding:0; background:none; box-shadow:none; border-bottom:none; }
  .cm-stage > svg { height:auto; aspect-ratio:4 / 2.6; }
  .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 columns side by side (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-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-eras { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .cm-track { flex:1 1 calc(100% - 64px); }
  /* Too dense for every label: show every other year (the current one always shows). */
  .cm-tick-labels button:nth-child(even):not(.cur) { display:none; }
  .cm-options { width:100%; justify-content:space-between; }
}
@media (max-width:560px) {
  .cm-year-badge { left:10px; top:10px; padding:8px 14px 10px 12px; }
  .cm-era { font-size:12px; letter-spacing:1.5px; }
  .cm-stat { font-size:14px; }
  .cm-map-btns button { width:34px; height:34px; }
  .cm-chapter-title { font-size:19.5px; }
  .cm-eras { gap:4px; }
  .cm-eras button { padding:6px 5px; font-size:12px; border-top:2px solid rgba(201,168,68,0.25); }
  .cm-eras button.on { border-top-color:var(--gold); }
  .cm-tick-labels button:not(:nth-child(4n+1)):not(.cur) { display:none; }
  .cm-eras button small { font-size:11px; }
  .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); }
}
@media (prefers-reduced-motion:reduce) {
  .cm-region { transition:none; }
  .cm-region.flash, .cm-side-inner.is-fading { animation:none; }
}

/* ── "United States in YEAR" map cards (core: timeline bottom-left and
   event modal; drawn by UsaMap.renderThumb). The country is wider than
   tall and the original states sit on the east coast, so a taller frame
   than core's world strip and no fade on the right. ── */
.em-map-thumb { aspect-ratio:1.9; }
.em-map-thumb svg { -webkit-mask-image:none; mask-image:none; }
.em-map-thumb path.ut-ctx       { fill:#2a333d; }
.em-map-thumb path.ut-state     { fill:#45aa85; }
.em-map-thumb path.ut-territory { fill:#e3c57b; }
.em-map-thumb path.ut-claim     { fill:#6b737b; }
.em-map-thumb path.ut-north     { fill:#679bc2; }
.em-map-thumb path.ut-south     { fill:#c67d6b; }
.em-map-thumb path.ut-border    { fill:#b99a4e; }
/* The modal's media column is narrow: core drops the thumbnail below
   330px; keep the map down to 230px and let the title wrap instead
   ("United States / in 1863"). The timeline card opts out (container-type:normal). */
@container (max-width:420px) {
  .em-map-card { gap:16px; }
  .em-map-thumb { flex:0 0 120px; min-width:0; }
  .em-map-text { flex:1 1 auto; min-width:0; padding-left:16px; border-left:1px solid rgba(201,168,68,0.45); }
  .em-map-title { white-space:normal; font-size:15px; line-height:1.25; }
  .em-map-link { font-size:14.5px; }
  .em-map-link svg { width:22px; height:22px; }
}
@container (min-width:231px) and (max-width:330px) {
  .em-map-thumb { display:block; }
}