/*
  Styles for the Sevenoaks District Local Plan briefing.
  The palette and typography echo tomtugendhat.org: soft grey content areas,
  a deep navy banner, vivid blue accents, Libre Baskerville editorial text and
  Carme interface labels. Direction/status colours remain deliberately distinct.
*/

@font-face {
  font-family: "Libre Baskerville";
  src: url("fonts/libre-baskerville-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("fonts/libre-baskerville-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("fonts/libre-baskerville-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Carme";
  src: url("fonts/carme-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --brand-navy: #081b33;
  --page: #f2f2f2;
  --surface: #ffffff;
  --surface-alt: #eaf0f5;
  --line: rgba(8, 27, 51, 0.14);
  --line-strong: rgba(8, 27, 51, 0.3);
  --ink: #081b33;
  --ink-secondary: #394b61;
  --muted: #69798a;
  --action: #2495e5;
  --action-hover: #1379bd;
  --action-ink: #ffffff;
  --increase: #b84620;
  --increase-fill: #e76635;
  --decrease: #0878bc;
  --decrease-fill: #2495e5;
  --unchanged: #7b8793;
  --retained: #9b7100;
  --district-line: #2495e5;
  --seat-line: #8d65a9;
  --heading: "Libre Baskerville", Georgia, serif;
  --body: "Libre Baskerville", Georgia, serif;
  --ui: "Carme", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
}

button,
input,
select {
  font-family: var(--ui);
}

a {
  color: var(--action);
}

a:hover {
  color: var(--action-hover);
}

:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: -999px;
  z-index: 2000;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-weight: 750;
}

.skip-link:focus {
  left: 0.75rem;
}

.mp-masthead {
  overflow: hidden;
  border-bottom: 0;
  background: var(--page);
}

.mp-masthead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(13rem, 13vw, 15rem);
  align-items: stretch;
  gap: 2rem;
  width: 100%;
  min-height: clamp(14rem, 15vw, 16rem);
  margin: 0 auto;
  padding: 0 0 0 max(1.75rem, calc((100vw - 96rem) / 2 + 1.75rem));
}

.mp-masthead__copy {
  align-self: center;
  padding-bottom: 1.35rem;
}

.mp-masthead__label {
  margin: 0 0 0.35rem;
  color: var(--action);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--ui);
}

.mp-masthead__name {
  margin: 0;
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}

.mp-masthead__role {
  margin: 0.35rem 0 0;
  color: var(--ink-secondary);
  font-size: 0.84rem;
}

.mp-masthead__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.15rem;
  margin-top: 0.85rem;
}

.mp-masthead__links a,
.footer-links a,
.footer-contact a {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 750;
  text-decoration-color: rgba(72, 189, 245, 0.62);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.mp-masthead__links a:hover,
.footer-links a:hover,
.footer-contact a:hover {
  color: var(--action-hover);
}

.mp-masthead__portrait {
  display: block;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: clamp(14rem, 15vw, 16rem);
  object-fit: cover;
  object-position: 60% 22%;
}

.page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  width: 100%;
  margin: 0 auto;
  padding: 2.8rem max(1.75rem, calc((100vw - 96rem) / 2 + 1.75rem)) 2.65rem;
  border-bottom: 0;
  background: var(--brand-navy);
}

.header-copy {
  max-width: 63rem;
}

.eyebrow {
  margin: 0 0 0.55rem;
  color: var(--action);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--ui);
}

.page-header h1 {
  margin: 0;
  color: var(--action);
  font-family: var(--ui);
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.subtitle {
  max-width: 53rem;
  margin: 0.9rem 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.6;
}

.header-stamp {
  min-width: 15rem;
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.32);
}

.header-stamp span,
.header-stamp p {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
  font-family: var(--ui);
}

.header-stamp strong {
  display: block;
  margin: 0.3rem 0 0.6rem;
  color: #ffffff;
  font-family: var(--heading);
  font-size: 1.2rem;
  line-height: 1.15;
}

