/* RMP — the panel is display.png itself; only the screen and the click hotspots are live. */

:root {
  --white:#ffffff; --dim:#8996a0; --green:#12f611; --cyan:#2dd6d3; --amber:#f5990f;
  --screen-bg:#000000; --screen-line:#ffffff;
  --key-frame:#9dacb4; --key-text:#ffffff;
  --rmp-scale: 0.62;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: #2f3b41; color: #cfd6dc;
  font-family: Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column; align-items: center; padding: 24px 16px 60px;
}

.demo-disclaimer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .68);
  touch-action: none;
}
.demo-disclaimer-banner {
  position: absolute;
  top: calc(24px + 155px * var(--rmp-scale));
  left: 50%;
  width: calc(763px * var(--rmp-scale));
  height: calc(477px * var(--rmp-scale));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, calc(24px * var(--rmp-scale)), 18px);
  padding: clamp(3px, calc(28px * var(--rmp-scale)), 22px);
  border: clamp(1px, calc(3px * var(--rmp-scale)), 3px) solid #ffffff;
  background: #c8102e;
  color: #ffffff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  text-align: center;
}
.demo-disclaimer[hidden] { display: none; }
.demo-disclaimer-banner p {
  margin: 0;
  font-size: clamp(5px, calc(30px * var(--rmp-scale)), 24px);
  line-height: 1.25;
  font-weight: 700;
}
.demo-disclaimer-banner button {
  flex: none;
  padding: clamp(2px, calc(12px * var(--rmp-scale)), 11px) clamp(4px, calc(24px * var(--rmp-scale)), 20px);
  border: 2px solid #ffffff;
  border-radius: 5px;
  background: #ffffff;
  color: #a0001d;
  font: inherit;
  font-size: clamp(5px, calc(21px * var(--rmp-scale)), 18px);
  font-weight: 700;
  cursor: pointer;
}
.demo-disclaimer-banner button:hover,
.demo-disclaimer-banner button:focus-visible {
  background: #f2f2f2;
  outline: 3px solid rgba(255, 255, 255, .45);
  outline-offset: 2px;
}
.version-label {
  position: fixed;
  right: 16px;
  bottom: 12px;
  z-index: 20;
  color: #aeb9bf;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
  pointer-events: none;
}

.rmp-scaler {
  width: calc(1211px * var(--rmp-scale));
  height: calc(1417px * var(--rmp-scale));
  flex: none;
}
.rmp-unit {
  position: relative;
  width: 1211px;
  height: 1417px;
  transform: scale(var(--rmp-scale));
  transform-origin: top left;
  font-family: Helvetica, Arial, sans-serif;
  user-select: none;
}
.panel-art {
  position: absolute;
  inset: 0;
  width: 1211px;
  height: 1417px;
  display: block;
  pointer-events: none;
}

