/* MFD shell: bezel, system menu, general menu bar, title bar, message area,
   page area, footer, cursor. All geometry in em; js/main.js sets the root
   font-size from the display height so the whole layout scales as one. */

#mfd-bezel {
  background: var(--bezel);
  padding: 9px;
  border-radius: 3px;
  width: fit-content;
}

.mfd {
  position: relative;
  width: 787px;
  height: 1016px;
  background: var(--scr-bg);
  color: var(--white);
  letter-spacing: var(--fms-tracking);
  line-height: 1.45;
  padding: 0.5em 0.6em;
  overflow: hidden;
  user-select: none;
  cursor: none;
  display: flex;
  flex-direction: column;
}

/* ---- top row: system menu + shared message area ---- */

/* The flight number sits above the shared message area in the top-right
   corner, so this row has to be tall enough for both lines. */
.mfd-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 2.5em;
  flex: none;
}

.sys-menu { position: relative; }

.sys-menu__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1px solid var(--edge);
  padding: 0 0.35em;
  color: var(--cyan);
  white-space: nowrap;
}

.sys-menu__button .caret { color: var(--muted); }

.sys-menu__list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  background: var(--btn-face);
  border: 1px solid var(--edge);
  min-width: 9em;
}

.sys-menu__item {
  padding: 0.15em 0.5em;
  color: var(--white);
  white-space: nowrap;
  border: 1px solid transparent;
}

.sys-menu__item[data-current="1"] { border-color: var(--cyan); }
.sys-menu__item[data-disabled="1"] { color: var(--muted); }
/* An open menu's entries take the cursor's cyan box like every other control.
   Both item classes already carry a transparent border, so boxing one shifts
   nothing. */
.sys-menu__item[data-focus="1"] { border-color: var(--cyan); }

.msg-area {
  text-align: right;
  min-height: 1.4em;
  white-space: pre-line;
  line-height: 1.15;
}

.msg-area .flt-nbr { color: var(--white); display: block; }
.msg-area .dashes  { letter-spacing: 0.3em; }

/* ---- general menu bar ---- */

.menu-bar {
  display: flex;
  gap: 0.25em;
  min-height: 1.75em;
  margin-top: 0.25em;
  flex: none;
}

/* Application bars can carry two-line entries (ATC COM's REPORT & MODIFY and
   MSG RECORD), which will not fit the single-line height at full size. */
.menu-bar--tabs .menu-bar__label { font-size: 0.8em; }

.menu-bar__menu {
  position: relative;
  flex: 1;
  background: var(--btn-face);
  border: 1px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  white-space: nowrap;
}

.menu-bar__label { padding: 0 0.2em; white-space: pre-line; text-align: center; line-height: 1.05; }

/* FCU BKUP: entries sized to their legends, left-aligned, with the row's spare
   width left empty. */
.menu-bar--compact { justify-content: flex-start; }
.menu-bar--compact .menu-bar__menu { flex: none; padding: 0 1.1em; }

/* the ATC COM EMER entry is amber-boxed (ATC COM page.png) */
.menu-bar__menu--emer .menu-bar__label { color: var(--amber); outline: 1px solid var(--amber); }
.menu-bar__menu--emer[data-active="1"] .menu-bar__label { outline-color: var(--amber); }
.menu-bar__menu[data-active="1"] .menu-bar__label { outline: 1px solid var(--white); }
.menu-bar__menu .caret { color: var(--muted); }

.menu-bar__list {
  position: absolute;
  top: 100%;
  left: -1px;
  z-index: 30;
  background: var(--btn-face);
  border: 1px solid var(--edge);
  min-width: calc(100% + 2px);
}

