/* PPS Flap Nav — split-flap departure board */
.pfn{
  --navy:#141b4d; --accent:#f0a94a; --paper:#fbfaf7; --muted:#a3a7c9;
  --flap-t:#212a66; --flap-b:#1b235a;
  --pad:clamp(20px,5vw,80px);
  --cw:min(54px,calc((100vw - var(--pad)*2) / (var(--n)*1.1 + 3)));
  --cs:calc(var(--cw)*1.1);
  --gap:calc(var(--cw)*1);
  box-sizing:border-box; width:100%; min-height:100vh; min-height:100dvh;
  padding:var(--pad); background:var(--navy); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:calc(var(--cw)*.7);
  font-family:'Archivo',sans-serif;
}
.pfn *{box-sizing:border-box}
.pfn__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:calc(var(--cw)*.5); border-bottom:1px solid rgba(251,250,247,.14)}
.pfn__board-id{display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--cw)*.5)}
.pfn__title,.pfn__clock{--k:.62}
.pfn a.pfn__logo{display:block; flex:none; line-height:0; box-shadow:none; margin:calc(var(--cw)*-1.2) 0 calc(var(--cw)*.5)}
.pfn__logo img{display:block; height:clamp(44px,4.4vw,68px); width:auto}
.pfn__social{list-style:none; margin:calc(var(--cw)*.3) 0 0; padding:0; display:flex; gap:18px; align-items:center}
.pfn__social li{margin:0; padding:0}
.pfn__social a{display:flex; width:24px; height:24px; color:var(--paper); opacity:.85; transition:color .2s ease,opacity .2s ease}
.pfn__social a:hover,.pfn__social a:focus-visible{color:var(--accent); opacity:1}
.pfn__social svg{width:100%; height:100%; fill:currentColor}
.pfn__clock .pfn__c{color:var(--accent)}
.pfn__title .pfn__h,.pfn__clock .pfn__h{background:none}
.pfn__title .pfn__c::after,.pfn__clock .pfn__c::after{display:none}
.pfn__cols,.pfn__row{display:grid; grid-template-columns:calc(var(--wd)*var(--cs)) calc(4*var(--cs)) calc(2*var(--cs)) minmax(0,1fr); column-gap:var(--gap); align-items:center}
.pfn__cols{font:500 clamp(11px,.85vw,13px)/1 'IBM Plex Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.pfn__rows{display:flex; flex-direction:column}
.pfn a.pfn__row,.pfn a.pfn__row:hover,.pfn a.pfn__row:focus{color:var(--paper); text-decoration:none; box-shadow:none; background:none}
.pfn__row{padding:calc(var(--cw)*.28) 0; border-bottom:1px solid rgba(251,250,247,.08); outline:none}
.pfn__row:hover .pfn__dest .pfn__c,.pfn__row:focus-visible .pfn__dest .pfn__c{color:var(--accent)}
.pfn__row.is-current .pfn__status .pfn__c{color:var(--accent)}
.pfn__row:focus-visible{outline:2px solid var(--accent); outline-offset:4px}

/* Field + cell */
.pfn__f{display:flex; gap:calc(var(--cw)*var(--k,1)*.1)}
.pfn__c{
  --s:calc(var(--cw)*var(--k,1));
  position:relative; flex:none; width:var(--s); height:calc(var(--s)*1.38);
  perspective:calc(var(--s)*8);
  font:500 calc(var(--s)*1.02)/1 'IBM Plex Mono',monospace; color:var(--paper);
  transition:color .2s ease;
}
.pfn__h{position:absolute; left:0; right:0; height:50%; overflow:hidden; backface-visibility:hidden}
.pfn__h>span{position:absolute; left:0; right:0; height:200%; display:flex; align-items:center; justify-content:center}
.pfn__h.t,.pfn__h.ft{top:0; background:var(--flap-t); border-radius:3px 3px 0 0; transform-origin:50% 100%}
.pfn__h.b,.pfn__h.fb{bottom:0; background:var(--flap-b); border-radius:0 0 3px 3px; transform-origin:50% 0}
.pfn__h.t>span,.pfn__h.ft>span{top:0}
.pfn__h.b>span,.pfn__h.fb>span{bottom:0}
.pfn__h.ft,.pfn__h.fb{z-index:2}
.pfn__h.fb{transform:rotateX(90deg)}
.pfn__c::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; margin-top:-.5px; background:rgba(8,11,36,.7); z-index:3}

/* Elementor popup: no padding around the board */
.elementor-popup-modal .elementor-widget-shortcode:has(.pfn),.elementor-popup-modal .elementor-widget-shortcode:has(.pfn) .elementor-widget-container{padding:0; margin:0}

/* Phones: destination only, remarks as small flaps below */
@media (max-width:767px){
  .pfn{--pad:20px; --cw:min(40px,calc((100vw - 40px) / (var(--wd)*1.1)))}
  .pfn__cols,.pfn__code,.pfn__gate{display:none}
  .pfn__row{grid-template-columns:minmax(0,1fr); row-gap:8px; padding:calc(var(--cw)*.35) 0}
  .pfn__status{--k:.42}
  .pfn__title,.pfn__clock{--k:.55}
  .pfn__logo img{height:38px}
  .pfn a.pfn__logo{margin:-12px 0 10px}
  .pfn__social{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.pfn__c{transition:none}}