/* The map room. Paper is a Higgsfield texture (map-paper.jpg); geography is Natural
   Earth drawn on top in ink, so the painting never has to be right about coastlines. */
.map-stage { padding: 0 var(--gutter, 1.5rem) 4rem; }
.map-types, .map-media { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .6rem; }
.map-media { margin-bottom: 1.2rem; }
.map-media[hidden] { display: none; }

.map-sheet {
  position: relative;
  background: #d9d2bd url(map-paper.jpg) center / cover;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.08) inset;
  margin: 0 0 1.4rem;
  touch-action: none;           /* d3-zoom owns pinch and drag on the chart */
  overflow: hidden;
}
#map-svg { display: block; width: 100%; height: auto; cursor: grab; position: relative; z-index: 1; }
#map-svg:active { cursor: grabbing; }

.map-sphere { fill: none; stroke: rgba(40,36,28,.45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-graticule { fill: none; stroke: rgba(40,36,28,.12); stroke-width: .5; vector-effect: non-scaling-stroke; }
.map-land { fill: rgba(120,104,72,.22); stroke: rgba(34,30,22,.8); stroke-width: .8; vector-effect: non-scaling-stroke; }
.map-borders { fill: none; stroke: rgba(34,30,22,.28); stroke-width: .5; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.map-region { fill: rgba(150,30,24,.035); stroke: rgba(150,30,24,.4); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.map-region[hidden] { display: none; }

.map-pin { cursor: pointer; outline: none; }
.map-pin image { filter: drop-shadow(1px 2px 1px rgba(0,0,0,.35)); }
.map-pin .map-count-badge { fill: #1d1b16; }
.map-pin text { fill: #f1ead6; font: 700 9px/1 var(--mono, ui-monospace, monospace); text-anchor: middle; dominant-baseline: central; }
.map-pin.is-region .map-count-badge { fill: #7d1d17; }
.map-pin:hover .map-count-badge, .map-pin:focus-visible .map-count-badge { fill: #b3261e; }
.map-pin:focus-visible { outline: 2px solid var(--glow, #9fe0b0); outline-offset: 2px; }
.map-pin[hidden] { display: none; }

.map-compass { position: absolute; right: 2%; bottom: 4%; width: clamp(56px, 9%, 110px); opacity: .8; pointer-events: none; z-index: 0; }
.map-cartouche { position: absolute; left: 2%; bottom: 4%; width: clamp(110px, 18%, 220px); opacity: .9; pointer-events: none; z-index: 0; }
.map-cartouche-title { position: absolute; left: 2%; bottom: 4%; width: clamp(110px, 18%, 220px); aspect-ratio: 1 / 1;
  display: grid; place-content: center; text-align: center; margin: 0; pointer-events: none; z-index: 0;
  color: #2a2419; font: 700 clamp(.6rem, 1.2vw, .95rem)/1.1 var(--serif, Georgia, serif); letter-spacing: .08em; text-transform: uppercase; }
.map-cartouche-title small { font-weight: 400; letter-spacing: .12em; font-size: .75em; }

.map-error { position: absolute; top: .6rem; left: .6rem; z-index: 2; margin: 0; padding: .4rem .6rem; max-width: 60%;
  background: rgba(241,234,214,.95); border: 1px solid rgba(34,30,22,.5); color: #1d1b16; font-size: .8rem; }

.map-zoom { position: absolute; top: .6rem; right: .6rem; z-index: 2; display: grid; gap: .3rem; }
.map-zoom button { width: 2.2rem; height: 2.2rem; border: 1px solid rgba(34,30,22,.5); background: rgba(241,234,214,.9); color: #1d1b16; font-size: 1.1rem; cursor: pointer; }

.map-undated { display: inline-flex; gap: .4rem; align-items: center; font-size: .85rem; margin-right: 1rem; }
.map-count { display: inline; font-size: .85rem; opacity: .8; }

.map-tray { margin-top: 1.4rem; }
.map-tray summary { cursor: pointer; font-weight: 700; }
.map-tray h3 { font-size: .95rem; margin: 1rem 0 .3rem; }

.map-detail { max-width: min(42rem, calc(100vw - 2rem)); }
.map-detail-list, .map-tray ul { list-style: none; margin: .6rem 0 0; padding: 0; }
.map-detail-list li, .map-tray li { padding: .45rem 0; border-top: 1px solid rgba(128,120,100,.3); }
.map-detail-list .map-item-meta, .map-tray .map-item-meta { display: block; font-size: .75rem; opacity: .7; }

@media (max-width: 700px) {
  .map-compass, .map-cartouche, .map-cartouche-title { display: none; }
}

/* The intro photo pairs era-disclosure (bottom-left caption, from timeline.css)
   with a photo-tape strip. No other page combines the two, so there's no shared
   placement to borrow: move the tape to the top edge here so it never sits over
   the caption. */
.map-page .intro-photo .photo-tape { top: -6px; bottom: auto; }

.map-place-picker { margin: 1rem 0; }
.map-place-picker label { display: block; margin-bottom: .4rem; }
.map-place-picker select { width: 100%; min-height: 44px; padding: .6rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); font: inherit; }