/* Arrivals — meeting room displays (on screen: departures boards) */

@font-face {
  font-family: 'Board';
  src: url('/assets/fonts/board.woff2') format('woff2'),
       url('/assets/fonts/board.woff') format('woff');
  font-display: block;
}

/* UI text (everything that isn't the split-flap board) */
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-regular.woff2') format('woff2'),
       url('/assets/fonts/figtree-regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
/* Brand weights: Light (H3), Medium (H2), SemiBold (H1) */
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-300.woff2') format('woff2'), url('/assets/fonts/figtree-300.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-500.woff2') format('woff2'), url('/assets/fonts/figtree-500.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-600.woff2') format('woff2'), url('/assets/fonts/figtree-600.woff') format('woff'); font-weight: 600 700; font-display: swap; }

:root {
  /* Wingman brand palette (Brand Guide, Colours) */
  --wm-slate: #30363b;      /* Slate Grey: backgrounds, text, icons */
  --wm-yellow: #fffc04;     /* Yellow: accents, icons */
  --wm-white: #ffffff;
  --wm-cool: #a1bed4;       /* Cool Blue */
  --wm-slateblue: #8aa4ba;  /* Slate Blue */
  --wm-steel: #506a85;      /* Steel Blue */
  --wm-cobalt: #3b4c5d;     /* Cobalt Blue */
  --wm-radius: 15px;        /* Brand: all boxes have 15px rounded corners */
  /* Split-flap amber: the real colour of the board, kept as-is. */
  --amber: #ffb81c;
  --amber-dim: #8c6a2a;
  --green: #8ef36b;
  --white: #f4f1e8;
  --board: #070707;
  --tile: #1e1e1e;
  --tile-line: rgba(0, 0, 0, .65);
  --ch: var(--amber);             /* character colour */
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', 'Liberation Mono', monospace;
  --sans: 'Figtree', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  /* Tile box in em. Overwritten from board-font.json (the font's real glyph metrics). */
  --tile-w: .62em;
  --tile-h: 1.05em;
  --tile-gap: .08em;
  --pad: 28px;
  --night-dim: .6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--board); color: var(--white); }
body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  cursor: none;
}
[hidden] { display: none !important; }

/* ---------- split-flap tiles ---------- */
.flaps { display: flex; flex-wrap: nowrap; line-height: 1; }
.t {
  position: relative;
  flex: none;
  width: var(--tile-w);
  height: var(--tile-h);
  margin-right: var(--tile-gap);
  overflow: hidden;
  transform-origin: 50% 50%;
}
.t > span { display: block; width: 100%; height: 100%; text-align: center; }

/* Glyph tile: the board font draws the flap; the character is a cut-out, so the
   background colour behind it becomes the character colour. */
