/* Page styles. Colours and the font come only from the tokens in
   theme.css (Cairns Airport branding), loaded first. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font);
  font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
/* Airport logo in assets/brand/. The source is
   about 100px tall, so show it at 56px or less to stay sharp. */
.brand-logo { display: block; width: auto; height: 56px; }
/* The airport logo has dark text drawn for a light background - give it one in dark mode */
:root[data-theme="dark"] .brand-logo { padding: 2px 8px; border-radius: 10px; background: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo { padding: 2px 8px; border-radius: 10px; background: #ffffff; }
}
.top-right { display: flex; align-items: center; gap: 12px; }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.clock-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.clock time { font-size: 18px; font-weight: 700; }

.icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#theme .i-moon { fill: currentColor; stroke: none; }
#theme .i-sun { display: none; }
:root[data-theme="dark"] #theme .i-moon { display: none; }
:root[data-theme="dark"] #theme .i-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme .i-moon { display: none; }
  :root:not([data-theme="light"]) #theme .i-sun { display: block; }
}

/* ---------- hero + controls ---------- */

.hero {
  background:
    radial-gradient(1200px 300px at 85% -40%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(135deg, var(--hero-1), var(--hero-2));
  color: var(--on-hero);
  padding: 32px 0 20px;
}
.hero h1 { margin: 0; font-size: clamp(26px, 4.5vw, 38px); font-weight: 800; letter-spacing: -.025em; }
.hero-sub { margin: 4px 0 20px; opacity: .85; }

.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tabs {
  display: inline-flex; padding: 4px; gap: 4px;
  background: rgba(255, 255, 255, .16); border-radius: 14px;
}
.tabs [role="tab"] {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 0; border-radius: 10px;
  background: transparent; color: var(--on-hero);
  font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.tabs [role="tab"] svg { width: 20px; height: 20px; fill: currentColor; }
.tabs [role="tab"]:hover { background: rgba(255, 255, 255, .12); }
.tabs [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--brand-strong); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.tab-count {
  min-width: 24px; padding: 1px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700; text-align: center;
  background: rgba(255, 255, 255, .22);
}
.tab-count:empty { display: none; }
[aria-selected="true"] .tab-count { background: var(--brand-soft); }

.search {
  flex: 1 1 260px; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 48px; border-radius: 14px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.search svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; outline: none; }
.search input::placeholder { color: var(--faint); }
.search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

.days { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.days:empty { display: none; }
.day {
  flex: none; padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: var(--on-hero);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.day:hover { background: rgba(255, 255, 255, .12); }
.day[aria-pressed="true"] { background: var(--on-hero); color: var(--hero-2); border-color: var(--on-hero); }

/* ---------- board ---------- */

main { padding-top: 20px; padding-bottom: 40px; }
.banner { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: var(--late-bg); color: var(--late); font-weight: 500; }

.day-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 8px 4px 12px; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
}
.day-h span { font-size: 13px; font-weight: 500; color: var(--muted); }
.day-h:not(:first-child) { margin-top: 28px; }
.result-note { margin: 4px 4px 0; color: var(--muted); font-size: 14px; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.card {
  width: 100%; display: grid; align-items: center; gap: 16px;
  grid-template-columns: 48px minmax(130px, 1.4fr) minmax(130px, 1.1fr) 44px 52px 80px 80px 132px 16px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow);
  text-align: left; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15, 27, 36, .06), 0 10px 24px rgba(15, 27, 36, .1); }
.card.is-past { background: var(--surface-2); box-shadow: none; }
.card.is-past .fno, .card.is-past .city, .card.is-past .t-main { color: var(--muted); }

/* Airline tail fin: official artwork from assets/tails/, or a fin drawn in
   app.js. Both are shown bare, as a cropped fin with no box behind it. */
.logo { display: block; width: 48px; height: 48px; }
.logo svg, .logo img { width: 100%; height: 100%; object-fit: contain; }
.logo text { font-family: var(--font); font-weight: 800; text-anchor: middle; letter-spacing: -.02em; }
.logo .fuselage { display: none; }
.logo.neutral .fin { fill: var(--logo-neutral); }
.logo.neutral .cap { fill: var(--logo-neutral-2); }
.logo .fin-edge { fill: none; stroke: rgba(0, 0, 0, .12); stroke-width: .8; }
.logo.lg { width: 60px; height: 60px; }

.c-flight, .c-port { display: flex; flex-direction: column; min-width: 0; }
.fno { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
/* The codeshare count sits beside the short flight number rather than after
   the airline name, so long names ("Virgin Australia") aren't cut off. When
   the column is too narrow for "VA1419 +7 codeshares" it shortens to "+7". */
.c-flight { container-type: inline-size; }
@container (max-width: 174px) { .cs-word { display: none; } }
.fno-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.fno { flex-shrink: 0; }
.airline { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs { min-width: 0; font-size: 13px; color: var(--brand-strong); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-port small { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.city { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term {
  display: inline-block; padding: 3px 8px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-strong); font-size: 13px; font-weight: 700;
}

.c-time { display: flex; flex-direction: column; line-height: 1.15; }
.c-time small { margin-bottom: 2px; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.t-main { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.t-main sup { font-size: 11px; margin-left: 1px; }
.t-main.t-late, .t-main.t-bad { color: var(--late); }
.t-main.t-good { color: var(--good); }
.t-main.t-none { color: var(--faint); font-weight: 500; }

.c-status { display: flex; justify-content: flex-start; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pill svg .fill { fill: currentColor; stroke: none; }
.t-good  { --c: var(--good);  --cb: var(--good-bg); }
.t-done  { --c: var(--done);  --cb: var(--done-bg); }
.t-late  { --c: var(--late);  --cb: var(--late-bg); }
.t-bad   { --c: var(--bad);   --cb: var(--bad-bg); }
.t-now   { --c: var(--now);   --cb: var(--now-bg); }
.t-sched { --c: var(--sched); --cb: var(--sched-bg); }
.pill { color: var(--c); background: var(--cb); }

.chev { width: 16px; height: 16px; fill: none; stroke: var(--faint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.empty {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: 40px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.empty strong { color: var(--text); font-size: 16px; }

.footnote { margin: 24px 4px 0; font-size: 13px; color: var(--faint); }
.disclaimer { margin: 6px 4px 0; font-size: 13px; color: var(--faint); }

/* ---------- detail dialog ---------- */

.detail {
  width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px);
  padding: 0; border: 0; border-radius: 24px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.detail::backdrop { background: rgba(8, 16, 22, .55); backdrop-filter: blur(3px); }
.detail[open] { animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
#detail-body { padding: 20px; }

.d-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.d-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.d-head p { margin: 0; color: var(--muted); font-size: 14px; }
.d-close { align-self: start; }

.route {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin: 20px 0 16px; padding: 16px; border-radius: 16px; background: var(--surface-2);
}
.route > div:not(.route-line) { display: flex; flex-direction: column; min-width: 0; }
.route .to { align-items: flex-end; text-align: right; }
.code { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.place { font-size: 14px; color: var(--muted); }
.route-line { display: flex; align-items: center; gap: 6px; color: var(--brand); }
.route-line span { width: 28px; border-top: 2px dashed currentColor; opacity: .5; }
.route-line svg { width: 22px; height: 22px; fill: currentColor; }

.d-status .pill { font-size: 15px; padding: 7px 14px 7px 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 16px 0 0; }
.kv { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.kv dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kv dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; }
.kv dd sup { font-size: 11px; }
.kv.hl-late dd, .kv.hl-bad dd { color: var(--late); }
.kv.hl-good dd { color: var(--good); }

.d-cs { margin-top: 16px; }
.d-cs h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; font-size: 14px; }
.d-note { margin: 18px 0 0; font-size: 13px; color: var(--faint); }

/* ---------- small screens ---------- */

@media (max-width: 760px) {
  .card {
    grid-template-columns: 44px 104px minmax(0, 1fr) auto;
    grid-template-areas:
      "logo flight flight status"
      "logo port   port   term"
      "logo sched  est    gate";
    gap: 4px 12px; padding: 12px 14px;
  }
  .card .logo { grid-area: logo; width: 44px; height: 44px; align-self: start; }
  .c-flight { grid-area: flight; }
  .c-port { grid-area: port; flex-direction: row; align-items: baseline; gap: 6px; }
  .c-term { grid-area: term; justify-self: end; }
  .term { padding: 1px 6px; font-size: 12px; }
  .c-sched { grid-area: sched; margin-top: 4px; }
  .c-est { grid-area: est; margin-top: 4px; }
  .c-gate { grid-area: gate; margin-top: 4px; align-items: flex-end; }
  .t-main { font-size: 18px; }
  .c-status { grid-area: status; justify-content: flex-end; }
  .chev { display: none; }
  .fno { font-size: 16px; }
  .city { font-size: 15px; }
  .c-flight .cs { display: none; }
  .pill { font-size: 12px; padding: 4px 9px 4px 7px; }
  .clock-label { display: none; }
}

@media (max-width: 480px) {
  .hero { padding-top: 22px; }
  .tabs { width: 100%; }
  .tabs [role="tab"] { flex: 1; justify-content: center; padding: 10px 8px; }
  .search { flex-basis: 100%; }
  .brand-logo { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}