/* Mobile-first, dark, large type — meant to be read one-handed in a loud bar.
   No frameworks, no external requests. */

:root {
  --bg: #0e1116;
  --card: #171c24;
  --card-edge: #232a35;
  --text: #e8edf4;
  --muted: #8f9bab;
  --dim: #6b7685;
  --green: #3fb950;
  --amber: #d29922;
  --red: #f85149;
  --blue: #58a6ff;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 5rem;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.top { padding: 1.25rem 1rem 0.5rem; }
h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.summary { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.95rem; }
.summary b { color: var(--text); font-weight: 600; }
.tznote { margin: 0.25rem 0 0; color: var(--dim); font-size: 0.8rem; }

/* Outage / paused messaging. Distinct colours so "quota paused" never reads as
   "everything is broken". */
.banner {
  margin: 0.75rem 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.banner.warn { background: #2a1d10; border-color: #5c3f14; color: #f0c674; }
.banner.error { background: #2b1416; border-color: #5f2429; color: #ff9a94; }
.banner.info { background: #10202e; border-color: #1c3b52; color: #9ccdf5; }

.board { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.5rem 1rem; }
.empty { color: var(--muted); }

.row {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-left: 4px solid var(--card-edge);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
}
.row.landed { border-left-color: var(--green); }
.row.enroute { border-left-color: var(--blue); }
.row.delayed { border-left-color: var(--amber); }
.row.problem { border-left-color: var(--red); }
.row.dead { border-left-color: var(--red); background: #1b1416; }

.row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.who { font-size: 1.15rem; font-weight: 650; }
.pill {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #222b36;
  color: var(--muted);
  white-space: nowrap;
}
.pill.landed { background: #10331a; color: var(--green); }
.pill.enroute { background: #10283f; color: var(--blue); }
.pill.delayed { background: #33280d; color: var(--amber); }
.pill.problem { background: #3a1418; color: var(--red); }

.times { margin-top: 0.35rem; font-variant-numeric: tabular-nums; }
.eta { font-size: 1.05rem; font-weight: 600; }
.eta s { color: var(--muted); font-weight: 400; margin-right: 0.4rem; }
.late { color: var(--amber); }
.early { color: var(--green); }

/* Zone label on every clock time. Quiet and small — it is a reassurance, not a
   number to read — but always present, because a time on this board is
   destination-local and never the viewer's own clock. */
.tz { color: var(--dim); font-size: 0.7em; font-weight: 500; letter-spacing: 0.02em; }

.meta { margin-top: 0.3rem; color: var(--muted); font-size: 0.88rem; }
.meta span + span::before { content: " · "; opacity: 0.5; }

.note {
  margin-top: 0.45rem;
  padding: 0.4rem 0.55rem;
  background: #131922;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #c6d0dd;
}
.note.manual { background: #1d1a10; color: #e8d6a4; }

/* Freshness. Deliberately quiet by default: rows that are not being tracked yet
   must not look broken, or the red state means nothing on the day. */
.age { margin-top: 0.4rem; font-size: 0.78rem; color: var(--dim); }
.age.stale { color: var(--amber); }
.age.dead { color: var(--red); font-weight: 600; }
.age.final { color: var(--green); }

.foot {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: rgba(14, 17, 22, 0.94);
  border-top: 1px solid var(--card-edge);
  color: var(--muted);
  font-size: 0.82rem;
  backdrop-filter: blur(8px);
}
.foot button {
  font: inherit;
  color: var(--text);
  background: #232a35;
  border: 1px solid #313a48;
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
}
.foot button:active { background: #2c3543; }

/* When the page itself cannot reach the server, dim everything so stale data is
   never mistaken for live data. */
body.disconnected .board { opacity: 0.55; }

@media (min-width: 620px) {
  .board { max-width: 640px; margin: 0 auto; }
  .top, .banner { max-width: 640px; margin-left: auto; margin-right: auto; }
}