/* Layout reference: Spec/FIDS.pdf (signed-off FIDS). Departures = 8 columns; arrivals = 6 per PDF.
   Match palette, density, alignment, and signage typography — not a generic web UI.
   Compat: Android 8 WebView (Chrome ~58). No clamp(), aspect-ratio, or inset without fallbacks. */

:root {
  --bg: #0b1a2a;
  --bg-row: #0b1a2a;
  --bg-row-alt: #162637;
  --bg-header-0: #004b87;
  --bg-header-1: #002d56;
  --bg-header-2: #0b1a2a;
  --bg-header-bar: #134771;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.62);
  --text-boarding: #b8c2cc;

  --logo-box-bg: #ffffff;
  --logo-box-border: rgba(11, 26, 42, 0.12);
  --logo-box-pad: 2px 4px;
  --logo-box-radius: 2px;

  --status-on-time: #ffffff;
  --status-delayed: #d9822b;
  --status-cancelled: #d64545;
  --status-boarding: #b8c2cc;
  --status-departed: #ffffff;
  --status-unknown: rgba(255, 255, 255, 0.85);

  --font-sign: Arial, Helvetica, 'Helvetica Neue', sans-serif;
  --col-gap: 8px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  color: var(--text);
  font-family: var(--font-sign);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body {
  background: var(--bg);
}

/* inset: 0 → legacy longhand for Chrome <87 */
.fids-shell {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
  background: var(--bg);
}

/* aspect-ratio: 9/16 → padding-bottom hack for Chrome <88 */
.fids-board {
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  background: var(--bg);
  width: 56.25vh; /* 9/16 of viewport height */
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
}

@media (min-aspect-ratio: 9 / 16) {
  .fids-board {
    height: 100%;
    width: 56.25vh;
    max-width: 100%;
  }
}

@media (max-aspect-ratio: 9 / 16) {
  .fids-board {
    width: 100%;
    height: 177.78vw; /* 16/9 of viewport width */
    max-height: 100%;
  }
}

@media (orientation: landscape) {
  .fids-shell {
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: stretch;
    justify-content: stretch;
  }

  .fids-board {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }
}

#fids {
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  --logo-box-w: 90px;
  --logo-box-w: 8.5vmin;
  --logo-box-h: 32px;
  --logo-box-h: 3.2vmin;
  --col-time: 7%;
  --col-actual: 6.5%;
  --col-airline: 9.5%;
  --col-dest: 1fr;
  --col-flight: 8%;
  --col-gate: 5%;
  --col-door: 4.5%;
  --col-status: 13%;
  padding: 0;
  font-size: 14px;
  font-size: 1.4vmin;
  letter-spacing: 0.02em;
  background: var(--bg);
  overflow: visible;
  min-height: 0;
}

@media (orientation: landscape) {
  #fids {
    font-size: 14px;
    font-size: 0.85vmax;
    --logo-box-w: 100px;
    --logo-box-w: 8.5vmin;
    --logo-box-h: 36px;
    --logo-box-h: 3.2vmin;
  }
}

.stale-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  text-align: center;
  padding: 0.4em 0.85em;
  font-weight: 600;
  font-size: 13px;
  font-size: 1.2vmin;
  letter-spacing: 0;
  font-family: var(--font-sign);
  background: #3d1a0a;
  color: #ffe8d6;
  border-bottom: 2px solid #d4943a;
}

.stale-banner[hidden] {
  display: none !important;
}

.stale-banner--load-error {
  background: #142a45;
  color: #dbe8ff;
  border-bottom-color: #4a8fd9;
  white-space: normal;
  line-height: 1.35;
  max-height: none;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.fids__header {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  padding: 10px 8px 8px;
  padding: 1.2vmin 0.8vmin 1vmin;
  isolation: isolate;
  overflow: visible;
  background-color: var(--bg-header-0);
  background-image: linear-gradient(180deg, var(--bg-header-0) 0%, var(--bg-header-1) 52%, var(--bg-header-2) 100%);
  border-bottom: none;
}

.fids__header-top {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
}

.fids__header-zone {
  min-width: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.fids__header-zone--left {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.fids__header-zone--center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

.fids__header-zone--right {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.fids__brand {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  min-width: 0;
  isolation: isolate;
}

.fids__airport-logo {
  display: block;
  width: auto;
  max-width: 180px;
  max-width: 42vmin;
  height: 42px;
  height: 4.2vmin;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: screen;
}

.fids__title-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.fids__title-block > * + * {
  margin-left: 10px;
}

.fids__title-plane {
  width: 24px;
  width: 2.8vmin;
  height: 24px;
  height: 2.8vmin;
  fill: var(--text);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.fids__title {
  margin: 0;
  font-family: var(--font-sign);
  font-weight: 700;
  letter-spacing: 0.8px;
  font-size: 22px;
  font-size: 2.6vmin;
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap;
}

.fids__clock {
  text-align: right;
  line-height: 1.12;
  font-family: var(--font-sign);
}

.fids__clock-date {
  font-size: 13px;
  font-size: 1.4vmin;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--text);
  white-space: nowrap;
}

.fids__clock-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-size: 2.6vmin;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
}

.fids__grid-wrap {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  margin-top: 0;
  overflow: hidden;
}

.fids__grid,
.fids__row {
  display: -ms-grid;
  display: grid;
  grid-template-columns:
    var(--col-time) var(--col-actual) var(--col-airline) var(--col-dest) var(--col-flight)
    var(--col-gate) var(--col-door) var(--col-status);
  grid-column-gap: var(--col-gap);
  column-gap: var(--col-gap);
  -webkit-box-align: center;
  align-items: center;
  justify-items: stretch;
  width: 100%;
}

#fids.fids--arrivals-mode .fids__grid,
#fids.fids--arrivals-mode .fids__row {
  grid-template-columns:
    var(--col-time) var(--col-actual) var(--col-airline) var(--col-dest) var(--col-flight)
    var(--col-status);
}

#fids.fids--arrivals-mode .fids__grid .fids__hdr-cell:nth-child(6),
#fids.fids--arrivals-mode .fids__grid .fids__hdr-cell:nth-child(7),
#fids.fids--arrivals-mode .fids__row .fids__cell:nth-child(6),
#fids.fids--arrivals-mode .fids__row .fids__cell:nth-child(7) {
  display: none !important;
}

#fids.fids--arrivals-mode {
  --col-flight: 10%;
  --col-status: 16%;
}

