/*
  Styles for the Sevenoaks District Local Plan briefing.
  Colour roles are custom properties so exact brand values can be dropped in
  without touching layout rules. Dark theme: near-black surfaces, Conservative
  blue accent, serif headings. Kept restrained deliberately (no glow effects,
  no gradients) so it reads as a civic document rather than a dashboard.
  Direction/status colours were checked for colour-blind separation before
  being set here.
*/

:root {
  --page: #0c1420;
  --surface: #141e2c;
  --surface-alt: #1a2534;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);
  --ink: #eef2f7;
  --ink-secondary: #b7c2d1;
  --muted: #8794a6;
  --action: #4fb3ee;
  --action-hover: #7ecdf5;
  --action-ink: #06121f;
  --increase: #f0906a;
  --increase-fill: #d9622b;
  --decrease: #4fb3ee;
  --decrease-fill: #3987e5;
  --unchanged: #7a8592;
  --retained: #d8ad4c;
  --district-line: #4fb3ee;
  --neighbour-line: #b98cd6;
  --heading: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --body: system-ui, -apple-system, "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;
}

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;
}

.page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  width: min(96rem, 100%);
  margin: 0 auto;
  padding: 2.25rem 1.75rem 1.8rem;
  border-bottom: 3px solid var(--ink);
}

.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;
}

.page-header h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.subtitle {
  max-width: 53rem;
  margin: 0.9rem 0 0;
  color: var(--ink-secondary);
  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 var(--line-strong);
}

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

.header-stamp strong {
  display: block;
  margin: 0.3rem 0 0.6rem;
  color: var(--ink);
  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 1px 2px rgba(0, 0, 0, 0.35);
}

.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 1px 2px rgba(0, 0, 0, 0.35);
}

.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;
}

.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: 600 0.82rem var(--body);
}

.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;
}

.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;
}

.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 1px 2px rgba(0, 0, 0, 0.35);
}

.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: 700 0.72rem var(--body);
  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 8px 28px -14px rgba(79, 179, 238, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.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;
}

.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--neighbour {
  border-top-color: var(--neighbour-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 var(--line-strong);
  border-radius: 12px;
  background: rgba(20, 30, 44, 0.85);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  color: var(--ink-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
  pointer-events: none;
}

.district-stat-badge strong {
  display: block;
  color: var(--ink);
  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 1px 2px rgba(0, 0, 0, 0.35);
}

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

thead {
  background: var(--page);
}

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: var(--ink-secondary);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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;
  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(--body);
  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;
}

.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;
}

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

.page-footer {
  width: min(96rem, 100%);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 1.25rem 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;
}

/* 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(20, 30, 44, 0.75) !important;
  color: var(--muted);
}

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

.maplibregl-ctrl-scale {
  background: rgba(20, 30, 44, 0.75);
  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;
}

.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;
}

.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: 700 0.78rem var(--body);
  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) {
  .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.75rem 1rem 1rem;
  }
}

@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;
  }
}