.t-g {
  font-family: 'Board', var(--mono);
  line-height: var(--tile-h);
  color: var(--tile);
  background: linear-gradient(var(--ch), var(--ch)) center / 92% 92% no-repeat;
}
/* Drawn tile: characters the font doesn't have (":" "-" "+" ","), or no font at all. */
.t-d, .t-b {
  background: var(--tile);
  border-radius: .05em;
  box-shadow: inset 0 .03em 0 rgba(255, 255, 255, .05);
}
.t-d > span {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ch);
  font-size: .82em;
  line-height: calc(var(--tile-h) / .82);
}
.t-d::after, .t-b::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: max(1px, .035em);
  background: var(--tile-line);
}
.f1 { animation: flap1 60ms ease-in-out; }
.f2 { animation: flap2 60ms ease-in-out; }
@keyframes flap1 { 0% { transform: scaleY(1); } 50% { transform: scaleY(.1); filter: brightness(.6); } 100% { transform: scaleY(1); } }
@keyframes flap2 { 0% { transform: scaleY(1); } 50% { transform: scaleY(.1); filter: brightness(.6); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .f1, .f2 { animation: none; } }

/* ---------- views & transition ---------- */
.view {
  position: fixed;
  inset: 0;
  transition: opacity 1.2s ease, transform 1.2s ease, visibility 0s linear 0s;
}
.state-busy .view-available,
.state-available .view-busy {
  opacity: 0;
  transform: scale(1.015);
  visibility: hidden;
  transition: opacity 1.2s ease, transform 1.2s ease, visibility 0s linear 1.2s;
}

/* ---------- AVAILABLE ---------- */
.view-available { background: var(--wm-slate); }
.bg, .bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg img { object-fit: cover; object-position: center; }
.shade {
  position: absolute; inset: 0;
  /* Brand Slate Grey (#30363b) / Cobalt (#3b4c5d) wash, so text sits on our colours */
  background:
    linear-gradient(90deg, rgba(48, 54, 59, .9) 0%, rgba(48, 54, 59, .6) 42%, rgba(59, 76, 93, .12) 75%, rgba(48, 54, 59, .3) 100%),
    linear-gradient(0deg, rgba(48, 54, 59, .88) 0%, rgba(48, 54, 59, 0) 45%),
    linear-gradient(180deg, rgba(48, 54, 59, .6) 0%, rgba(48, 54, 59, 0) 22%);
}
.av-top {
  position: absolute; left: var(--pad); right: var(--pad); top: var(--pad);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.av-brand { display: block; height: clamp(15px, 1.9vw, 30px); margin-top: .5em; }
.av-brand img, .board-logo img, .page-logo img { display: block; height: 100%; width: auto; }
.board-logo { flex: none; height: calc(var(--fs-foot, 44px) * .55); margin-left: calc(var(--fs-foot, 44px) * .6); opacity: .95; }
.flaps-foot-right { margin-left: auto; }
.page-logo { display: block; height: 30px; }
.av-time { text-align: right; }
.flaps-clock { font-size: clamp(30px, 4.2vw, 64px); justify-content: flex-end; }
.av-date {
  margin-top: .5em;
  font-size: clamp(12px, 1.25vw, 19px);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--wm-cool);
}
.av-main {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 50%;
  transform: translateY(-58%);
}
.livery { display: inline-block; }
/* Brand "Wing" (left wing only) beside the title, as on the Brand Guide cover. */
.livery-title { display: flex; align-items: center; gap: calc(var(--fs-name, 96px) * .2); }
.livery-wing {
  flex: none; display: block;
  height: calc(var(--fs-name, 96px) * .42);
  width: auto;
}
.flaps-livery { font-size: var(--fs-name, 96px); --ch: var(--wm-white); --tile: var(--wm-slate); }
.aircraft {
  margin-top: 1.1vw;
  font-size: clamp(14px, 1.6vw, 26px);
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wm-white);
}
.av-status { margin-top: 4.5vh; }
.runway {
  display: flex; align-items: center; gap: .5em;
  font-size: clamp(18px, 2.3vw, 36px);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--wm-yellow);
}
/* Brand Tier 1 bullet icon (the plane), in Yellow */
.runway-dot {
  flex: none; width: .9em; height: .9em;
  background: var(--wm-yellow);
  -webkit-mask: url('/assets/brand/plane.png') center / contain no-repeat;
  mask: url('/assets/brand/plane.png') center / contain no-repeat;
}
.until {
  margin-top: .3em;
  font-size: clamp(24px, 3.9vw, 62px);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--wm-white);
}
.next-card {
  position: absolute;
  right: var(--pad);
  bottom: var(--pad);
  width: min(38vw, 520px);
  padding: 1.1em 1.4em 1.2em;
  background: rgba(48, 54, 59, .9);
  border-radius: var(--wm-radius);
  font-size: clamp(14px, 1.5vw, 22px);
}
.nc-label { font-size: .75em; letter-spacing: .14em; color: var(--wm-yellow); font-weight: 600; }
.nc-when { margin-top: .5em; font-weight: 600; font-size: 1.5em; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--wm-white); }
.nc-title {
  margin-top: .25em; font-size: 1.15em; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--wm-cool);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25;
}
.attribution {
  position: absolute; left: var(--pad); bottom: calc(var(--pad) * .5);
  font-size: 11px; color: rgba(161, 190, 212, .6);
}

