/* American gate display, 1920x1080. Measured off a straight-on photograph whose lit area came out
   703x391 - 16:9 to within a pixel - so its proportions scale straight onto 1920x1080.
   The chrome (header wedge, status chip, bottom band) is one SVG layer, because those shapes are raked
   and then turn through a curve, which a clip-path polygon cannot do.
   Colours: the marks and type use American's own palette (AA Blue #0078D2, AA Red #C30019,
   AA Dark Gray #36495A); the screen's own fields are sampled from the photographs. */
:root {
  --font: "Red Hat Text", "Segoe UI", Arial, sans-serif;
  /* AmericanSans (Joe Finocchiaro, 2013) is proprietary. Of 76 free families scored against the
     destination line on a rectified photograph - matched on ascender height, then compared pixel for
     pixel - Red Hat Text 600 fits best: x-height within 2.7% and set width within 1.3%. */
  --aa-slate: #36495a;      /* AA Dark Gray: the type on the pale header */
  --panel: #dce6ef;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  width: 100%; height: 100%;
  background: #000; overflow: hidden;
  font-family: var(--font); color: #fff;
}

#stage { position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px; overflow: hidden; }
.chrome { position: absolute; inset: 0; width: 1920px; height: 1080px; }

/* every text layer sits above the chrome; each top is the measured cap top less the font's ascent gap */
#stage > :not(.chrome) { position: absolute; }

.sym { left: 41px; top: 61px; width: 150px; height: 96px; }   /* 72:46, the artwork's own ratio */
.fno { left: 229px; top: 24px; font-size: 60px; font-weight: 600; line-height: 1; color: var(--aa-slate); }
.dest {
  left: 229px; top: 87px; width: 985px;   /* leaves the ~45px gap before the status chip that the photograph shows */
  /* 98px puts the ascender at 73px, which is what the photograph measures; display.js shrinks
     the type for any name too long to fit, so nothing can clip. */
  font-size: 98px; font-weight: 600; line-height: 1; color: var(--aa-slate);
  white-space: nowrap; overflow: hidden;
}

/* the chip's own text; its shape is drawn in the chrome so the rake matches the header behind it */
.pill-text { left: 1286px; top: 118px; font-size: 52px; font-weight: 600; letter-spacing: 1px; line-height: 1; }

/* the gate block, right-aligned on the blue showing past the header */
.gate-l { right: 62px; top: 34px; font-size: 36px; font-weight: 600; line-height: 1; }
.gate   { right: 44px; top: 64px; font-size: 138px; font-weight: 600; line-height: 1; }

/* ---------- the blue field ---------- */
.boards { left: 56px; top: 291px; font-size: 91px; font-weight: 600; line-height: 1; display: flex; align-items: center; gap: 26px; }
.boards .chip { background: #fff; color: var(--aa-slate); font-size: 60px; font-weight: 600; padding: 8px 24px; border-radius: 4px; }

.t-label { left: 56px; font-size: 36px; font-weight: 600; line-height: 1; }
.t-value { left: 56px; font-size: 76px; font-weight: 600; line-height: 1; }
.dep-l { top: 470px; }
.dep-v { top: 539px; }
.arr-l { top: 694px; }
.arr-v { top: 760px; }

/* ---------- the pale panel ---------- */
.panel {
  left: 1235px; top: 273px; width: 641px; height: 597px;
  background: var(--panel); color: var(--aa-slate);
  padding: 44px 46px; font-size: 44px; line-height: 1.34; font-weight: 600;
}
.panel p + p { margin-top: 42px; }

.panel.upgrades { padding: 24px 26px; }
.panel .up-title { font-size: 30px; font-weight: 700; opacity: .7; }
.panel .up-cabin { font-size: 23px; font-weight: 700; letter-spacing: 1.5px; opacity: .55; margin-bottom: 14px; }
.panel .up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; }
.panel .up-row { display: flex; align-items: center; gap: 10px; font-size: 31px; font-weight: 600; padding: 3px 7px; border-radius: 3px; }
.panel .up-row i { font-style: normal; font-size: 23px; opacity: .5; width: 26px; text-align: right; }
.panel .up-row.ok { background: #127c3a; color: #fff; }
.panel .up-row.ok i { opacity: .85; }

/* ---------- footer ---------- */
.ow { left: 41px; top: 974px; width: 84px; height: 84px; }   /* the oneworld roundel, centred in the band */
.dur   { left: 190px; top: 992px; font-size: 56px; font-weight: 700; line-height: 1; }
.clock { right: 44px; top: 992px; font-size: 56px; font-weight: 600; line-height: 1; }

#err { left: 0; right: 0; top: 0; background: #7a1020; color: #fff; font-size: 26px; padding: 10px 20px; }