:root {
  --sky: #DCE9F2;
  --ink: #23303A;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-border: rgba(35, 48, 58, 0.18);
  --focus: #1F6FB2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sky);
  color: var(--ink);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  /* No double-tap zoom (two quick taps on a button zoomed the whole page on
     iOS); pinch-zoom still works for anyone who needs it. */
  touch-action: manipulation;
}

#world {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  touch-action: none; /* the camera rig handles pan and pinch itself */
  /* A long press pans the map: on iOS it also selected the canvas like text
     (the blue wash over the whole view) and could raise the callout menu. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.controls {
  position: fixed;
  -webkit-user-select: none;   /* buttons: a held press doesn't select their labels */
  user-select: none;
  -webkit-touch-callout: none;
  right: calc(16px + env(safe-area-inset-right));
  /* Clear of the attribution line, two lines tall on a phone (46 px). */
  bottom: calc(54px + env(safe-area-inset-bottom));
  display: flex;
  /* Too many buttons for a phone's width wrap upward, never under each other. */
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
  gap: 8px;
}

.controls button {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
}

.controls button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.attribution {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 6px 16px calc(6px + env(safe-area-inset-bottom));
  background: var(--panel);
  font-size: 12px;
}

.attribution a { color: var(--focus); }

.loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  margin: 0;
  font-size: 16px;
  text-align: center;
  /* Opaque: the world draws (and warms up) underneath until it's ready. */
  background: var(--sky);
  z-index: 10;          /* over the controls and the attribution */
  transition: opacity 0.4s ease;
}
.loading.revealing { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .loading { transition: none; } }

.loading p { margin: 0; }
.loading progress { width: min(280px, 80vw); height: 10px; accent-color: var(--focus); }
#loading-detail { font-size: 13px; opacity: 0.7; font-variant-numeric: tabular-nums; }
#loading-detail.loading-error { opacity: 1; color: #A3271C; max-width: 36em; }

.loading[hidden] { display: none; }

#stats {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 16px;
  margin: 0;
  padding: 8px;
  background: var(--panel);
  font: 12px/1.3 ui-monospace, Menlo, monospace;
}

.controls .fly {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--focus);
  font-weight: 600;
  text-decoration: none;
}
.controls .fly:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Canal Park Gull (?gull): holding a finger down is a control, so no text
   selection, loupe or callout menu anywhere on the page. */
body.gull-mode {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Canal Park Gull (?gull): help line, bridge status, way back. */
.gull-hud {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  right: calc(16px + env(safe-area-inset-right));
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  pointer-events: none; /* touches pass through to the flight controls */
}
.gull-help, .gull-status { margin: 0; }
.gull-status { font-weight: 600; }
.gull-status[hidden] { display: none; }
.gull-hud[hidden] { display: none; }
.gull-settings {
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}
.gull-settings::backdrop { background: rgba(0, 0, 0, 0.25); }
.gull-settings h2 { margin: 0 0 8px; font-size: 18px; }
.gull-settings p { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; }
.gull-settings input { width: 22px; height: 22px; margin: 0; flex: none; }
.gull-settings input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gull-back { margin-left: auto; color: var(--focus); font-weight: 600; padding: 10px 4px; pointer-events: auto; }
.gull-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.gull-button {
  pointer-events: auto;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.gull-button:focus-visible, .gull-land:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gull-button[hidden], .gull-land[hidden], .gull-stick[hidden] { display: none; }

/* The Land button: big, bottom right, only while there's a spot in reach. */
.gull-land {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right));
  bottom: calc(56px + env(safe-area-inset-bottom));
  min-width: 96px;
  min-height: 64px;
  border-radius: 32px;
  border: 2px solid #fff;
  background: var(--focus);
  color: #fff;
  font: 600 20px/1 system-ui, -apple-system, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

/* The drag stick: a ring where the thumb landed, a dot that follows. */
.gull-stick {
  position: fixed;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(35, 48, 58, 0.15);
  pointer-events: none;
}
.gull-stick div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

.gull-touch-hint {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}
.gull-touch-hint span {
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background: rgba(35, 48, 58, 0.12);
}
.gull-touch-hint span + span { border-left: 2px dashed rgba(255, 255, 255, 0.6); }

/* ?gull&tune: live sliders for the flight numbers. */
.tune-panel {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left));
  bottom: calc(40px + env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 32px));
  max-height: 50vh;
  overflow: auto;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
}
.tune-panel summary { font-weight: 600; min-height: 32px; cursor: pointer; }
.tune-panel label { display: grid; grid-template-columns: 1fr 110px 44px; gap: 6px; align-items: center; font-size: 12px; }
.tune-panel input[type="range"] { width: 100%; }
.tune-panel button { min-height: 44px; margin-top: 6px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--panel-border); background: #fff; font: inherit; }
.tune-panel textarea { width: 100%; height: 6em; -webkit-user-select: text; user-select: text; }
.tune-panel p { margin: 4px 0 0; }
.controls[hidden] { display: none; }

/* ?audit: the road audit panel (audit.js). */
.audit {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
}
.audit summary { font-weight: 600; cursor: pointer; min-height: 32px; }
.audit ul { list-style: none; margin: 4px 0; padding: 0; }
.audit li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.audit-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink);
  vertical-align: -1px;
}
.audit button {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.audit button:focus-visible, .audit input:focus-visible, .audit summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.audit-detail { margin: 4px 0 0; font-size: 13px; }
.audit-detail:empty { display: none; }
.audit-detail a { color: var(--focus); }

/* The look's clock chip (first in the button row) and its time slider,
   which opens just above the row (look.js). */
.controls .look-clock {
  width: auto;
  padding: 0 12px;
  font: 600 15px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.look-time {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--ink);
  font: 14px/1.2 system-ui, sans-serif;
}
.look-time[hidden] { display: none; }
.look-time-row { display: flex; align-items: center; gap: 8px; }
.look-time input { width: min(220px, calc(100vw - 120px)); min-height: 32px; }
.controls .look-fastday { flex: none; font: 600 15px/1 system-ui, sans-serif; }