/* ARRANXO service-area map ({{zona_mapa}} = content/zona-mapa.html, made by tools/zona_mapa.py). Linked from the snippet
   itself, on top of styles.css: same tokens, same rules. The figure is its own drawing sheet (sheet background, frame,
   title block), so it reads the same on paper, section-alt and sheet backgrounds. One green element: the hub dot.
   Motion = stroke-dashoffset + opacity only (assets/js/zona.js adds .is-wait/.is-go); without JS and with reduced
   motion every line is drawn from the start.

   .zm (figure) > .zm-svg + .zm-cap (.zm-c caption, .zm-src attribution)
   svg: .zm-sea water lines · .zm-grid graticule · .zm-ticks/.zm-coords frame scale · .zm-ctx neighbouring land · .zm-cb
        their borders · .zm-o the towns (stroked, under) + .zm-t[data-t] their <use> copies (filled, on top, hit by the
        pointer) · .zm-in borders inside the zone · .zm-wet/.zm-mouth/.zm-bank estuaries · .zm-hub survey point + green
        dot · .zm-l[data-t] labels · .zm-w sea name · .zm-key north arrow + key */

.zm { --zm-faint: rgb(27 42 56 / .2); --muted: var(--granite-ink); container-type: inline-size; margin: 0 auto; width: 100%; max-width: 44rem; color: var(--slate);
  background: var(--sheet); border: 1.5px solid var(--slate); border-radius: var(--r); overflow: hidden; }
@supports (color: color-mix(in srgb, red, blue)) { .zm { --zm-faint: color-mix(in srgb, var(--slate) 24%, var(--sheet)); } }
.zm-svg { display: block; width: 100%; height: auto; font-family: var(--font); -webkit-user-select: none; user-select: none; }
.zm-cap { display: grid; gap: .3rem; padding: .85rem 1rem .95rem; border-top: 1.5px solid var(--slate); }
.zm-c { margin: 0; font-weight: 700; line-height: 1.35; }
.zm-src { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.45; }

