/*
 * SaVirtualDestinationsMap — page styles.
 *
 * Written as plain, hand-authored CSS rather than Tailwind utilities on purpose: the
 * sav theme compiles Tailwind with `content: ['../../views/layouts/sav/**\/*.blade.php']`,
 * so any utility class used from a module's Blade file is never generated and silently
 * renders as nothing. Everything here is instead built on the theme's own CSS custom
 * properties (tokens.css), which means the page follows the active airline brand and the
 * light/dark switch for free, with no build step and no edits outside modules/.
 *
 * Every selector is namespaced `svdm-` so nothing can leak into the rest of the site.
 */

/* ==========================================================================
   Root / layout
   ========================================================================== */

.svdm {
  font-family: var(--font-body);
  color: var(--foreground);

  /* Local tokens, so the many places that need "the map's chrome" stay in step. */
  --svdm-shell-h: clamp(34rem, 72vh, 52rem);
  --svdm-glass: color-mix(in srgb, var(--surface) 88%, transparent);
  --svdm-ring: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
  --svdm-hub: var(--primary);
  --svdm-dot: var(--secondary);
}

.svdm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: 1.75rem;
}

.svdm-head__text {
  max-width: 46rem;
  min-width: 0;
}

.svdm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.svdm-eyebrow .ti {
  font-size: 0.875rem;
}

.svdm-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--foreground);
}