main {
  width: min(96rem, 100%);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

.summary-strip {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 24px -20px rgba(8, 27, 51, 0.7);
}

.summary-strip dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.summary-strip dl > div {
  min-width: 0;
  padding: 1.15rem 1.35rem 1.25rem;
}

.summary-strip dl > div + div {
  border-left: 1px solid var(--line);
}

.summary-strip dt {
  margin-bottom: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.summary-strip dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.filter-bar {
  display: grid;
  grid-template-columns: minmax(9rem, 1.1fr) minmax(14rem, 2.2fr) minmax(11rem, 1.3fr) minmax(10rem, 1.15fr) auto;
  align-items: end;
  gap: 0.75rem;
  margin: 1rem 0 2.5rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 24px -20px rgba(8, 27, 51, 0.7);
}

.filter-intro {
  align-self: center;
  padding: 0 0.4rem;
}

.filter-intro span,
.filter-bar label > span {
  display: block;
  margin: 0 0 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--ui);
}

.filter-intro strong {
  color: var(--action);
  font-family: var(--heading);
  font-size: 1rem;
}

.filter-bar label {
  min-width: 0;
}

.filter-bar input,
.filter-bar select,
.filter-bar button {
  width: 100%;
  height: 2.65rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--ink);
  font: 400 0.82rem var(--ui);
}

.filter-bar input,
.filter-bar select {
  padding: 0 0.85rem;
}

.filter-bar input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.filter-bar button {
  width: auto;
  min-width: 5rem;
  padding: 0 1rem;
  cursor: pointer;
  background: var(--surface);
  color: var(--action);
  font-weight: 700;
}

.filter-bar input:hover,
.filter-bar select:hover,
.filter-bar button:hover,
.filter-bar input:focus,
.filter-bar select:focus,
.filter-bar button:focus-visible {
  border-color: var(--action);
  outline: none;
}

.district-section,
.map-section,
.register-section {
  scroll-margin-top: 1rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 0 1rem;
}

.section-heading p {
  margin: 0 0 0.3rem;
  color: var(--action);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--ui);
}

.section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.section-heading > span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.section-heading > span i {
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid var(--action);
  border-radius: 50%;
}

.section-heading--compact {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.map-key {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.3rem;
  margin-bottom: 1.1rem;
  color: var(--ink-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--ui);
}

.map-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.map-key i {
  width: 0.6rem;
  height: 0.6rem;
  border: 1.5px solid var(--surface);
  outline: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--unchanged);
}

.map-key .key-increased {
  background: var(--increase-fill);
}

.map-key .key-decreased {
  background: var(--decrease-fill);
}

.map-key .key-removed {
  background: var(--surface);
}

.map-key .key-retained {
  background: var(--retained);
}

.area-maps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1.25rem;
}

.area-map-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 24px -20px rgba(8, 27, 51, 0.7);
}

.area-map-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
}

.area-map-card__header h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--heading);
  font-size: 1.05rem;
  font-weight: 700;
}

.area-map-card__header span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.view-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-alt);
}

.view-toggle__button--reset {
  margin-left: auto;
  border-style: dashed;
  color: var(--muted);
}

.view-toggle__button--reset::before {
  content: "\21BA";
  margin-right: 0.35rem;
}

.view-toggle__button--reset:hover {
  border-style: solid;
}

.view-toggle__button {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-secondary);
  font: 400 0.72rem var(--ui);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.view-toggle__button:hover {
  border-color: var(--action);
  color: var(--ink);
}

.view-toggle__button.is-active {
  border-color: var(--action);
  background: var(--action);
  color: var(--action-ink);
}

.area-map {
  width: 100%;
  height: 19rem;
  background: var(--surface-alt);
}

/* The district overview is the page's centerpiece, so it gets a wider,
   taller canvas and a stronger accent border than the area cards below it,
   rather than sharing their compact card treatment. */
#district-map-container {
  max-width: 64rem;
  margin: 0 auto;
}

.area-map-card--district {
  border-color: var(--district-line);
  border-top-width: 3px;
  box-shadow: 0 10px 30px -18px rgba(36, 149, 229, 0.65), 0 1px 2px rgba(8, 27, 51, 0.12);
}

