/* The municipality map. Plain CSS in a file of its own for each chart form (decision 0012), so
   that changing one form never changes another form's frozen embeds (decision 0009). Uses the
   house tokens. */

.mp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  font-size: 14px;
}

.mp .stage {
  width: min(100%, 22rem);
  margin: 0 auto;
}

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

/* One hue, light to dark: five classes. */
.mp .c0 {
  fill: color-mix(in srgb, var(--accent) 14%, var(--surface));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.mp .c1 {
  fill: color-mix(in srgb, var(--accent) 32%, var(--surface));
  background: color-mix(in srgb, var(--accent) 32%, var(--surface));
}

.mp .c2 {
  fill: color-mix(in srgb, var(--accent) 52%, var(--surface));
  background: color-mix(in srgb, var(--accent) 52%, var(--surface));
}

.mp .c3 {
  fill: color-mix(in srgb, var(--accent) 76%, var(--surface));
  background: color-mix(in srgb, var(--accent) 76%, var(--surface));
}

.mp .c4 {
  fill: var(--accent);
  background: var(--accent);
}

.mp .na {
  fill: var(--grid);
  background: var(--grid);
}

.mp path {
  stroke: var(--surface);
  stroke-width: 0.6px;
  vector-effect: non-scaling-stroke;
}

.mp .unit {
  margin: 0 0 10px;
  color: var(--ink-2);
  font-weight: 600;
}

.mp .legend,
.mp .ext ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp .legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp .legend li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  column-gap: 10px;
  align-items: center;
  color: var(--ink-2);
}

.mp .sw {
  width: 22px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
}

.mp .ct {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.mp .ext {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.mp h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 1em;
  font-weight: 600;
}

.mp .ext li {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  color: var(--ink-2);
  line-height: 1.5;
}

.mp .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp .nu {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Room for the map and the legend side by side. */
@container (min-width: 36rem) {
  .mp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .mp .ext {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The share card: the map on the left, the legend and the names on the right, larger. The
   footer here may take a second line for the map credit, so the column is kept compact. */
.mp-card {
  grid-template-columns: 470px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  font-size: 22px;
}

.mp-card .stage {
  width: 470px;
  margin: 0;
}

.mp-card .unit {
  margin-bottom: 8px;
}

.mp-card .legend {
  gap: 4px;
}

.mp-card .legend li {
  grid-template-columns: 34px 1fr auto;
  column-gap: 14px;
}

.mp-card .sw {
  width: 34px;
  height: 20px;
}

.mp-card .ext {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.mp-card .ext li {
  line-height: 1.35;
}