.svdm-lead {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ==========================================================================
   Stat strip
   ========================================================================== */

.svdm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.svdm-stat {
  position: relative;
  overflow: hidden;
  padding: 1.125rem 1.25rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.svdm-stat:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.svdm-stat__label {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.svdm-stat__label .ti {
  font-size: 0.875rem;
  color: var(--primary);
  flex: none;
}

.svdm-stat__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.svdm-stat__meta {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* ==========================================================================
   Shell: filter bar over a full-width map
   ========================================================================== */

/*
  The shell was a two-column grid — a fixed 22.5rem filter rail beside the map.
  It is now a single column: filters in one row on top, map underneath at the
  full width of the content container. The map keeps a fixed height because it
  no longer has a neighbour to be stretched against.
*/
.svdm-shell {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.svdm-filterbar {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* The row itself. `align-items: center` rather than stretch so a taller control
   (the airline chip strip) does not drag the whole bar's height up with it. */
.svdm-fbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
}

.svdm-fbar__group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /*
    Deliberately no `min-width: 0` here. That would let a group shrink past its
    own content, and the hub segment does not clip when it does — it overflows,
    so at tablet widths its last option slid underneath the airport picker. With
    the default `min-width: auto` a group refuses to go below its content and
    the row wraps instead, which is the far better failure.

    The airline strip is the one exception and opts back in below, because it
    scrolls its overflow rather than spilling it.
  */
  flex-shrink: 1;
}

/*
  Only the airline strip grows, so it absorbs the spare width and everything
  after it keeps a stable position between page loads.

  The basis is its *minimum* useful width, not its ideal one. Flexbox decides
  where to break a wrapping line from the hypothetical main size — the basis —
  and only distributes or removes free space afterwards, so a generous basis
  here pushed the trailing cluster onto a second line even though everything
  would have fitted comfortably once the strip had been shrunk. The strip
  scrolls sideways anyway, so a small basis costs it nothing.
*/
.svdm-fbar__group--grow {
  flex: 1 1 10rem;
  min-width: 0;
}

.svdm-fbar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.svdm-fbar__label .ti {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/*
  The label text is for assistive technology only.

  It was originally hidden below a viewport breakpoint, which was the wrong
  mechanism: the page sits in `.container-page`, whose max-width caps the bar at
  1296px no matter how wide the window gets. Measured, the row needs ~1510px
  with the labels shown — so they never fit, at any viewport, and a 1920px
  window wrapped the bar exactly like a 1440px one did.

  Hidden visually rather than with `display: none` so the accessible name of
  each group survives; every control also carries its own `aria-label`.
*/
.svdm-fbar__label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.svdm-fbar__sep {
  width: 1px;
  height: 1.5rem;
  flex: none;
  background-color: var(--border);
}

/* One trailing cluster rather than three independently-wrapping items: when the
   row did run out of width, the disclosure, the meta text and the reset button
   each broke to their own position and left a ragged second line. */
.svdm-fbar__end {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-inline-start: auto;
  min-width: 0;
}

/*
  Hidden, not removed.

  This element and the `#svdm-matches` badge on the map are written the same
  string by the same render pass — "245 routes · 102 destinations" — so showing
  both spent 163px of the filter row restating what the map already says, and
  that 163px was on its own enough to wrap the row at 1280px. The element stays
  in the DOM because the module's JavaScript writes its textContent
  unconditionally (destinations-map.js:754); only the duplicate display goes.
*/
.svdm-fbar__meta {
  display: none;
}

/*
  The airline chips scroll sideways instead of wrapping. A carrier with a dozen
  airlines would otherwise push the bar to three rows and shove the map below
  the fold, which is the exact problem this layout exists to solve.
*/
/* Written as a compound selector so the modifier beats the `.svdm-chips` base
   rule, which sets `flex-wrap: wrap` and is declared further down this file —
   with equal specificity the base was winning and the strip still broke onto a
   second row, taking the whole bar with it. */
.svdm-chips.svdm-chips--row {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.125rem;
}

.svdm-chips.svdm-chips--row::-webkit-scrollbar {
  display: none;
}

.svdm-chips.svdm-chips--row .svdm-chip {
  flex: none;
}

/* ---- More filters disclosure ------------------------------------------- */

.svdm-more {
  position: relative;
  flex: none;
}

.svdm-more__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}

/* Safari still draws its own disclosure triangle without this. */
.svdm-more__summary::-webkit-details-marker {
  display: none;
}

.svdm-more__summary:hover,
.svdm-more[open] .svdm-more__summary {
  border-color: var(--primary);
  color: var(--primary);
}

.svdm-more__summary .ti {
  font-size: 0.9375rem;
}

.svdm-more__chevron {
  display: inline-flex;
  transition: transform var(--duration-fast) var(--ease-out);
}

.svdm-more[open] .svdm-more__chevron {
  transform: rotate(180deg);
}

/*
  Floated over the page rather than pushing the map down, so opening the panel
  never moves the thing the visitor is looking at. z-index only has to beat the
  map, which the theme isolates into its own stacking context.
*/
.svdm-more__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  width: min(46rem, calc(100vw - 3rem));
  max-height: min(30rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem;
  background-color: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Two columns of filter groups, so the secondary filters are one glance rather
   than one long scroll. */
.svdm-more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0 1.5rem;
}

.svdm-more__grid .svdm-group:last-child {
  border-bottom: 1px solid var(--border);
}

.svdm-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: var(--radius-full);
  background-color: var(--primary-soft);
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 700;
}

.svdm-tabpanel {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.svdm-tabpanel[data-active="true"] {
  display: flex;
}

.svdm-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.svdm-scroll::-webkit-scrollbar {
  width: 0.5rem;
}

.svdm-scroll::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border-radius: var(--radius-full);
}

.svdm-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================================================
   Filter groups
   ========================================================================== */

.svdm-group {
  border-bottom: 1px solid var(--border);
}

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

.svdm-group__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9375rem 1.125rem;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground-secondary);
  cursor: pointer;
  text-align: left;
  transition: color var(--duration-fast), background-color var(--duration-fast);
}

.svdm-group__head:hover {
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
}

.svdm-group__head > svg:first-child {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--primary);
  flex: none;
}

.svdm-group__chevron {
  width: 0.9375rem;
  height: 0.9375rem;
  margin-left: auto;
  flex: none;
  color: var(--muted-foreground);
  transition: transform var(--duration-base) var(--ease-out);
}

.svdm-group[data-open="false"] .svdm-group__chevron {
  transform: rotate(-90deg);
}

.svdm-group__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3125rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0;
}

.svdm-group__body {
  padding: 0 1.125rem 1.125rem;
}

.svdm-group[data-open="false"] .svdm-group__body {
  display: none;
}

