/* ══════════════════════════════════════════════════════════════════════════
   Route ATC - stylesheet

   Loads AFTER ../css/shared.css, which provides the site theme variables,
   the animated background, the JetBrains Mono import and the shared topbar.
   This file adds only what the tracker needs on top, so the tool inherits
   site-wide theme changes instead of drifting from them.

   Mobile-first: base styles target a phone, wider screens get enhancements
   in the media queries at the bottom.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tracker-specific state colours ──────────────────────────────────────── */
:root {
  --state-active: #22c55e;          /* tuned right now */
  --state-active-bg: rgba(34, 197, 94, 0.12);
  --state-complete: #64748b;        /* worked and done */
  --state-online: #38bdf8;          /* controller online, not tuned */
  --state-warn: #f59e0b;
  --state-error: #f87171;
}
html.light-mode {
  --state-active: #15803d;
  --state-active-bg: rgba(21, 128, 61, 0.10);
  --state-complete: #94a3b8;
  --state-online: #0369a1;
}

/* The tracker's own content column, kept narrow for one-handed use while the
   shared topbar above it still spans the full width of the page. */
.tracker-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 0 40px;
}

/* ── Beta notice ─────────────────────────────────────────────────────────── */
.beta-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
}
.beta-notice p {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.beta-notice a { color: var(--state-warn); text-decoration: underline; white-space: nowrap; }
.beta-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--state-warn);
  border-radius: 4px;
  color: var(--state-warn);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 1px;
}

/* ── Small icon buttons ──────────────────────────────────────────────────── */
.icon-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  color: var(--text-accent);
  font-size: 1rem;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:active { background: var(--btn-primary); color: #fff; }

/* ── Panels / cards ──────────────────────────────────────────────────────── */
.panel {
  background: var(--bg-panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-panel);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.panel-header {
  padding: 10px 14px;
  background: var(--bg-panel-header);
  border-bottom: 1px solid var(--border-panel-header);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-accent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.panel-body { padding: 14px; }
.panel-header-right { display: flex; align-items: center; gap: 10px; }

.filter-btn {
  background: none;
  border: 1px solid var(--border-panel);
  border-radius: 10px;
  color: var(--text-sub);
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
}
.filter-btn.filter-on {
  border-color: var(--state-online);
  color: var(--state-online);
}
.filter-note {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-placeholder);
  padding: 8px 12px;
  border-top: 1px solid var(--border-panel);
}
.entry-dist { color: var(--state-online); text-transform: none; }
/* Sub-line on an amalgamated card (several small sectors, one controller) */
.covers-note { border-bottom: 1px dotted var(--text-placeholder); cursor: help; }

/* ── Landing (logged out) ────────────────────────────────────────────────── */
.landing { text-align: center; padding: 40px 16px; }
.landing p { color: var(--text-muted); font-size: 0.85rem; line-height: 1.6; margin: 14px 0 24px; }
.btn-primary {
  display: inline-block;
  background: var(--btn-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:active, .btn-primary:hover { background: var(--btn-primary-hover); }

/* Secondary action (the optional VATSIM login, when it's switched on) */
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--text-accent);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 0.88rem;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover { border-color: var(--text-accent); }
.or-line {
  margin: 18px 0 12px !important;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-placeholder);
}

/* CID entry - the normal way in */
.cid-form { margin-top: 4px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cid-form input {
  width: 150px;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 2px;
  text-align: center;
  outline: none;
}
.cid-form input:focus { border-color: var(--text-accent); }
.cid-form input::placeholder { color: var(--text-placeholder); letter-spacing: 2px; }

/* Which CID is being tracked, with a tap to change it */
.cid-chip {
  border: 1px solid var(--border-panel);
  color: var(--text-sub);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
}
.cid-chip:hover { border-color: var(--text-accent); color: var(--text-accent); }

/* ── Banners ─────────────────────────────────────────────────────────────── */
.banner {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  margin-bottom: 12px;
  border: 1px solid;
}
.banner-warn  { color: var(--state-warn);  border-color: var(--state-warn);  background: rgba(245,158,11,.08); }
.banner-error { color: var(--state-error); border-color: var(--state-error); background: rgba(248,113,113,.08); }

/* ── Status line under the top bar ───────────────────────────────────────── */
.status-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--text-sub);
  padding: 0 2px 10px;
  flex-wrap: wrap;
}
.status-controls { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.status-controls .icon-btn { padding: 5px 8px; font-size: 0.85rem; }
.tuned-chip {
  border: 1px solid var(--state-active);
  color: var(--state-active);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.72rem;
}

/* ── Flight card ─────────────────────────────────────────────────────────── */
.flight-route {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  font-size: 1.5rem;
  color: var(--text-primary);
  letter-spacing: 2px;
}
.flight-route .arrow { color: var(--text-sub); font-size: 1rem; }
.flight-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.flight-meta b { color: var(--text-accent); font-weight: 600; }
.flight-fullroute {
  margin-top: 12px;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-sub);
  word-break: break-word;
  border-top: 1px solid var(--border-panel);
  padding-top: 10px;
}
.route-toggle {
  background: none; border: none; color: var(--text-accent);
  font-family: inherit; font-size: 0.72rem; cursor: pointer;
  text-decoration: underline; padding: 0; margin-top: 10px;
}

/* ── Sector list ─────────────────────────────────────────────────────────── */
.sector {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-panel);
}
.sector:last-child { border-bottom: none; }

