/*
 * .c-comuna-map: the 16-comuna map, server-rendered (api/src/views/partials/comunaMap.js).
 * Two visual variants, chosen by a class on the figure: --a "baldosas planas" (flat tiles) and
 * --b "trazos" (thick rounded outlines). Behaviour is optional: landing/assets/js/comuna-map.js.
 *
 *   <figure class="c-comuna-map c-comuna-map--a" data-comuna-map data-surface="home" aria-labelledby="...">
 *     <div class="c-comuna-map__stage">
 *       <svg class="c-comuna-map__svg" viewBox="0 0 2396 3046" role="group">
 *         <g class="c-comuna-map__hits" aria-hidden="true">   transparent hit strokes (six small comunas)
 *           <a href tabindex="-1"><use class="c-comuna-map__hit" href="#cm-home-shape-2"/></a></g>
 *         <g class="c-comuna-map__shapes">
 *           <a class="c-comuna-map__comuna is-step-2 [is-selected]" href="/vitrina/?comuna=3" aria-label="Comuna 3, Manrique: 12 negocios">
 *             <path id="cm-home-shape-3" d="..."/></a> ...</g>
 *         <g class="c-comuna-map__selected" aria-hidden="true"><use class="c-comuna-map__selected-ink" .../><use class="c-comuna-map__selected-dot" .../></g>
 *         <g class="c-comuna-map__labels" aria-hidden="true"><text class="c-comuna-map__num is-step-2" x y>3</text> ...</g>
 *       </svg>
 *     </div>
 *     <div class="c-comuna-map__aside">
 *       <div class="c-comuna-map__legend">... .c-comuna-map__swatch.is-step-N ...</div>
 *       <ol class="c-comuna-map__list"><li class="c-comuna-map__item"><a class="c-comuna-map__link" aria-current="true">
 *         <span class="c-comuna-map__list-num">3</span><span class="c-comuna-map__list-name">Manrique</span>
 *         <span class="c-comuna-map__list-count">12 negocios</span></a></li> ...</ol>
 *     </div>
 *     <figcaption class="c-comuna-map__caption">attribution (always) + <details> full citation</figcaption>
 *   </figure>
 *
 * Rules this file keeps:
 *  - Fill, stroke and opacity live on the <a> and the path INHERITS them. A <use> clone of the path
 *    (selected, hover and focus outlines, hit stroke) therefore never picks up a step fill.
 *  - Fill steps are the primary green at a per-step opacity over a white stage (the stage sets its
 *    own white ground so the composite is always known). The number labels switch between ink and
 *    white at the step where the composited fill crosses the crossover band; the figures are
 *    measured by e2e/specs/W2-D-measure.spec.js (docs/reports/W2-D/contrast.md), not asserted.
 *  - Yellow (--md-color-action) only on the selected comuna and the focus ring, always inside an ink
 *    stroke (1.9:1 on white alone). Lime is never used (never a meaningful boundary).
 *  - Only transform and opacity animate. Reduced motion: no entrance, no transitions.
 *  - SVG strokes and the number size are raw viewBox units (the map is 2396 wide), not tokens: the
 *    scale follows the map, about 0.14 px per unit on a phone and 0.2 px in the desktop column, so the
 *    widths below are written for that range. Everything else is a token.
 *  - The script sets three custom properties that are not --md-* (AGENTS section 7 allows dynamic
 *    custom properties only): --i (stagger index) and --comuna-map-tip-x/-y (tooltip position).
 *    They carry per-element values that no token can hold.
 */

.c-comuna-map {
  /*
   * Local step scale (user decision, W2-D): the opacity of --md-color-primary over white for steps 1 to 4.
   * No global tokens; a variant overrides the four values. Composited luminance and contrast of the
   * labels are in the closing report (docs/reports/W2-D/contrast.md).
   */
  --comuna-map-step-1-opacity: 0.18;
  --comuna-map-step-2-opacity: 0.45;
  --comuna-map-step-3-opacity: 0.76;
  --comuna-map-step-4-opacity: 1;

  display: grid;
  gap: var(--md-space-5);
  margin: 0;
  color: var(--md-color-ink);
}

/* ---- variant A: flat tiles (light tint to full primary, white hairline joins) ---- */
.c-comuna-map--a {
  --comuna-map-step-1-opacity: 0.18;
  --comuna-map-step-2-opacity: 0.45;
  --comuna-map-step-3-opacity: 0.76;
  --comuna-map-step-4-opacity: 1;
}