.svdm-hint {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.svdm-bulk {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}

.svdm-bulk button {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svdm-bulk span {
  color: var(--border-strong);
  font-size: 0.75rem;
}

/* ==========================================================================
   Controls: search, select, chips, switches, range
   ========================================================================== */

.svdm-field {
  position: relative;
}

.svdm-field .ti {
  font-size: 1rem;  position: absolute;
  top: 50%;
  left: 0.8125rem;
  margin-top: -0.5rem;
  color: var(--muted-foreground);
  pointer-events: none;
}

.svdm-input,
.svdm-select {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.875rem;
  background-color: var(--surface);
  color: var(--foreground);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  -webkit-appearance: none;
  appearance: none;
}

.svdm-field .svdm-input {
  padding-left: 2.25rem;
}

.svdm-select {
  padding-right: 2.25rem;
  background-image: var(--sav-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

.svdm-input::placeholder {
  color: var(--muted-foreground);
}

.svdm-input:focus,
.svdm-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--svdm-ring);
}

.svdm-clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}

.svdm-clear .ti {
  font-size: 0.875rem;  position: static;
  margin: 0;
}

.svdm-clear:hover {
  background-color: var(--background-secondary);
  color: var(--foreground);
}

.svdm-field[data-filled="true"] .svdm-clear {
  display: inline-flex;
}

/* --- Chips (airlines, aircraft types, flight types) --- */

.svdm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.svdm-chip {
  --svdm-chip-color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 1.9375rem;
  padding: 0 0.6875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--surface);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duration-fast), background-color var(--duration-fast),
              color var(--duration-fast), box-shadow var(--duration-fast);
}

.svdm-chip:hover {
  border-color: var(--svdm-chip-color);
  color: var(--foreground);
}

.svdm-chip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--svdm-chip-color);
  flex: none;
  opacity: 0.45;
  transition: opacity var(--duration-fast), box-shadow var(--duration-fast);
}

.svdm-chip[aria-pressed="true"] {
  border-color: var(--svdm-chip-color);
  background-color: color-mix(in srgb, var(--svdm-chip-color) 12%, var(--surface));
  color: var(--foreground);
}

.svdm-chip[aria-pressed="true"] .svdm-chip__dot {
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--svdm-chip-color) 22%, transparent);
}

.svdm-chip__count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

.svdm-chip:focus-visible {
  outline: none;
  box-shadow: var(--svdm-ring);
}

/* --- Segmented control (hub mode, sort) --- */

.svdm-segment {
  display: flex;
  padding: 0.1875rem;
  gap: 0.1875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--background-secondary);
}

.svdm-segment button {
  flex: 1 1 0;
  height: 1.875rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: calc(var(--radius-md) - 0.1875rem);
  background: transparent;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.svdm-segment button:hover {
  color: var(--primary);
}

.svdm-segment button[aria-pressed="true"] {
  background-color: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

/* --- Checkbox rows (regions, countries) --- */

.svdm-checks {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: 15rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  margin: 0 -0.375rem;
  padding: 0 0.375rem;
}

.svdm-checks::-webkit-scrollbar {
  width: 0.375rem;
}

.svdm-checks::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border-radius: var(--radius-full);
}

.svdm-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.4375rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--foreground-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.svdm-check:hover {
  background-color: color-mix(in srgb, var(--primary) 6%, transparent);
  color: var(--foreground);
}

.svdm-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.svdm-check__box {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--surface);
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.svdm-check__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  opacity: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 80%;
  mask-size: 80%;
  transition: opacity var(--duration-fast);
}

.svdm-check input:checked + .svdm-check__box {
  background-color: var(--primary);
  border-color: var(--primary);
}

.svdm-check input:checked + .svdm-check__box::after {
  opacity: 1;
}

.svdm-check input:focus-visible + .svdm-check__box {
  box-shadow: var(--svdm-ring);
}

.svdm-check__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svdm-check__count {
  flex: none;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.svdm-check .fi {
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent);
}

/* --- Switches (display toggles) --- */

.svdm-switch {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0;
  font-size: 0.8125rem;
  color: var(--foreground-secondary);
  cursor: pointer;
}

.svdm-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.svdm-switch__track {
  position: relative;
  flex: none;
  width: 2.125rem;
  height: 1.1875rem;
  border-radius: var(--radius-full);
  background-color: var(--border-strong);
  transition: background-color var(--duration-base) var(--ease-out);
}

.svdm-switch__track::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 0.8125rem;
  height: 0.8125rem;
  border-radius: var(--radius-full);
  background-color: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-out);
}

.svdm-switch input:checked + .svdm-switch__track {
  background-color: var(--primary);
}

.svdm-switch input:checked + .svdm-switch__track::after {
  transform: translateX(0.9375rem);
}

.svdm-switch input:focus-visible + .svdm-switch__track {
  box-shadow: var(--svdm-ring);
}

.svdm-switch input:disabled + .svdm-switch__track {
  opacity: 0.45;
}