.menu-bar__item {
  padding: 0.15em 0.6em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.menu-bar__item[data-disabled="1"] { color: var(--muted); }
.menu-bar__item[data-focus="1"] { border-color: var(--cyan); }

/* ---- title bar ---- */

.title-bar {
  display: flex;
  gap: 0.25em;
  margin: 0.28em 0 0.4em;
  height: 1.5em;
  flex: none;
}

.title-bar__path {
  flex: 1;
  background: var(--titlebar-bg);
  color: var(--titlebar-fg);
  padding: 0 0.4em;
  display: flex;
  align-items: center;
}

.title-bar__flag {
  width: 5.4em;
  background: var(--titlebar-bg);
  color: var(--titlebar-fg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The ATC COM emergency page's title strip is amber end to end. */
.title-bar__path--emer { background: var(--amber); }

/* Must follow .title-bar__flag - it overrides that rule's background. */
.title-bar__flag--tmpy { background: var(--yellow); color: var(--titlebar-fg); }
/* EO: amber on a darker grey (FCOM DSC-22-FMS-20-20-10, EO LABEL); IF keeps
   the strip's own colours inside a box line. */
.title-bar__flag--eo { background: var(--bevel-mid); color: var(--amber); }
.title-bar__flag--if { box-shadow: inset 0 0 0 1px var(--titlebar-fg); }

/* ---- page area ---- */

/* The page area takes whatever is left between the title bar and the footer.
   It was absolutely positioned with a fixed `bottom`, which could not cope with
   a footer that grows - RETURN plus a page button row overlapped the panel. */
.page {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* positioning context for overlays such as the waypoint revisions menu */
  position: relative;
  display: flex;
  flex-direction: column;
}

.page__rule { border-top: 1px solid var(--edge); margin: 0.5em 0; }
.page__rule--tight { margin: 0.25em 0; }

.page__section { margin-bottom: 0.2em; }

/* labels never wrap - the MFD font is monospaced and the reference layout
   assumes every legend sits on one line */
.page span, .page .lbl, .btn, .field, .dropdown { white-space: nowrap; }
.btn { white-space: pre-line; }

/* generic label/field grid used by INIT and PERF */
.grid { display: grid; align-items: center; row-gap: 0.32em; }
.grid .lbl { text-align: right; padding-right: 0.6em; white-space: nowrap; }

/* ---- footer ---- */

.footer {
  flex: none;
  padding-top: 0.4em;
}

.footer__page-buttons {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 1.9em;
  margin-bottom: 0.3em;
}

.footer__msg {
  border-top: 1px solid var(--edge);
  padding-top: 0.3em;
  display: flex;
  /* the message box tops-aligns with the two-line CLEAR INFO button rather
     than stretching to its height */
  align-items: flex-start;
  gap: 0.4em;
}

/* An FMS message: inverse video beside CLEAR INFO, one text line tall with
   tight padding. Amber for something to act on (ALIGN IRS), white for
   something that only reports (COMPANY F-PLN RECEIVED, FPLN REQUEST 5.png). */
.fms-msg {
  background: var(--amber);
  color: var(--scr-bg);
  padding: 0.08em 0.4em;
  line-height: 1.25;
  white-space: pre-line;
}

.fms-msg--white { background: var(--white); }

/* ---- KCCU cursor ---- */

/* Above the modal layer - the cursor has to stay visible over a confirmation
   window, since that is exactly when it is being used to pick CONFIRM/CANCEL. */
.cursor {
  position: absolute;
  width: 3.4em;
  height: 3.4em;
  margin-left: -1.7em;
  margin-top: -1.7em;
  pointer-events: none;
  z-index: 60;
}

.cursor svg { width: 100%; height: 100%; }
.cursor path { stroke: var(--yellow); stroke-width: 1.6; fill: none; }

/* ---- confirmation / modal windows ---- */

.modal-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

/* `display: flex` above outranks the UA rule for [hidden], so without this the
   dismissed modal stays in the hit-test layer and eats every MFD click. */
.modal-layer[hidden] { display: none; }

.modal {
  background: var(--scr-bg);
  border: 1px solid var(--edge);
  padding: 0.9em 1.2em;
  text-align: center;
  max-width: 80%;
}

/* Entry windows such as NEW DEST sit over the page without dimming it, and
   their contents are left-aligned (FPLN MKG NEW DEST.png). */
.modal--window { text-align: left; padding: 1.1em 1.6em; min-width: 18em; }
.modal-layer:has(.modal--window) { background: none; }

.modal__msg { margin-bottom: 0.9em; white-space: pre-line; line-height: 1.5; }
.modal__buttons { display: flex; gap: 1.2em; justify-content: center; }

/* ---- flight phase strip ---- */

.phase-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.phase-strip__label { color: var(--muted); margin-right: 4px; }

.phase-btn {
  background: var(--btn-face);
  border: 1px solid var(--edge);
  color: var(--white);
  font: inherit;
  letter-spacing: inherit;
  padding: 4px 8px;
  cursor: pointer;
}

.phase-btn[data-active="1"] { border-color: var(--cyan); color: var(--cyan); }
.phase-btn:hover { background: var(--btn-face-hi); }

/* ---- touch devices ----
   There is no pointer to follow, so the yellow cursor and the cyan hover ring
   have nothing to track. Taps still dispatch clicks, so every control keeps
   working; the on-screen KCCU becomes the only way to type. */

@media (hover: none) {
  .mfd { cursor: auto; }
  .cursor { display: none; }
  .btn[data-focus="1"],
  .field[data-focus="1"],
  .dropdown[data-focus="1"] { border-color: var(--edge); }
  .cl-item[data-focus="1"],
  .fpln-disc[data-focus="1"],
  .menu-bar__item[data-focus="1"],
  .sys-menu__item[data-focus="1"] { border-color: transparent; }
  .phase-btn:hover { background: var(--btn-face); }
}

@media (max-width: 900px) {
  .phase-strip { justify-content: center; padding: 0 8px 8px; }
}

/* ---- nav database coverage ----

   A quiet line under the controls naming how many airports the loaded database
   covers, with the idents themselves behind a hover. At thirty-eight fields the
   full list wrapped to three lines and pushed the rig up the page; the count
   answers "can I fly this?" on its own, and the list is there when the answer
   is "which ones?". */
.navdb-note {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin-top: 2px;
  max-width: 100%;
  line-height: 1.6;
}

/* The hover target is inline so the line stays centred as a whole. */
.navdb-note__hover {
  position: relative;
  display: inline-block;
  cursor: default;
}

.navdb-note__label {
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}

.navdb-note__hover:hover .navdb-note__label,
.navdb-note__hover:focus-visible .navdb-note__label {
  color: var(--scr-fg);
}

.navdb-note__hover:focus-visible {
  outline: none;
}

/* The list opens UPWARD: this line is the last thing on the page, so anything
   dropped below it would be off-screen. */
.navdb-note__list {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: none;
  min-width: max-content;
  max-width: min(90vw, 640px);
  padding: 8px 12px;
  text-align: left;
  background: var(--scr-bg);
  border: 1px solid var(--muted);
  color: var(--scr-fg);
  line-height: 1.7;
}

.navdb-note__hover:hover .navdb-note__list,
.navdb-note__hover:focus-visible .navdb-note__list {
  display: block;
}

/* Region label and its idents on one row, the labels aligned in a column. */
.navdb-note__row {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.navdb-note__region {
  flex: none;
  width: 2.4em;
  color: var(--muted);
}

/* A touch screen has no hover, so the list would be unreachable. The count
   still says what matters, and the DATA/STATUS page carries the detail. */
@media (hover: none) {
  .navdb-note__label { border-bottom: none; }
  .navdb-note__list { display: none !important; }
}

/* ---- boot screen ----

   The nav database is a few megabytes and the FMS cannot do anything without
   it, so the MFD shows its own initialisation instead of an empty shell. It
   sits inside .mfd so it scales with the display like every other element,
   and it reports real progress: the loader streams the download and reports
   bytes, which matters because procedures.json alone is three quarters of it.

   Everything here is drawn in the MFD's own vocabulary - the screen green on
   black, the cyan of a live value, the same 1px boxes as the pages. */
.boot {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: var(--scr-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  letter-spacing: var(--fms-tracking);
}

.boot[hidden] { display: none; }

.boot__title { color: var(--white); letter-spacing: 0.18em; }
.boot__sub { color: var(--green); margin-top: -0.4em; }

/* The bar is a page box with a filled interior, like a field with a value. */
.boot__bar {
  width: 18em;
  height: 1.1em;
  border: 1px solid var(--edge);
  margin-top: 1.2em;
  padding: 2px;
}

.boot__fill {
  height: 100%;
  width: 0;
  background: var(--cyan);
  transition: width 0.15s linear;
}

.boot__status {
  width: 18em;
  display: flex;
  justify-content: space-between;
  color: var(--cyan);
}

.boot__note {
  color: var(--muted);
  margin-top: 1.4em;
  letter-spacing: 0.14em;
}

/* The scan line that says the display is alive rather than frozen. It runs
   whatever the download is doing, so a stalled fetch still looks powered. */
.boot__title::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 0.5em;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: boot-scan 1.6s ease-in-out infinite;
}

@keyframes boot-scan {
  0%, 100% { opacity: 0.15; transform: scaleX(0.3); }
  50% { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .boot__title::after { animation: none; opacity: 0.6; }
  .boot__fill { transition: none; }
}