/* ============================================================================
   map.css — the engraved plate.

   The SVG committed to assets/map/world.svg carries geometry only; every stroke
   weight and colour is decided here, which is what lets the same paths serve
   both the main plate and the inset at completely different scales.
   ========================================================================= */

.plate { margin-top: 0.85rem; }

.plate__frame {
  position: relative;
  /* Height-capped, width derived, centred. The map shrinks rather than
     cropping, so no pin is ever pushed off the plate. */
  max-width: calc(var(--plate-max-h) * var(--plate-ratio));
  margin-inline: auto;
  /* Double border reads as the engraved neatline of a printed map. */
  border: 1px solid var(--ink-2);
  outline: 4px solid var(--paper-lit);
  outline-offset: -6px;
  box-shadow: inset 0 0 0 5px var(--ink-4), inset 0 0 40px rgba(90, 70, 35, 0.18);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 250, 236, 0.5), transparent 60%),
    var(--paper-2);
  overflow: hidden;
}

.map { display: block; }

.map__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Landmasses: flat sepia fill with a firm coastline, as a copperplate would print.
   These rules style the main plate; js/map.js copies whatever they resolve to
   onto the paths as presentation attributes, which is how the inset's <use>
   clones end up painted the same way. */
.map__svg #land path {
  fill: var(--paper-3);
  stroke: var(--ink-2);
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Borders sit under the coastline in weight: present, never competing. */
.map__svg #borders path {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 0.5;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}

/* The inset only adjusts what the baked-in paint can't express. */
.inset__borders { opacity: 0.55; }

/* The graticule is the faintest thing on the plate. */
.map__svg #graticule path {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 0.5;
  opacity: 0.28;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}

/* ── the passage between the two pins ──────────────────────────────────── */

.passage {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}

.passage--inset { stroke-dasharray: 5 4; }

/* ── pins ──────────────────────────────────────────────────────────────── */

.pin { pointer-events: none; }

.pin__halo {
  fill: var(--paper-lit);
  opacity: 0.72;
  stroke: none;
}

.pin__mark {
  stroke: var(--paper-lit);
  stroke-width: 1.2;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}

.pin--birth .pin__mark { fill: var(--red); }
.pin--birth .pin__dot { fill: var(--paper-lit); }
.pin--death .pin__mark { fill: var(--ink); }

/* ── cartouche ─────────────────────────────────────────────────────────── */

.plate__cartouche {
  position: absolute;
  left: 0.9rem;
  bottom: 0.55rem;
  font-family: var(--f-antique);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.55;
  pointer-events: none;
}

/* ── inset detail plate ────────────────────────────────────────────────────
   Raised only when the two pins are too close to separate on the world map —
   a convention borrowed straight from period atlases, and the reason the main
   plate never needs to pan or zoom.
   ------------------------------------------------------------------------ */

.map-inset {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  width: clamp(6.5rem, 17%, 10rem);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--ink-2);
  box-shadow:
    0 0 0 3px var(--paper-lit),
    0 0 0 4px var(--ink-3),
    0 8px 20px -10px rgba(40, 30, 10, 0.7);
  animation: inset-open 520ms 1600ms cubic-bezier(.2, .9, .3, 1) both;
}

/* js/map.js moves the plate to whichever corner is furthest from the pins. */
.map-inset--left {
  right: auto;
  left: 0.75rem;
}

.map-inset--bottom {
  top: auto;
  bottom: 0.75rem;
}

/* The cartouche lives in the bottom-left corner; yield it to the inset rather
   than printing the two on top of each other. */
.map-inset--left.map-inset--bottom ~ .plate__cartouche {
  display: none;
}

.map-inset svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 34rem) {
  /* A phone renders the world plate about 150 px tall, which leaves no room
     for a medallion floating over it — and a medallion small enough to fit is
     too small to read. Below this width the inset stops floating and becomes a
     full-width detail band beneath the map, which is several times the drawing
     area. js/map.js reads the new aspect and widens the viewBox to match. */
  .map-inset,
  .map-inset--left,
  .map-inset--bottom {
    position: static;
    inset: auto;
    width: 100%;
    aspect-ratio: 3 / 1;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--ink-3);
    box-shadow: none;
    animation: none;
  }

  .plate__cartouche { display: none; }
}