.svdm-switch:has(input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Dual range (distance) --- */

.svdm-range {
  padding-top: 0.25rem;
}

.svdm-range__value {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

.svdm-range__value span:last-child {
  color: var(--muted-foreground);
  font-weight: 500;
}

.svdm-range__track {
  position: relative;
  height: 1.25rem;
}

/* The two inputs are stacked so the thumbs share one visual track. Pointer events are
   re-enabled on the thumbs only, otherwise the upper input would swallow every click
   meant for the lower one. */
.svdm-range__track input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.25rem;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.svdm-range__track input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: var(--radius-full);
  background-color: var(--surface);
  border: 3px solid var(--primary);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

.svdm-range__track input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: var(--radius-full);
  background-color: var(--surface);
  border: 3px solid var(--primary);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

.svdm-range__rail {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0.25rem;
  margin-top: -0.125rem;
  border-radius: var(--radius-full);
  background-color: var(--background-secondary);
  border: 1px solid var(--border);
  overflow: hidden;
}

.svdm-range__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--primary);
  opacity: 0.85;
}

/* ==========================================================================
   Destination list — drawer over the map's leading edge
   ========================================================================== */

/*
  The list used to be the second tab of the side rail. With the rail gone it
  becomes a drawer anchored to the map's leading edge, which is where a map
  application puts a result list: reachable in one click, and costing the map
  nothing at all while it is closed.

  Built on <details>, so open/close, keyboard operation and the correct
  screen-reader semantics come from the element rather than from script.
*/
.svdm-drawer {
  position: absolute;
  z-index: 15;
  /* Clears the match-count badge and the focus bar, which occupy the same
     leading corner; at 0.875rem the closed drawer sat straight on top of them. */
  top: 4.25rem;
  inset-inline-start: 0.875rem;
  width: 19rem;
  max-width: calc(100% - 1.75rem);
  max-height: calc(100% - 5.125rem);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--svdm-glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.svdm-drawer__summary {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  flex: none;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.svdm-drawer__summary::-webkit-details-marker {
  display: none;
}

.svdm-drawer__summary:hover {
  color: var(--primary);
}

.svdm-drawer__summary .ti {
  font-size: 0.9375rem;
  color: var(--primary);
}

.svdm-drawer__count {
  margin-inline-start: auto;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* Only the open drawer gets a divider; closed, it is a single pill. */
.svdm-drawer[open] .svdm-drawer__summary {
  border-bottom: 1px solid var(--border);
}

/*
  Sized by the flex column rather than by a percentage.

  `max-height: calc(100% - 2.25rem)` did not resolve here: the percentage is
  against the drawer, whose own height comes from a max-height rather than a
  definite value, so it computed to none. The body then grew to the full height
  of 102 destinations, the drawer clipped it with overflow:hidden, and every
  destination past the first few was unreachable — the inner scroller never got
  a bounded box to scroll inside.

  Taking the remaining space as a flex item gives it that definite box, and
  `min-height: 0` is what lets it shrink below its content so the scroller
  inside actually engages.
*/
.svdm-drawer__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.svdm-drawer__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.svdm-drawer__bar .svdm-field {
  flex: 1 1 auto;
  min-width: 0;
}

/*
  Bounded here rather than by the flex chain above it.

  `<details>` does not hand its content straight to the element's own formatting
  context — the browser wraps it in a box of its own — so `.svdm-drawer__body`
  is not a flex item of `.svdm-drawer`, and the `flex: 1 1 auto` / `min-height: 0`
  pair that normally makes a scroller work computed against nothing. The list
  grew to the full height of every destination, the drawer clipped it, and
  everything past the first few was unreachable.

  A max-height derived from the same token that sizes the map is immune to that:
  it needs no cooperation from the details internals, and it tracks the map on
  every breakpoint because both read --svdm-shell-h. The 12rem covers the
  drawer's own offset, its summary and its search row.
*/
.svdm-dest-scroll {
  padding: 0.375rem;
  max-height: calc(var(--svdm-shell-h) - 12rem);
  overflow-y: auto;
}

/*
  The legend shares the map's leading edge with the drawer. Closed, they coexist;
  open, the drawer runs the height of the map and would sit on top of it, so the
  legend stands down for as long as the list is showing. Relies on the drawer
  preceding the bottom-leading overlay in the markup.
*/
.svdm-drawer[open] ~ .svdm-overlay--bl .svdm-legend {
  display: none;
}

/* ---- compact control variants used in the bar and the drawer ------------ */

.svdm-select--compact {
  height: 2.25rem;
  min-width: 0;
  font-size: 0.75rem;
}

/* In the filter bar the airport list is the widest control on the row, so it is
   capped; the full name is still in the option text and in the title. */
#svdm-focus.svdm-select--compact {
  max-width: 13rem;
}

/* A field stacked inside a filter group rather than sitting in a row. */
.svdm-field--stack {
  margin-bottom: 0.625rem;
}

.svdm-btn--sm {
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
}

.svdm-dest {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1.125rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast);
}

.svdm-dest:hover,
.svdm-dest:focus-visible {
  background-color: color-mix(in srgb, var(--primary) 6%, transparent);
  outline: none;
}

.svdm-dest[data-selected="true"] {
  background-color: var(--primary-soft);
}

.svdm-dest__code {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  padding: 0.3125rem 0;
  border-radius: var(--radius-sm);
  background-color: var(--background-secondary);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--foreground);
}

