/*
  Flight emissions mapper: app styles on top of Signal.
  Signal's tokens and .sg-* classes load first (src/styles/signal/index.css); this file only
  adds layout and the few pieces Signal doesn't have. Use tokens, not hard-coded colours.
  Rules: radius 0, no gradients, no soft shadows, no blur, no translucency. The hard offset
  shadow is for the floating card and the popover only. The map's hatch and heat are data.
*/

/* ---------- Page shell ---------- */

.app-shell {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  overflow: hidden;
  background: var(--bg);
}

.control-panel {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  padding: var(--space-5);
  background: var(--bg);
  border-right: var(--border-rule) solid var(--rule);
}

/* ---------- Brand ---------- */

.brand-block {
  margin-bottom: var(--space-6);
}

.home-link {
  display: inline-flex;
  gap: var(--space-1);
  text-decoration: none;
}

.home-link:hover {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-2);
  font-size: 20px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.brand-mark {
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
}

.brand-intro {
  max-width: 34rem;
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--fg-2);
}

/* ---------- Panel sections ---------- */

.panel-section {
  margin-bottom: var(--space-6);
}

/* Signal's numbered header, narrowed for a side panel: index / title / control. */
.panel-head {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

.panel-head h2 {
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.message {
  min-height: 20px;
  margin-top: var(--space-2);
  font-size: var(--text-meta);
  color: var(--fg-2);
}

/* ---------- Upload zone ---------- */

.upload-zone {
  display: grid;
  gap: 6px;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px dashed var(--neutral-400);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
}

.upload-zone:hover {
  background: var(--surface-2);
}

.example-link {
  margin: var(--space-2) 0 0;
  font-size: var(--text-meta);
  color: var(--fg-2);
}

.example-link a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.example-link a:hover,
.example-link a:focus-visible {
  background: var(--accent-tint);
}

.example-link__meta {
  white-space: nowrap;
}

.upload-title {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}

.upload-zone input[type="file"] {
  max-width: 100%;
  margin-top: var(--space-2);
  font: var(--weight-regular) var(--text-meta)/1.4 var(--font-sans);
  color: var(--fg-2);
  cursor: pointer;
}

/* Matches sg-btn sg-btn--secondary sg-btn--sm */
.upload-zone input[type="file"]::file-selector-button {
  height: var(--control-sm);
  margin-right: var(--space-3);
  padding: 0 var(--space-3);
  font: var(--weight-medium) var(--text-meta)/1 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--fg-1);
  background: transparent;
  border: var(--border-rule) solid var(--fg-1);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.upload-zone input[type="file"]::file-selector-button:hover {
  background: var(--fg-1);
  color: var(--bg);
}

/* ---------- Tags ---------- */

/* Turns off Signal's uppercase, for values like "6 h". */
.sg-tag--plain {
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.sg-tag--warning {
  background: var(--warning-tint);
  border-color: var(--warning-tint);
  color: var(--warning-text);
}

/* ---------- Travel policy ---------- */

.slider-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
  color: var(--fg-2);
}

.slider-label strong {
  font-weight: var(--weight-medium);
  color: var(--fg-1);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

input[type="range"]:focus-visible {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--fg-1);
  border: 0;
  border-radius: 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: -7px; /* centres the 16px thumb on the 2px track */
  background: var(--accent);
  border: 2px solid var(--fg-1);
  border-radius: 0;
}

input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--fg-1);
  border: 0;
  border-radius: 0;
}

input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 2px solid var(--fg-1);
  border-radius: 0;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.policy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* Labels can wrap to different line counts; keep the inputs on one baseline. */
.policy-grid .sg-field {
  justify-content: space-between;
  min-width: 0;
}

.policy-grid .sg-input {
  font-variant-numeric: tabular-nums;
}

/* Advanced emission factors: a plain disclosure, closed by default. */
.factors-details {
  margin-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-3) 0;
}

.factors-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: var(--weight-medium);
  font-size: var(--text-small);
}

.factors-details summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.factors-details[open] summary {
  margin-bottom: var(--space-2);
}

.factors-details .policy-grid + .sg-btn {
  margin-top: var(--space-4);
}

/* How this is calculated */
.method-list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--fg-1);
}

.method-list li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-1);
}

.method-table {
  margin-top: var(--space-2);
}

.method-table th[scope="row"] {
  border-bottom: 1px solid var(--hairline);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fg-1);
}

.method-source {
  margin: var(--space-4) 0 0;
  font-size: var(--text-meta);
  color: var(--fg-2);
  line-height: 1.45;
}

.switch-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.sg-switch {
  position: relative; /* anchors Signal's visually hidden checkbox */
}

/* Popover: shown on hover or keyboard focus of the info button. It hangs below the row inside
   the panel, so the scrolling panel never clips it. */