.fids__grid {
  padding: 7px 8px 8px;
  padding: 0.7vmin 0.8vmin 0.8vmin;
  margin: 0;
  width: 100%;
  background: var(--bg-header-bar);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
  font-weight: 600;
  font-size: 13px;
  font-size: 1.25vmin;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}

.fids__hdr-cell {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  line-height: 1.3;
}

.fids__hdr-cell--left {
  text-align: left;
}

.fids__hdr-cell--center {
  text-align: center;
}

.fids__hdr-cell--airline {
  text-align: center;
}

.fids__hdr-cell--right {
  text-align: right;
}

.fids__grid .fids__hdr-cell:nth-child(4),
.fids__row .fids__cell:nth-child(4) {
  padding-left: 8px;
  box-sizing: border-box;
}

.fids__rows {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  border: none;
  background: var(--bg-row);
}

.fids__row {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0px;
  flex: 1 1 0px;
  min-height: 0;
  padding: 0 8px;
  padding: 0 0.8vmin;
  margin: 0;
  width: 100%;
  border-bottom: none;
  font-size: 16px;
  font-size: 1.85vmin;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.02;
}

.fids__row:nth-child(even) {
  background: var(--bg-row-alt);
}

.fids__row--empty {
  color: var(--text-muted);
  opacity: 0.38;
}

.fids__cell {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1.05;
}

.fids__cell--left {
  text-align: left;
}

.fids__cell--center {
  text-align: center;
}

.fids__cell--dest {
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.fids__cell--status {
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.95em;
  text-align: left;
}

.fids__cell--right {
  text-align: right;
}

.fids__airline {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
}

.fids__airline-box {
  box-sizing: border-box;
  width: var(--logo-box-w);
  height: var(--logo-box-h);
  margin: 0 auto;
  background: var(--logo-box-bg);
  border: 1px solid var(--logo-box-border);
  border-radius: var(--logo-box-radius);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: var(--logo-box-pad);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  line-height: 0;
}

.fids__airline-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
}

.fids__airline-logo.is-ready {
  opacity: 1;
}

.fids__airline-fallback {
  display: none;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  font-weight: 700;
  font-size: 13px;
  font-size: 0.95vmin;
  letter-spacing: 0.04em;
  background: var(--logo-box-bg);
  color: #0b1a2a;
}

.fids__airline-fallback.is-visible {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  line-height: 1;
}

.fids__airline--PD .fids__airline-fallback {
  color: #143a7a;
}

.fids__airline--AC .fids__airline-fallback {
  color: #8b1530;
}

.fids__airline--XX .fids__airline-fallback {
  color: #0b1a2a;
}

.st--on_time {
  color: var(--status-on-time);
}
.st--delayed {
  color: var(--status-delayed);
}
.st--cancelled {
  color: var(--status-cancelled);
}
.st--boarding {
  color: var(--status-boarding);
}
.st--departed {
  color: var(--status-departed);
}
.st--landed {
  color: var(--status-departed);
}
.st--unknown {
  color: var(--status-unknown);
}

/* ───── Progressive enhancement: clamp() for modern Chromium (79+) ───── */
/* Old WebViews ignore this entire block; modern ones get bounded scaling. */
@supports (font-size: clamp(1px, 1vmin, 2px)) {
  #fids {
    font-size: clamp(11px, 1.4vmin, 32px);
    --logo-box-w: clamp(72px, 8.5vmin, 184px);
    --logo-box-h: clamp(26px, 3.2vmin, 70px);
  }

  @media (orientation: landscape) {
    #fids {
      font-size: clamp(11px, 0.85vmax, 32px);
      --logo-box-w: clamp(80px, 8.5vmin, 184px);
      --logo-box-h: clamp(28px, 3.2vmin, 70px);
    }
  }

  .fids__header {
    padding: clamp(8px, 1.2vmin, 26px) clamp(6px, 0.8vmin, 18px) clamp(6px, 1vmin, 22px);
  }

  .fids__airport-logo {
    max-width: min(42vmin, 300px);
    height: clamp(34px, 4.2vmin, 92px);
  }

  .fids__title-plane {
    width: clamp(18px, 2.8vmin, 62px);
    height: clamp(18px, 2.8vmin, 62px);
  }

  .fids__title {
    font-size: clamp(18px, 2.6vmin, 58px);
  }

  .fids__clock-date {
    font-size: clamp(11px, 1.4vmin, 32px);
  }

  .fids__clock-time {
    font-size: clamp(18px, 2.6vmin, 58px);
  }

  .fids__grid {
    padding: 7px clamp(6px, 0.8vmin, 18px) 8px;
    font-size: clamp(11px, 1.25vmin, 28px);
  }

  .fids__row {
    padding: 0 clamp(6px, 0.8vmin, 18px);
    font-size: clamp(14px, 1.85vmin, 42px);
  }

  .stale-banner {
    font-size: clamp(10px, 1.2vmin, 26px);
  }

  .fids__airline-fallback {
    font-size: clamp(9px, 0.95vmin, 22px);
  }
}

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