.svdm-dest[data-hub="true"] .svdm-dest__code {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.svdm-dest__iata {
  font-size: 0.625rem;
  font-weight: 600;
  opacity: 0.65;
  letter-spacing: 0.04em;
}

.svdm-dest__body {
  flex: 1 1 auto;
  min-width: 0;
}

.svdm-dest__name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svdm-dest__sub {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svdm-dest__sub .fi {
  border-radius: 2px;
  flex: none;
}

.svdm-dest__routes {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

.svdm-dest__routes b {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}

.svdm-dest__routes span {
  font-size: 0.625rem;
  color: var(--muted-foreground);
}

/* ==========================================================================
   Empty / loading / error states
   ========================================================================== */

.svdm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--muted-foreground);
}

.svdm-empty .ti {
  font-size: 2rem;
  color: var(--border-strong);
  margin-bottom: 0.25rem;
}

.svdm-empty strong {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--foreground);
}

.svdm-empty p {
  margin: 0;
  font-size: 0.8125rem;
  max-width: 20rem;
}

/* ==========================================================================
   Map
   ========================================================================== */

/*
  Owns its height now that it is no longer a grid cell stretched against a
  sidebar. The clamp keeps the map tall enough to be worth reading on a laptop
  without swallowing a large desktop screen whole.
*/
.svdm-mapwrap {
  position: relative;
  /*
    Its own stacking context. The overlays inside sit at z-index 1100-1200 so they clear
    Leaflet's controls, and without this those values were competing with the whole page:
    on a scrolled page the legend, the toolbar and the match badge all painted over the
    sticky navbar (z-30 on the signed-in topbar, z-50 on the home navbar). Isolating here
    keeps that ordering intact inside the map and puts the map as a whole underneath the
    chrome, where it belongs. Fullscreen is unaffected -- .svdm-shell is what goes fixed
    at z-index 2000, and this wrapper is its child.
  */
  isolation: isolate;
  min-width: 0;
  height: var(--svdm-shell-h);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background-color: var(--background-secondary);
}

.svdm-map {
  position: absolute;
  inset: 0;
  background-color: var(--background-secondary);
}

/*
  A popup cannot be raised above these overlays with z-index, and it is worth writing down
  why: Leaflet keeps every pane inside .leaflet-map-pane, which carries a translate3d
  transform, and a transform creates a stacking context. So the whole map -- tiles,
  markers, popups -- resolves as one box against the overlays, and a z-index on
  .leaflet-popup-pane only reorders panes *within* that box. Lifting the map instead would
  put opaque tiles over the legend.

  The popups are kept clear of the overlays by panning instead: openPopupClear() in
  destinations-map.js measures the overlays and hands Leaflet an autoPan padding that
  matches, so a popup is never placed underneath one to begin with.
*/
.svdm-overlay {
  position: absolute;
  z-index: 1100;
  pointer-events: none;
}

.svdm-overlay > * {
  pointer-events: auto;
}

.svdm-overlay--tl { top: 0.875rem; left: 0.875rem; }
.svdm-overlay--tr { top: 0.875rem; right: 0.875rem; }
.svdm-overlay--bl { bottom: 0.875rem; left: 0.875rem; }

