/* Public live page. Dark by default (it sits around video); light when the viewer's device asks for it. */

:root {
  --bg: #0b0f14;
  --surface: #131a22;
  --surface-2: #1a232e;
  --line: #263241;
  --text: #e8eef5;
  --muted: #93a3b5;
  --accent: #f2b33d;
  --st-final-bg: #f2b33d;  --st-final-fg: #1b1300;
  --st-leg-bg: #1f3d5c;    --st-leg-fg: #cfe5ff;
  --st-in-bg: #2a3442;     --st-in-fg: #dce6f2;
  --st-landed-bg: #1d4a33; --st-landed-fg: #c9f2d9;
  --st-ground-bg: #252c35; --st-ground-fg: #b7c3d0;
  --st-alert-bg: #6b1f22;  --st-alert-fg: #ffd9d9;
  --radius: 10px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef2f6;
    --surface: #ffffff;
    --surface-2: #f4f7fa;
    --line: #d5dde6;
    --text: #12202e;
    --muted: #5a6b7d;
    --accent: #b97700;
    --st-final-bg: #f2b33d;  --st-final-fg: #1b1300;
    --st-leg-bg: #dcebfb;    --st-leg-fg: #123a63;
    --st-in-bg: #e6ebf1;     --st-in-fg: #24384d;
    --st-landed-bg: #d7f2e2; --st-landed-fg: #12462a;
    --st-ground-bg: #eceff3; --st-ground-fg: #46556a;
    --st-alert-bg: #fbdcdc;  --st-alert-fg: #6b1014;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, p { margin: 0; }

/* ------------------------------------------------------------ header */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.title h1 { font-size: 18px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title .sub { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; flex: none; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.clock { display: flex; gap: 14px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.clock b { color: var(--text); font-size: 17px; font-weight: 600; }

.banner {
  padding: 10px 16px;
  background: var(--st-final-bg);
  color: var(--st-final-fg);
  font-weight: 600;
  text-align: center;
}

/* ------------------------------------------------------------ layout */

.layout {
  display: grid;
  gap: 16px;
  padding: 16px;
  max-width: 1800px;
  margin: 0 auto;
}

/* One row of cameras (data-count is the number of cameras); one column on phones. */
.cams {
  --cams: 3;
  display: grid;
  grid-template-columns: repeat(var(--cams), minmax(0, 1fr));
  gap: 12px;
}
.cams[data-count="1"] { --cams: 1; max-width: 1100px; }
.cams[data-count="2"] { --cams: 2; }
.cams[data-count="4"] { --cams: 4; }
@media (max-width: 1199px) { .cams[data-count="4"] { --cams: 2; } }
@media (max-width: 719px) {
  .cams { grid-template-columns: 1fr; }
}
.cam { margin: 0; }
.cam-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
/* The camsecure player page has the browser's default 8px white margin (its stylesheet is missing), so the
   frame is 16px bigger than the box and shifted 8px up and left: the 16:9 video then fills the box exactly. */
.cam-frame iframe {
  position: absolute;
  top: calc(-1 * var(--cam-margin, 8px));
  left: calc(-1 * var(--cam-margin, 8px));
  width: calc(100% + 2 * var(--cam-margin, 8px));
  height: calc(100% + 2 * var(--cam-margin, 8px));
  border: 0;
}
.cam figcaption { color: var(--muted); font-size: 13px; padding: 6px 2px 0; }

/* Phone: the live panel first (it's what people check), then the cameras. */
@media (max-width: 719px) {
  .panel { order: -1; }
  .top { flex-wrap: wrap; }
  .clock .local { display: none; }
}

/* ------------------------------------------------------------ live panel */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { font-size: 16px; font-weight: 650; }
.runway {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  color: var(--muted);
}
.runway b { color: var(--text); }

#live { display: grid; gap: 16px; }
@media (min-width: 900px) {
  #live.has-traffic { grid-template-columns: minmax(300px, 2fr) 3fr; align-items: start; }
}

.state { color: var(--muted); padding: 18px 0; text-align: center; }
.state.warn { color: var(--text); }

/* The big "Next to land" card. */
.next {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
.next .kicker { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.next .who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.next .label { font-size: 32px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.next .type { color: var(--muted); }
.next .facts { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.next .facts b { color: var(--text); font-size: 18px; font-weight: 600; }
.next .status { font-size: 15px; padding: 4px 12px; }

.lists { display: grid; gap: 14px; min-width: 0; }
.group h3 { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows li {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.rows .label { font-weight: 650; }
.rows .type { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rows .extra { color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; }
.rows .empty { display: block; color: var(--muted); }
@media (max-width: 480px) {
  .rows li { grid-template-columns: auto 1fr auto; }
  .rows .type { display: none; }
}

.status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  justify-self: start;
  background: var(--st-in-bg);
  color: var(--st-in-fg);
}
.status.s-final { background: var(--st-final-bg); color: var(--st-final-fg); }
.status.s-leg { background: var(--st-leg-bg); color: var(--st-leg-fg); }
.status.s-landed { background: var(--st-landed-bg); color: var(--st-landed-fg); }
.status.s-ground { background: var(--st-ground-bg); color: var(--st-ground-fg); }
.status.s-alert { background: var(--st-alert-bg); color: var(--st-alert-fg); }

.updated { margin-top: 10px; color: var(--muted); font-size: 12px; text-align: right; min-height: 1em; }
.updated.stale { color: var(--accent); }

/* ------------------------------------------------------------ footer */

.foot { padding: 4px 16px 24px; max-width: 1800px; margin: 0 auto; color: var(--muted); font-size: 12px; }
.foot b { color: var(--text); font-weight: 600; }