:root {
  --bg: #04342C;
  --card: #085041;
  --inset: #0F6E56;
  --ring: #0F6E56;
  --grid: #085041;
  --text: #E1F5EE;
  --muted: #9FE1CB;
  --dim: #5DCAA5;
  --amber: #FAC775;
  --red: #F09595;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* One screen, no scrolling: header and card take what they need, the radar gets the rest. */
body {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 max(env(safe-area-inset-bottom), 10px);
  max-width: 520px;
  margin: 0 auto;
}

/* One layout everywhere: the card is always the same height, and the radar is the biggest
   square that fits in the space left above it. */

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

button { font: inherit; color: inherit; }

.top {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 0 14px;
}

.brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.logo { width: 34px; height: 34px; flex: none; }
.logo-bg { fill: var(--card); }
.logo-ring { fill: none; stroke: var(--ring); stroke-width: 1.6; }
.logo-sweep { fill: var(--dim); opacity: 0.35; }
.logo-plane { fill: var(--amber); }

.brand-text { min-width: 0; }
.top h1 { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.search-panel {
  position: absolute;
  inset: calc(env(safe-area-inset-top) + 58px) 0 0;
  z-index: 10;
  background: var(--bg);
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
}
.search-panel[hidden] { display: none; }
.search-bar { display: flex; gap: 8px; align-items: center; }
.search-bar input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px; /* 16px stops iPhone zooming in on focus */
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  -webkit-appearance: none;
}
.search-bar input:focus { border-color: var(--dim); }
.search-bar input::placeholder { color: var(--dim); }
.search-results { list-style: none; margin: 8px 0 0; padding: 0; overflow-y: auto; }
.search-results li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--grid);
  cursor: pointer;
}
.search-results li:active { background: var(--card); }
.search-results svg { width: 20px; height: 20px; flex: none; fill: var(--muted); }
.search-results .here svg { fill: none; stroke: var(--amber); stroke-width: 2; }
.search-results .name { font-size: 15px; font-weight: 600; }
.search-results .detail { font-size: 12px; color: var(--muted); margin-top: 1px; }
.search-results .empty { color: var(--muted); font-size: 14px; cursor: default; border: 0; }