.svdm-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: var(--radius-lg);
  background-color: var(--svdm-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.svdm-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.svdm-iconbtn .ti {
  font-size: 1.0625rem;
}

.svdm-iconbtn:hover {
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

.svdm-iconbtn[aria-pressed="true"] {
  background-color: var(--primary);
  color: #fff;
}

.svdm-toolbar__sep {
  height: 1px;
  margin: 0.125rem 0.25rem;
  background-color: var(--border);
}

/* Basemap picker */

/* Legend */
.svdm-legend {
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-lg);
  background-color: var(--svdm-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  max-width: 15rem;
}

.svdm-legend__title {
  margin: 0 0 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.svdm-legend__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--foreground-secondary);
  padding: 0.125rem 0;
}

.svdm-legend__row + .svdm-legend__row {
  margin-top: 0.0625rem;
}

.svdm-legend__line {
  width: 1.125rem;
  height: 0;
  border-top: 2.5px solid currentColor;
  border-radius: 2px;
  flex: none;
}

.svdm-legend__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  flex: none;
}

.svdm-legend__dot--hub {
  background-color: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

.svdm-legend__sep {
  height: 1px;
  margin: 0.5rem 0;
  background-color: var(--border);
}

/* Match counter pill */
.svdm-matches {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 2.125rem;
  padding: 0 0.875rem;
  border-radius: var(--radius-full);
  background-color: var(--svdm-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground-secondary);
  font-variant-numeric: tabular-nums;
}

.svdm-matches .ti {
  font-size: 0.875rem;
  color: var(--primary);
}

/* Focus banner: shown when the map is pinned to one airport */
.svdm-focusbar {
  display: none;
  align-items: center;
  gap: 0.625rem;
  height: 2.125rem;
  padding: 0 0.375rem 0 0.875rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-md);
  font-size: 0.75rem;
  font-weight: 600;
}

.svdm-focusbar[data-visible="true"] {
  display: inline-flex;
}

.svdm-focusbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, #fff 22%, transparent);
  color: #fff;
  cursor: pointer;
}

.svdm-focusbar button .ti {
  font-size: 0.75rem;
}

.svdm-focusbar button:hover {
  background-color: color-mix(in srgb, #fff 35%, transparent);
}

/* Loading / error veil over the map */
.svdm-veil {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  background-color: color-mix(in srgb, var(--background) 82%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  text-align: center;
  padding: 1.5rem;
}

.svdm-veil[hidden] {
  display: none;
}

.svdm-veil strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--foreground);
}

.svdm-veil p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  max-width: 22rem;
}

.svdm-spinner {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 2.5px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-top-color: var(--primary);
  animation: svdm-spin 0.8s linear infinite;
}

@keyframes svdm-spin {
  to { transform: rotate(360deg); }
}

.svdm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-fast), box-shadow var(--duration-fast);
}

.svdm-btn:hover {
  background-color: var(--primary-hover);
  box-shadow: var(--shadow-brand);
}

.svdm-btn--ghost {
  background-color: transparent;
  color: var(--foreground);
  border: 1px solid var(--border-strong);
}

.svdm-btn--ghost:hover {
  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: none;
}

.svdm-btn .ti {
  font-size: 0.9375rem;
}

/* ==========================================================================
   Map markers (Leaflet DivIcons)
   ========================================================================== */

.svdm-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svdm-marker__dot {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--svdm-dot);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
  transition: transform var(--duration-base) var(--ease-out);
}

.svdm-marker--hub .svdm-marker__dot {
  background-color: var(--svdm-hub);
  border-width: 2.5px;
}

/* The pulse ring only exists on hubs, and only while "Highlight hubs" is on. */
.svdm-marker__ring {
  position: absolute;
  inset: -0.375rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--svdm-hub);
  opacity: 0.55;
}

.svdm-marker__ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-full);
  border: 2px solid var(--svdm-hub);
  animation: svdm-pulse 2.4s var(--ease-out) infinite;
}

@keyframes svdm-pulse {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

.svdm-marker:hover .svdm-marker__dot,
.svdm-marker--active .svdm-marker__dot {
  transform: scale(1.35);
}

.svdm-marker--active .svdm-marker__dot {
  background-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent);
}

.svdm-marker__label {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.375rem);
  transform: translateY(-50%);
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-xs);
  background-color: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}

/* ==========================================================================
   Leaflet chrome, restyled to the theme
   ========================================================================== */

.svdm .leaflet-container {
  font-family: var(--font-body);
  background-color: var(--background-secondary);
}

.svdm .leaflet-control-attribution {
  background-color: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--muted-foreground);
  font-size: 0.625rem;
  padding: 0.125rem 0.4375rem;
  border-radius: var(--radius-xs) 0 0 0;
  border: 0;
}