/* ---- variant B: trazos (light fills, thick rounded outlines in the brand green) ---- */
.c-comuna-map--b {
  --comuna-map-step-1-opacity: 0.12;
  --comuna-map-step-2-opacity: 0.25;
  --comuna-map-step-3-opacity: 0.38;
  --comuna-map-step-4-opacity: 0.52;
}

/* ---- stage: white ground, the map, the tooltip ---- */
.c-comuna-map__stage {
  position: relative;
  padding: var(--md-space-2);
  border-radius: var(--md-radius-lg);
  background: var(--md-color-surface);
}

.c-comuna-map__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 85dvh;
  margin-inline: auto;
  overflow: visible;
  touch-action: manipulation;
}

/* ---- hit strokes: wider transparent target around the six small comunas, painted below the shapes ---- */
.c-comuna-map__hit {
  fill: none;
  stroke: transparent;
  stroke-width: 360;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: pointer;
}

/* ---- the shapes ---- */
.c-comuna-map__comuna {
  fill: var(--md-color-primary);
  fill-opacity: var(--comuna-map-step-4-opacity);
  stroke: var(--md-color-surface);
  stroke-width: 12;
  stroke-linejoin: round;
  /* Hit testing by fill only: a neighbour's stroke must not steal 1 to 3 px of this comuna's interior. */
  pointer-events: fill;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.c-comuna-map__comuna.is-step-0 {
  fill: var(--md-color-surface-alt);
  fill-opacity: 1;
}

/* Variant A: an empty comuna keeps a soft edge so it still reads as a shape on the white stage. */
.c-comuna-map--a .c-comuna-map__comuna.is-step-0 {
  stroke: var(--md-color-divider);
}

.c-comuna-map__comuna.is-step-1 {
  fill-opacity: var(--comuna-map-step-1-opacity);
}

.c-comuna-map__comuna.is-step-2 {
  fill-opacity: var(--comuna-map-step-2-opacity);
}

.c-comuna-map__comuna.is-step-3 {
  fill-opacity: var(--comuna-map-step-3-opacity);
}

.c-comuna-map__comuna.is-step-4 {
  fill-opacity: var(--comuna-map-step-4-opacity);
}

.c-comuna-map--b .c-comuna-map__comuna {
  stroke: var(--md-color-primary);
  stroke-width: 28;
}

/* Without the script there is no outline overlay, so a keyboard user gets the inner half of a dark
   stroke (the outer half is hidden by later neighbours). */
.c-comuna-map:not(.is-enhanced) .c-comuna-map__comuna:focus-visible {
  stroke: var(--md-color-ink);
  stroke-width: 56;
}

/* ---- number labels: the comuna number at meta.label. Names live in the tooltip and the list. ---- */
.c-comuna-map__num {
  fill: var(--md-color-ink);
  font-family: var(--md-font-display);
  font-size: 104px;
  font-weight: var(--md-weight-black);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

.c-comuna-map__num.is-step-0 {
  fill: var(--md-color-ink-soft);
}

/* On the dark steps of variant A the label is white (ink is under 4.5:1 there). Variant B stays ink. */
.c-comuna-map--a .c-comuna-map__num.is-step-3,
.c-comuna-map--a .c-comuna-map__num.is-step-4 {
  fill: var(--md-color-on-primary);
}

/* ---- outlines drawn above every shape: selected (server-rendered), hover and focus (script) ---- */
.c-comuna-map__selected-ink,
.c-comuna-map__selected-dot,
.c-comuna-map__ring-ink,
.c-comuna-map__ring-dot,
.c-comuna-map__hover {
  fill: none;
  stroke-linejoin: round;
  pointer-events: none;
}

.c-comuna-map__selected-ink {
  stroke: var(--md-color-ink);
  stroke-width: 48;
}

.c-comuna-map__selected-dot {
  stroke: var(--md-color-action);
  stroke-width: 20;
}

/* Variant B draws its own shapes with a 28-unit stroke, so the outlines above need more weight to read. */
.c-comuna-map--b .c-comuna-map__selected-ink {
  stroke-width: 64;
}

.c-comuna-map--b .c-comuna-map__selected-dot {
  stroke-width: 30;
}

.c-comuna-map__ring-ink {
  stroke: var(--md-color-ink);
  stroke-width: 64;
}

.c-comuna-map__ring-dot {
  stroke: var(--md-color-action);
  stroke-width: 30;
}

.c-comuna-map--b .c-comuna-map__ring-ink {
  stroke-width: 80;
}

.c-comuna-map--b .c-comuna-map__ring-dot {
  stroke-width: 38;
}

.c-comuna-map__hover {
  stroke: var(--md-color-ink);
  stroke-width: 30;
  opacity: 0;
}

/* ---- tooltip (script): name and count at the label point ---- */
.c-comuna-map__tip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--md-z-base);
  padding: var(--md-space-2) var(--md-space-3);
  border-radius: var(--md-radius-md);
  background: var(--md-color-ink);
  color: var(--md-color-on-primary);
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-weight-bold);
  line-height: var(--md-leading-snug);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--comuna-map-tip-x, 0), var(--comuna-map-tip-y, 0));
}