.popover {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 30;
  width: min(300px, calc(100% - 6px)); /* leaves room for the 6px offset shadow */
  max-width: 300px;
  padding: var(--space-3);
  font-size: var(--text-meta);
  font-weight: var(--weight-regular);
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  color: var(--fg-1);
  background: var(--surface);
  border: var(--border-rule) solid var(--rule);
  border-radius: 0;
  box-shadow: var(--shadow-offset);
  visibility: hidden;
}

/* Bridges the gap so the pointer can move from the button onto the popover. */
.popover::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -12px;
  height: 12px;
}

.info-button:hover ~ .popover,
.info-button:focus-visible ~ .popover,
.popover:hover {
  visibility: visible;
}

/* ---------- Summary ---------- */

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-4);
}

.metrics-grid > div {
  min-width: 0;
  padding-top: var(--space-2);
  border-top: var(--border-rule) solid var(--rule);
}

.metrics-grid .sg-label {
  display: block;
}

.metrics-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "tnum" 1; /* Signal's base turns tnum off, which beats font-variant */
  overflow-wrap: anywhere;
}

/* ---------- Airport assumptions ---------- */

.review-list {
  max-height: 320px;
  overflow: auto;
}

.review-row {
  padding: var(--space-3) 0;
}

.review-row + .review-row {
  border-top: 1px solid var(--hairline);
}

.review-row:first-child {
  padding-top: 0;
}

.review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.review-place {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.review-place strong {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.review-people {
  font-size: var(--text-meta);
  color: var(--fg-2);
}

.review-reason {
  font-size: var(--text-meta);
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

.review-row .sg-select,
.review-row .sg-input {
  min-width: 0;
  width: 100%;
}

.review-message {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--danger-text);
}

.review-message:empty {
  display: none;
}

/* ---------- Map stage ---------- */

.map-stage {
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
}

.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-rule) solid var(--rule);
}

.view-tabs {
  flex: none;
  border-bottom: 0;
  align-self: stretch;
}

.map-controls {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.map-controls[hidden],
.table-panel[hidden],
.map-wrap[hidden] {
  display: none;
}

.segmented {
  display: flex;
  gap: var(--space-2);
}

.legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
}

.legend-swatches {
  display: inline-flex;
  gap: 2px;
}

/* Same four colours as DATA_COLOURS in main.js, taken from Signal's tokens. */
.swatch {
  display: block;
  width: 12px;
  height: 12px;
}

.swatch-1 { background: var(--green-500); }
.swatch-2 { background: var(--amber-500); }
.swatch-3 { background: var(--red-500); }
.swatch-4 { background: var(--red-800); }

.hatch-key {
  display: inline-block;
  width: 28px;
  height: 16px;
  border: 1px solid var(--fg-1);
  background: repeating-linear-gradient(45deg, transparent 0 4px, var(--fg-1) 4px 6px);
}

.map-wrap {
  position: relative;
  isolation: isolate; /* keeps Leaflet's pane z-indexes inside the map */
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#worldMap {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
}

/* ---------- Leaflet, restyled ---------- */

.leaflet-container {
  font-family: var(--font-sans);
  background: var(--bg);
}

/* Greyscale the basemap only, per Signal's black-and-white imagery rule. Data layers keep colour. */
.leaflet-tile-pane {
  filter: grayscale(1) contrast(1.05) brightness(1.04);
}

.leaflet-container .leaflet-bar {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-bar a:first-child,
.leaflet-container .leaflet-bar a:last-child {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  font: var(--weight-medium) 18px/28px var(--font-sans);
  text-indent: 0;
  color: var(--fg-1);
  background-color: var(--surface);
  border: var(--border-rule) solid var(--fg-1);
  border-radius: 0;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.leaflet-container .leaflet-bar a + a {
  margin-top: -2px; /* share the 2px border between the two buttons */
}

.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar a:focus-visible {
  color: var(--bg);
  background-color: var(--fg-1);
}

.leaflet-container .leaflet-bar a.leaflet-disabled {
  color: var(--fg-3);
  background-color: var(--surface-2);
  cursor: default;
}

.leaflet-container .leaflet-control-attribution {
  padding: 2px var(--space-2);
  font: var(--weight-regular) var(--text-micro)/1.4 var(--font-mono);
  color: var(--fg-2);
  background: var(--surface);
  border-radius: 0;
}

.leaflet-container .leaflet-control-attribution a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background var(--duration-fast) var(--ease);
}

.leaflet-container .leaflet-control-attribution a:hover {
  color: var(--on-accent);
  background: var(--accent);
  text-decoration-color: transparent;
}

/* ---------- Map data ---------- */

.heat-spot {
  mix-blend-mode: multiply;
}

/* Jetlag zone: a circle with a 45 degree hatch. It is map data, so the circle stays. */
.jetlag-zone {
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--fg-1) 28%, transparent);
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, transparent 0 5px, var(--fg-1) 5px 7px);
  opacity: 0.48;
  pointer-events: none;
}

