:root {
  /* Colour */
  --color-sea: #e6edf0;
  --color-surface: #fbfaf7;
  --color-surface-hover: #f0ede5;
  --color-surface-border: #d8d3c6;
  --color-text: #22303a;
  --color-text-muted: #64707a;
  --color-land: #c3cfae;
  --color-land-selected: #e3a24a;
  --color-land-dimmed: #d8decb;
  --color-border: #7f8c74;
  --color-border-band: #a9b597;
  --color-outline-hover: #ffffff;
  --color-outline-hover-shadow: rgba(34, 48, 58, 0.2);
  --color-outline-selected: #7a4f16;
  --color-focus: #22303a;
  --color-callout-line: #64707a;
  --color-state-label: #5f6b62;
  --color-seat-empty: #c9ced2;
  --color-city: #2c3a42;
  --color-city-ring: #fbfaf7;
  --color-city-name: #2c3a42;
  --color-city-halo: rgba(251, 250, 247, 0.85);

  /* Type */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-body: 0.9375rem;
  --font-size-tooltip: 0.9375rem;
  --font-size-marker: 0.875rem;
  --font-size-state-label: 0.75rem;
  --font-size-city-capital: 0.8125rem;
  --font-size-city: 0.75rem;
  --font-size-info-title: 1.375rem;
  --font-size-info-section: 0.75rem;
  --font-size-info-small: 0.8125rem;
  --letter-spacing-info-section: 0.06em;
  --letter-spacing-state-label: 0.04em;

  /* Space and shape */
  --space-hair: 2px;
  --space-tight: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --radius-small: 6px;
  --tooltip-padding: 6px 10px;
  --radius-medium: 10px;
  --control-height: 40px;
  --edge-marker-height: 34px;
  --control-height-touch: 44px;
  --info-box-width: 380px;
  --info-box-sheet-height: 45dvh;
  --info-box-shift: 8px;
  --seat-size: 12px;
  --seat-gap: 3px;
  --seat-radius: 2px;
  --icon-size: 18px;
  --icon-stroke: 2px;
  --shadow-control: 0 1px 2px rgba(34, 48, 58, 0.12), 0 2px 8px rgba(34, 48, 58, 0.08);

  /* Motion */
  --duration-press: 120ms;
  --press-scale: 0.97;
  --duration-reveal: 160ms;
  --reveal-scale: 0.96;

  /* Lines */
  --stroke-border: 0.7px;
  --stroke-selected: 1.6px;
  --stroke-hover: 2.5px;
  --stroke-focus: 2.5px;
  --outline-hover-shadow-reach: 1.5px;
  --stroke-hover-shadow: calc(var(--stroke-hover) + 2 * var(--outline-hover-shadow-reach));
  --stroke-leader: 1.5px;
  --stroke-city-ring: 1.5px;
  --stroke-city-outline: 0.75px;
  --stroke-city-halo: 3px;
  /* The halo reaches half the old stroke width beyond the glyph, in eight directions. */
  --city-halo-reach: calc(var(--stroke-city-halo) / 2);
  --city-halo-reach-diagonal: calc(var(--city-halo-reach) * 0.7071);
  --shadow-city-halo:
    var(--city-halo-reach) 0 0 var(--color-city-halo),
    calc(var(--city-halo-reach) * -1) 0 0 var(--color-city-halo),
    0 var(--city-halo-reach) 0 var(--color-city-halo),
    0 calc(var(--city-halo-reach) * -1) 0 var(--color-city-halo),
    var(--city-halo-reach-diagonal) var(--city-halo-reach-diagonal) 0 var(--color-city-halo),
    calc(var(--city-halo-reach-diagonal) * -1) var(--city-halo-reach-diagonal) 0 var(--color-city-halo),
    var(--city-halo-reach-diagonal) calc(var(--city-halo-reach-diagonal) * -1) 0 var(--color-city-halo),
    calc(var(--city-halo-reach-diagonal) * -1) calc(var(--city-halo-reach-diagonal) * -1) 0 var(--color-city-halo);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--color-sea);
  color: var(--color-text);
  font: var(--font-size-body) / 1.4 var(--font-body);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

.map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-sea);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}