/* Coloured state stripe down the left edge */
.sector::before { content: ''; width: 4px; flex-shrink: 0; background: transparent; }
.sector.online::before   { background: var(--state-online); }
.sector.active::before   { background: var(--state-active); }
.sector.complete::before { background: var(--state-complete); }

.sector.active { background: var(--state-active-bg); }
.sector.complete .sector-main { opacity: 0.5; }
.sector.complete .sector-label { text-decoration: line-through; }

/* ── Progress rail: vertical line + plane at the current sector ─────────── */
.sector-rail {
  width: 34px;   /* wide enough for the plane marker to sit clear of the text */
  flex-shrink: 0;
  position: relative;
}
.sector-rail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--border-panel);
}
.sector-rail.passed::before { background: var(--state-complete); }
/* Track already flown: solid down to the middle of the current row */
.sector-rail.here::before {
  background: linear-gradient(to bottom,
    var(--state-complete) 0%, var(--state-complete) 50%,
    var(--border-panel) 50%, var(--border-panel) 100%);
}
.rail-plane {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);  /* point down the list */
  color: var(--state-active);
  font-size: 2.1rem;
  line-height: 1;
  z-index: 1;
  text-shadow: 0 0 6px var(--state-active-bg), 0 0 3px var(--bg-gradient-a);
}

.sector-main { flex: 1; padding: 10px 12px; min-width: 0; }

.info-letter { font-size: 0.62rem; color: var(--text-accent); letter-spacing: 1px; text-transform: uppercase; }

/* "Talk to this frequency, the local position is unstaffed" */
.use-note {
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 3px;
}
.use-note b { color: var(--state-online); }
.sector.active .use-note b { color: var(--state-active); }
.dead-freq { color: var(--text-placeholder); text-decoration: line-through; }

.sector-label { font-size: 0.85rem; color: var(--text-primary); }
.sector-sub { font-size: 0.68rem; color: var(--text-sub); margin-top: 2px; letter-spacing: 1px; text-transform: uppercase; }

.station { margin-top: 8px; }
.station-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
/* Frequency leads the row - it's what you act on - at normal text size. */
.station-freq {
  color: var(--text-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.station-callsign { color: var(--state-online); }
.sector.active .station-row.tuned .station-callsign,
.sector.active .station-row.tuned .station-freq { color: var(--state-active); }
.station-new {
  font-size: 0.6rem; color: var(--state-warn);
  border: 1px solid var(--state-warn); border-radius: 8px; padding: 1px 6px;
}
/* VATGlasses altitude-band chip + out-of-band treatment */
.station-band {
  font-size: 0.62rem;
  color: var(--text-sub);
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  padding: 1px 6px;
  white-space: nowrap;
}
.station-row.out-of-band { opacity: 0.45; }
.oob-tag {
  font-size: 0.6rem;
  color: var(--state-warn);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.covering-tag {
  font-size: 0.6rem;
  color: var(--state-online);
  border: 1px solid var(--state-online);
  border-radius: 8px;
  padding: 1px 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.station-offline { font-size: 0.72rem; color: var(--text-placeholder); margin-top: 6px; }
.station-offline.unicom { color: var(--state-warn); }

.atis-toggle {
  background: none; border: none; color: var(--text-sub);
  font-family: inherit; font-size: 0.68rem; cursor: pointer;
  text-decoration: underline; padding: 2px 0;
}
.atis-text {
  font-size: 0.7rem; line-height: 1.5; color: var(--text-muted);
  background: var(--bg-input); border-radius: 6px;
  padding: 8px 10px; margin-top: 6px; word-break: break-word;
}

/* Big tap target for mark-complete - whole right column */
.sector-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--border-panel);
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-placeholder);
  font-family: inherit;
}
.sector.complete .sector-check { color: var(--state-complete); }
.sector.active .sector-check { color: var(--state-active); }

/* ── Empty states ────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 36px 16px; }
.empty-state .big { font-size: 2rem; margin-bottom: 12px; }
.empty-state p { color: var(--text-muted); font-size: 0.85rem; line-height: 1.6; }
.empty-state a { color: var(--text-accent); font-size: 0.78rem; display: inline-block; margin-top: 10px; }

/* ── Footer / data credits ───────────────────────────────────────────────── */
.tracker-footer {
  margin-top: 22px;
  padding: 14px 4px 0;
  border-top: 1px solid var(--border-panel);
  font-size: 0.64rem;
  line-height: 1.7;
  color: var(--text-placeholder);
  text-align: center;
}
.tracker-footer a { color: var(--text-sub); text-decoration: underline; }
.tracker-footer a:hover { color: var(--text-accent); }
.tracker-footer .footer-brand { margin-top: 8px; }

/* ── Wider screens (tablet landscape / desktop) ──────────────────────────── */
@media (min-width: 700px) {
  .tracker-wrap { padding-top: 18px; }
  .sector-label { font-size: 0.95rem; }
}

/* Privacy link at page bottom */
.tracker-footer-note {
  text-align: center;
  margin: 24px 0 8px;
  font-size: 0.68rem;
  letter-spacing: 1px;
}
.tracker-footer-note a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tracker-footer-note a:hover {
  color: var(--text-accent);
}