/* Work that's travelled: light grey section + dot-matrix map. v20261006b
   Colours checked for contrast on #D9D9D9: ink 13.9:1, muted #4A4E57
   5.9:1, small orange text #A82E18 4.85:1. Brighter orange is used only
   for graphics (route, lit dots). */
#global {
  --g-bg: #D9D9D9;
  --g-ink: #0A0B0F;
  --g-muted: #4A4E57;
  --g-line: #B8BBC1;
  --g-accent: #E2482A;
  --g-accent-text: #A82E18;
  background: var(--g-bg);
  color: var(--g-ink);
  border-color: var(--g-line);
}
#global .section-head h2 { color: var(--g-ink); }
#global .section-head p { color: var(--g-muted); }
#global .section-head .tag { color: var(--g-accent-text); }
#global .route::before { background: var(--g-line); }
#global .route__city { color: var(--g-ink); }
#global .route__note { color: var(--g-muted); }
#global .route__node--more .route__city { color: var(--g-accent-text); }
#global .route__dot,
#global .route__node--home .route__dot,
#global .route__node--more .route__dot {
  background: var(--g-bg);
  border-color: rgba(10, 11, 15, .35);
  animation: none;
  box-shadow: none;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.tm { position: relative; margin: 8px 0 36px; }
.tm__svg { display: block; width: 100%; height: auto; overflow: visible; }
.tm__land {
  fill: none;
  stroke: rgba(10, 11, 15, .2);
  stroke-width: 3.6;
  stroke-linecap: round;
}
.tm__zone circle { fill: var(--g-accent); }
.tm__zone { opacity: 0; transition: opacity .5s ease; }
.tm__zone.is-on { opacity: 1; }

.tm__arc {
  fill: none;
  stroke: var(--g-accent);
  stroke-width: 2;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
  transition: opacity .4s ease;
}
.tm__arc.is-past { opacity: .35; }

.tm__core { fill: rgba(10, 11, 15, .3); transition: fill .3s ease; }
.tm__pin.is-visited .tm__core { fill: var(--g-ink); }
.tm__pin.is-active .tm__core { fill: var(--g-accent); }
.tm__pulse {
  fill: none;
  stroke: var(--g-accent);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.tm__pin.is-active .tm__pulse { animation: tmPulse 1.8s ease-out infinite; }

.tm__label {
  fill: var(--g-ink);
  font: 600 15px/1 var(--font, Inter, system-ui, sans-serif);
  paint-order: stroke;
  stroke: var(--g-bg);
  stroke-width: 6px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.tm__pin.is-active .tm__label { opacity: 1; }

.tm__jet path {
  fill: var(--g-ink);
  filter: drop-shadow(0 1px 2px rgba(10, 11, 15, .35));
}
.tm__jet { transition: opacity .3s ease; }
.tm__jet.is-parked { opacity: 0; }

@keyframes tmPulse {
  0% { opacity: .9; transform: scale(.5); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* List under the map follows the journey: visited stops solid, the one
   being flown to in orange, the rest waiting */
#global.has-map .route__node { opacity: .5; transition: opacity .35s ease; }
#global.has-map .route__node.is-visited,
#global.has-map .route__node.is-active { opacity: 1; }
#global.has-map .route__node.is-visited .route__dot { background: var(--g-ink); border-color: var(--g-ink); }
#global.has-map .route__node.is-active .route__dot {
  background: var(--g-accent);
  border-color: var(--g-accent);
  box-shadow: 0 0 0 5px rgba(226, 72, 42, .2);
}

@media (max-width: 640px) {
  .tm { margin-bottom: 24px; }
  .tm__land { stroke-width: 4.6; }
  .tm__label { font-size: 26px; stroke-width: 8px; }
}

/* Reduced motion: whole route shown, nothing animates */
.tm--static .tm__jet { display: none; }
.tm--static .tm__pulse { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #global.has-map .route__node { opacity: 1; transition: none; }
}

/* The line through the route list runs through the centre of the dots
   (the list has 8px top padding and 13px dots, so the centre is 14.5px) */
#global .route::before { top: 14px; height: 1px; }

/* v20261007a — phones: the list was inheriting flex-basis:140px as HEIGHT
   once it stacked into a column, so each stop sat ~160px apart and the
   map scrolled away before the route finished. Stops now sit tight, the
   vertical guide line is restored (the 1px height above flattened it),
   and the map + list fit one screen so the whole flight is visible. */
@media (max-width: 760px) {
  #global .route { gap: 12px; padding-top: 2px; }
  #global .route__node { flex: 0 0 auto; flex-wrap: wrap; row-gap: 2px; padding-left: 26px; }
  #global .route__node .route__dot { top: 4px; }
  #global .route::before { top: 10px; bottom: 10px; height: auto; left: 6px; width: 1px; }
  #global .route__city { font-size: 15px; }
  #global .route__note { font-size: 13px; }
  .tm { margin: 4px 0 20px; }
}