.area-map-card--district .area-map-card__header h3 {
  font-size: 1.3rem;
}

.boundary-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.3rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-alt);
  color: var(--ink-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--ui);
}

.boundary-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.boundary-swatch {
  display: inline-block;
  width: 1.15rem;
  height: 0;
  border-top-width: 2.5px;
  border-top-style: solid;
}

.boundary-swatch--district {
  border-top-color: var(--district-line);
}

.boundary-swatch--seat {
  border-top-color: var(--seat-line);
  border-top-style: dashed;
}

.area-map--district {
  height: 36rem;
}

.area-map-wrap {
  position: relative;
}

.district-stat-badge {
  position: absolute;
  z-index: 5;
  top: 0.9rem;
  right: 0.9rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(8, 27, 51, 0.92);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
  pointer-events: none;
  font-family: var(--ui);
}

.district-stat-badge strong {
  display: block;
  color: #ffffff;
  font-family: var(--heading);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.table-shell {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 24px -20px rgba(8, 27, 51, 0.7);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 58rem;
}

thead {
  background: var(--brand-navy);
}

th,
td {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-secondary);
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
}

thead th {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--ui);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr {
  transition: background 0.15s ease;
}

tbody tr:hover,
tbody tr.is-selected {
  background: var(--surface-alt);
}

tbody tr.table-group-row:hover {
  background: transparent;
}

tbody th {
  max-width: 22rem;
  color: var(--ink);
}

.table-group-row th {
  padding-top: 1.3rem;
  padding-bottom: 0.5rem;
  color: var(--action);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--ui);
  border-bottom: 1px solid var(--line);
}

tbody tr.table-group-row:first-child th {
  padding-top: 1rem;
}

.site-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 700 0.84rem/1.4 var(--heading);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
}

.site-link:hover,
.site-link:focus-visible {
  color: var(--action);
  text-decoration-color: var(--action);
  outline: none;
}

.change-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-secondary);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: var(--ui);
}

.change-pill--increased {
  border-color: rgba(194, 87, 29, 0.35);
  color: var(--increase);
}

.change-pill--decreased {
  border-color: rgba(0, 135, 220, 0.35);
  color: var(--decrease);
}

.change-pill--retained_no_yield {
  border-color: rgba(184, 134, 11, 0.35);
  color: var(--retained);
}

.change-pill--removed {
  color: var(--muted);
}

.approx-flag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--ui);
}

.empty-state {
  margin: 0;
  padding: 2rem;
  color: var(--muted);
}

.page-footer {
  width: min(96rem, 100%);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 0 1.75rem 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.page-footer p {
  margin: 0;
}

.footer-identity {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}

.footer-identity__name {
  color: var(--ink);
  font-family: var(--heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.footer-identity__role {
  margin-top: 0.25rem !important;
  color: var(--ink-secondary);
  font-size: 0.78rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem 1rem;
}

.footer-contact {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  color: var(--ink-secondary);
  font-style: normal;
}

.footer-contact a:last-child {
  flex-basis: 100%;
}

.footer-notice {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1.5rem 2rem;
  padding-top: 1.25rem;
}

.footer-notice strong {
  color: var(--ink-secondary);
}

/* MapLibre chrome, restyled to match the rest of the page */
.maplibregl-popup-content {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  font-family: var(--body);
  color: var(--ink);
}

.maplibregl-popup-tip {
  border-top-color: var(--surface) !important;
  border-bottom-color: var(--surface) !important;
}

.maplibregl-popup-close-button {
  color: var(--muted);
  font-size: 1.1rem;
}

.maplibregl-popup-close-button:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

.maplibregl-ctrl-group {
  background: var(--surface);
  border: 1px solid var(--line);
}

.maplibregl-ctrl-group button {
  background: var(--surface);
}

.maplibregl-ctrl-group button:not(:disabled):hover {
  background: var(--surface-alt);
}

.maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--muted);
}

.maplibregl-ctrl-attrib a {
  color: var(--ink-secondary);
}

.maplibregl-ctrl-scale {
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--line-strong);
  color: var(--ink-secondary);
}