.map-controls {
  position: absolute;
  top: max(var(--space-3), env(safe-area-inset-top));
  left: max(var(--space-3), env(safe-area-inset-left));
  z-index: 3;
  display: flex;
  gap: var(--space-2);
}

.map-markers {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.edge-marker {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--edge-marker-height);
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--edge-marker-height);
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
  color: var(--color-text);
  font: 600 var(--font-size-marker) / 1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.edge-marker--probe,
.edge-marker--probe[hidden] {
  display: inline-flex !important;
  visibility: hidden;
  pointer-events: none;
}

@media (hover: hover) {
  .edge-marker:hover {
    background: var(--color-surface-hover);
  }
}

.edge-marker:focus-visible {
  outline: var(--stroke-focus) solid var(--color-focus);
  outline-offset: 2px;
}

.edge-marker__icon {
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
  color: var(--color-text);
  font: 600 var(--font-size-body) / 1 var(--font-body);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-press) ease-out,
    transform var(--duration-press) ease-out,
    opacity var(--duration-reveal) ease-out,
    visibility var(--duration-reveal);
}

.control-button.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(var(--reveal-scale));
  pointer-events: none;
}

@media (hover: hover) {
  .control-button:hover {
    background: var(--color-surface-hover);
  }
}

.control-button:active {
  transform: scale(var(--press-scale));
}

