@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBMPlexSans-Regular.ba711a3085ff.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBMPlexSans-SemiBold.f78048030eab.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.ba204497f16b.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f5f5f4;
  --surface: #fafaf9;
  --border: #e7e5e4;
  --text: #1c1917;
  --text-dim: #57534e;
  --primary: #0d9488;
  --danger: #be123c;
  --series-1: #0d9488;
  --series-2: #c2410c;
  --series-3: #7c3aed;
  --series-4: #be123c;
  --map-departure: #0d9488;
  --map-arrival: #c2410c;
  --map-marker-outline: #fafaf9;
  --wordmark-text: #0E2436;
  --wordmark-accent: #1E96B8;
  --map-tile-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f0f0f;
    --surface: #1a1a1a;
    --border: #2a2a2a;
    --text: #f5f5f5;
    --text-dim: #a1a1aa;
    --danger: #e11d48;
    --series-1: #e879f9;
    --series-2: #ea580c;
    --series-3: #8b5cf6;
    --series-4: #e11d48;
    --map-departure: #e879f9;
    --map-arrival: #ea580c;
    --map-marker-outline: #8f8984;
    --wordmark-text: #f5f5f5;
    --map-tile-filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(.9) saturate(.75);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f0f;
  --surface: #1a1a1a;
  --border: #2a2a2a;
  --text: #f5f5f5;
  --text-dim: #a1a1aa;
  --danger: #e11d48;
  --series-1: #e879f9;
  --series-2: #ea580c;
  --series-3: #8b5cf6;
  --series-4: #e11d48;
  --map-departure: #e879f9;
  --map-arrival: #ea580c;
  --map-marker-outline: #8f8984;
  --wordmark-text: #f5f5f5;
  --map-tile-filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(.9) saturate(.75);
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

body.storage-notice-visible {
  padding-bottom: var(--storage-notice-height, 72px);
}

/* The class is a fallback for browsers without :has(). In supporting browsers,
   the notice's real hidden state is authoritative even if JavaScript is stale. */
@supports selector(body:has(#storage-notice:not([hidden]))) {
  body:has(#storage-notice:not([hidden])) {
    padding-bottom: var(--storage-notice-height, 72px);
  }

  body.storage-notice-visible:not(:has(#storage-notice:not([hidden]))) {
    padding-bottom: 0;
  }
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 120ms, opacity 120ms, background 120ms;
}

a:hover {
  opacity: .76;
  text-decoration: underline;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 16px;
}

h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 12px;
}

h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 8px;
}

.container {
  margin: 0 auto;
  max-width: 1280px;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 56px;
}

.header-inner {
  align-items: stretch;
  display: flex;
  height: 56px;
  justify-content: space-between;
  min-width: 0;
}

.wordmark {
  align-items: center;
  display: flex;
  flex: none;
  font-size: 20px;
  font-weight: 500;
  gap: 8px;
  letter-spacing: -.02em;
  line-height: 1;
}

.wordmark-mark {
  flex: none;
  height: 28px;
  width: 28px;
}

.wordmark-text {
  color: var(--wordmark-text);
}

.wordmark-accent {
  color: var(--wordmark-accent);
}

.wordmark:hover {
  text-decoration: none;
}

.main-nav {
  align-items: stretch;
  display: flex;
  gap: 24px;
  min-width: 0;
}

.main-nav a {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  display: flex;
  padding-top: 2px;
}

.main-nav a.active {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.main-nav a:hover {
  text-decoration: none;
}

.page-content {
  min-height: calc(100vh - 105px);
  padding-bottom: 32px;
  padding-top: 24px;
}

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12.5px;
}

.footer-inner {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding-bottom: 12px;
  padding-top: 12px;
}

.theme-control {
  align-items: center;
  display: none;
  flex: none;
  gap: 8px;
}

:root[data-theme-control] .theme-control {
  display: flex;
}

.theme-control select {
  font-size: 12.5px;
  height: 32px;
  width: 92px;
}