.c-comuna-map__tip.is-on {
  opacity: 1;
}

.c-comuna-map__tip-count {
  font-weight: var(--md-weight-medium);
}

/* ---- aside: legend and the list (the reliable way in on a phone) ---- */
.c-comuna-map__aside {
  display: grid;
  gap: var(--md-space-4);
  align-content: start;
}

.c-comuna-map__legend-title {
  margin: 0 0 var(--md-space-2);
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-weight-bold);
}

.c-comuna-map__legend-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--md-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A segmented ramp: the swatch above its range, so the five steps read as one scale on a phone. */
.c-comuna-map__legend-item {
  display: grid;
  align-content: start;
  gap: var(--md-space-1);
  font-size: var(--md-font-size-xs);
  line-height: var(--md-leading-snug);
}

/* The step colour is painted by a pseudo-element at the step opacity, so the swatch's own border keeps
   full strength and the key matches the map in both variants. The white ground is the map's ground. */
.c-comuna-map__swatch {
  position: relative;
  inline-size: 100%;
  block-size: 1rem;
  border: var(--md-border-width-strong) solid transparent;
  border-radius: var(--md-radius-sm);
  background: var(--md-color-surface);
}

.c-comuna-map__swatch::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-color-primary);
  opacity: var(--comuna-map-step-4-opacity);
}

.c-comuna-map__swatch.is-step-0 {
  border-color: var(--md-color-border);
  background: var(--md-color-surface-alt);
}

.c-comuna-map__swatch.is-step-0::before {
  content: none;
}

.c-comuna-map__swatch.is-step-1::before {
  opacity: var(--comuna-map-step-1-opacity);
}

.c-comuna-map__swatch.is-step-2::before {
  opacity: var(--comuna-map-step-2-opacity);
}

.c-comuna-map__swatch.is-step-3::before {
  opacity: var(--comuna-map-step-3-opacity);
}

.c-comuna-map__swatch.is-step-4::before {
  opacity: var(--comuna-map-step-4-opacity);
}

.c-comuna-map--b .c-comuna-map__swatch {
  border-color: var(--md-color-primary);
  border-radius: var(--md-radius-md);
}

/* Down the first column, then the second: the reading order of the <ol>. */
.c-comuna-map__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
  gap: var(--md-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-comuna-map__link {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'num name'
    'num count';
  column-gap: var(--md-space-2);
  align-items: center;
  align-content: center;
  block-size: 100%;
  min-block-size: var(--md-target);
  padding: var(--md-space-2) var(--md-space-2);
  border-radius: var(--md-radius-md);
  background: var(--md-color-tint-primary);
  color: var(--md-color-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Hover and press feedback by an overlay whose opacity changes (DESIGN.md section 5). */
.c-comuna-map__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-duration-fast) var(--md-ease-out);
}

@media (hover: hover) {
  .c-comuna-map__link:hover::before {
    opacity: 0.08;
  }
}

.c-comuna-map__link:active::before {
  opacity: 0.14;
}

.c-comuna-map__list-num {
  grid-area: num;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--md-radius-full);
  background: var(--md-color-surface);
  font-family: var(--md-font-display);
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-weight-black);
  line-height: 1;
}

.c-comuna-map__list-name {
  grid-area: name;
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-weight-bold);
  line-height: var(--md-leading-snug);
  overflow-wrap: anywhere;
}