.svdm .leaflet-control-attribution a {
  color: var(--muted);
}

.svdm .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: var(--radius-lg);
  background-color: var(--surface-elevated);
  color: var(--foreground);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  overflow: hidden;
}

.svdm .leaflet-popup-content {
  margin: 0;
  width: 16.5rem !important;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.svdm .leaflet-popup-tip {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border);
  box-shadow: none;
}

.svdm .leaflet-popup-close-button {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: var(--muted-foreground) !important;
  font-size: 1.125rem;
  line-height: 1.6rem;
}

.svdm .leaflet-popup-close-button:hover {
  color: var(--primary) !important;
  background: transparent;
}

.svdm-pop__head {
  padding: 0.875rem 1rem 0.75rem;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--primary) 12%, var(--surface-elevated)),
              var(--surface-elevated));
  border-bottom: 1px solid var(--border);
}

.svdm-pop__codes {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--foreground);
}

.svdm-pop__icao {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.svdm-pop__iata {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  letter-spacing: 0.04em;
}

.svdm-pop__hub {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.25rem;
  padding: 0 0.4375rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.svdm-pop__name {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground-secondary);
}

.svdm-pop__place {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.1875rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.svdm-pop__place .fi {
  border-radius: 2px;
}

.svdm-pop__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid var(--border);
}

.svdm-pop__stat {
  padding: 0.625rem 1rem;
}

.svdm-pop__stat + .svdm-pop__stat {
  border-left: 1px solid var(--border);
}

.svdm-pop__stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.15;
}

.svdm-pop__stat span {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.svdm-pop__body {
  padding: 0.75rem 1rem;
}

.svdm-pop__label {
  margin: 0 0 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.svdm-pop__airlines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}

.svdm-pop__al {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.375rem;
  padding: 0 0.4375rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background-color: var(--background-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--foreground-secondary);
}

.svdm-pop__al i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-full);
  background-color: currentColor;
}

.svdm-pop__actions {
  display: flex;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background-color: var(--background-secondary);
}

.svdm-pop__actions .svdm-btn {
  flex: 1 1 auto;
  height: 2rem;
  font-size: 0.75rem;
}

/* Route tooltip */
.svdm .leaflet-tooltip.svdm-tip {
  padding: 0.4375rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface-elevated);
  color: var(--foreground);
  box-shadow: var(--shadow-lg);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.svdm .leaflet-tooltip.svdm-tip::before {
  display: none;
}

.svdm-tip__route {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
}

.svdm-tip__route .ti {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.svdm-tip__meta {
  margin-top: 0.1875rem;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

/* ==========================================================================
   Routes table (below the map)
   ========================================================================== */

.svdm-routes {
  margin-top: 1.25rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.svdm-routes__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9375rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background-color: var(--background-secondary);
}

.svdm-routes__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}

.svdm-routes__title .ti {
  font-size: 1rem;
  color: var(--primary);
}

.svdm-routes__count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  margin-left: auto;
}

.svdm-tablewrap {
  overflow-x: auto;
  max-height: 30rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.svdm-tablewrap::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

.svdm-tablewrap::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border-radius: var(--radius-full);
}

.svdm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.svdm-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.625rem 1.25rem;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.svdm-table th button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.svdm-table th button:hover {
  color: var(--primary);
}

.svdm-table th .ti {
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}

.svdm-table th[aria-sort] .ti {
  opacity: 1;
  color: var(--primary);
}

.svdm-table th[aria-sort="ascending"] .ti {
  transform: rotate(180deg);
}

.svdm-table td {
  padding: 0.6875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--foreground-secondary);
  vertical-align: middle;
}

.svdm-table tbody tr:last-child td {
  border-bottom: 0;
}

.svdm-table tbody tr {
  cursor: pointer;
  transition: background-color var(--duration-fast);
}

.svdm-table tbody tr:hover {
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
}

.svdm-table__pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--foreground);
  white-space: nowrap;
}

.svdm-table__pair .ti {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  flex: none;
}

.svdm-table__city {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--muted-foreground);
  margin-top: 0.0625rem;
}

.svdm-table__al {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
}

.svdm-table__al i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex: none;
}

.svdm-table__num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.svdm-table__types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.svdm-tag {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.4375rem;
  border-radius: var(--radius-full);
  background-color: var(--background-secondary);
  border: 1px solid var(--border);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--foreground-secondary);
  white-space: nowrap;
}

