/* ════════════════════════════════════════
   TERRITORIAL MAP PAGE — "Russia Through Time" (js/map-page.js)
   Page chrome reuses the Rulers page (.rulers-page / .rp-panel / .rp-tab);
   everything below is map-specific.
════════════════════════════════════════ */
.map-page {
  --mp-ru:        #d6b35e;
  --mp-ru-edge:   #f3dc9a;
  --mp-lineage:   #6f9c89;
  --mp-other:     #34323f;
  --mp-other-edge:#4f4c5c;
  --mp-land:      #1d1b26;
  --mp-land-edge: #34313f;
  --mp-sea:       #0a0913;
  --mp-reference: #f0e5d0;
  --mp-occupied:  #c8553d;
  --mp-breakaway: #9aa4a8;
}
body.map-page-open #app,
body.map-page-open #scroll-hint { display:none; }

/* ── Toolbar: view switcher (rp-tab buttons) + layer toggles ── */
.mp-toolbar { margin-bottom:26px; }
.mp-toggles {
  display:flex; gap:20px; margin-left:auto;
  font-family:var(--f-ui); font-size:13px; letter-spacing:0.4px; color:var(--white-mid);
}
.mp-toggles label { display:flex; align-items:center; gap:7px; cursor:pointer; }
.mp-toggles input { accent-color:var(--gold); width:15px; height:15px; cursor:pointer; }

.mp-layout {
  display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(280px, 1fr);
  gap:50px; align-items:start;
}
.mp-main { min-width:0; }