.status { font-size: 12px; color: var(--dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.actions { display: flex; gap: 6px; flex: none; }

.pill {
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.pill.icon { padding: 6px 8px; display: grid; place-items: center; }
.pill[hidden] { display: none; }
.pill.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pill[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--bg); }

main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.radar-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  padding: 0 4px;
}

#radar {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.coast { fill: none; stroke: var(--dim); stroke-width: 0.7; stroke-linejoin: round; stroke-linecap: round; opacity: 0.35; }
.town circle { fill: var(--dim); opacity: 0.5; }
.town text { fill: var(--dim); opacity: 0.6; font-size: 4.6px; font-style: italic; }

.ring { fill: none; stroke: var(--ring); stroke-width: 0.6; }
.axis { stroke: var(--grid); stroke-width: 0.6; }
.ring-label { fill: var(--dim); font-size: 5px; }
.cardinal { fill: var(--dim); font-size: 7px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.cardinal.n { fill: var(--amber); }
/* Radar sweep: a faint wedge turning once every 4 seconds. It's sized to the radar circle
   (92% of the smaller side of the box, matching r=92 in the 200-unit SVG) and sits behind it. */
.radar-box { position: relative; width: 100%; height: 100%; container-type: size; }
.radar-box #radar { position: relative; }
.sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(min(100cqw, 100cqh) * 0.92);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(rgba(93, 202, 165, 0) 0deg 318deg, rgba(93, 202, 165, 0.2) 359deg, rgba(93, 202, 165, 0.55) 360deg);
  animation: sweep 4s linear infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sweep { display: none; } }

.trail { fill: none; stroke: var(--dim); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.trail.sel { stroke: var(--amber); stroke-width: 1.3; opacity: 0.85; }
.ahead { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 2 2.5; stroke-linecap: round; opacity: 0.7; }

.airport .tower { fill: var(--muted); }
.airport text { fill: var(--muted); font-size: 5.5px; font-weight: 600; text-anchor: middle; }
.airport.small .tower { fill: var(--dim); }
.airport.small text { fill: var(--dim); font-size: 4.8px; font-weight: 400; }
.airport.hl .tower, .airport.hl text { fill: var(--amber); }

.ac { cursor: pointer; }
.ac .icon { fill: var(--dim); }
.ac .label { fill: var(--amber); font-size: 6.5px; font-weight: 600; display: none; }
.ac.sel .icon { fill: var(--amber); }
.ac.sel .label { display: block; }
/* The nearest few planes get a smaller, quieter label so they can be matched to the sky. */
.ac.near .label { display: block; fill: var(--muted); font-size: 5px; font-weight: 500; opacity: 0.85; }
.ac.emergency .icon { fill: var(--red); }

.compass-note {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--bg);
  background: var(--amber);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

.card {
  flex: none;
  background: var(--card);
  border-radius: 22px;
  margin: 6px 10px 0;
  padding: 10px;
}

/* The plane, airport and message views are stacked in the same spot. The ones not showing are
   invisible but still take up room, so the card is always as tall as the plane view — whatever
   it's showing — and the radar never changes size. */
.card-body { display: grid; }
.card-body > * { grid-area: 1 / 1; min-width: 0; }
.card-body > [hidden] { display: block !important; visibility: hidden; }
.card-body > .message { align-self: center; }
/* Empty text lines keep their height, so the card is the same size before a plane has loaded. */
.card-body p:empty::after { content: "\00a0"; }

/* Handle to shrink the card to one line so the radar gets most of the screen. */
.card-handle {
  display: block;
  width: 64px;
  margin: -6px auto 4px;
  padding: 6px 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.card-handle span { display: block; height: 4px; border-radius: 2px; background: var(--inset); }
.card.collapsed :is(.photo, .route-area, .chips, #reg, .message-body, #apCodes, #apTraffic, #apWiki) { display: none; }
.card.collapsed .title-row { padding-top: 0; }
.card.collapsed .message { padding: 6px 16px 8px; }
.card.collapsed .message button { display: none; }
.mini-route { display: none; }
.card.collapsed .mini-route { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--amber); }

.message { padding: 28px 16px; text-align: center; }
.message-title { font-size: 18px; font-weight: 600; }
.message-body { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.message button { margin-top: 14px; }

.photo {
  position: relative;
  height: 84px;
  border-radius: 14px;
  background: var(--inset);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.photo-fallback { width: 48px; height: 48px; fill: var(--muted); transform: rotate(45deg); opacity: 0.8; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.credit {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 10px;
  color: #fff;
  background: rgba(4, 52, 44, 0.75);
  padding: 2px 6px;
  border-radius: 6px;
  text-decoration: none;
}

.title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 9px 4px 0; }
.title-main { min-width: 0; }
.title-row h2 { font-size: 26px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.1; }
.right { text-align: right; flex: none; }
.muted { color: var(--muted); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dim { color: var(--dim); font-size: 12px; }

.route { display: flex; align-items: center; gap: 10px; padding: 10px 4px 0; }
.route[hidden] { display: none; }
.ap { flex: 1; min-width: 0; }
.ap.to { text-align: right; }
.code { font-size: 22px; font-weight: 700; line-height: 1.15; }
.city { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-arrow { width: 22px; height: 22px; fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.progress { height: 4px; background: var(--inset); border-radius: 2px; margin: 8px 4px 0; overflow: hidden; }
.progress div { height: 100%; background: var(--amber); width: 0; transition: width 1s linear; }
.route-note { padding: 8px 4px 0; font-size: 12px; line-height: 1.35; color: var(--muted); }
.route-area { flex: none; height: 74px; overflow: hidden; }
/* Under a route row the note is one line, so route + note always fits the fixed height. */
.route:not([hidden]) ~ .route-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 6px; }

.chips { display: flex; gap: 6px; margin-top: 10px; }
.chip { flex: 1; background: var(--bg); border-radius: 10px; padding: 7px 9px; min-width: 0; }
.chip span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip b { display: block; font-size: 15px; font-weight: 600; margin-top: 1px; white-space: nowrap; }

.airport-info { padding: 4px 4px 2px; }
.airport-info[hidden] { display: none; }
.ap-head { display: flex; align-items: center; gap: 12px; }
.ap-icon { width: 44px; height: 44px; flex: none; fill: var(--amber); background: var(--bg); border-radius: 12px; padding: 7px; }
.ap-title { flex: 1; min-width: 0; }
.ap-title h2 { font-size: 21px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-head .pill.icon svg { stroke-width: 2.2; }
.ap-codes { margin-top: 10px; font-size: 13px; color: var(--muted); letter-spacing: 0.3px; }
.ap-codes b { color: var(--amber); font-weight: 700; font-size: 15px; margin-right: 6px; }
.ap-traffic { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.ap-traffic li { display: flex; justify-content: space-between; padding: 5px 2px; border-bottom: 1px solid var(--inset); cursor: pointer; }
.ap-traffic li:last-child { border-bottom: 0; }
.ap-traffic .cs { font-weight: 600; }
.ap-traffic .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-traffic .none { color: var(--muted); cursor: default; border: 0; }
.ap-link { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--amber); text-decoration: none; }