/* ---- live screen + hotspots: coordinates measured from display.png ---- */
.screen {
  position: absolute;
  left: 224px;
  top: 155px;
  width: 763px;
  height: 477px;
  background: var(--screen-bg);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.hs {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hs > * { display: none; }
.hs:hover { background: rgba(255,255,255,.10); }
.hs:active { background: rgba(255,255,255,.20); }
.hs.round, .hs.round-key, .hs.knob { border-radius: 50%; }

/* page access keys */
.access-key { top: 57px; width: 85px; height: 53px; }
.access-key[data-page="VHF"]{left:199px}
.access-key[data-page="HF"]{left:320px}
.access-key[data-page="TEL"]{left:442px}
.access-key[data-page="ATC"]{left:563px}
.access-key[data-page="blank"]{left:685px}
.access-key[data-page="MENU"]{left:806px}
.access-key[data-page="NAV"]{left:928px}
.access-key.active-page { box-shadow: none; }

/* line select keys */
.lsk { width: 53px; height: 86px; }
.lsk-col-left  { left: 124px; }
.lsk-col-right { left: 1034px; }
.lsk[data-lsk$="1"]{ top: 147px }
.lsk[data-lsk$="2"]{ top: 268px }
.lsk[data-lsk$="3"]{ top: 390px }
.lsk[data-lsk$="4"]{ top: 511px }

/* TCAS generic keys */
.tri-key { top: 678px; width: 86px; height: 53px; }
.tri-key[data-generic="display"]{ left: 394px }
.tri-key[data-generic="mode"]{ left: 520px }
.tri-key.dim-key { opacity: .5; }

/* numeric keypad */
.round-key { width: 80px; height: 81px; }
.round-key[data-num="1"]{left:652px;top:678px}
.round-key[data-num="2"]{left:765px;top:678px}
.round-key[data-num="3"]{left:878px;top:678px}
.round-key[data-num="4"]{left:652px;top:776px}
.round-key[data-num="5"]{left:765px;top:776px}
.round-key[data-num="6"]{left:878px;top:776px}
.round-key[data-num="7"]{left:652px;top:874px}
.round-key[data-num="8"]{left:765px;top:874px}
.round-key[data-num="9"]{left:878px;top:874px}
.round-key[data-dot]{left:652px;top:972px}
.round-key[data-num="0"]{left:765px;top:972px}
.round-key.clr{left:878px;top:972px}

/* scroll keys + NAV knob */
.rect-key { left: 992px; width: 80px; height: 79px; border-radius: 12px; }
.rect-key[data-scroll="up"]{ top: 680px }
.rect-key[data-scroll="down"]{ top: 778px }
.nav-knob { left: 992px; top: 972px; width: 82px; height: 82px; overflow: hidden; }
.nav-knob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("display.png") -992px -972px / 1211px 1417px no-repeat;
  transform: rotate(var(--nav-volume-rot, 0deg));
  pointer-events: none;
}

/* brightness / power knob */
.brt-knob-group { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.brt-knob { left: 172px; top: 681px; width: 118px; height: 118px; cursor: ew-resize; touch-action: none; }
/* the knob face is a circular crop of the panel photo that rotates in place,
   so the knob's own painted white line is the indicator */
.brt-knob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("display.png") no-repeat -172px -681px / 1211px 1417px;
  transform: rotate(var(--brt-rot, 0deg));
  pointer-events: none;
}
.brt-mark { display: none; }

/* transceiver keys */
.tx-key { width: 117px; height: 82px; }
.tx-key[data-tx="VHF1"]{left:117px;top:854px}
.tx-key[data-tx="VHF2"]{left:251px;top:854px}
.tx-key[data-tx="VHF3"]{left:384px;top:854px}
.tx-key[data-tx="HF1"]{left:147px;top:1107px}
.tx-key[data-tx="HF2"]{left:280px;top:1107px}
.tx-key[data-tx="TEL1"]{left:414px;top:1107px}
.tx-key[data-tx="TEL2"]{left:548px;top:1107px}
.tx-key[data-tx="INT"]{left:681px;top:1107px}
.tx-key[data-tx="CAB"]{left:815px;top:1107px}
.tx-key[data-tx="PA"]{left:948px;top:1107px}
.tx-key .bar { display: none; }
.tx-key.tx-active .bar {
  display: block;
  position: absolute;
  left: 31px;
  top: 10px;
  width: 48px;
  height: 22px;
  background-image: repeating-linear-gradient(to bottom, var(--green) 0 3px, transparent 3px 9.5px);
}
.tx-key.incoming-alert::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--amber), var(--amber)), url("display.png");
  background-repeat: no-repeat;
  background-size: 100% 100%, 1211px 1417px;
  background-blend-mode: multiply;
  clip-path: inset(40px 14px 8px 12px);
  pointer-events: none;
  animation: tx-selcal-label-flash 1s steps(1, end) infinite;
}
.tx-key[data-tx="HF1"].incoming-alert::after { background-position: 0 0, -147px -1107px; }
.tx-key[data-tx="HF2"].incoming-alert::after { background-position: 0 0, -280px -1107px; }
.tx-key[data-tx="TEL1"].incoming-alert::after { background-position: 0 0, -414px -1107px; }
.tx-key[data-tx="INT"].incoming-alert::after { background-position: 0 0, -681px -1107px; }
.tx-key[data-tx="CAB"].incoming-alert::after { background-position: 0 0, -815px -1107px; }
@keyframes tx-selcal-label-flash {
  0%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* reception knobs */
.rx-knob { width: 82px; height: 82px; overflow: hidden; }
.rx-knob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: url("display.png");
  background-repeat: no-repeat;
  background-position: var(--rx-bg-x) var(--rx-bg-y);
  background-size: 1211px 1417px;
  transform: rotate(var(--rx-volume-rot, 0deg));
  pointer-events: none;
}
.rx-knob[data-rx="VHF1"]{left:134px;top:979px;--rx-bg-x:-134px;--rx-bg-y:-979px}
.rx-knob[data-rx="VHF2"]{left:267px;top:979px;--rx-bg-x:-267px;--rx-bg-y:-979px}
.rx-knob[data-rx="VHF3"]{left:401px;top:979px;--rx-bg-x:-401px;--rx-bg-y:-979px}
.rx-knob[data-rx="HF1"]{left:163px;top:1232px;--rx-bg-x:-163px;--rx-bg-y:-1232px}
.rx-knob[data-rx="HF2"]{left:297px;top:1232px;--rx-bg-x:-297px;--rx-bg-y:-1232px}
.rx-knob[data-rx="TEL1"]{left:430px;top:1232px;--rx-bg-x:-430px;--rx-bg-y:-1232px}
.rx-knob[data-rx="TEL2"]{left:564px;top:1232px;--rx-bg-x:-564px;--rx-bg-y:-1232px}
.rx-knob[data-rx="INT"]{left:697px;top:1232px;--rx-bg-x:-697px;--rx-bg-y:-1232px}
.rx-knob[data-rx="CAB"]{left:831px;top:1232px;--rx-bg-x:-831px;--rx-bg-y:-1232px}
.rx-knob[data-rx="PA"]{left:964px;top:1232px;--rx-bg-x:-964px;--rx-bg-y:-1232px}
.rx-knob .lit, .nav-knob .lit { display: none; }
.rx-knob.rx-on .lit, .nav-knob.rx-on .lit {
  display: block;
  position: absolute;
  left: 16px;
  top: 16px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url("knob-lit.png") center/100% 100% no-repeat;
}
.rx-knob.rx-on .lit { z-index: 1; transform: rotate(var(--rx-volume-rot, 0deg)); }
.nav-knob.rx-on .lit { z-index: 1; transform: rotate(var(--nav-volume-rot, 0deg)); }
.knob.power-off { box-shadow: none; }