/* sea, graticule, frame scale */
#zm-sea rect { fill: var(--sheet); }
#zm-sea path { stroke: var(--slate); stroke-opacity: .22; stroke-width: 1; }
.zm-sea { fill: url(#zm-sea); }
.zm-grid { fill: none; stroke: var(--slate); stroke-opacity: .22; stroke-width: 1; stroke-dasharray: 2 6; }
.zm-ticks { fill: none; stroke: var(--slate); stroke-opacity: .6; stroke-width: 1.2; }
.zm-coords { display: none; }
.zm-coords text { font-size: 16px; font-weight: 600; letter-spacing: .06em; fill: var(--slate); fill-opacity: .75;
  paint-order: stroke; stroke: var(--sheet); stroke-width: 5px; stroke-linejoin: round; }

/* land: the neighbours grey and faint, the six towns white with a thick outline (outer half of a 5.6 stroke) */
.zm-ctx { fill: var(--paper-2); stroke: var(--zm-faint); stroke-width: 1.1; stroke-linejoin: round; }
.zm-cb { fill: none; stroke: var(--zm-faint); stroke-width: 1.1; stroke-linejoin: round; }
.zm-o { fill: var(--zm-f, var(--sheet)); stroke: var(--zm-s, var(--slate)); stroke-width: 5.6; stroke-linejoin: round; }
.zm-t { --zm-f: var(--sheet); --zm-s: none; }
#zm-on path { stroke: var(--slate); stroke-opacity: .3; stroke-width: 1.3; }
.zm-t.is-on { --zm-f: url(#zm-on); }
.zm-in { fill: none; stroke: var(--slate); stroke-opacity: .45; stroke-width: 1.2; stroke-linejoin: round; }
/* estuaries the municipal boundaries include (Ría do Burgo …): water over the land, open across the mouth */
.zm-wet { fill: url(#zm-sea); }
.zm-mouth { fill: none; stroke: url(#zm-sea); stroke-width: 10; }
.zm-bank { fill: none; stroke: var(--slate); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.zm-sea, .zm-grid, .zm-ticks, .zm-coords, .zm-ctx, .zm-cb, .zm-in, .zm-wet, .zm-mouth, .zm-bank, .zm-hub, .zm-w, .zm-key { pointer-events: none; }

/* A Coruña: a survey point, the dot is THE green element */
.zm-x { fill: none; stroke: var(--slate); stroke-width: 1.6; stroke-linecap: round; }
.zm-halo { fill: var(--sheet); stroke: var(--slate); stroke-width: 1.6; }
.zm-dot { fill: var(--green); }

/* labels; a lit label becomes a tag. Type sizes are drawing units, so they follow the width of the map (container
   queries): ~10–11 px on a phone, ~13 px beside the text on a desktop, never huge on a tablet */
.zm-l text { font-size: 31px; font-weight: 700; letter-spacing: .03em; fill: var(--slate);
  paint-order: stroke; stroke: var(--sheet); stroke-width: 8px; stroke-linejoin: round; transition: fill 200ms var(--ease); }
.zm-l1 text { font-size: 35px; font-weight: 800; }
.zm-l rect { fill: var(--slate); opacity: 0; transition: opacity 200ms var(--ease); }
.zm-l.is-on rect { opacity: 1; }
.zm-l.is-on text { fill: var(--paper); stroke: none; }
.zm-w { font-size: 27px; font-weight: 600; letter-spacing: .2em; fill: var(--slate); fill-opacity: .72;
  paint-order: stroke; stroke: var(--sheet); stroke-width: 7px; stroke-linejoin: round; }
.zm-key text { font-size: 27px; font-weight: 700; letter-spacing: .08em; fill: var(--slate);
  paint-order: stroke; stroke: var(--sheet); stroke-width: 7px; stroke-linejoin: round; }
.zm-n { fill: none; stroke: var(--slate); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zm-kz { stroke: var(--slate); stroke-width: 2.8; }
@container (min-width: 22rem) {
  .zm-l text { font-size: 28px; letter-spacing: .05em; }
  .zm-l1 text { font-size: 32px; }
  .zm-w, .zm-key text { font-size: 25px; }
}
@container (min-width: 28rem) {
  .zm-l text { font-size: 25px; letter-spacing: .06em; }
  .zm-l1 text { font-size: 28px; }
  .zm-w, .zm-key text { font-size: 20px; }
}
@container (min-width: 34rem) {
  .zm-l text { font-size: 22px; }
  .zm-l1 text { font-size: 25px; }
  .zm-w, .zm-key text { font-size: 16px; }
  .zm-w { letter-spacing: .3em; }
  .zm-coords { display: inline; }
}
@container (min-width: 40rem) {
  .zm-l text { font-size: 20px; }
  .zm-l1 text { font-size: 23px; }
  .zm-w, .zm-key text { font-size: 15px; }
}
.zm.is-live .zm-t, .zm.is-live .zm-l { cursor: pointer; }

/* drawing: only once zona.js has hidden the lines (the map was still below the screen) */
@media (prefers-reduced-motion: no-preference) {
  .zm.is-wait .zm-draw { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
  .zm.is-go .zm-draw { animation: zm-draw 1.6s var(--ease-io) both; }
  .zm.is-go .zm-ctx, .zm.is-go .zm-cb { animation-duration: 1.1s; }
  .zm.is-go .zm-o { animation-duration: 2s; animation-delay: .25s; }
  .zm.is-go .zm-in { animation-delay: .8s; }
  .zm.is-go .zm-x, .zm.is-go .zm-n { animation-duration: .8s; animation-delay: 1.5s; }
  .zm.is-wait .zm-halo, .zm.is-wait .zm-dot { opacity: 0; }
  .zm.is-go .zm-halo, .zm.is-go .zm-dot { animation: zm-in 450ms var(--ease) 1.7s both; }
}
@keyframes zm-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes zm-in { from { opacity: 0; } to { opacity: 1; } }