/* ---------- BUSY: departures board ---------- */
.view-busy {
  padding: var(--pad);
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 0%, #1b1b1b 0%, var(--board) 70%);
  display: flex;
  flex-direction: column;
}
.board-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: calc(var(--fs-head) * .35);
  border-bottom: 2px solid #262626;
}
.flaps-head { font-size: var(--fs-head, 40px); }
.board-cols {
  display: flex;
  gap: var(--col-gap);
  padding: calc(var(--fs-row) * .55) 0 calc(var(--fs-row) * .3);
  font-size: calc(var(--fs-row) * .52);
  letter-spacing: .3em;
  color: #8d8d8d;
  font-weight: 700;
}
.board-cols span { flex: none; white-space: nowrap; overflow: hidden; }
.board-rows { flex: 1; overflow: hidden; }
.board-row {
  display: flex;
  gap: calc(var(--col-gap) - var(--fs-row) * .08);
  font-size: var(--fs-row, 28px);
  padding: calc(var(--fs-row) * .16) 0;
  border-bottom: 1px solid #1d1d1d;
}
.flaps-row { flex: none; }
.board-row[data-tone="airborne"] { background: linear-gradient(90deg, rgba(255, 184, 28, .07), transparent 70%); }
.board-row[data-tone="airborne"] .col-status { --ch: var(--green); }
.board-row[data-tone="boarding"] .col-status { --ch: #ffe066; }
.board-row[data-tone="closing"] .col-status { --ch: #6fd3ff; }
.board-row[data-tone="more"] { --ch: #9a9a9a; border-bottom: 0; }
.board-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: calc(var(--fs-foot) * .4);
  border-top: 2px solid #262626;
}
.flaps-foot { font-size: var(--fs-foot, 44px); }

/* ---------- connection indicator ---------- */
.conn {
  position: fixed;
  left: var(--pad);
  bottom: calc(var(--pad) * .5);
  display: flex; align-items: center; gap: .6em;
  padding: .35em .8em;
  font-size: clamp(11px, 1vw, 15px);
  letter-spacing: .18em;
  background: rgba(0, 0, 0, .55);
  border-radius: 99px;
  color: rgba(244, 241, 232, .8);
  z-index: 5;
}
.conn-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--amber); }
.conn-lost .conn-dot { background: #ff5a4f; }
.state-available .conn { background: rgba(48, 54, 59, .85); border-radius: var(--wm-radius); color: var(--wm-white); }
.state-available .conn-dot { background: var(--wm-yellow); }
.state-available .conn-lost .conn-dot { background: #ff5a4f; }
.state-busy .conn { bottom: auto; top: calc(var(--pad) * .25); left: 50%; transform: translateX(-50%); }

.mock-badge {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .25em; color: rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .45); padding: 3px 10px; border-radius: 99px; z-index: 5;
}
.state-busy .mock-badge { top: auto; bottom: 4px; }

/* ---------- night dimming ---------- */
.night-veil {
  position: fixed; inset: 0; background: #000; opacity: 0;
  pointer-events: none; transition: opacity 3s ease; z-index: 10;
}
body.night .night-veil { opacity: var(--night-dim); }

/* ---------- landing / utility pages ---------- */
body.page { cursor: auto; overflow: auto; -webkit-user-select: auto; user-select: auto; }
.page-wrap { max-width: 1100px; margin: 0 auto; padding: 48px 16px 64px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 15px; letter-spacing: .45em; color: var(--amber); }
.page-head p { margin: 0; color: #9a9a9a; letter-spacing: .12em; font-size: 13px; }
.page-title { font-size: clamp(28px, 6vw, 56px); margin: 28px 0 32px; }
.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.room-card {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  color: inherit; text-decoration: none; background: #1a1f26;
  outline: 0; transition: transform .25s ease, box-shadow .25s ease;
}
.room-card:hover, .room-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 2px var(--amber); }
.room-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-card .rc-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 8, 12, .9), rgba(5, 8, 12, .1) 60%); }
.room-card .rc-body { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.room-card .flaps { font-size: 30px; --ch: var(--white); }
.room-card .rc-air { margin-top: 10px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 241, 232, .75); }
.access {
  max-width: 420px; margin: 0 auto; padding: 28px; border-radius: 10px;
  background: #15181d; border-left: 4px solid var(--amber);
}
.access h2 { margin: 0 0 6px; font-size: 20px; }
.access p { margin: 0 0 18px; color: #a9a9a9; font-size: 14px; line-height: 1.5; }
.access form { display: flex; gap: 10px; }
.access input {
  flex: 1; min-width: 0; font: 700 22px var(--sans); letter-spacing: .3em; padding: 10px 12px;
  border-radius: 6px; border: 1px solid #333; background: #0c0c0c; color: var(--white);
}
.access button, .btn {
  font: 700 14px var(--sans); letter-spacing: .2em; padding: 0 18px; border-radius: 6px; border: 0;
  background: var(--amber); color: #111; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.access .err { color: #ff7a70; margin-top: 12px; font-size: 14px; }
.access .back { display: inline-block; margin-top: 16px; color: #9a9a9a; font-size: 13px; }
.hint { margin-top: 36px; color: #7c7c7c; font-size: 13px; line-height: 1.6; }

.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 22px; }
.preview-item h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .12em; color: #bbb; font-weight: 600; }
.preview-item h3 a { color: var(--amber); text-decoration: none; }
.preview-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: #000; }
.preview-frame iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; }

/* ---------- /demo state switcher ---------- */
.demo-bar {
  position: fixed; left: 50%; bottom: 6px; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  max-width: calc(100% - 24px); padding: 4px; border-radius: 8px;
  background: rgba(0, 0, 0, .6); z-index: 20; cursor: auto;
  opacity: .35; transition: opacity .3s;
}
.demo-bar:hover, .demo-bar:focus-within { opacity: 1; }
.demo-bar a {
  font: 700 10px var(--sans); letter-spacing: .12em; color: #ddd; text-decoration: none;
  padding: 5px 8px; border-radius: 5px;
}
.demo-bar a[aria-current] { background: var(--amber); color: #111; }
body:has(.demo-bar) { cursor: auto; }
.state-busy .conn:has(~ .demo-bar) { top: calc(var(--pad) * .25); }
.state-busy ~ .demo-bar, #app.state-busy .demo-bar { opacity: .12; }
#app.state-busy .demo-bar:hover, #app.state-busy .demo-bar:focus-within { opacity: 1; }