/* INT / RAD selector — drawn digitally so all three positions share one look:
   centre (spring rest), INT (lever tilted up), RAD (lever tilted down). */
.int-rad-switch { left: 532px; top: 840px; width: 92px; height: 148px; border-radius: 12px; }

.int-rad-switch .digi {
  display: block;
  position: absolute;
  left: 9px;
  top: 35px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #d9dee1 0%, #b7c0c5 55%, #7d878d 78%, #2a3033 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.35);
  pointer-events: none;
}

.int-rad-switch .digi::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 32%, #3a3f42 0%, #16191b 62%, #050606 100%);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.85), inset 0 -2px 3px rgba(255,255,255,.08);
}

/* the lever face — a flat bar that tilts up for INT and down for RAD */
.int-rad-switch .digi::after {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  top: 50%;
  height: 12px;
  margin-top: -6px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fbf8f0 0%, #ded8c8 55%, #9a9484 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
  transition: transform .1s ease-out, height .1s ease-out;
}

.int-rad-switch.pos-int .digi::after {
  height: 22px;
  margin-top: -18px;
  border-radius: 11px / 8px;
  background: linear-gradient(180deg, #fbf8f0 0%, #e6e0d0 34%, #6f6a5d 62%, #2b2823 100%);
  transform: scaleY(.92);
}
.int-rad-switch.pos-rad .digi::after {
  height: 22px;
  margin-top: -4px;
  border-radius: 11px / 8px;
  background: linear-gradient(0deg, #fbf8f0 0%, #e6e0d0 34%, #6f6a5d 62%, #2b2823 100%);
  transform: scaleY(.92);
}

/* ===== screen content ===== */

.row {
  display: grid;
  grid-template-columns: 1fr 0.62fr 1fr;
  align-items: center;
  height: 114px;
  border-bottom: 3px solid var(--screen-line);
  padding: 0 14px;
}
.row:last-child { border-bottom: none; }

.val {
  font-size: 62px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.val.white { color: var(--white); }
.val.green { color: var(--green); }
.val.cyan  { color: var(--cyan); }
.val.amber { color: var(--amber); }
.val.large { font-size: 62px; }

.stby-col .val { font-size: 44px; }

.id-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.id-badge {
  font-size: 34px;
  font-weight: 400;
  padding: 0 8px;
  border-radius: 2px;
  color: var(--white);
  line-height: 1.15;
}
.id-badge.tx { background: var(--green); color: #000; }
.id-badge.selcal-alert { animation: hf-selcal-flash 1s steps(1, end) infinite; }
.id-badge.tx.selcal-alert { animation-name: hf-selcal-tx-flash; }
@keyframes hf-selcal-flash {
  0%, 49.99% { background: var(--amber); color: #000; }
  50%, 100% { background: transparent; color: var(--white); }
}
@keyframes hf-selcal-tx-flash {
  0%, 49.99% { background: var(--amber); color: #000; }
  50%, 100% { background: var(--green); color: #000; }
}

.spk { width: 26px; height: 28px; position: relative; }
.spk::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 8px; height: 12px; background: var(--white);
}
.spk::after {
  content: ""; position: absolute; left: 8px; top: 0;
  width: 15px; height: 28px; background: var(--white);
  clip-path: polygon(0% 30%, 0% 70%, 100% 100%, 100% 0%);
}
.spk.crossed .cross { position: absolute; inset: 0; z-index: 2; animation: spk-flash 0.5s steps(1, end) 4; }
.spk.crossed .cross::before, .spk.crossed .cross::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 2px);
  height: 4px; background: var(--amber); box-shadow: 0 0 0 1.5px #000;
}
@keyframes spk-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.spk.crossed .cross::before { transform: rotate(35deg); }
.spk.crossed .cross::after  { transform: rotate(-35deg); }

.stby-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.stby-box {
  position: relative;
  width: 243px;
  border: 3px solid var(--cyan);
  border-radius: 3px;
  padding: 2px 8px 6px;
  text-align: center;
  line-height: 1.02;
}
.stby-box .val { color: var(--cyan); white-space: nowrap; }
.stby-box.invalid { border-color: var(--amber); }
.stby-box.selected { box-shadow: none; }
.stby-box.selected.invalid { box-shadow: 0 0 10px rgba(245,153,15,.7); }
.stby-scroll { position: absolute; left: 6px; top: 50%; transform: translateY(-58%); font-size: 20px; color: var(--cyan); line-height: .85; display: flex; flex-direction: column; }

/* unboxed standby matches the boxed geometry so the value never shifts vertically */
.stby-col > .val {
  display: block;
  box-sizing: border-box;
  width: 243px;
  border: 3px solid transparent;
  border-radius: 3px;
  padding: 2px 8px 0;
  text-align: center;
  line-height: 1.02;
}

.freq-tag {
  font-size: 22px;
  color: var(--white);
  min-height: 26px;
  line-height: 26px;
  text-align: center;
}
.freq-tag.amber { color: var(--amber); }
.freq-tag.small-tag { font-size: 18px; }

.row.vhf-row .active-freq-cell { align-self: start; margin-top: 16px; }
.row.vhf-row .id-col { align-self: start; padding-top: 14px; }
.row.vhf-row .stby-col { align-self: start; padding-top: 10px; }

.row-bottom {
  grid-template-columns: 162px 245px 131px 1fr;
  height: 132px;
  padding: 0;
}
.row-bottom > div {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-left: 3px solid var(--screen-line);
}
.row-bottom > .msg-cell { align-items: flex-start; padding-left: 12px; text-align: left; }
.row-bottom > div:first-child { border-left: none; }
.row-bottom > div:first-child > * { text-align: center; }
.row-bottom > div:first-child .cell-lbl,
.row-bottom > div:first-child .cell-val { width: 100%; text-align: center; }
.sqwk-box { align-items: center; text-align: center; }

.tcas-bracket {
  width: 120px;
  height: 10px;
  border: 2px solid var(--white);
  border-bottom: none;
  margin: 6px 0 6px;
}

.cell-lbl { font-size: 26px; color: var(--white); display: block; line-height: 1.1; }
.cell-val { font-size: 46px; font-weight: 400; line-height: 1.1; }
.cell-val.green { color: var(--green); }
.cell-val.amber { color: var(--amber); }
.cell-val.small { font-size: 22px; }
.cell-val.dim, .cell-lbl.dim, .dim { color: var(--dim) !important; }

.tcas-cell .cell-val {
  font-size: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  width: 100%;
  text-align: center;
}
.tcas-cell .cell-val > span { min-width: 0; }

.cyan { color: var(--cyan); }
.green { color: var(--green); }
.amber { color: var(--amber); }
.white { color: var(--white); }

.sqwk-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid var(--cyan);
  border-radius: 2px;
  padding: 2px 8px 4px;
  width: fit-content;
}

.screen.screen-off { background: #000; }
.page-msg { color: var(--amber); font-size: 26px; font-weight: 700; text-align: center; padding: 10px 8px; }
.small-note { color: var(--dim); font-size: 19px; font-style: italic; }
.assumed-digit { font-size: .65em; }
/* digits not yet typed into the squawk code show as amber underscores (DSC-23-45-10) */
.sq-blank { color: var(--amber); }

/* amber boxes stand in for digits not yet entered (DSC-34-10-30-30) */
.amber-box {
  display: inline-block;
  width: .52em;
  height: .78em;
  border: 2px solid var(--amber);
  vertical-align: -.06em;
  margin: 0 .04em;
}
/* HF standby: large characters until validated, small once validated */
.stby-col .val.validated { font-size: 34px; }
.nav-page-row { grid-template-columns: 1fr 1fr; align-items: center; }
.nav-page-row .atc-field { gap: 4px; }
.nav-page-row .cell-lbl { font-size: 22px; }
.nav-page-row .cell-val { font-size: 34px; }
.satcom-link, .directory-link, .conference-link, .return-link, .dial-end { color: var(--cyan); }


/* ===== HF page ===== */

.am-tag {
  font-size: 18px;
  font-weight: 700;
  color: var(--cyan);
  border: 2px solid var(--cyan);
  border-radius: 4px;
  padding: 0 6px;
  margin-left: 4px;
}
.hf-row .hf-slot-hidden { visibility: hidden; }

.hf-am-row {
  height: 114px;
  border-bottom: 3px solid var(--screen-line);
  grid-template-columns: 1fr auto;
  align-items: center;
}
.hf-am-row .am-func { align-items: flex-end; text-align: right; white-space: nowrap; }
.hf-am-row .am-func .cell-lbl { font-size: 24px; }
.hf-am-row .am-func .cell-val { font-size: 28px; gap: 10px; }

.am-func {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.am-func .cell-val {
  display: flex;
  gap: 16px;
  font-size: 30px;
}

/* ===== MENU / SATCOM ===== */

.menu-screen {
  padding: 20px 8px;
  flex: 1;
}
.menu-title {
  text-align: center;
  color: var(--white);
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 40px;
}
.menu-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.menu-selcal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-selcal .val {
  font-size: 48px;
}
.menu-satcom .cell-val {
  font-size: 30px;
}

.satcom-screen {
  padding: 12px 8px;
  height: 100%;
  font-size: 26px;
}
.satcom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  min-height: 40px;
}
.satcom-row.spacer {
  margin-top: 8px;
}
.satcom-title {
  text-align: center;
  color: var(--white);
  font-weight: 700;
}
.satcom-row .right { text-align: right; justify-self: end; }
.satcom-row .cell-val { font-size: 30px; font-weight: 700; }
.satcom-row .cell-lbl { font-size: 22px; }

/* ===== TEL / Directory / Conference ===== */

.tel-row {
  grid-template-columns: 110px minmax(0, 1fr) 390px;
  align-items: center;
}
.tel-row .id-col {
  flex-direction: row;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.tel-row .spk.off { visibility: hidden; }
.tel-scroll { font-size: 20px; color: var(--cyan); letter-spacing: 2px; line-height: 1; }
.tel-edit-number { display: flex; align-items: baseline; gap: 1ch; min-width: 0; }
.tel-row .cell-lbl { font-size: 20px; }
.tel-info {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: 4px 12px;
  border: 4px solid transparent;
  border-radius: 4px;
}
.tel-info .cell-val {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tel-info .tel-incoming-call { font-size: 36px; line-height: 1.15; }
.tel-info.selected {
  border-color: var(--cyan);
}
.tel-bottom {
  grid-template-columns: 1.3fr 1fr 1fr;
  min-height: 60px;
}
.tel-bottom .cell-val { font-size: 24px; font-weight: 700; }
.tel-bottom .cell-lbl { color: var(--green); font-size: 20px; text-align: center; }

.teldir-screen {
  padding: 8px 12px;
  height: 100%;
  font-size: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dir-row {
  color: var(--white);
  padding: 2px 0;
}
.dir-list-top, .dir-list-bottom {
  position: relative;
}
.dir-arrow {
  position: absolute;
  right: 120px;
  top: 0;
  color: var(--white);
}
.dir-row-selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.dir-row-selected .cell-val { font-size: 34px; font-weight: 700; }
.dir-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 4px solid var(--cyan);
  border-radius: 4px;
  padding: 2px 12px;
}
.dir-side .cell-lbl { font-size: 18px; color: var(--cyan); }
.dir-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-top: 2px solid var(--screen-line);
  padding-top: 6px;
}
.dir-bottom-row .cell-val { text-align: center; font-size: 24px; font-weight: 700; }

.conf-screen {
  padding: 20px 12px;
  height: 100%;
}
.conf-title {
  text-align: center;
  color: var(--white);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}
.conf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 26px;
}
.conf-row .cell-val { font-size: 26px; font-weight: 700; }

/* ===== ATC (DSC-34-20-10-20) / NAV (best-effort) ===== */

.atc-row {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.atc-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0 16px;
}
.atc-field.right {
  align-items: flex-end;
  text-align: right;
}
.atc-field .cell-val {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 28px;
}
.nav-row {
  justify-content: center;
  align-items: center;
  min-height: 120px;
}
.nav-status-big {
  font-size: 44px;
  margin: auto;
}
.msg-cell { justify-content: center; align-items: flex-start; text-align: left; }
.nav-cell, .msg-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 22px;
}
.nav-cell { display: flex; align-items: center; justify-content: center; }
.nav-cell .cell-val.nav-status {
  background: var(--green);
  color: #000;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 400;
  text-align: center;
  padding: 4px 12px;
  border-radius: 2px;
}

.msg-text {
  cursor: pointer;
  border-radius: 0;
  padding: 0;
  font-size: 26px;
  line-height: 1.2;
  text-align: left;
  font-weight: 400;
}
.msg-text.msg-grey { background: none; color: var(--white); }
.msg-text.msg-amber { color: var(--amber); font-weight: 700; }
.msg-text.msg-cyan { color: var(--cyan); font-weight: 700; }


/* ===== Debug panel ===== */

.debug-toggle {
  margin-top: 24px;
  width: calc(1211px * var(--rmp-scale));
  background: #1b2126;
  border: 1px solid #2a323a;
  color: #aeb8c1;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
}
.debug-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.debug-panel {
  display: none;
  margin-top: 12px;
  width: calc(1211px * var(--rmp-scale));
  background: #1b2126;
  border: 1px solid #2a323a;
  border-radius: 8px;
  padding: 14px 16px;
}
.debug-panel.open {
  display: block;
}
.debug-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.debug-grid button {
  background: #242424;
  border: 1px solid var(--key-frame);
  color: var(--key-text);
  border-radius: 6px;
  padding: 8px 6px;
  font-size: 11px;
  cursor: pointer;
}
.debug-grid button:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}


/* ===== RAD NAV / LS / VOR / ADF pages (DSC-34-10-30-30) ===== */
.nv-page { display: flex; flex-direction: column; height: 100%; font-family: Helvetica, Arial, sans-serif; }
.nv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 114px;
  padding: 0 14px;
  border-bottom: 3px solid var(--screen-line);
}
.nv-row.nv-row-3 { grid-template-columns: 1fr 0.8fr 1fr; }
.nv-title { position: absolute; left: 0; right: 0; text-align: center; color: var(--white); font-size: 30px; }
.nv-row:has(.nv-title):not(.sc-row) { position: relative; grid-template-columns: 1fr; justify-items: end; }
.sc-row { position: relative; }
.sc-row .nv-title { z-index: 0; }
.sc-row .sc-left, .sc-row .sc-right { position: relative; z-index: 1; }
.sc-head .nv-title { position: absolute; left: 0; right: 0; top: 10px; text-align: center; }
.nv-key { justify-self: end; color: var(--cyan); font-size: 30px; display: flex; align-items: center; gap: 8px; }
.nv-arrow { font-size: 22px; }
.nv-status { display: flex; align-items: center; gap: 14px; font-size: 30px; color: var(--white); }
.nv-rev { background: var(--cyan); color: #000; padding: 0 6px; }
.nv-off { color: var(--white); padding: 0 6px; }
.nv-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 10px; }
.nv-cell.right { align-items: center; }
.nv-cell.nv-boxed { border: 3px solid var(--cyan); border-radius: 2px; }
.nv-lbl { font-size: 24px; color: var(--white); display: flex; align-items: center; gap: 6px; }
.nv-val { font-size: 40px; color: var(--white); }
.nv-val.cyan { color: var(--cyan); }
.nv-val.amber { color: var(--amber); }
.nv-ident { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--white); font-size: 34px; flex-direction: row; }
.nv-ident .nv-green { color: var(--green); }
.nv-ident .nv-sub { font-size: 22px; }
.nv-ident:has(.nv-sub) { flex-direction: column; gap: 0; }
.nv-onoff { display: flex; align-items: center; gap: 10px; font-size: 30px; }
.nv-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 132px;
  padding: 0 14px;
}
.nv-foot-split { grid-template-columns: 220px 1fr; padding: 0; }
.nv-voice, .nv-audio {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
}
.nv-audio { border-left: 3px solid var(--screen-line); }
.nv-audio .nv-onoff { font-size: 26px; gap: 8px; }
.radnav-page .nv-lbl,
.radnav-page .nv-audio .nv-onoff { font-size: 30px; }
.radnav-page .nv-audio { align-items: flex-end; text-align: right; padding-right: 32px; min-width: 0; overflow: hidden; }
.radnav-page .nv-audio .nv-lbl,
.radnav-page .nv-audio .nv-onoff { width: 100%; max-width: 100%; min-width: 0; justify-content: flex-end; text-align: right; }
.radnav-page .nv-audio .nv-onoff { gap: 4px; }
.radnav-page .nv-audio .nv-onoff .nv-rev,
.radnav-page .nv-audio .nv-onoff .nv-off { padding-left: 3px; padding-right: 3px; }
.nv-return { color: var(--white); font-size: 30px; display: flex; align-items: center; gap: 6px; }
.nv-msg { justify-self: end; text-align: right; }
.nv-spk { width: 22px; height: 24px; }