/* ── Stage ── */
.mp-stage {
  position:relative; overflow:hidden;
  background:var(--mp-sea);
  border:1px solid rgba(201,168,68,0.32);
  touch-action:pan-y; /* vertical swipes scroll the page; horizontal drags pan the map */
  aspect-ratio:16 / 10;
}
.mp-svg { display:block; width:100%; height:100%; cursor:grab; }
.mp-svg.dragging { cursor:grabbing; }
.mp-svg path { vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.mp-sea { fill:var(--mp-sea); }
.mp-land { fill:var(--mp-land); stroke:var(--mp-land-edge); stroke-width:.6; }
.mp-svg .rg { fill-rule:evenodd; opacity:1; transition:opacity .5s ease, fill .35s ease, fill-opacity .35s ease; }
.mp-svg .rg.is-hidden { opacity:0; }
.mp-svg .rg-other { fill:var(--mp-other); fill-opacity:.85; stroke:var(--mp-other-edge); stroke-width:.5; }
.mp-svg .rg-lineage { fill:var(--mp-lineage); fill-opacity:.72; stroke:#9cc3b1; stroke-width:.6; }
.mp-svg .rg-ru { fill:var(--mp-ru); fill-opacity:.92; stroke:var(--mp-ru-edge); stroke-width:.9; }
.mp-svg .rg-umbrella { fill:var(--mp-ru); fill-opacity:.08; stroke:var(--mp-ru-edge); stroke-width:1.4; stroke-dasharray:6 4; }
.mp-svg .rg-occupied { fill:url(#mp-hatch-occ); stroke:#f08a6f; stroke-width:1.1; }
.mp-svg .rg-breakaway { fill:url(#mp-hatch-brk); stroke:#c7d0d3; stroke-width:.9; }
.mp-svg .rg-claimed { fill:none; stroke:#ff9b7e; stroke-width:1.6; stroke-dasharray:5 4; pointer-events:stroke; }
.mp-regions .rg:hover, .mp-overlays .rg:hover { stroke:#fff7de; stroke-width:1.8; filter:brightness(1.15); }
.mp-reference { fill:none; stroke:var(--mp-reference); stroke-width:1.1; stroke-dasharray:4 3; pointer-events:none; opacity:.8; transition:opacity .3s; }
.mp-reference.off { opacity:0; }
.mp-markers .mk { cursor:pointer; }
.mp-markers .dot { stroke:#120f0a; }
.mp-markers .halo { fill:none; stroke-width:1.2; opacity:.6; animation:mpPulse 2.4s ease-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes mpPulse { 0% { transform:scale(.6); opacity:.8; } 100% { transform:scale(2.2); opacity:0; } }
.mp-markers .mk:hover .dot, .mp-markers .mk.is-hot .dot { stroke:#fff; }
.mp-markers .mk:focus { outline:none; }
.mp-markers .mk:focus-visible .dot { stroke:#fff; stroke-width:2.5; }
.mp-capital path { fill:#fff3cf; stroke:#1b1506; }
.mp-capital text { font-family:var(--f-ui); font-weight:600; paint-order:stroke; stroke:rgba(5,3,8,.85); fill:#fff3cf; pointer-events:none; }

.mp-status {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; text-align:center;
  font-family:var(--f-ui); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; color:var(--white-dim);
}
.mp-hover {
  position:absolute; right:12px; top:12px; z-index:3;
  max-width:min(420px, 70%); padding:8px 13px;
  background:rgba(6,4,14,0.9); border:1px solid rgba(201,168,68,0.45); border-radius:3px;
  font-family:var(--f-ui); font-size:13px; line-height:1.45; color:var(--white);
  pointer-events:none;
}
.mp-hover strong { font-weight:600; }
.mp-hover small { display:block; color:var(--white-dim); font-size:12px; margin-top:2px; }
.mp-wheel-hint {
  position:absolute; left:50%; top:50%; z-index:4; transform:translate(-50%, -50%);
  padding:13px 22px; border-radius:30px;
  background:rgba(6,4,14,0.85); border:1px solid rgba(201,168,68,0.45);
  font-family:var(--f-ui); font-size:13px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--white); white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity 0.3s ease;
}
.mp-wheel-hint.is-visible { opacity:1; }
@media (pointer:coarse) { .mp-wheel-hint { display:none; } }
.mp-zoom { position:absolute; left:12px; top:12px; z-index:2; display:flex; flex-direction:column; gap:6px; }
.mp-zoom button {
  width:32px; height:32px; border-radius:50%;
  background:rgba(5,3,8,0.75); border:1px solid var(--gold-dim);
  color:var(--gold); font-family:var(--f-ui); font-size:18px; line-height:1;
  transition:background 0.2s;
}
.mp-zoom button:hover { background:var(--gold-glow); }

.mp-footer {
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding:0 16px 13px;
  background:linear-gradient(to top, rgba(5,3,8,.9) 0%, rgba(5,3,8,.55) 55%, rgba(5,3,8,0) 100%);
  pointer-events:none;
}
.mp-date strong {
  display:block;
  font-family:var(--f-heading); font-weight:600; font-size:clamp(28px, 3.4vw, 44px); line-height:1.05;
  color:var(--gold); letter-spacing:1px; font-variant-numeric:tabular-nums;
  text-shadow:0 2px 20px rgba(0,0,0,0.85), 0 0 40px rgba(0,0,0,0.6);
}
.mp-date span { font-family:var(--f-ui); font-size:12px; color:var(--white-mid); }
.mp-legend {
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px 16px; max-width:62%;
  font-family:var(--f-ui); font-size:12px; color:var(--white-mid);
}
.mp-legend span { display:flex; align-items:center; gap:7px; }
.mp-legend span[hidden] { display:none; }
.mp-legend i { display:inline-block; width:11px; height:11px; flex:0 0 11px; border-radius:2px; }
.mp-legend .k-ru { background:var(--mp-ru); }
.mp-legend .k-lin { background:var(--mp-lineage); }
.mp-legend .k-oth { background:var(--mp-other); border:1px solid var(--mp-other-edge); }
.mp-legend .k-ref { border:1.5px dashed var(--mp-reference); }
.mp-legend .k-occ { background:repeating-linear-gradient(45deg, var(--mp-occupied) 0 2px, transparent 2px 4px); border:1px solid #f08a6f; }
.mp-legend .k-brk { background:repeating-linear-gradient(45deg, var(--mp-breakaway) 0 2px, transparent 2px 4px); }
.mp-legend .k-clm { border:1.5px dashed #ff9b7e; }

/* ── Playback controls + year slider ── */
.mp-controls { display:flex; align-items:flex-start; gap:10px; margin-top:18px; }
.mp-round {
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--gold-dim); border-radius:50%;
  color:var(--gold); transition:background 0.2s, opacity 0.2s;
}
.mp-round:hover:not(:disabled) { background:var(--gold-glow); }
.mp-round:disabled { opacity:.3; cursor:default; }
.mp-play { background:var(--gold); border-color:var(--gold); color:var(--dark); }
.mp-play:hover:not(:disabled) { background:#dcbd5c; }
.mp-play .i-pause, .mp-play[aria-pressed="true"] .i-play { display:none; }
.mp-play[aria-pressed="true"] .i-pause { display:block; }
.mp-speed {
  flex:0 0 auto; align-self:center; padding:4px 9px;
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.02);
  font-family:var(--f-ui); font-size:12px; font-weight:600; letter-spacing:0.5px; color:var(--white-mid);
  transition:color 0.2s, border-color 0.2s;
}
.mp-speed:hover { color:var(--white); border-color:rgba(255,255,255,0.3); }
.mp-slider { flex:1 1 auto; min-width:0; padding:0 4px 0 10px; }
.mp-eras { position:relative; height:22px; margin-bottom:7px; }
.mp-eras button {
  position:absolute; top:0; height:100%; padding:0 4px;
  border-right:1px solid var(--dark); opacity:.45; transition:opacity .25s;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left;
  font-family:var(--f-ui); font-size:10px; letter-spacing:.3px; color:#fff;
}
.mp-eras button:hover, .mp-eras button.is-active { opacity:1; }
.mp-eras button.is-active { box-shadow:inset 0 -3px 0 var(--gold); }
.mp-slider input[type=range] { display:block; width:100%; margin:0; accent-color:var(--gold); cursor:pointer; }
.mp-ticks { position:relative; height:26px; margin-top:4px; }
.mp-ticks button {
  position:absolute; top:0; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; padding:0 2px;
  font-family:var(--f-ui); font-size:10.5px; font-weight:600; letter-spacing:.3px; white-space:nowrap;
  color:rgba(255,255,255,0.4); transition:color 0.2s;
}
.mp-ticks button::before { content:''; display:block; width:1px; height:6px; margin-bottom:2px; background:currentColor; opacity:.7; }
.mp-ticks button:hover { color:rgba(255,255,255,0.75); }
.mp-ticks button.is-active { color:var(--gold); }
.mp-ticks button.is-active::before { height:9px; opacity:1; }
.map-page button:focus-visible, .map-page input:focus-visible, .map-page a:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

/* ── Story column ── */
.mp-side { display:flex; flex-direction:column; gap:30px; min-width:0; }
.mp-side .em-power-heading { margin-top:0; }
.mp-story { transition:opacity .3s ease; }
.mp-story.fading { opacity:0; }
.mp-eyebrow {
  display:block; font-family:var(--f-ui); font-size:12px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--gold-dim);
}
.mp-era-name {
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  font-family:var(--f-ui); font-size:13px; color:var(--white-mid);
}
.mp-era-name i { width:10px; height:10px; border-radius:50%; }
.mp-title {
  font-family:var(--f-heading); font-weight:600;
  font-size:clamp(24px, 2.2vw, 32px); line-height:1.18;
  color:var(--white); margin:10px 0 12px;
}
.mp-text { font-family:var(--f-body); font-size:17px; line-height:1.55; color:var(--white-mid); }
.mp-facts {
  display:grid; grid-template-columns:auto 1fr; gap:5px 16px; margin-top:18px;
  font-family:var(--f-ui); font-size:14px;
}
.mp-facts dt { padding-top:2px; font-size:11px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--white-dim); }
.mp-facts dd { color:var(--white); }
.mp-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.mp-chips:empty { display:none; }
.mp-chip {
  padding:3px 10px; font-family:var(--f-ui); font-size:12px; color:#cfe0d7;
  background:rgba(111,156,137,.16); border:1px solid rgba(111,156,137,.45);
}
.mp-power:empty { display:none; }

.mp-ev-list { display:flex; flex-direction:column; }
.mp-ev-list li { border-bottom:1px solid rgba(255,255,255,0.07); }
.mp-ev-list a {
  display:grid; grid-template-columns:minmax(64px, max-content) 1fr auto; gap:14px; align-items:baseline;
  padding:8px 2px; color:var(--white);
}
.mp-ev-list .y { font-family:var(--f-ui); font-size:14px; color:var(--white-dim); white-space:nowrap; font-variant-numeric:tabular-nums; }
.mp-ev-list .t { font-family:var(--f-ui); font-size:16px; line-height:1.35; transition:color 0.2s; }
.mp-ev-list a:hover .t, .mp-ev-list a.is-hot .t { color:var(--gold); }
.mp-ev-list .ty { width:9px; height:9px; border-radius:50%; align-self:center; }
.mp-ev-empty { font-family:var(--f-ui); font-size:14px; color:var(--white-dim); padding:6px 0; }
.mp-stats { font-family:var(--f-ui); font-size:14px; line-height:1.55; color:var(--white-mid); }
.mp-stats b { color:var(--gold); font-weight:600; }

/* ── How to read ── */
.mp-notes {
  margin-top:36px; padding-top:18px;
  border-top:1px solid rgba(201,168,68,0.18);
  font-family:var(--f-body); font-size:15px; line-height:1.6; color:var(--white-mid);
}
.mp-notes summary {
  cursor:pointer; font-family:var(--f-ui); font-size:13px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--gold);
}
.mp-notes p { margin-top:10px; max-width:110ch; }
#mp-attribution { font-family:var(--f-ui); font-size:13px; color:var(--white-dim); }

@media (max-width:1100px) {
  .mp-layout { grid-template-columns:1fr; gap:34px; }
}
@media (max-width:760px) {
  .mp-toggles { margin-left:0; width:100%; }
  .mp-stage { aspect-ratio:auto; min-height:220px; }
  .mp-svg { height:auto; aspect-ratio:16 / 10; }
  .mp-footer {
    position:static; flex-direction:column; align-items:flex-start; gap:8px;
    padding:10px 12px; background:rgba(5,3,8,0.85);
  }
  .mp-legend { justify-content:flex-start; max-width:none; font-size:11px; gap:5px 12px; }
  .mp-controls { flex-wrap:wrap; }
  .mp-slider { flex-basis:100%; padding:4px 2px 0; }
  .mp-eras button { font-size:0; }
  .mp-ticks button span { visibility:hidden; }
  .mp-ticks button:first-child span, .mp-ticks button:last-child span { visibility:visible; }
  .mp-zoom { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-svg .rg, .mp-story { transition:none; }
  .mp-markers .halo { animation:none; }
}