.site-popup h2 {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-family: var(--heading);
  font-size: 1.05rem;
}

.popup-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-family: var(--ui);
}

.popup-policy {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--action);
}

.popup-comparison {
  display: flex;
  gap: 1.25rem;
  margin: 0.6rem 0;
}

.popup-comparison div {
  min-width: 0;
}

.popup-comparison span {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--ui);
}

.popup-comparison strong {
  color: var(--ink);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.popup-change {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-secondary);
  font-size: 0.82rem;
  line-height: 1.4;
}

.popup-change strong {
  color: var(--ink);
}

.popup-plot-button {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--action);
  font: 400 0.78rem var(--ui);
  cursor: pointer;
  text-align: center;
}

.popup-plot-button:hover,
.popup-plot-button:focus-visible {
  border-color: var(--action);
  background: var(--action);
  color: var(--action-ink);
  outline: none;
}

/* On-map site markers: shape carries type, colour and border style carry
   the change since Regulation 18 */
.site-marker {
  --marker: var(--unchanged);
  /* MapLibre's own .maplibregl-marker rule sets position: absolute so the
     marker's translate() transform is measured from the map container's
     origin. Both rules are single-class selectors of equal specificity, so
     whichever stylesheet loads later wins the cascade regardless of which
     one is "more correct" -- this rule must therefore agree with absolute,
     not override it to relative, or every marker falls into normal document
     flow and drifts further from its true position the later it was added. */
  position: absolute;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.site-marker::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: var(--marker);
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.55);
  transition: width 0.15s ease, height 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.site-marker::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid transparent;
  border-radius: 50%;
  pointer-events: none;
}

.site-marker--increased {
  --marker: var(--increase-fill);
}

.site-marker--decreased {
  --marker: var(--decrease-fill);
}

.site-marker--unchanged {
  --marker: var(--unchanged);
}

.site-marker--removed {
  --marker: var(--surface);
}

.site-marker--retained_no_yield {
  --marker: var(--retained);
}

.site-marker--approx::after {
  border-color: var(--ink-secondary);
  border-style: dashed;
}

.site-marker:hover::before,
.site-marker:focus-visible::before,
.site-marker.is-selected::before {
  width: 16px;
  height: 16px;
  box-shadow:
    0 0 0 1.5px var(--line-strong),
    0 0 0 5px rgba(0, 135, 220, 0.16),
    0 4px 10px rgba(0, 0, 0, 0.6);
  transform: translateY(-1px);
}

.site-marker:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .mp-masthead__inner {
    grid-template-columns: minmax(0, 1fr) 6.25rem;
    gap: 0.75rem;
    min-height: 8.5rem;
    padding: 1.2rem 0 0 1.1rem;
  }

  .mp-masthead__copy {
    padding-bottom: 1.1rem;
  }

  .mp-masthead__portrait {
    height: 8.5rem;
  }

  .mp-masthead__role {
    max-width: 18rem;
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .mp-masthead__links {
    gap: 0.4rem 0.8rem;
  }

  .page-header {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem 1.1rem;
  }

  .header-stamp {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    padding-top: 0.9rem;
  }

  main {
    padding: 1.25rem 0.9rem 2.5rem;
  }

  .summary-strip dl {
    grid-template-columns: 1fr;
  }

  .summary-strip dl > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  .filter-intro,
  .filter-bar label:first-of-type {
    grid-column: 1 / -1;
  }

  .filter-bar button {
    width: 100%;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }

  .area-maps {
    grid-template-columns: 1fr;
  }

  .area-map {
    height: 16rem;
  }

  .area-map--district {
    height: 20rem;
  }

  .table-shell {
    border-radius: 12px;
  }

  .page-footer {
    padding: 0 1rem 1rem;
  }

  .footer-identity,
  .footer-notice {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .footer-contact {
    grid-column: auto;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .filter-bar {
    grid-template-columns: 1fr 1.5fr 1fr;
  }

  .filter-bar label:nth-of-type(3),
  .filter-bar button {
    grid-row: 2;
  }
}