.c-comuna-map__list-count {
  grid-area: count;
  font-variant-numeric: tabular-nums; /* the count-up must not jiggle the line */
  white-space: nowrap;
  font-size: var(--md-font-size-xs);
  line-height: var(--md-leading-snug);
}

/* The current comuna: deep green fill, white label and the yellow dot. State is fill + dot + text. */
.c-comuna-map__link[aria-current='true'] {
  background: var(--md-color-primary);
  color: var(--md-color-on-primary);
}

.c-comuna-map__link[aria-current='true'] .c-comuna-map__list-num {
  background: var(--md-color-action);
  color: var(--md-color-on-action);
}

.c-comuna-map--b .c-comuna-map__link {
  border-radius: var(--md-radius-lg);
  padding-inline: var(--md-space-3);
}

/* ---- caption: attribution is always visible (D-013 section 2.1) ---- */
.c-comuna-map__caption {
  font-size: var(--md-font-size-xs);
  line-height: var(--md-leading-body);
  color: var(--md-color-ink-soft);
}

.c-comuna-map__attribution {
  margin: 0;
}

.c-comuna-map__caption a[rel~='license'] {
  white-space: nowrap;
}

.c-comuna-map__caption a {
  color: var(--md-color-primary);
  font-weight: var(--md-weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.22em;
}

.c-comuna-map__citation summary {
  display: flex;
  align-items: center;
  min-block-size: var(--md-target);
  cursor: pointer;
  font-weight: var(--md-weight-bold);
  color: var(--md-color-primary);
}

.c-comuna-map__citation p {
  margin: 0 0 var(--md-space-3);
  max-inline-size: var(--md-measure);
}

/* ---- wide screens: map on the left, legend and list on the right, caption underneath ---- */
@media (min-width: 64em) {
  .c-comuna-map {
    grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--md-space-7);
  }

  .c-comuna-map__caption {
    grid-column: 1 / -1;
  }

  .c-comuna-map__stage {
    padding: var(--md-space-4);
  }

  .c-comuna-map__aside {
    padding-block-start: var(--md-space-4);
  }

  .c-comuna-map__legend-title,
  .c-comuna-map__legend-item,
  .c-comuna-map__list-name {
    font-size: var(--md-font-size-base);
  }

  .c-comuna-map__list-count {
    font-size: var(--md-font-size-sm);
  }
}

/* ---- motion: entrance and hover only, opacity and transform only ---- */
@media (prefers-reduced-motion: no-preference) {
  /* The script arms a map that starts below the fold, then releases it on entry (and on print, page
     hide and visibility change). The selected outline is armed with the shapes so it never floats alone.
     No script, no hiding. */
  .c-comuna-map.is-armed .c-comuna-map__comuna,
  .c-comuna-map.is-armed .c-comuna-map__num {
    opacity: 0;
    transform: translateY(48px);
  }

  .c-comuna-map.is-armed .c-comuna-map__selected {
    opacity: 0;
  }

  .c-comuna-map.is-entered .c-comuna-map__comuna,
  .c-comuna-map.is-entered .c-comuna-map__num {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--md-duration-slow) var(--md-ease-out),
      transform var(--md-duration-slow) var(--md-ease-out);
    transition-delay: calc(var(--i, 0) * var(--md-stagger) * 0.5);
  }

  .c-comuna-map.is-entered .c-comuna-map__selected {
    opacity: 1;
    transition: opacity var(--md-duration-slow) var(--md-ease-out);
    transition-delay: calc(16 * var(--md-stagger) * 0.5); /* after the last shape: 16 comunas */
  }

  .c-comuna-map__tip {
    transition: opacity var(--md-duration-fast) var(--md-ease-out);
  }

  .c-comuna-map__hover {
    transition: opacity var(--md-duration-fast) var(--md-ease-out);
  }
}

/* Motion never gates content: a printed page shows the finished map even if the entrance never ran. */
@media print {
  .c-comuna-map.is-armed .c-comuna-map__comuna,
  .c-comuna-map.is-armed .c-comuna-map__num,
  .c-comuna-map.is-armed .c-comuna-map__selected {
    opacity: 1;
    transform: none;
  }
}

@media (hover: hover) {
  .c-comuna-map__hover.is-on {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-comuna-map *,
  .c-comuna-map *::before {
    animation: none;
    transition: none;
  }
}