/* reverse-video selection, as the FCOM page illustrations show it */
.rev-cyan { background: var(--cyan); color: #000; padding: 0 6px; }
.rev-amber { background: var(--amber); color: #000; padding: 0 6px; }
.rev-grey { background: #6d6d6d; color: var(--white); padding: 0 6px; }
/* selection box drawn as border only: selection is active but forced by another
   condition (XPDR in STBY, ALT RPTG not activated) - DSC-34-20-60-20 P4-5/12 */
.box-cyan { border: 1px solid var(--cyan); color: var(--cyan); padding: 0 5px; }
.box-amber { border: 1px solid var(--amber); color: var(--amber); padding: 0 5px; }

/* MENU page (DSC-23-45-10): no row separators, SELCAL block left, SATCOM key right */
.nv-row-plain { border-bottom: none; }
.nv-key-white { color: var(--white); }
/* MENU page: SATCOM prompt on the LSK 2R line (key centre y=311 abs, screen top=155);
   SELCAL centred vertically in the screen and horizontally under the HF key (centre x=362.5 abs). */
.mn-page { position: relative; }
.mn-satcom { position: absolute; right: 18px; top: 156px; transform: translateY(-50%); }
.mn-selcal {
  position: absolute;
  left: 138px;
  top: 238px;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mn-selcal .nv-lbl { font-size: 22px; }
.mn-selcal .nv-val { font-size: 40px; }

/* SATCOM SETTINGS / TEL pages: prompts sit on the line of their LSK */
.sc-row { grid-template-columns: 1fr 1fr; align-items: center; }
.sc-head { align-items: start; padding-top: 10px; }
.sc-row .sc-left, .sc-row .sc-right { min-width: 0; }
.sc-row .sc-right { justify-self: end; }
.nv-cmd, .sc-row .nv-lbl { white-space: nowrap; }
.sc-left, .sc-right { display: flex; flex-direction: column; gap: 2px; }
.sc-left { align-items: flex-start; text-align: left; }
.sc-right { align-items: flex-end; text-align: right; }
.nv-cmd { font-size: 28px; color: var(--cyan); }
.nv-stat { font-size: 28px; color: var(--green); white-space: nowrap; }
.nv-stat.white { color: var(--white); }
.sc-row .nv-lbl { font-size: 24px; }
.sc-row .nv-onoff { font-size: 28px; }

.tel-bottom { grid-template-columns: 1fr 1fr; height: 114px; align-items: center; }
.tb-left { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.tel-bottom .directory-link { justify-self: end; text-align: right; }
.tel-bottom .cell-val { font-size: 28px; }
.tel-bottom .cell-lbl { font-size: 22px; }

/* TEL DIRECTORY: number list left, LIST NB / TEL1-2 / RETURN on lines 1-3 right */
.dir-grid { display: grid; grid-template-columns: 1fr 210px; height: 342px; border-bottom: 3px solid var(--screen-line); }
.dir-list { display: grid; grid-template-rows: 114px 114px 114px; padding-left: 14px; }
.dir-block { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.dir-block.above { justify-content: flex-end; }
.dir-block.below { justify-content: flex-start; }
.dir-row { color: var(--white); font-size: 26.4px; line-height: 1.28; padding-left: 1ch; }
.dir-arrow { position: absolute; right: 14px; color: var(--white); font-size: 40px; line-height: 1; font-weight: 700; }
.dir-block.above .dir-arrow { top: 2px; }
.dir-block.below .dir-arrow { bottom: 2px; }
.dir-sel { place-self: center start; width: 100%; box-sizing: border-box; color: var(--cyan); font-size: 37.4px; display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 3px solid var(--screen-line); border-bottom: 3px solid var(--screen-line); transform: translateY(-15px); }
.dir-side-col { display: grid; grid-template-rows: 114px 114px 114px; border-left: 3px solid var(--screen-line); }
.dir-cell { display: flex; align-items: center; justify-content: center; }
.dir-cell + .dir-cell { border-top: 3px solid var(--screen-line); }
.dir-cell .nv-onoff { font-size: 26px; }
.dir-cell .nv-return { font-size: 26px; }

/* NAV audio cue sits on the top line of the common area, as on the real RMP */
.msg-cell { justify-content: flex-start !important; padding-top: 8px; }
.msg-cell .nv-lbl { font-size: 24px; flex-direction: row; align-items: center; gap: 6px; }