.route-line {
  fill: none;
  pointer-events: none;
}

.route-origin {
  pointer-events: none;
}

/* Airport markers: Signal keeps circles for radio dots, so these are squares. */
.airport-marker {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 58px !important;
  height: 28px !important;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.airport-dot {
  flex: none;
  box-sizing: border-box;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 2px; /* centres the dot on the marker's 9px anchor */
  border: 2px solid var(--surface);
  border-radius: 0;
  background: var(--marker-color);
}

.airport-code {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 5px;
  font: var(--weight-medium) 11px/1 var(--font-mono);
  color: var(--fg-1);
  background: var(--surface);
  border: 1px solid var(--fg-1);
  border-radius: 0;
}

.airport-marker.selected {
  z-index: 1000 !important;
}

.airport-marker.selected .airport-dot {
  width: 18px;
  height: 18px;
  margin-left: 0;
  margin-right: -2px; /* keeps the label where it was */
  border-color: var(--fg-1);
}

.airport-marker.selected .airport-code {
  color: var(--bg);
  background: var(--fg-1);
}

/* Labels that would collide with a higher-ranked one are hidden (see layoutLabels in
   main.js). The dot stays, and the label returns on hover or keyboard focus. */
.airport-marker.label-hidden {
  pointer-events: none;
}

.airport-marker.label-hidden .airport-dot {
  pointer-events: auto;
}

.airport-marker.label-hidden .airport-code {
  visibility: hidden;
}

.airport-marker:hover,
.airport-marker:focus-visible {
  z-index: 1050 !important;
}

.airport-marker.label-hidden:hover .airport-code,
.airport-marker.label-hidden:focus-visible .airport-code {
  visibility: visible;
}

/* ---------- Comparison table ---------- */

.table-panel {
  min-height: 0;
  overflow: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.table-title {
  margin: 0;
  font-size: var(--text-h4);
  letter-spacing: -0.015em;
}

.table-meta {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--fg-2);
}

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.comparison-table {
  min-width: 640px;
}

/* Headers and city names wrap so all eight columns fit beside the panel at desktop widths. */
.comparison-table th,
.comparison-table td {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  vertical-align: bottom;
}

.comparison-table td {
  vertical-align: middle;
}

.comparison-table td.num {
  white-space: nowrap;
}

.comparison-table tbody tr {
  cursor: pointer;
}

.comparison-table tbody tr.selected td {
  background: var(--surface-2);
}

.comparison-table tbody tr.selected td:first-child {
  box-shadow: inset 4px 0 0 var(--accent);
}

.comparison-table tbody tr:focus-visible {
  outline: 2px solid var(--fg-1);
  outline-offset: -2px;
}

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.sort-button:hover,
th[aria-sort="ascending"] .sort-button,
th[aria-sort="descending"] .sort-button {
  color: var(--fg-1);
}

.sort-arrow {
  display: inline-block;
  min-width: 1em;
  font-size: var(--text-micro);
}

.city-code {
  margin-left: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--fg-2);
}

.table-actions {
  display: flex;
}

/* ---------- Destination card ---------- */

.destination-card {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 1100;
  width: min(360px, calc(100% - 48px));
  padding: var(--space-4) var(--space-5) var(--space-5);
  gap: var(--space-2);
  background: var(--surface);
  border-radius: 0;
  box-shadow: var(--shadow-offset);
}

.destination-card h2 {
  margin-bottom: var(--space-2);
  font-size: var(--text-h4);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.destination-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  margin: 0;
}

.destination-card dl > div {
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
}

.destination-card dt,
.destination-card dd {
  margin: 0;
}

.destination-card dd {
  margin-top: var(--space-1);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "tnum" 1;
  overflow-wrap: anywhere;
}

.top-drivers {
  margin-top: var(--space-1);
  font-size: var(--text-meta);
  line-height: 1.45;
  color: var(--fg-2);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .app-shell {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .control-panel {
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: var(--border-rule) solid var(--rule);
  }

  .map-stage {
    height: auto;
  }

  .map-wrap {
    height: auto;
  }

  .review-list {
    max-height: 260px;
  }

  .map-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .map-controls {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .legend {
    justify-content: flex-start;
  }

  #worldMap {
    height: 520px;
    min-height: 520px;
  }
}

@media (max-width: 560px) {
  .control-panel {
    padding: var(--space-4);
  }

  .map-toolbar {
    padding: var(--space-3) var(--space-4);
  }

  .table-panel {
    padding: var(--space-4);
  }

  .policy-grid,
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .map-wrap {
    height: auto;
  }

  #worldMap {
    height: 480px;
    min-height: 480px;
  }

  /* On a phone the card would hide most of the map, so it sits below it instead of floating. */
  .destination-card {
    position: static;
    width: auto;
    border: 0;
    border-top: var(--border-rule) solid var(--rule);
    box-shadow: none;
    padding: var(--space-4);
  }
}

