/* Arrivals — meeting room displays */

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

:root {
  --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: '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: #10161d; }
.bg, .bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg img { object-fit: cover; object-position: center; }
.shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 12, .86) 0%, rgba(5, 8, 12, .55) 45%, rgba(5, 8, 12, .15) 75%, rgba(5, 8, 12, .35) 100%),
    linear-gradient(0deg, rgba(5, 8, 12, .85) 0%, rgba(5, 8, 12, 0) 45%),
    linear-gradient(180deg, rgba(5, 8, 12, .6) 0%, rgba(5, 8, 12, 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 {
  font-size: clamp(13px, 1.3vw, 20px);
  letter-spacing: .45em;
  font-weight: 700;
  color: var(--amber);
  padding-top: .4em;
}
.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);
  letter-spacing: .3em;
  color: rgba(244, 241, 232, .75);
}
.av-main {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 50%;
  transform: translateY(-58%);
}
.livery { display: inline-block; }
.flaps-livery { font-size: var(--fs-name, 96px); --ch: var(--white); --tile: #121417; }
.cheatline {
  display: flex; flex-direction: column; gap: .35vw;
  margin: 1.6vw 0 1.2vw;
  transform: skewX(-24deg);
  transform-origin: left;
}
.cheatline span { display: block; height: .7vw; min-height: 5px; background: var(--amber); width: 100%; }
.cheatline span + span { height: .3vw; min-height: 2px; background: var(--white); width: 72%; }
.aircraft {
  font-size: clamp(14px, 1.6vw, 26px);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, .8);
}
.av-status { margin-top: 4.5vh; }
.runway {
  display: flex; align-items: center; gap: .6em;
  font-size: clamp(18px, 2.3vw, 36px);
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--green);
}
.runway-dot {
  width: .55em; height: .55em; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 .6em rgba(142, 243, 107, .7);
}
.until {
  margin-top: .35em;
  font-size: clamp(24px, 3.9vw, 62px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.next-card {
  position: absolute;
  right: var(--pad);
  bottom: var(--pad);
  width: min(38vw, 520px);
  padding: 1.1em 1.4em 1.2em;
  background: rgba(8, 10, 13, .72);
  border-left: .3em solid var(--amber);
  border-radius: .3em;
  font-size: clamp(14px, 1.5vw, 22px);
}
.nc-label { font-size: .75em; letter-spacing: .4em; color: var(--amber); font-weight: 700; }
.nc-when { margin-top: .5em; font-family: var(--mono); font-weight: 700; font-size: 1.5em; letter-spacing: .04em; }
.nc-title {
  margin-top: .25em; font-size: 1.15em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nc-captain { margin-top: .3em; font-size: .85em; letter-spacing: .15em; color: rgba(244, 241, 232, .7); }
.attribution {
  position: absolute; left: var(--pad); bottom: calc(var(--pad) * .5);
  font-size: 11px; color: rgba(244, 241, 232, .45);
}

/* ---------- BUSY: arrivals 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-unit);
  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-unit) - 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="atgate"] { background: linear-gradient(90deg, rgba(255, 184, 28, .07), transparent 70%); }
.board-row[data-tone="atgate"] .col-status { --ch: var(--green); }
.board-row[data-tone="landing"] .col-status { --ch: #ffe066; }
.board-row[data-tone="departed"] { --ch: var(--amber-dim); }
.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-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(--mono); 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; }