.svdm-routes__more {
  display: flex;
  justify-content: center;
  padding: 0.875rem;
  border-top: 1px solid var(--border);
  background-color: var(--background-secondary);
}

/* ==========================================================================
   Fullscreen
   ========================================================================== */

.svdm-shell[data-fullscreen="true"] {
  position: fixed;
  inset: 0;
  z-index: 2000;
  padding: 0.875rem;
  gap: 0.875rem;
  background-color: var(--background);
}

/* The filter bar keeps its natural height and the map takes the rest of the
   screen, which is the whole point of going fullscreen. */
.svdm-shell[data-fullscreen="true"] .svdm-filterbar {
  flex: none;
}

.svdm-shell[data-fullscreen="true"] .svdm-mapwrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.svdm-shell[data-fullscreen="true"] .svdm-mapwrap,
.svdm-shell[data-fullscreen="true"] .svdm-filterbar {
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/*
  Below this width the row cannot hold the reset button's label as well as five
  controls, and it was breaking to a second line for the sake of two words. The
  icon and the accessible name carry it on their own.
*/
@media (max-width: 1279px) {
  .svdm-fbar__end .svdm-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .svdm-fbar__end .svdm-btn {
    width: 2.25rem;
    padding: 0;
  }

  /* The row is within ~10px of fitting at 1024; the airport picker is the one
     control with width to spare, since what has to stay readable in it is the
     ICAO code at the start of each option, not the full airport name. */
  #svdm-focus.svdm-select--compact {
    max-width: 11rem;
  }
}

@media (max-width: 1023px) {
  /* Redefines the token rather than the map's height directly, so the
     destination list's max-height shrinks along with the map instead of
     overflowing a drawer that just got shorter. */
  .svdm {
    --svdm-shell-h: clamp(24rem, 58vh, 34rem);
  }

  /* The airport picker no longer has a whole row to share, so it gets to use
     what is left of it. */
  #svdm-focus.svdm-select--compact {
    max-width: none;
  }

  .svdm-fbar__group {
    flex: 1 1 12rem;
  }

  /* Dividers only make sense between items that are actually on one line. */
  .svdm-fbar__sep {
    display: none;
  }
}

@media (max-width: 767px) {
  .svdm-fbar {
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
  }

  /* Each control takes the full row: a half-width dropdown or segmented control
     is not usable with a thumb. */
  .svdm-fbar__group {
    flex: 1 1 100%;
    width: 100%;
  }

  /* The disclosure and the reset button are the two actions rather than two more
     filters, so they share a final row instead of the reset being stranded on a
     line of its own. */
  .svdm-more {
    flex: 1 1 auto;
  }

  .svdm-more__summary {
    width: 100%;
    justify-content: center;
  }

  .svdm-fbar__end {
    flex: 0 0 auto;
    margin-inline-start: 0;
  }

  /* Anchored to the bar rather than to the button, so it cannot hang off the
     edge of a narrow screen. */
  .svdm-more__panel {
    position: fixed;
    inset-inline: 0.75rem;
    width: auto;
    max-height: 70vh;
  }

  .svdm-segment {
    width: 100%;
  }

  .svdm-segment button {
    flex: 1 1 0;
  }

  .svdm-fbar__meta {
    margin-inline-start: 0;
  }

  /* Full-width sheet over the map instead of a floating panel, which at this
     size would leave almost no map either side of it. The top offset still has
     to clear the match-count badge, which sits in the same corner. */
  .svdm-drawer {
    inset-inline: 0.5rem;
    top: 3.75rem;
    width: auto;
    max-width: none;
    max-height: calc(100% - 4.25rem);
  }
}

@media (max-width: 639px) {
  .svdm-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .svdm-stat {
    padding: 0.875rem 1rem;
  }

  .svdm-stat__value {
    font-size: 1.375rem;
  }

  .svdm-overlay--tr {
    top: auto;
    bottom: 0.875rem;
    right: 0.875rem;
  }


  .svdm-legend {
    display: none;
  }

  .svdm-table th:nth-child(4),
  .svdm-table td:nth-child(4) {
    display: none;
  }
}

/* ==========================================================================
   Motion / print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .svdm *,
  .svdm *::before,
  .svdm *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .svdm-filterbar,
  .svdm-overlay,
  .svdm-drawer {
    display: none;
  }
}