/* ---------- Notices (unplaced and country-only groups) ---------- */

.notices {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.notices[hidden] {
  display: none;
}

.notice {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--neutral-400);
  border-left-width: 4px;
  font-size: var(--text-meta);
  line-height: 1.4;
  color: var(--fg-1, inherit);
}

.notice--danger {
  border-left-color: var(--red-500, #ff3b1f);
}

.notice--warning {
  border-left-color: var(--amber-500, #ffb000);
}

.noscript-message {
  margin: 0;
  padding: var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--neutral-400);
}

/* Signal's display rules on tags would otherwise override the hidden attribute. */
.sg-tag[hidden] {
  display: none !important;
}

/* ---------- Export and print ---------- */

.table-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.table-export {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.print-header {
  display: none;
}

@media print {
  @page {
    margin: 15mm;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  * {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    border-radius: 0 !important;
  }

  /* Table first, then the method note. Everything else on screen is for interacting. */
  .app-shell {
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    overflow: visible !important;
  }

  .map-stage {
    order: 1;
    height: auto !important;
    display: block;
  }

  .control-panel {
    order: 2;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0;
    border: 0;
  }

  .control-panel > :not(.method-section),
  .map-toolbar,
  .map-wrap,
  .table-export,
  .table-actions,
  .noscript-message,
  .method-section .sg-tag {
    display: none !important;
  }

  .table-panel {
    display: flex !important;
    overflow: visible !important;
    padding: 0 0 8mm;
  }

  .table-panel[hidden] {
    display: flex !important;
  }

  .print-header {
    display: block;
    margin-bottom: 4mm;
  }

  .print-kicker {
    margin: 0;
    font-size: 18pt;
    font-weight: 700;
  }

  .print-date {
    margin: 1mm 0 2mm;
    font-size: 10pt;
  }

  .print-assumptions {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1mm 5mm;
    font-size: 9pt;
  }

  .table-scroll {
    overflow: visible !important;
  }

  .comparison-table {
    min-width: 0;
    width: 100%;
    font-size: 9pt;
  }

  .comparison-table thead {
    display: table-header-group;
  }

  .comparison-table tr {
    break-inside: avoid;
  }

  /* Compact rows so the full list fits on about three pages. The print header already
     lists the assumptions, so the on-screen meta line is dropped. */
  .comparison-table th,
  .comparison-table td {
    padding-top: 1.2mm;
    padding-bottom: 1.2mm;
    border-bottom: 0.5pt solid #000;
  }

  .comparison-table td:nth-child(2) {
    white-space: nowrap;
  }

  .table-meta {
    display: none !important;
  }

  .sort-button {
    font: inherit;
    padding: 0;
  }

  .sort-arrow {
    display: none;
  }

  .method-section {
    break-inside: auto;
    padding: 0;
    border: 0;
  }

  .method-section li,
  .method-table tr {
    break-inside: avoid;
  }

  a {
    text-decoration: underline;
  }
}

/* ---------- Host city shortlist ---------- */

.shortlist-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.shortlist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.shortlist-chips:empty {
  display: none;
}

.shortlist-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0 0 0 var(--space-3);
  font-size: var(--text-meta);
  background: var(--surface);
  border: 1px solid var(--fg-1);
  border-radius: 0;
}

.shortlist-chip .city-code {
  margin-left: 0;
}

.shortlist-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  align-self: stretch;
  padding: 0;
  font: inherit;
  line-height: 1;
  color: var(--fg-1);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--hairline);
  border-radius: 0;
  cursor: pointer;
}

.shortlist-chip button:hover {
  background: var(--surface-2);
}

.shortlist-chip button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.shortlist-toggle {
  margin-bottom: var(--space-3);
}

.shortlist-toggle[aria-pressed="true"] {
  background: var(--fg-1);
  border-color: var(--fg-1);
  color: var(--bg);
}

.shortlist-tag {
  margin-left: var(--space-2);
  height: 18px;
  padding: 0 6px;
  vertical-align: middle;
}

/* Shortlisted cities stand out on the map while the full list is still being compared. */
.airport-marker.shortlisted .airport-dot {
  outline: 2px solid var(--fg-1);
  outline-offset: 1px;
}

.shortlist-toggle[hidden],
#shortlistEmpty[hidden] {
  display: none;
}