.theme-system-state {
  white-space: nowrap;
}

.storage-notice {
  background: var(--surface);
  border-top: 1px solid var(--border);
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 10;
}

.storage-notice-inner {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding-bottom: 8px;
  padding-top: 8px;
}

.storage-notice p {
  color: var(--text-dim);
  font-size: 12.5px;
  margin: 0;
}

.storage-notice strong {
  color: var(--text);
}

.storage-notice button {
  flex: none;
}

.legal-content,
.information-content {
  max-width: 88ch;
}

.legal-content section,
.information-content section {
  margin-top: 24px;
}

.legal-content address {
  font-style: normal;
  margin-bottom: 12px;
}

.template-notice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}

.last-updated {
  color: var(--text-dim);
  font-size: 12.5px;
  margin-top: 24px;
}

.mono,
code,
time {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.network-now {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
  padding: 8px 12px;
}

.page-heading {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.page-heading h1 {
  margin-bottom: 4px;
}

.metadata,
.range-label {
  color: var(--text-dim);
  margin-bottom: 16px;
}

.range-label {
  font-size: 12.5px;
}

.range-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.range-controls {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 12px;
}

.comparison-rationale {
  color: var(--text-dim);
  margin-bottom: 12px;
}

.comparison-form {
	border-bottom: 0;
  justify-content: flex-start;
  margin-bottom: 12px;
  padding: 12px 0;
}

.historic-map-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.historic-map-form label {
  color: var(--text-dim);
  display: grid;
  font-size: 12.5px;
  gap: 4px;
}

.historic-map-form a {
  padding: 5px 4px;
}

.comparison-notice,
.comparison-delta {
  color: var(--text-dim);
  margin: 8px 0 0;
}

.comparison-summary {
  margin-top: 24px;
}

.account-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.account-form label {
  color: var(--text-dim);
  display: grid;
  font-size: 12.5px;
  gap: 4px;
}

.key-once {
  border: 1px solid var(--primary);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
}

.key-once code {
  overflow-wrap: anywhere;
}

.range-form label {
  color: var(--text-dim);
  display: grid;
  font-size: 12.5px;
  gap: 4px;
}

.event-search-form {
  align-items: end;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding: 12px 0;
}

.event-search-form label {
  color: var(--text-dim);
  display: grid;
  font-size: 12.5px;
  gap: 4px;
}

.event-search-form a {
  align-items: center;
  display: flex;
  height: 32px;
  padding: 4px;
}

.replay-search-controls {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 12px;
}

.replay-search-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.replay-search-form label {
  color: var(--text-dim);
  display: grid;
  font-size: 12.5px;
  gap: 4px;
}

.replay-search-form a {
  align-items: center;
  display: flex;
  height: 32px;
  padding: 4px;
}

button,
input,
select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  height: 32px;
  padding: 4px 8px;
  transition: color 120ms, opacity 120ms, background 120ms;
}

button {
  cursor: pointer;
  font-weight: 600;
  padding-left: 12px;
  padding-right: 12px;
}

button:hover {
  background: var(--border);
}

.button-link {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  display: inline-flex;
  font-weight: 600;
  min-height: 32px;
  padding: 4px 12px;
  text-decoration: none;
  transition: color 120ms, background 120ms;
}

.button-link:hover {
  background: var(--border);
}

.danger-form button {
  border-color: var(--danger);
  color: var(--danger);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.summary-strip {
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 0 0 24px;
  padding: 12px 0;
}

.summary-strip div {
  align-items: baseline;
  display: flex;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.summary-strip dt {
  color: var(--text-dim);
  font-size: 12.5px;
}

.summary-strip dd {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.table-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
}

caption {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

th,
td {
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
}

thead th {
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

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

tbody tr {
  transition: background 120ms;
}

tbody tr:hover {
  background: var(--bg);
}

.numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.empty-cell,
.empty-state {
  color: var(--text-dim);
  padding: 24px;
  text-align: center;
}

.empty-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.split-tables {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 24px;
}

.bookings-days {
  align-items: start;
}

.booking-day {
  min-width: 0;
}

.booking-groups {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.booking-group {
  border-bottom: 1px solid var(--border);
  max-width: 100%;
  min-width: 0;
}

.booking-group:last-child {
  border-bottom: 0;
}

.booking-group summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  padding: 8px 12px;
  transition: background 120ms;
}

.booking-group summary::-webkit-details-marker {
  display: none;
}

.booking-group summary:hover {
  background: var(--bg);
}

.booking-summary {
  align-items: baseline;
  display: grid;
  gap: 4px 12px;
  grid-template-columns: 9px minmax(64px, auto) max-content minmax(0, 1fr);
}

.booking-marker-box {
  align-self: start;
  display: grid;
  height: 1lh;
  place-items: center;
  width: 9px;
}

.booking-marker {
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  height: 6px;
  transform: rotate(-45deg);
  width: 6px;
}

.booking-group[open] .booking-marker {
  transform: rotate(45deg);
}

.booking-summary strong {
  overflow-wrap: anywhere;
}

.booking-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  min-width: 0;
}

.booking-coverage-label {
  color: var(--text-dim);
}

.booking-period {
  white-space: nowrap;
}

.booking-group > .table-container {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--border);
}

.chart-section {
  margin-top: 24px;
}

.chart-heading-row {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.chart-heading-row h2 {
  margin-bottom: 0;
}

.chart-heading-row > .range-controls {
  border-top: 0;
  margin-top: 0;
}

.chart-heading-row > .comparison-form {
  margin-bottom: 0;
  padding: 0;
}

.chart-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 12px;
}

.chart-plot {
  height: 300px;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.chart-data {
  margin-top: 12px;
}

.chart-data summary {
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12.5px;
  /* line-height fills the 32px touch target so the hit area has no dead band
     below the text, and fit-content stops it spanning the whole chart width. */
  line-height: 24px;
  padding: 4px 0;
  transition: color 120ms;
  width: fit-content;
}

.chart-data summary:hover {
  color: var(--text);
}

.chart-data[open] .chart-fallback {
  margin-top: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.uplot {
  color: var(--text-dim);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
}

.u-legend {
  font-size: 12.5px;
}

.u-cursor-x,
.u-cursor-y {
  border-color: var(--text-dim) !important;
}

.chart-tooltip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  color: var(--text);
  display: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.chart-tooltip div {
  padding: 4px 8px;
}

.section-block {
  margin-top: 24px;
}

.pagination {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin-top: 16px;
}

.pagination a:last-child {
  justify-self: end;
}

.pagination span {
  color: var(--text-dim);
  font-size: 12.5px;
}

.error-page {
  padding: 32px 0;
}

.detail-list {
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.detail-list div {
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 12px;
  grid-template-columns: 120px minmax(0, 1fr);
  padding: 8px 12px;
}

.detail-list div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.detail-list dt {
  color: var(--text-dim);
  font-size: 12.5px;
}

.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.event-description p {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0;
  max-width: 88ch;
  padding: 12px;
  white-space: pre-wrap;
}

.booking-day + .booking-day,
.event-day + .event-day {
  margin-top: 24px;
}

.event-day table {
  min-width: 680px;
  table-layout: fixed;
}

.event-day th:nth-child(1) {
  width: 96px;
}

.event-day th:nth-child(2) {
  width: 38%;
}

.event-day th:nth-child(3) {
  width: 22%;
}

/* Most table cells deliberately stay on one line. The event list columns opt
   into wrapping at their comma-space separators; normal word breaking keeps
   ICAO codes intact instead of splitting them mid-code. */
.event-day td:nth-child(3),
.event-day td:nth-child(4) {
  overflow-wrap: normal;
  white-space: normal;
  word-break: normal;
}

.detail-list dd.event-value-list {
  overflow-wrap: normal;
  white-space: normal;
  word-break: normal;
}

.event-value-list.mono .event-list-item,
.mono .event-value-list .event-list-item {
  white-space: nowrap;
}

.booking-day table {
  min-width: 720px;
  table-layout: fixed;
}

.booking-day th:nth-child(1),
.booking-day th:nth-child(2),
.booking-day th:nth-child(3) {
  width: 18%;
}

.booking-day th:nth-child(4),
.booking-day th:nth-child(5) {
  width: 23%;
}

.event-ranking-tables table {
  table-layout: fixed;
}

.event-ranking-tables th:first-child {
  width: 70%;
}

.event-ranking-tables th:last-child {
  width: 30%;
}

.member-ranking-tables table {
  table-layout: fixed;
}

.member-ranking-tables th:first-child {
  width: 70%;
}

.member-ranking-tables th:last-child {
  width: 30%;
}

.map-plot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #1c1917;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
}

.map-live {
  height: 520px;
}

.map-replay {
  height: 420px;
}

.map-event,
.map-member {
  height: 520px;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.map-legend[hidden] {
  display: none;
}

.event-map-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 8px;
}

.map-mode-toggle {
  display: flex;
}

.map-mode-toggle button {
  border-radius: 0;
}

.map-mode-toggle button:first-child {
  border-radius: 6px 0 0 6px;
}

.map-mode-toggle button:last-child {
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.map-mode-toggle button[aria-pressed="true"] {
  background: var(--border);
  color: var(--primary);
}

.route-key {
  color: var(--text-dim);
  font-size: 12.5px;
}

.route-key::before {
  border-top: 2px solid var(--map-departure);
  content: "";
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  width: 24px;
}

.route-arrival::before {
  border-color: var(--map-arrival);
}

.route-internal::before {
  border-color: var(--map-departure);
  border-style: dashed;
}

.route-airport::before {
  background: var(--map-arrival);
  border: 2px solid var(--map-departure);
  border-radius: 50%;
  height: 8px;
  margin-left: 7px;
  width: 8px;
}

.heatmap-legend {
  color: var(--text-dim);
  font-size: 12.5px;
  gap: 8px;
}

.heatmap-ramp {
  background: linear-gradient(90deg, transparent, #142378 8%, #006482 26%, #009150 44%, #b9aa00 62%, #f59f55 81%, #ffaca5);
  border: 1px solid var(--map-marker-outline);
  display: inline-block;
  height: 12px;
  width: 72px;
}

.event-heatmap-canvas {
  pointer-events: none;
}

.event-definition {
  max-width: 88ch;
}

.event-result-section {
  margin-top: 24px;
}

.map-loading {
  color: var(--text-dim);
  padding: 24px;
  text-align: center;
}

.replay-controls {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  margin-top: 8px;
  padding: 8px;
}

.replay-controls input[type="range"] {
  padding: 0;
  width: 100%;
}

.replay-controls output {
  color: var(--text-dim);
  font-size: 12.5px;
}

.leaflet-control-attribution {
  font-size: 12.5px;
}

.leaflet-container {
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
}

.leaflet-tile-pane {
  filter: var(--map-tile-filter);
}

.plane-marker {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--map-departure);
  display: flex;
  justify-content: center;
}

.plane-marker-inner {
  align-items: center;
  display: flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.plane-marker-inner svg {
  display: block;
  fill: currentColor;
  height: 22px;
  stroke: var(--map-marker-outline);
  stroke-linejoin: round;
  stroke-width: 0.6px;
  width: 22px;
}

.leaflet-bar,
.leaflet-control-layers,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-tooltip {
  box-shadow: none;
}

.leaflet-bar,
.leaflet-control-layers,
.leaflet-popup-content-wrapper {
  border-radius: 6px;
}

.leaflet-popup-content-wrapper,
.leaflet-tooltip {
  border: 1px solid var(--border);
  border-radius: 6px;
}

.leaflet-popup-content {
  font-size: 12.5px;
}

@media (max-width: 899px) {
  .page-heading {
    display: block;
  }

  .range-form {
    justify-content: flex-start;
    margin-bottom: 16px;
  }

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

  .map-live,
  .map-event,
  .map-member {
    height: 420px;
  }

  .map-replay {
    height: 360px;
  }

  .detail-list {
    grid-template-columns: 1fr;
  }

  .detail-list div:nth-last-child(2) {
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 639px) {
  body.storage-notice-visible {
    padding-bottom: var(--storage-notice-height, 112px);
  }

  @supports selector(body:has(#storage-notice:not([hidden]))) {
    body:has(#storage-notice:not([hidden])) {
      padding-bottom: var(--storage-notice-height, 112px);
    }

    body.storage-notice-visible:not(:has(#storage-notice:not([hidden]))) {
      padding-bottom: 0;
    }
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .booking-summary {
    grid-template-columns: 9px minmax(0, 1fr) max-content;
  }

  .booking-coverage {
    grid-column: 2 / -1;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .header-inner {
    gap: 16px;
  }

  .storage-notice-inner {
    gap: 8px;
  }

  .storage-notice button {
    min-height: 44px;
  }

  .main-nav {
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .main-nav a {
    flex: none;
    min-height: 44px;
  }

  .range-form {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .range-form label,
  .range-form button,
  .range-form input,
  .range-form select {
    width: 100%;
  }

  .range-form button,
  .range-form input,
  .range-form select {
    min-height: 44px;
  }

  .event-search-form,
  .replay-search-form {
    align-items: stretch;
    flex-direction: column;
  }

  .historic-map-form {
    align-items: stretch;
    flex-direction: column;
  }

  .historic-map-form input,
  .historic-map-form button,
  .historic-map-form a {
    min-height: 44px;
    width: 100%;
  }

  .event-search-form label,
  .event-search-form button,
  .event-search-form input,
  .replay-search-form label,
  .replay-search-form button,
  .replay-search-form input {
    width: 100%;
  }

  .event-search-form a,
  .event-search-form button,
  .event-search-form input,
  .replay-search-form a,
  .replay-search-form button,
  .replay-search-form input {
    min-height: 44px;
  }

  .summary-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .replay-controls {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .replay-controls output {
    grid-column: 1 / -1;
  }

  .map-live,
  .map-event,
  .map-member,
  .map-replay {
    height: 320px;
  }

  thead th {
    position: static;
  }
}

/* Side controls.

   The main column is 1232px at its full width (1280px container less padding).
   The controls only move beside it once the viewport can hold that full width
   plus the gap, the 260px column and the page padding: 1232 + 32 + 260 + 48 =
   1572px. Below that they stay stacked underneath. The main column never gives
   up width to make room.

   Every page uses the same outer width at this breakpoint so navigation does
   not shift when moving between pages with and without side controls. */
@media (min-width: 1572px) {
  .container {
    max-width: 1572px;
  }

  .page-content:has(> .range-controls),
  .page-content:has(> .event-search-form),
  .page-content:has(> .replay-search-controls),
  .page-content:has(> .custom-event-controls) {
    align-items: start;
    column-gap: 32px;
    display: grid;
    grid-template-columns: minmax(0, 1232px) 260px;
  }

  .page-content > * {
    grid-column: 1;
    min-width: 0;
  }

  .page-content > .range-controls,
  .page-content > .event-search-form,
  .page-content > .replay-search-controls,
  .page-content > .custom-event-controls {
    border-top: 0;
    grid-column: 2;
    /* Span the whole column instead of sitting in row 1, which would stretch
       that row to the control block's height and push the rest of the page
       down by it. align-items: start keeps it at the top of the span. */
    grid-row: 1 / span 100;
    margin-top: 0;
    padding-top: 0;
    position: sticky;
    top: 24px;
  }

  .page-content > .range-controls form,
  .page-content > .range-controls > .date-range,
  .page-content > .event-search-form,
  .page-content > .replay-search-controls form,
  .page-content > .custom-event-controls form {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
  }
}