.control-button__icon {
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control-button:focus-visible,
.callout__label:focus-visible {
  outline: var(--stroke-focus) solid var(--color-focus);
  outline-offset: 2px;
}

.map__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

.map__canvas,
.map__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.map__overlay {
  pointer-events: none;
  overflow: visible;
}

/* Sized in map units and placed by a transform from the camera (ADR 0009). */
.map__underlay-image {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

.land-underlay path {
  fill: var(--color-border-band);
  stroke: var(--color-border-band);
  stroke-linejoin: round;
  pointer-events: none;
}

.region {
  cursor: pointer;
  outline: none;
}

.region path {
  fill: var(--color-land);
  stroke: var(--color-border);
  stroke-width: var(--stroke-border);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map--has-selection .region:not(.is-selected) path {
  fill: var(--color-land-dimmed);
}

.region.is-selected {
  cursor: default;
}

.region.is-selected path {
  fill: var(--color-land-selected);
}

.outline path {
  fill: none;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.outline--selected path {
  stroke: var(--color-outline-selected);
  stroke-width: var(--stroke-selected);
}

.outline--hover path {
  stroke: var(--color-outline-hover);
  stroke-width: var(--stroke-hover);
}

.outline--hover path.outline__shadow {
  stroke: var(--color-outline-hover-shadow);
  stroke-width: var(--stroke-hover-shadow);
}

.outline--focus path {
  stroke: var(--color-focus);
  stroke-width: var(--stroke-focus);
}

/* Centred on the point the view moves it to. */
.state-label {
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
  color: var(--color-state-label);
  font: 600 var(--font-size-state-label) / 1 var(--font-body);
  letter-spacing: var(--letter-spacing-state-label);
  white-space: nowrap;
}

/* Dots and names are positioned at their top-left corner by a transform from the view. */
.city-dot,
.city-name {
  position: absolute;
  top: 0;
  left: 0;
}

/* A dot centres on its point. Its border is the old SVG stroke, which was centred on the
   radius, so the box grows by one stroke width. */
.city-dot {
  width: calc(2 * var(--city-dot-radius) + var(--city-dot-stroke));
  height: calc(2 * var(--city-dot-radius) + var(--city-dot-stroke));
  margin: calc(-1 * var(--city-dot-radius) - var(--city-dot-stroke) / 2) 0 0 calc(-1 * var(--city-dot-radius) - var(--city-dot-stroke) / 2);
  border: var(--city-dot-stroke) solid;
  border-radius: 50%;
}

/* A state capital is a ring with a centre dot; a major city is a solid dot. */
.city-dot--state_capital {
  --city-dot-stroke: var(--stroke-city-ring);
  background: var(--color-city-ring);
  border-color: var(--color-city);
}

.city-dot--state_capital::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(2 * var(--city-dot-centre-radius));
  height: calc(2 * var(--city-dot-centre-radius));
  margin: calc(-1 * var(--city-dot-centre-radius)) 0 0 calc(-1 * var(--city-dot-centre-radius));
  border-radius: 50%;
  background: var(--color-city);
}

.city-dot--major_city {
  --city-dot-stroke: var(--stroke-city-outline);
  background: var(--color-city);
  border-color: var(--color-city-ring);
}

.city-name {
  color: var(--color-city-name);
  font: 500 var(--font-size-city) / 1 var(--font-body);
  white-space: nowrap;
  text-shadow: var(--shadow-city-halo);
}

.city-name--state_capital {
  font-weight: 600;
  font-size: var(--font-size-city-capital);
}

.callout__line {
  stroke: var(--color-callout-line);
  stroke-width: var(--stroke-leader);
}

.callout__label {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--tooltip-padding);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
  color: var(--color-text);
  font: 600 var(--font-size-tooltip) / 1.3 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  touch-action: none;
}

@media (hover: hover) {
  .callout__label:hover {
    background: var(--color-surface-hover);
  }
}

.callout__label.is-selected {
  cursor: default;
  border-color: var(--color-outline-selected);
  box-shadow: 0 0 0 var(--stroke-selected) var(--color-land-selected), var(--shadow-control);
}

.map__tooltip {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--tooltip-padding);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
  color: var(--color-text);
  font: 500 var(--font-size-tooltip) / 1.3 var(--font-body);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

@media (pointer: coarse) {
  .control-button {
    min-height: var(--control-height-touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  .control-button {
    transition: none;
  }

  .control-button:active {
    transform: none;
  }
}

/* The box hugs its content on desktop, up to the bottom of the window. The map treats
   the whole left strip as covered either way, so a short box changes nothing there. */
.info-box {
  --info-box-top: calc(max(var(--space-3), env(safe-area-inset-top)) + var(--control-height) + var(--space-2));
  --info-box-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  position: absolute;
  z-index: 3;
  top: var(--info-box-top);
  left: max(var(--space-3), env(safe-area-inset-left));
  max-height: calc(100% - var(--info-box-top) - var(--info-box-bottom));
  width: min(var(--info-box-width), calc(100% - 2 * var(--space-3)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
  color: var(--color-text);
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(var(--info-box-shift) * -1));
  transition:
    opacity var(--duration-reveal) ease-out,
    transform var(--duration-reveal) ease-out,
    visibility var(--duration-reveal);
}

.info-box.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.info-box__badge {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-info-section);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-info-section);
  text-transform: uppercase;
}

.info-box__title {
  margin: var(--space-hair) 0 0;
  font-size: var(--font-size-info-title);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.info-box__serlain {
  margin: var(--space-hair) 0 0;
  color: var(--color-text-muted);
  font-style: italic;
}

.info-box__section {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-surface-border);
}

.info-box__section-title {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-info-section);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-info-section);
  text-transform: uppercase;
}

.info-box__rows {
  display: grid;
  gap: var(--space-tight) var(--space-3);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  margin: 0;
}

.info-box__row {
  display: contents;
}

.info-box__label {
  color: var(--color-text-muted);
}

.info-box__value {
  margin: 0;
  overflow-wrap: anywhere;
}

.info-box__row--plain .info-box__value {
  grid-column: 1 / -1;
}

.info-box__error {
  margin: 0;
  color: var(--color-text-muted);
}

.delegation + .delegation,
.delegation + .info-box__rows {
  margin-top: var(--space-3);
}

.delegation__title {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-tight);
  font-size: var(--font-size-info-small);
  font-weight: 600;
}

.delegation__count {
  color: var(--color-text-muted);
  font-weight: 500;
}

.seat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seat-gap);
}

.seat {
  width: var(--seat-size);
  height: var(--seat-size);
  border-radius: var(--seat-radius);
  background: var(--color-seat-empty);
}

@media (max-width: 720px) {
  .info-box {
    top: auto;
    max-height: none;
    right: max(var(--space-2), env(safe-area-inset-right));
    bottom: max(var(--space-2), env(safe-area-inset-bottom));
    left: max(var(--space-2), env(safe-area-inset-left));
    width: auto;
    height: var(--info-box-sheet-height);
    transform: translateY(var(--info-box-shift));
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-box {
    transition: none;
  }
}