/* ════════════════════════════════════════
   NRT FIDS — features.css
   live dot · push button · share row · radar · kiosk board
════════════════════════════════════════ */

/* ── Top bar extras ── */
#btn-push.fx-on { background: #0d3b22; border-color: #27ae60; color: #2ecc71; }
@media (max-width: 768px) {
    .btn-label { display: none; }
}

.clock.fx-sse-on::after {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    margin-left: 8px;
    vertical-align: middle;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px #2ecc71;
    animation: fxPulse 2.4s ease-in-out infinite;
}
@keyframes fxPulse { 50% { opacity: .35; } }

body.fx-noscroll { overflow: hidden; }

/* ── Share card viewer (above every modal) ── */
.fx-card {
    display: none; position: fixed; inset: 0; z-index: 700;
    align-items: center; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: rgba(5, 8, 11, .94); backdrop-filter: blur(6px);
}
.fx-card.show { display: flex; animation: mFadeIn .2s ease; }
.fx-card-box { width: min(760px, 100%); display: flex; flex-direction: column; gap: 14px; }
.fx-card-img { width: 100%; height: auto; border-radius: 12px; border: 1px solid #18222b; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.fx-card-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fx-card-actions .fd-btn { justify-content: center; }

/* ── Share row in the flight detail top bar ── */
.fd-top-bar { flex-wrap: wrap; }
.fx-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 768px) {
    .fx-share-row { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
    .fx-share-row .fd-btn { padding: 8px 4px; letter-spacing: 1px; font-size: 11px; }
}

.fx-tiles-invert { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }

/* ════════════════════════════════════════
   LIVE RADAR
════════════════════════════════════════ */
.fx-radar {
    display: none;
    position: fixed; inset: 0;
    z-index: 450; /* under .modal-overlay so flight detail opens on top */
    background: #05080c;
    text-transform: uppercase;
}
.fx-radar.show { display: block; animation: mFadeIn .2s ease; }
/* The radar covers the whole page. The board behind it (tens of thousands of nodes) is not drawn
   meanwhile: it was re-painted on every frame of a replay and a phone's tab ran out of memory.
   (visibility keeps its layout and scroll positions as they are) */
body.fx-radar-hide .app-wrapper { visibility: hidden; }

.fx-radar-bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
    background: linear-gradient(rgba(2,4,8,.95), rgba(2,4,8,.75));
    border-bottom: 1px solid #0f2a33;
    font-family: 'Share Tech Mono', monospace;
}
.fx-radar-title { font-family: 'Orbitron', monospace; font-weight: 700; color: #00d8f0; letter-spacing: 2px; font-size: 15px; }
.fx-radar-src { font-family: 'Share Tech Mono'; font-size: 10px; color: #466; letter-spacing: 1px; margin-left: 6px; font-weight: 400; }
.fx-radar-chips { display: flex; gap: 8px; }
.fx-chip { font-size: 11px; letter-spacing: 1px; padding: 3px 8px; border: 1px solid #1d2a30; border-radius: 3px; color: #789; }
.fx-chip b { color: #fff; margin-left: 3px; }
.fx-chip.arr { border-color: #0e5563; color: #22d3ee; }
.fx-chip.dep { border-color: #5c4a12; color: #fbbf24; }
.fx-chip.hold { border-color: #6b3a12; color: #fb923c; }
.fx-chip.rwy { border-color: #2a3f2a; color: #86efac; }
button.fx-chip { background: none; font-family: inherit; cursor: pointer; line-height: inherit; }
button.fx-chip.off { opacity: .38; text-decoration: line-through; }
.fx-radar-search input {
    width: 240px; background: rgba(255,255,255,.04); border: 1px solid #1d2a30; border-radius: 4px;
    color: #e6edf3; font: 12px 'Share Tech Mono', monospace; letter-spacing: 1px; padding: 6px 9px; text-transform: uppercase;
}
.fx-radar-search input::placeholder { text-transform: none; color: #567; }
.fx-radar-search input:focus { outline: none; border-color: #0e5563; }
/* the silhouette's size follows the aircraft's size (--s, set by its class); --o: other traffic, --z: zoomed far out */
.fx-ac-rot { transform-origin: 50% 50%; scale: calc(var(--s, 1) * var(--o, 1) * var(--z, 1) * .82); }
.fx-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.fx-tabs button { background: none; border: 1px solid transparent; border-radius: 3px; color: #567; font: 11px 'Share Tech Mono', monospace; letter-spacing: 1.5px; padding: 2px 6px; cursor: pointer; }
.fx-tabs button.on { color: #22d3ee; border-color: #12303a; }
.fx-tabs button[data-tab="dep"].on { color: #fbbf24; border-color: #3d3210; }
.fx-tabs button[data-tab="hold"] { color: #fb923c; }
.fx-caret { cursor: pointer; padding: 0 2px; }
.fx-alt-legend {
    position: absolute; z-index: 1000; right: 16px; top: 64px; display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap;
    background: rgba(5,8,12,.88); border: 1px solid #12303a; border-radius: 6px; padding: 6px 10px;
    font: 10px 'Share Tech Mono', monospace; color: #9ab; letter-spacing: .5px; max-width: 420px;
}
.fx-alt-legend span { color: #567; letter-spacing: 1px; margin-right: 2px; }
.fx-alt-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: -4px; }
.fx-chip.rwy b { margin-left: 0; }
/* aircraft circling in a hold: pulsing orange ring */
.fx-ac-hold::before {
    content: ''; position: absolute; left: -5px; top: -5px; width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid #fb923c; opacity: .8; animation: fxHoldPulse 1.6s ease-out infinite;
}
@keyframes fxHoldPulse { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-ac-hold::before { animation: none; } }
.fx-toggle { font-size: 11px; color: #9ab; letter-spacing: 1px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.fx-close {
    margin-left: auto; background: none; border: 1px solid #333; color: #aaa;
    width: 34px; height: 34px; border-radius: 4px; cursor: pointer; font-size: 16px;
}
.fx-close:hover { color: #fff; border-color: #888; }

#fx-radar-map { position: absolute; inset: 0; background: #05080c; }
.fx-radar .leaflet-control-attribution { background: rgba(0,0,0,.6); color: #567; text-transform: none; }
.fx-radar .leaflet-control-attribution a { color: #789; }

.fx-radar-status {
    position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 1000;
    background: rgba(0,0,0,.8); border: 1px solid #333; color: #bbb;
    font-size: 12px; letter-spacing: 1px; padding: 6px 12px; border-radius: 4px;
}

/* sweep + NRT marker */
.fx-sweep-wrap { pointer-events: none; }
.fx-sweep {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(0,216,240,.22), rgba(0,216,240,0) 70deg, rgba(0,216,240,0) 360deg);
    animation: fxSweep 5s linear infinite;
}
@keyframes fxSweep { to { transform: rotate(360deg); } }
.fx-nrt-dot {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-family: 'Orbitron'; font-size: 10px; font-weight: 700; color: #05080c;
    background: #00d8f0; padding: 2px 5px; border-radius: 2px; letter-spacing: 1px;
    box-shadow: 0 0 12px rgba(0,216,240,.7);
}

/* aircraft markers */
.fx-ac { background: none; border: none; }
/* planes glide between the 0.5 s position updates (off while zooming: Leaflet animates that) */
.fx-glide .leaflet-marker-icon.fx-ac { transition: transform .5s linear; }
@media (prefers-reduced-motion: reduce) { .fx-glide .leaflet-marker-icon.fx-ac { transition: none; } }
.fx-ac-rot { width: 26px; height: 26px; transition: transform .6s ease; }
.fx-ac svg { width: 26px; height: 26px; fill: currentColor; filter: drop-shadow(0 0 3px rgba(0,0,0,.9)); }
.fx-ac-arr { color: #22d3ee; }
.fx-ac-dep { color: #fbbf24; }
.fx-ac-oth { color: #64748b; }
/* NRT traffic stands out: glow and outlined labels; everything else smaller and faded */
.fx-ac-arr svg { filter: drop-shadow(0 0 4px rgba(34,211,238,.85)) drop-shadow(0 0 1px #000); }
.fx-ac-dep svg { filter: drop-shadow(0 0 4px rgba(251,191,36,.85)) drop-shadow(0 0 1px #000); }
.fx-ac-arr .fx-ac-label { border: 1px solid #22d3ee; background: rgba(6,40,52,.9); color: #e6fbff; }
.fx-ac-dep .fx-ac-label { border: 1px solid #fbbf24; background: rgba(52,36,4,.9); color: #fff7e0; }
.fx-ac-oth { opacity: .6; }
.fx-ac-oth { --o: .85; }
.fx-ac-oth.fx-ac-sel { opacity: 1; }
.fx-tiles-sat { filter: brightness(.55) saturate(.65) contrast(1.05); }
.fx-ac-gnd svg { opacity: .9; }   /* same size on the ground as in the air */
.fx-ac-label {
    position: absolute; left: 50%; top: 24px; transform: translateX(-50%);
    font-family: 'Share Tech Mono'; font-size: 10px; letter-spacing: .5px; white-space: nowrap;
    color: inherit; background: rgba(0,0,0,.65); padding: 0 3px; border-radius: 2px;
}
.fx-zoom-lo .fx-ac-oth .fx-ac-label,
.fx-zoom-lo .fx-ac-gnd .fx-ac-label { display: none; }
/* airline logo in the map label once zoomed in */
.fx-ac-lg { display: none; width: 11px; height: 11px; object-fit: contain; background: #fff; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }
.fx-zoom-hi .fx-ac-lg { display: inline-block; }
.fx-zoom-xlo .fx-ac-label { display: none; }
.fx-zoom-xlo .fx-ac-sel .fx-ac-label { display: inline; }
.fx-zoom-xlo .fx-ac { --z: .7; }
.fx-zoom-xlo .fx-ac-oth { --z: .58; }

/* selected aircraft: bottom sheet */
.fx-ac-sel .fx-ac-rot { color: #f43f5e; filter: drop-shadow(0 0 6px rgba(244,63,94,.6)); }
.fx-ac-sel .fx-ac-label { color: #fff; background: #9f1239; }
.fx-sheet {
    position: absolute; z-index: 1001; right: 16px; bottom: 24px; width: 420px; max-width: calc(100vw - 32px);
    background: rgba(20,25,31,.97); border: 1px solid #263240; border-radius: 16px; padding: 14px 16px 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.55); color: #e6edf3; font-family: 'Share Tech Mono', monospace;
    transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none;
    transition: transform .25s ease, opacity .2s ease;
}
.fx-sheet.show { transform: none; opacity: 1; pointer-events: auto; }
.fx-sh-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: #6b7a88; font-size: 15px; cursor: pointer; padding: 4px; }
.fx-sh-top { display: flex; gap: 12px; align-items: flex-start; padding-right: 18px; }
.fx-sh-logo { width: 44px; flex: 0 0 44px; padding-top: 2px; }
.fx-sh-logoimg { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }
.fx-sh-id { flex: 1; min-width: 0; }
.fx-sh-fn { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: .5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fx-sh-chip { font-family: 'Share Tech Mono', monospace; font-weight: 400; font-size: 11px; color: #8a99a8; border: 1px solid #334150; border-radius: 9px; padding: 1px 7px; letter-spacing: .5px; }
.fx-sh-al { font-size: 14px; color: #dfe6ee; margin-top: 3px; }
.fx-sh-model { font-size: 12px; color: #6b7a88; margin-top: 2px; }
.fx-sh-photo { flex: 0 0 132px; width: 132px; height: 76px; border-radius: 10px; overflow: hidden; position: relative; display: block; background: #0b1016; }
.fx-sh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-sh-photo span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 8px; color: #dde; background: linear-gradient(transparent, rgba(0,0,0,.75)); padding: 6px 5px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-sh-route { margin-top: 12px; }
.fx-sh-cities { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #cfd8e3; }
.fx-sh-cities span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.fx-sh-codes { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.fx-sh-codes b { font-family: 'Orbitron', monospace; font-size: 24px; color: #fff; letter-spacing: 1px; }
.fx-sh-bar { flex: 1; height: 8px; border-radius: 4px; background: #2a3440; position: relative; }
.fx-sh-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #22c55e; }
.fx-sh-bar em { position: absolute; top: 50%; transform: translate(-50%, -52%); font-style: normal; font-size: 13px; color: #fff; text-shadow: 0 0 4px #000; }
.fx-sh-times { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #8a99a8; margin-top: 4px; }
.fx-sh-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border-top: 1px solid #263240; padding-top: 10px; }
.fx-sh-stats > div { text-align: center; font-size: 19px; color: #fff; font-weight: 700; }
.fx-sh-stats > div + div { border-left: 1px solid #263240; }
.fx-sh-stats span { color: #6b7a88; margin-right: 6px; font-weight: 400; }
.fx-sh-stats small { font-size: 11px; color: #8a99a8; margin-left: 2px; font-weight: 400; }
.fx-sh-notes { font-size: 11px; color: #fbbf24; letter-spacing: 1px; margin-top: 6px; min-height: 0; text-align: center; }
.fx-sh-notes:empty { display: none; }
.fx-sh-hold { color: #fb923c; }
.fx-sh-btns { display: flex; gap: 6px; margin-top: 10px; }
.fx-sh-btns .fd-btn { flex: 1; justify-content: center; padding: 7px 6px; font-size: 11px; text-decoration: none; text-align: center; }
.fx-sh-follow.on { color: #22d3ee; border-color: #0e5563; background: rgba(34,211,238,.08); }
/* back-to-NRT button (above the zoom buttons) */
.fx-home {
    display: flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 7px 11px; cursor: pointer;
    background: rgba(5,8,12,.88); border: 1px solid #1d2a30; border-radius: 6px; color: #22d3ee;
    font: 12px 'Share Tech Mono', 'Noto Sans JP', monospace; letter-spacing: 1px;
}
.fx-home span { font-size: 15px; line-height: 1; }
.fx-home b { font-weight: normal; }
.fx-home:hover { border-color: #0e5563; background: rgba(34,211,238,.1); }
/* the replay's plane: exactly where the time puts it, never gliding behind */
.fx-glide .leaflet-marker-icon.fx-ac-pb, .leaflet-marker-icon.fx-ac-pb, .fx-ac-pb .fx-ac-rot { transition: none !important; }
/* playback of a landed flight */
.fx-pb-start { width: 100%; margin: 4px 0 8px; }
.fx-pb { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.fx-pb-btn { flex: none; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; background: rgba(34,211,238,.1); border: 1px solid #0e5563; color: #22d3ee; font-size: 14px; }
.fx-pb input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: #22d3ee; }
.fx-pb span { flex: none; font-size: 11px; color: #9ab; letter-spacing: .5px; }
.fx-pb select { flex: none; background: #0b1418; color: #e6edf3; border: 1px solid #1d2a30; border-radius: 6px; padding: 6px 4px; font: 12px 'Share Tech Mono', monospace; }
.fx-ap-tip { background: rgba(5,8,12,.85); border: 1px solid #334150; color: #e6edf3; font: 11px 'Share Tech Mono', monospace; letter-spacing: 1px; padding: 1px 5px; box-shadow: none; }
.fx-ap-tip::before { display: none; }
@media (max-width: 768px) {
    .fx-sheet { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; padding: 12px 12px 10px; border-radius: 18px; }
    .fx-sh-photo { flex-basis: 104px; width: 104px; height: 62px; }
    .fx-sh-fn { font-size: 18px; }
    .fx-sh-codes b { font-size: 21px; }
    .fx-sh-stats > div { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fx-sheet { transition: none; } }

/* approaching list */
.fx-radar-panel {
    position: absolute; z-index: 1000; left: 16px; bottom: 24px; width: 340px; max-width: calc(100vw - 32px);
    background: rgba(5,8,12,.88); border: 1px solid #12303a; border-radius: 6px;
    font-family: 'Share Tech Mono', monospace; overflow: hidden;
}
.fx-panel-title {
    font-size: 11px; letter-spacing: 2px; color: #22d3ee; padding: 8px 12px;
    border-bottom: 1px solid #12303a; cursor: pointer; display: flex; justify-content: space-between;
}
.fx-radar-panel.collapsed #fx-radar-list { display: none; }
.fx-radar-panel.collapsed .fx-caret { transform: rotate(-90deg); display: inline-block; }
#fx-radar-list { max-height: 42vh; overflow-y: auto; }
.fx-list-row {
    display: grid; grid-template-columns: 16px 58px minmax(0, 1fr) 50px 46px 34px; gap: 6px; align-items: center;
    padding: 6px 12px; font-size: 12px; color: #ccd; cursor: pointer; border-bottom: 1px solid #0b1418;
}
.fx-list-sep { padding: 6px 12px 3px; font-size: 10px; letter-spacing: 1.5px; color: #567; border-bottom: 1px solid #0b1418; }
.fx-list-row:hover { background: rgba(34,211,238,.08); }
.fx-l-fn { color: #fff; }
.fx-l-org { color: #22d3ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-l-logo { width: 16px; height: 16px; object-fit: contain; background: #fff; border-radius: 2px; display: block; }
.fx-l-dist, .fx-l-alt { color: #8a9; text-align: right; }
.fx-l-eta { color: #fbbf24; text-align: right; }
.fx-list-empty { padding: 12px; font-size: 11px; color: #567; letter-spacing: 1px; }

@media (max-width: 768px) {
    .fx-radar-bar { gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
    .fx-radar-title { font-size: 13px; }
    .fx-chip { font-size: 10px; padding: 2px 6px; }
    /* (the desktop max-width of 100vw - 32px kept the right edge 16px short of the left one) */
    .fx-radar-panel { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; }
    /* the tabs share each row's width, so wrapped rows are as wide as the panel */
    .fx-tabs { gap: 4px; }
    .fx-tabs button { flex: 1 1 auto; text-align: center; white-space: nowrap; }
    .fx-sheet-open .fx-radar-panel { display: none; }
    .fx-radar-search { order: 5; flex: 1 1 100%; }
    /* title + close on top, the chips on their own line */
    .fx-radar-title { order: 1; }
    .fx-close { order: 2; }
    .fx-radar-chips { order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
    .fx-radar-search input { width: 100%; }
    /* the OTHER chip does what the checkbox does; the legend would cover the search */
    .fx-toggle, .fx-alt-legend { display: none !important; }
    #fx-radar-list { max-height: 26vh; }
    .fx-radar-status { top: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-sweep, .clock.fx-sse-on::after { animation: none; }
    .fx-ac-rot { transition: none; }
}

/* ════════════════════════════════════════
   TV / KIOSK BOARD
════════════════════════════════════════ */
body.fx-kiosk-on { overflow: hidden; }
body.fx-kiosk-on .app-wrapper { visibility: hidden; }

.fx-kiosk {
    --fxk-row-h: 56px;
    --fxk-fs: 28px;
    --fxk-accent: #f5b400;
    display: none;
    position: fixed; inset: 0; z-index: 460;
    flex-direction: column;
    background: radial-gradient(ellipse at top, #0b1016 0%, #020304 70%);
    color: #f2f2f2;
    cursor: none;
    text-transform: uppercase;
    padding: 0 16px;
}
.fx-kiosk.show { display: flex; }
.fx-kiosk.fxk-arr { --fxk-accent: #22d3ee; }
.fx-kiosk.fxk-awake { cursor: default; }

.fxk-head {
    display: flex; align-items: center; gap: 2vw;
    padding: 1.4vh 0.6vw; padding-top: max(1.4vh, env(safe-area-inset-top));
    border-bottom: 3px solid var(--fxk-accent);
}
.fxk-logo { height: 7vh; max-height: 80px; min-height: 34px; background: #fff; padding: 6px 10px; border-radius: 4px; }
.fxk-title { flex: 1; min-width: 0; white-space: nowrap; }
.fx-kiosk.fxk-narrow .fxk-logo { display: none; }
.fx-kiosk.fxk-narrow .fxk-title-main { font-size: calc(var(--fxk-fs) * 1.25); }
.fxk-title-main { font-family: 'Share Tech Mono', monospace; font-size: calc(var(--fxk-fs) * 1.5); color: var(--fxk-accent); line-height: 1.2; }
.fxk-title-main .fl { color: var(--fxk-accent); }
.fxk-title-sub { font-size: calc(var(--fxk-fs) * .55); color: #8a949e; letter-spacing: .3em; margin-top: .3em; }
.fxk-right { text-align: right; }
.fxk-clock {
    font-family: 'Orbitron', monospace; font-weight: 700; font-variant-numeric: tabular-nums;
    font-size: calc(var(--fxk-fs) * 1.6); letter-spacing: .08em; color: #fff;
    text-shadow: 0 0 18px rgba(255,255,255,.15);
}
.fxk-wx { font-size: calc(var(--fxk-fs) * .5); color: #9aa5b1; margin-top: .3em; letter-spacing: .1em; text-transform: none; }

.fxk-cols, .fxk-row {
    display: grid;
    grid-template-columns:
        calc(5 * .8em) 2.4em calc(7 * .8em) calc(15 * .8em) calc(2 * .8em) calc(4 * .8em) 1fr;
    column-gap: .5em;
    align-items: center;
    font-size: var(--fxk-fs);
    padding: 0 .3em;
}
/* phones: two lines per flight, no column header */
.fx-kiosk.fxk-narrow { padding: 0 10px; }
.fx-kiosk.fxk-narrow .fxk-cols { display: none; }
.fxk-row2 {
    display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .12em;
    padding: 0 .1em;
}
.fxk-line { display: flex; align-items: center; gap: .45em; min-width: 0; }
.fxk-row2 .fxk-logo-c { width: 1.4em; height: 1.2em; }
.fxk-row2 .fxk-airline-logo { width: 1.2em; height: 1.2em; padding: .06em; }
.fxk-row2:nth-child(even) { background: rgba(255,255,255,.035); }
.fxk-row2 .fxk-gate-lbl { margin-left: auto; }
.fxk-row2 .fxk-rem { margin-left: auto; }
.fxk-mini {
    font-family: 'Share Tech Mono', monospace; font-size: .45em; letter-spacing: .15em; color: #6b7682;
}
.fxk-cols {
    padding-top: 1vh; padding-bottom: .8vh;
    border-bottom: 1px solid #1a2028;
}
/* the grid keeps the row font-size so em-based columns line up with the rows */
.fxk-cols > div {
    font-family: 'Share Tech Mono', monospace;
    font-size: calc(var(--fxk-fs) * .45);
    letter-spacing: .25em; color: #6b7682;
    white-space: nowrap; overflow: hidden;
}
.fxk-rows { flex: 1; overflow: hidden; }
.fxk-row { height: var(--fxk-row-h); border-bottom: 1px solid #0d1117; }
.fxk-row:nth-child(even) { background: rgba(255,255,255,.015); }
.fxk-c { white-space: nowrap; overflow: hidden; line-height: 1; }
.fxk-logo-c { display: flex; align-items: center; justify-content: center; height: 100%; }
.fxk-airline-logo {
    width: 1.9em; height: 1.9em; max-height: calc(var(--fxk-row-h) - 8px);
    object-fit: contain; background: #fff; border-radius: .15em; padding: .12em;
}

/* split-flap tiles */
.fl {
    /* blank tiles hold only a space, so baseline alignment would shift them; pin to top */
    display: inline-block; vertical-align: top;
    width: .72em; height: 1.2em; line-height: 1.2em;
    margin-right: .08em;
    text-align: center;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    color: #f2f2f2;
    background: linear-gradient(#1b1f25 0 49.5%, #0e1115 50.5% 100%);
    border-radius: .07em;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 1px rgba(0,0,0,.8);
    backface-visibility: hidden;
}
.fl::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: rgba(0,0,0,.9);
}
.fl.fa { animation: fxFlipA .14s ease-in-out; }
.fl.fb { animation: fxFlipB .14s ease-in-out; }
/* blink only the letters, the tiles stay put; tiles keep their fa/fb class, so the flip is listed too */
.fxk-blink .fl { animation: fxBlink 1.1s steps(1) infinite; }
.fxk-blink .fl.fa { animation: fxFlipA .14s ease-in-out, fxBlink 1.1s steps(1) infinite; }
.fxk-blink .fl.fb { animation: fxFlipB .14s ease-in-out, fxBlink 1.1s steps(1) infinite; }
@keyframes fxBlink { 50% { color: transparent; } }
@keyframes fxFlipA { 0% { transform: rotateX(0); } 50% { transform: rotateX(80deg); } 100% { transform: rotateX(0); } }
@keyframes fxFlipB { 0% { transform: rotateX(0); } 50% { transform: rotateX(80deg); } 100% { transform: rotateX(0); } }

.fxk-time .fl { color: #ffd34d; }
.fxk-fn .fl { color: #fff; }
.fxk-gate .fl { color: #ffd34d; }
.fxk-rem.status-estimated .fl { color: #7fc4ff; }
.fxk-rem.status-delayed .fl { color: #ffd34d; }
.fxk-rem.status-gateclose .fl, .fxk-rem.status-cancelled .fl { color: #ff5a4d; }
.fxk-rem.status-landed .fl, .fxk-rem.status-departed .fl { color: #7fe0a0; }
.fxk-rem.status-scheduled .fl { color: #c9d1d9; }
.fxk-rem.status-boarding .fl { color: #3ddc84; }
.fxk-rem.status-gotogate .fl { color: #7fc4ff; }
.fxk-rem.status-closed .fl { color: #f0a640; }
.fxk-rem.status-terminal .fl { color: #7fd6c2; }
/* departed / landed / arrived late: colour by the shared delay level */
.fxk-rem.status-departed.lvl-late .fl, .fxk-rem.status-landed.lvl-late .fl { color: #ffd34d; }
.fxk-rem.status-departed.lvl-severe .fl, .fxk-rem.status-landed.lvl-severe .fl { color: #ff5a4d; }

.fxk-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 1em;
    padding: 1vh .3em; padding-bottom: max(1vh, env(safe-area-inset-bottom));
    border-top: 1px solid #1a2028;
    font-family: 'Share Tech Mono', monospace;
    font-size: calc(var(--fxk-fs) * .45); letter-spacing: .2em; color: #6b7682;
}
.fxk-pages { display: flex; gap: .5em; }
.fxk-pages span { width: .6em; height: .6em; border-radius: 50%; background: #2a323c; }
.fxk-pages span.on { background: var(--fxk-accent); box-shadow: 0 0 6px var(--fxk-accent); }

.fxk-hint {
    position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%);
    background: rgba(0,0,0,.75); border: 1px solid #333; border-radius: 4px;
    padding: 8px 14px; font-size: 12px; letter-spacing: 2px; color: #aaa;
    opacity: 0; transition: opacity .3s; pointer-events: none;
}
.fxk-exit-inline {
    display: none;
    background: rgba(255,255,255,.06); border: 1px solid #3a434d; border-radius: 4px;
    color: #cfd6dd; font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 2px;
    padding: 8px 12px; cursor: pointer; white-space: nowrap;
}
/* touch screens have no hover, so the exit button stays visible in the footer */
@media (hover: none), (pointer: coarse) {
    .fxk-exit-inline { display: inline-block; }
    .fxk-exit { display: none; }
    .fxk-ticker { flex: 1; text-align: right; }
}
.fxk-exit {
    position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 12px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,.7); border: 1px solid #444; color: #ccc; font-size: 18px; cursor: pointer;
    opacity: 0; transition: opacity .3s; pointer-events: none;
}
.fx-kiosk.fxk-awake .fxk-exit, .fx-kiosk.fxk-awake .fxk-hint { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
    .fl.fa, .fl.fb, .fxk-blink .fl, .fxk-blink .fl.fa, .fxk-blink .fl.fb { animation: none; }
}

/* ── airports layer and search ── */
.fx-chip.apt { border-color: #2a3f2a; color: #86efac; }
.fx-chip.apt.on { background: rgba(134,239,172,.12); border-color: #86efac; }
.fx-radar-search { position: relative; }
.fx-sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1200; background: rgba(12,18,24,.98); border: 1px solid #1d2a30; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.fx-sug-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; color: #ccd; border-bottom: 1px solid #0b1418; }
.fx-sug-row:hover { background: rgba(34,211,238,.08); }
.fx-sug-row b { color: #86efac; grid-row: 1 / 3; align-self: center; }
.fx-sug-row span { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-sug-row small { color: #789; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-apt { background: none; border: none; }
.fx-apt i { display: block; width: 8px; height: 8px; margin: 1px; border-radius: 50%; background: #86efac; border: 1.5px solid #05080c; box-shadow: 0 0 4px rgba(134,239,172,.7); }
.fx-apt-3 i { width: 10px; height: 10px; margin: 0; background: #4ade80; }
.fx-apt-1 i { width: 6px; height: 6px; margin: 2px; opacity: .8; }
.fx-apt span { position: absolute; left: 14px; top: -3px; font: 10px 'Share Tech Mono', monospace; letter-spacing: 1px; color: #bbf7d0; text-shadow: 0 0 3px #000, 0 0 3px #000; white-space: nowrap; pointer-events: none; }
.fx-apt-sel i { width: 14px; height: 14px; margin: -2px; background: #f43f5e; box-shadow: 0 0 0 5px rgba(244,63,94,.25); }
.fx-apt-sel span { left: 18px; font-size: 12px; color: #fff; }
.fx-apt-popup .leaflet-popup-content-wrapper { background: rgba(20,25,31,.97); color: #e6edf3; border: 1px solid #263240; border-radius: 10px; font-family: 'Share Tech Mono', monospace; }
.fx-apt-popup .leaflet-popup-tip { background: rgba(20,25,31,.97); }
.fx-apt-popup .leaflet-popup-content { margin: 9px 12px; font-size: 12px; line-height: 1.5; }
.fx-apt-pop b { font-size: 16px; color: #86efac; letter-spacing: 1px; }
.fx-apt-pop span { color: #789; }
.fx-apt-pop small { color: #9ab; font-size: 11px; }

/* during a replay only the replayed plane is on the map (the inline display of the category chips is overridden) */
#fx-radar-map.fx-pb-on .fx-ac:not(.fx-ac-pb) { display: none !important; }

/* ── altitude / speed profile in the sheet ── */
.fx-chart { margin: 6px 0 8px; }
.fx-chart.off { margin: 4px 0 6px; }
.fx-chart-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 1px; color: #789; }
.fx-chart-top i { font-style: normal; color: #567; }
.fx-chart-top b { font-weight: normal; color: #e6edf3; font-size: 11px; letter-spacing: .5px; }
.fx-chart-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid #1d2a30; border-radius: 3px; color: #9ab; font: 10px 'Share Tech Mono', monospace; letter-spacing: 1px; padding: 1px 6px; cursor: pointer; flex: none; }
.fx-chart-btn:hover { border-color: #0e5563; color: #e6edf3; }
.fx-chart-car { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 5px solid currentColor; font-style: normal; }
.fx-chart.off .fx-chart-car { border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; border-left: 5px solid currentColor; border-right: 0; }
.fx-chart.off .fx-chart-ax, .fx-chart.off .fx-chart-top b { display: none; }
.fx-chart svg { display: block; width: 100%; height: auto; max-height: 96px; touch-action: none; cursor: crosshair; font: 8px 'Share Tech Mono', monospace; fill: #6b7a88; }
.fx-chart.off svg { display: none; }
.fx-chart .fx-ch-grid { stroke: #1d2a30; stroke-width: .6; }
.fx-chart .fx-ch-spd { fill: none; stroke: #e6edf3; stroke-width: 1.1; stroke-linejoin: round; opacity: .85; vector-effect: non-scaling-stroke; }
.fx-chart .fx-ch-cur { stroke: #f43f5e; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.fx-chart .fx-ch-sp { fill: #9ab; }
/* ── departure queue ── */
.fx-q-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 10px 6px; }
.fx-q-tile { background: rgba(255,255,255,.03); border: 1px solid #1d2a30; border-radius: 8px; padding: 6px 4px; text-align: center; }
.fx-q-tile b { display: block; font-size: 17px; color: #fff; font-weight: normal; }
.fx-q-tile b small { color: #567; font-size: 12px; }
.fx-q-tile span { display: block; font-size: 8.5px; letter-spacing: .5px; color: #789; margin-top: 2px; line-height: 1.2; }
.fx-q-tile.warn { border-color: #6b3a12; background: rgba(251,146,60,.08); }
.fx-q-tile.warn b { color: #fb923c; }
.fx-q-late { color: #fb923c !important; }
.fd-chart-slot:empty { display: none; }
.fd-chart-slot .fx-chart { margin: 10px 0 4px; }