/* VOE / Solari Board V5
   Canvas proportions and the approved nine-row physical geometry are retained
   from V3. Sizes inside the board use cqw (percentage of board WIDTH), so
   lettering and details scale with the machine rather than the viewport.
 */
:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #26303a;
  background: #f7f8fa;
  color-scheme: light;
  --fixed-type: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
  --mechanical-type: "univers-next-pro", "Arial Narrow", Arial, sans-serif;
  --machine-top: #292e36;
  --machine-bottom: #333a43;
  --panel-top: #20262e;
  --panel-bottom: #252b33;
  --letter: #f0f2f3;
  --cyan: #00d7dc;
}
* {box-sizing: border-box}
body {margin: 0}
.study-layout {display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:start}
.study {min-width:0}
.board-stage {width:100%; aspect-ratio:1049/498; position:relative; isolation:isolate; overflow:hidden; background:#eee}
.board {container-type:inline-size; position:absolute; inset:0; background:#292f37; box-shadow:inset 0 0 0 1px #12171d; overflow:hidden}
/* FIXED TOP BANDS: limited to their actual heights, never the full canvas. */
.title-band {position:absolute; left:0; right:0; top:0; height:12.8%; border-bottom:1px solid #111820; background:linear-gradient(var(--machine-top),var(--machine-bottom))}
.title-inner {position:absolute; inset:0 4.2%; display:flex; justify-content:space-between; align-items:center}
.title-group {display:flex; align-items:center; gap:2cqw; min-width:0}
.title-group--right {justify-content:flex-end}
.title-label {font:600 3.63cqw/.98 var(--fixed-type); letter-spacing:-.02em; white-space:nowrap; color:#f4f5f7}
.sign-frame {width:4.15cqw; height:4.15cqw; display:grid; place-items:center; flex-shrink:0; border:.19cqw solid #f0f3f5; border-radius:.76cqw}
.sign-frame img {width:79%; height:79%; display:block; object-fit:contain; filter:invert(1); transform:rotate(-2deg)}
.column-header-band {position:absolute; top:12.8%; left:0; right:0; height:10.3%; background:linear-gradient(#464e58,#414952); border-bottom:2px solid #20262c}
/* The named tracks use the same column formula. Fixed headings can extend
   beyond their track cells, unlike the physical character cells below. */
.header-track,.row-track {
  position:absolute; left:3.075%; right:3.075%;
  display:grid;
  grid-template-columns:9.2fr 8.8fr 20fr 7.2fr 14fr 5.8fr 14.5fr 3.5fr;
  column-gap:1.7%;
}
.header-track {inset-block:0; align-items:start; overflow:visible}
.header-column {min-width:0; position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding-top:1.30cqw; color:#f2f4f7; overflow:visible; white-space:nowrap; font-family:var(--fixed-type)}
.header-label {display:block; font-size:1.49cqw; line-height:.98; font-weight:500; letter-spacing:-.017em; white-space:nowrap}
.header-label--en {font-size:1.38cqw; line-height:1.02}
.header-column--airline {transform:translateX(.45cqw); z-index:2}
.header-column--flight {transform:translateX(2.0cqw); z-index:2}
.header-column--remarks {transform:translateX(.20cqw)}
/* Twelve dense, uninterrupted faceplate rows: a little more grandeur without overwhelming the board. */
.row-zone {position:absolute; inset:23.1% 0 3.1%; display:grid; grid-template-rows:repeat(12,minmax(0,1fr))}
.flight-row {position:relative; min-width:0; min-height:0; background:#3f4650; border-top:1px solid #555c65; border-bottom:2px solid #20262d}
.flight-row:nth-child(even) {background:#404752}
.row-track {inset-block:7%; min-height:0}
.column {min-width:0; min-height:0; display:grid; gap:1px; align-items:stretch}
.column--scheduled,.column--expected {grid-template-columns:repeat(4,minmax(0,1fr))}
.column--destination {grid-template-columns:repeat(11,minmax(0,1fr))}
.column--flight {grid-template-columns:repeat(8,minmax(0,1fr))}
.column--gate {grid-template-columns:repeat(3,minmax(0,1fr))}
.column--airline,.column--remarks {grid-template-columns:minmax(0,1fr)}
.column--lights {display:flex; align-items:center; justify-content:space-evenly; gap:3px}
/* Align the final indicator light optically with the left flap margin. */
.column--lights .status-lamp:last-child {position:relative; left:calc(.325cqw - 1px)}
/* Continuous faceplate is LIGHTER than openings. No raised buttons. */
.flap-cell {
  min-width:0; min-height:0; position:relative; isolation:isolate; overflow:hidden;
  border-radius:1px;
  background:linear-gradient(to bottom,var(--panel-top) 0%,var(--panel-top) 49%,var(--panel-bottom) 51%,var(--panel-bottom) 100%);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.65),inset 1px 0 1px rgba(0,0,0,.30),inset -1px 0 1px rgba(0,0,0,.23),inset 0 -1px 1px rgba(205,214,224,.045);
}
.flap-cell::before {content:"";position:absolute; top:50%; left:0; right:0; height:1px; background:#14191f; transform:translateY(-.5px); z-index:4}
.flap-cell::after {content:"";position:absolute; top:calc(50% + 1px); left:0; right:0; height:1px; background:rgba(175,190,205,.075); z-index:4}
.flap-char {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--letter);
  font-family:var(--mechanical-type); font-weight:500; font-size:2.45cqw; line-height:1; letter-spacing:0; white-space:nowrap;
  transform:translateY(-.025cqw) scale(.78,1.12); transform-origin:center;
}
.column--destination .flap-char {font-size:2.40cqw}
.column--flight .flap-char {font-size:2.42cqw}
.column--scheduled .flap-char,.column--expected .flap-char {font-size:2.47cqw}
.column--gate .flap-char {font-size:2.43cqw}
.time-period {position:absolute; right:-.04cqw; top:47%; z-index:5; color:var(--letter); font:500 2cqw/1 var(--mechanical-type); transform:translateY(-50%)}
/* Airline cells are genuine removable media slots. A later SVG occupies the
   same aperture and retains the split seam; no structural rewrite needed. */
.airline-logo {position:absolute; inset:18% 6%; min-width:0; overflow:hidden; border-radius:1px; background:linear-gradient(#f8f8f5,#dce1e5); box-shadow:inset 0 0 0 1px rgba(20,24,30,.22);
  display:flex; align-items:center; justify-content:center; padding:0 .18cqw}
.airline-logo-text {font:500 .70cqw/.95 var(--fixed-type); white-space:nowrap; letter-spacing:-.04em; color:#2a3138; text-align:center}
.airline-logo-image {width:100%; height:100%; object-fit:contain; display:block}
.airline-logo--lauda .airline-logo-text {color:#ac5b3b}
.airline-logo--bmi .airline-logo-text {color:#2350a4}
.airline-logo--american .airline-logo-text {color:#a74346}
.airline-logo--olympic .airline-logo-text {color:#4b6791}
.airline-logo--lufthansa {background:linear-gradient(#f9d825,#dabc16)}
.airline-logo--lufthansa .airline-logo-text {color:#4b4b23}
.airline-logo--iberia .airline-logo-text {color:#bf3030}
.airline-logo--volare .airline-logo-text {color:#355a91}
.airline-logo--lot .airline-logo-text {font-size:1.08cqw; color:#244a7d; font-weight:600}
/* Two distinct display HALF-PANELS, not one centred bilingual caption. */
.remarks-half {position:absolute; left:5%; right:2%; height:50%; display:flex; align-items:center; overflow:hidden; white-space:nowrap; color:#f2f4f5;
  font:500 .91cqw/.95 var(--fixed-type); letter-spacing:-.025em; text-transform:uppercase;}
.remarks-half--italian {top:0; padding-top:.07cqw}
.remarks-half--english {bottom:0; padding-bottom:.07cqw}
.status-lamp {
  width:36%; max-height:77%; aspect-ratio:1; display:block; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(88,141,122,.16) 0%, rgba(49,83,68,.12) 24%, #141d1a 56%, #0b100f 78%, #060908 100%);
  border:1px solid #101513;
  box-shadow:inset 0 .04cqw .08cqw rgba(190,255,225,.04), 0 0 1px rgba(0,0,0,.72);
}
.status-lamp.is-on {
  background:radial-gradient(circle at 34% 28%, #e5fff6 0%, #a8ffd8 16%, #58ebb0 34%, #1dbd7c 58%, #0e6a49 78%, #081713 100%);
  border-color:#1a5a43;
  box-shadow:0 0 .32cqw rgba(103,255,191,.30), 0 0 .08cqw rgba(103,255,191,.70);
}
.bottom-rail {position:absolute; left:0; right:0; bottom:0; height:3.1%; background:linear-gradient(#272d34,#1b2026); border-top:1px solid #171b20}
#maker-label {position:absolute; bottom:5%; left:4.2%; font:500 .69cqw/1 var(--fixed-type); color:#f0f2f5; letter-spacing:-.03em}
#maker-label b {font-size:.55cqw; opacity:.7}

/* The original Fast Cascade layered-glyph illusion, slightly reduced blur.
   All unchanged cells remain completely static. */
.flap-cell.is-flipping {background:linear-gradient(to bottom, #10151c 0%, #20262e 44%, #11171e 50%, #242a32 56%, #151b23 100%)}
.flap-cell.is-flipping::before {background:#06090c}
.flap-cell.is-flipping::after {top:48%; height:5%; background:rgba(230,238,235,.05); transform:none; box-shadow:0 0 .26cqw rgba(0,0,0,.35)}
.flap-char.is-moving {
  opacity:.87;
  filter:blur(.052cqw);
  text-shadow:0 -.18cqw .12cqw rgba(236,242,243,.36), 0 .20cqw .12cqw rgba(233,239,240,.24);
}
.flap-char.is-moving::before,.flap-char.is-moving::after {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:inherit; letter-spacing:inherit; color:rgba(240,242,243,.34);
  white-space:nowrap; pointer-events:none;
}
.flap-char.is-moving::before {content:attr(data-trail); transform:translateY(-.26cqw); filter:blur(.085cqw); opacity:.65}
.flap-char.is-moving::after {content:attr(data-trail-2); transform:translateY(.29cqw); filter:blur(.12cqw); opacity:.44}

/* Airline and remarks fields change only when their new values differ. */
.airline-logo.is-switching, .remarks-half.is-switching {animation:ancillary-flap 170ms ease-in-out both}
@keyframes ancillary-flap {
  0%,100% {transform:scaleY(1);filter:brightness(1)}
  48%,52% {transform:scaleY(.10);filter:brightness(.30)}
}
@media (prefers-reduced-motion: reduce) {
  .flap-char.is-moving {filter:none; text-shadow:none}
  .flap-char.is-moving::before,.flap-char.is-moving::after {display:none}
  .airline-logo.is-switching,.remarks-half.is-switching {animation:none}
}