/* Reusable MFD widgets: buttons, entry fields, dropdowns, tab panels,
   checklist rows. Everything is em-relative so it scales with the display. */

/* ---- button ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--btn-face);
  border: 1px solid var(--edge);
  color: var(--white);
  padding: 0.05em 0.3em;
  line-height: 1.2;
  white-space: pre-line;
  min-height: 1.5em;
  /* button legends are set slightly tighter than page text, which is what
     lets a 12-character label such as ALTN RTE SEL fit its 8.2em box */
  letter-spacing: 0.01em;
}

.btn[data-disabled="1"] { color: var(--muted); border-color: #6B6B6B; }

/* the cursor-focus ring - cyan, per FCOM p.1117 */
.btn[data-focus="1"],
.field[data-focus="1"],
.dropdown[data-focus="1"] { border-color: var(--cyan); }

.btn .confirm-mark { margin-left: 0.45em; }

/* ---- entry field ---- */

.field {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  border: 1px solid var(--edge);
  padding: 0 0.3em;
  min-height: 1.4em;
  color: var(--cyan);
  white-space: nowrap;
}

/* The AFS CP altitude reads against the right edge of its box
   (FCU BACKUP - AFS CP ON 2.png). */
.field--right { justify-content: flex-end; }

/* A note reads from the left edge of the NOTE PAD's field, like text rather
   than like a value (FCOM DSC-31-CDS-70 figures). */
.field--left { justify-content: flex-start; }

.field[data-state="empty-mandatory"] { color: var(--amber); letter-spacing: 0.14em; }
.field[data-state="empty-optional"]  { color: var(--muted); letter-spacing: 0.14em; }
/* A locked field is grey-FACED, not merely dimmed: CRZ TEMP and TRIP WIND
   sit on the button colour while TROPO beside them stays dark
   (INIT page after departure and destination airports.png). */
.field[data-state="locked"] {
  color: var(--muted);
  border-color: #6B6B6B;
  background: var(--btn-face);
}
.field[data-editing="1"]             { border-color: var(--cyan); color: var(--cyan); }

/* Unit suffixes are blue wherever they appear, not only inside a field or a
   readout - the DEPARTURE and ARRIVAL panels put them in plain cells. */
.unit { color: var(--blue); margin-left: 0.15em; }
.unit--prefix { margin-left: 0; margin-right: 0.5em; }
.field .caret { color: var(--cyan); }

/* value shown without a box (green computed readouts) */
.ro    { color: var(--green); }
/* a label the FMS raises: the IR ALIGNMENT line while the units align */
.amber { color: var(--amber); }
.dash  { color: var(--muted); }

/* ---- dropdown ---- */

.dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  border: 1px solid var(--edge);
  padding: 0 0.3em;
  min-height: 1.4em;
  color: var(--cyan);
  white-space: nowrap;
}

.dropdown[data-disabled="1"] { color: var(--muted); border-color: #6B6B6B; }
.dropdown .caret { color: var(--muted); }

/* The value sits CENTRED in the box with the caret pinned to the right edge,
   which is how every option list in the FCOM's MFD figures is drawn - ECON on
   ACTIVE/INIT, ON and OFF in the PACKS and ANTI-ICE lists on PERF T.O
   (DSC-22-FMS-20-20-20). The box was laid out as value-left / caret-right,
   which reads as a label with a caret after it rather than as a selection. */
.dropdown > span:first-child {
  flex: 1;
  text-align: center;
}

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

  /* Long lists scroll rather than running off the bottom of the page. Most
     dropdowns hold a handful of options, but the widened nav database brought
     fields whose SID lists are enormous - LFPG offers 157 departures from a
     single runway, LFPO 73 - and those spilled 148 items past the page edge.
     The aircraft pages such a list; scrolling it is the trainer's equivalent,
     and short lists are untouched because the cap is a maximum, not a height. */
  max-height: 22em;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dropdown__item { padding: 0.1em 0.5em; border: 1px solid transparent; }
.dropdown__item[data-current="1"] { border-color: var(--cyan); }
/* Hovering an option boxes it in cyan the same way every other control is
   boxed - INSERT ✱ under RECEIVED CPNY F-PLN in FPLN REQUEST 4.png. */
.dropdown__item[data-focus="1"] { border-color: var(--cyan); }

/* ---- two-state stacked toggle (SURV CONTROLS) ---- */

.toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--edge);
  min-width: 4.4em;
  line-height: 1.25;
}

.toggle__opt { color: var(--muted); padding: 0 0.4em; }
.toggle__opt[data-selected="1"] { color: var(--white); }
.toggle__opt[data-tone="green"] { color: var(--green); }
.toggle__opt[data-tone="cyan"]  { color: var(--cyan); }
.toggle[data-disabled="1"] { border-color: #6B6B6B; }
.toggle[data-focus="1"] { border-color: var(--cyan); }

/* POSITION/MONITOR and POSITION/NAVAIDS both grew controls the FCOM lists but
   the trainer had not drawn - the frozen-data label and the two LS
   deselections - and both pages were already close to full. They run a little
   tighter than the page default so every state fits, the way SURV CONTROLS
   does below. */
.pos-tight { line-height: 1.2; }
.pos-tight .page__rule { margin: 0.3em 0; }

/* SURV CONTROLS packs four sections into the page area, and GAIN MAN and
   ELEVN/TILT each reveal an extra entry field, so it runs tighter than the page
   default to stay inside the page area in every state. Tighter again since
   every two-state control became a two-ROW stacked toggle: the WXR and XPDR
   blocks each grew a line, and ELEVN/TILT with a value showing was the state
   that ran over the bottom edge. */
.surv-controls { line-height: 1.15; }
.surv-controls .page__rule { margin: 0.12em 0; }

/* the small linking arrows the snapshot draws under G/S MODE and FLAP MODE */
.toggle-link {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--muted);
  margin: 0 1.2em;
  color: var(--muted);
  font-size: 0.8em;
  line-height: 1;
}

/* ---- radio (TOGA / FLEX) ---- */

.radio { display: inline-flex; align-items: center; gap: 0.5em; }
.radio__dot {
  width: 0.75em; height: 0.75em; border-radius: 50%;
  border: 1px solid var(--edge);
}
.radio[data-selected="1"] .radio__dot { background: var(--cyan); border-color: var(--cyan); }

/* yellow radios on a temporary-flight-plan page */
.radio--tmpy { color: var(--yellow); }
.radio--tmpy .radio__dot { border-color: var(--yellow); }
.radio--tmpy[data-selected="1"] .radio__dot { background: var(--yellow); border-color: var(--yellow); }

/* The STD / QNH pair on the EFIS CP page fills its dot green, not cyan
   (FCU BACKUP - EFIS CP ON.png). On SURV CONTROLS the legend goes green with
   it, which is how that page's figure draws its selected options. */
.radio--green[data-selected="1"] .radio__dot {
  background: var(--green);
  border-color: var(--green);
}

.radio--green[data-selected="1"] { color: var(--green); }

.radio--dim { color: var(--muted); }
.radio--dim .radio__dot { border-color: var(--muted); }
.radio--dim[data-selected="1"] .radio__dot { background: var(--muted); border-color: var(--muted); }

/* ---- tab panel (STATUS, PERF) ---- */

/* ---- notched tab strip ----

   Geometry and colours come from fs2024 snapshot/MENU TAB STYLE - *.png; the
   polygons themselves are built in js/core/widgets.js. `.tab__shape` paints the
   outline, its ::after paints the fill 1px inside, `.tab__ring` is the hover
   box, and `.tab` is the label and hit area sitting over its own slot.

   The shapes are emitted in reverse order so the leftmost paints on top, with
   the selected tab lifted above them all - see tabPolygon() for why the tabs
   overlap at all. */

/* The strip is 0.12em taller than an unselected tab, and the selected tab uses
   that extra height to sit proud of its neighbours. The raise is done by
   pushing the unselected tabs DOWN rather than the selected one up: `.page`
   clips its overflow, so anything positioned above the strip loses its top
   border. */
.tabs {
  position: relative;
  height: 2em;
  flex: none;
}

.tab__shape {
  position: absolute;
  inset: 0.12em 0 0;
  background: var(--white);
  clip-path: var(--poly);
  pointer-events: none;
}

/* The fill, clipped to its own 1px-smaller quad so the shape colour shows
   through as an even border on every edge. Shrinking this element's BOX
   instead would rescale the percentage coordinates and pinch the border to
   nothing mid-strip - see tabPolygon(). */
.tab__shape::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--btn-face);
  clip-path: var(--poly-fill);
}

/* The selected tab is raised, unfilled, and open at the bottom: pulling its
   fill 1px past the bottom edge erases the line so it runs into the panel
   (tabPolygon's `openBottom`).

   It also paints above BOTH neighbours, so its own two diagonals show in full
   and theirs are the ones that get covered. Only paint order does this - its
   polygon is the same trapezoid as every other tab, which is what keeps it
   from biting into the neighbouring fill. */
.tab__shape[data-active="1"] {
  top: 0;
  z-index: 1;
}

.tab__shape[data-active="1"]::after { background: var(--scr-bg); }

.tab {
  position: absolute;
  top: 0.12em;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* labels are not dimmed on inactive tabs - every one measures the same */
  color: var(--white);
  z-index: 3;
}

.tab[data-active="1"] { top: 0; }
.tab__label--phase { color: var(--green); }

/* Hovering any tab, selected or not, boxes it in cyan. The ring is an
   axis-aligned rectangle inset inside the tab, NOT an outline following the
   slant - measured off the reference, its vertical edges hold a constant x
   while the tab's own borders lean away from them. It is a sibling of the
   shapes rather than a child, so the shape's clip-path cannot crop it, and
   the cursor reveals it by mirroring focus from the hit area (data-focus-pair). */
.tab__ring {
  position: absolute;
  top: 0.18em;
  bottom: 0.06em;
  border: 1px solid var(--cyan);
  display: none;
  pointer-events: none;
  z-index: 2;
}

.tab__ring[data-active="1"] { top: 0.06em; }
.tab__ring[data-focus="1"] { display: block; }

.tab-panel {
  border: 1px solid var(--edge);
  border-top: none;
  padding: 0.6em 0.5em;
  position: relative;
  flex: 1;
  min-height: 0;
}

/* a panel that should fill the remaining page height (C/L lists, ROUTE) */
.panel--fill { flex: 1; min-height: 0; }

/* ---- outlined panel with an inset caption (OTHER ALTN style) ---- */

.panel { border: 1px solid var(--edge); padding: 0.5em; position: relative; }
.panel__title {
  position: absolute; top: -0.75em; left: 0.8em;
  background: var(--scr-bg); padding: 0 0.4em;
}

/* ---- checklist rows ---- */

.cl-list { padding: 0.15em 0.1em; }

/* An outstanding item is CYAN - the colour the MFD uses for anything the crew
   has still to act on - and turns green once it is ticked. It was white, which
   read as a plain caption rather than something waiting to be done. */
.cl-item {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  color: var(--cyan);
  line-height: 1.85;
  /* room for the focus box so hovering does not shift the row */
  padding: 0 0.3em;
  border: 1px solid transparent;
}

/* The base box, also borrowed by POSITION/TIME's markers, which pass their own
   border colour. */
.cl-box {
  flex: none;
  position: relative;
  width: 0.95em;
  height: 0.95em;
  background: var(--scr-bg);
  border: 1px solid #20242a;
  align-self: center;
}

/* On a checklist the box is BEVELLED, not a flat outline: dark on the top and
   left, white on the bottom and right, as though lit from below right, so it
   reads as a recessed switch guard. Two pixels, because at MFD scale a single
   one loses the two-tone edge.

   This supersedes the near-black flat box taken from CL-checklist style.png,
   where it is barely discernible until the row is ringed in cyan. Legible
   without hovering is the point - which items are still open should be
   readable at a glance. Scoped to .cl-item so POSITION/TIME's marker squares,
   which reuse .cl-box with an inline border colour, keep their 1px flat box. */
.cl-item .cl-box {
  border: 2px solid #20242a;
  border-bottom-color: var(--white);
  border-right-color: var(--white);
}

/* Ticking an item does NOT recolour the box - the bevel is constant and the
   tick plus the green row text carry the state. Painting the border green here
   set all four sides at once, which flattened the bevel the moment an item was
   checked. */
.cl-item[data-checked="1"] { color: var(--green); }
.cl-item[data-checked="1"] .cl-box::after {
  content: '';
  position: absolute;
  left: 0.12em;
  top: 0.02em;
  width: 0.5em;
  height: 0.26em;
  border-left: 1.5px solid var(--green);
  border-bottom: 1.5px solid var(--green);
  transform: rotate(-45deg);
}

/* Hovering boxes the whole row, not just the checkbox. */
.cl-item[data-focus="1"] { border-color: var(--cyan); }

/* min-width:0 lets the dot leader shrink below its content width; without it
   the 80-dot filler pushes the right-hand action text out of the row. */
.cl-item__text { flex: 1; min-width: 0; display: flex; align-items: baseline; }
.cl-item__leader {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 0.3em;
}
.cl-item__action { flex: none; white-space: pre; }

/* A sensed item has no checkbox - the FMS ticks it - but it still carries a dot
   leader, so it needs the same flex row as an entered item. */
.cl-detected {
  color: var(--green);
  padding: 0 0.3em 0 1.75em;
  line-height: 1.85;
  display: flex;
  align-items: baseline;
  border: 1px solid transparent;
}

.cl-subhead {
  padding-left: 1.45em;
  line-height: 1.85;
  text-decoration: underline;
  color: var(--white);
}

.cl-menu-item {
  color: var(--cyan);
  line-height: 1.9;
  padding-left: 1.2em;
  border: 1px solid transparent;
  display: block;
}

/* An indented entry is a situational checklist branching off the one above it
   (DEPARTURE CHANGE under TAXI), and reads white rather than cyan. */
.cl-menu-item[data-indent="1"] { padding-left: 3.2em; color: var(--white); }
/* completed - dimmed, not green (fs2024 snapshot/CL-main menu.png) */
.cl-menu-item[data-done="1"]   { color: var(--muted); }
.cl-menu-item[data-focus="1"]  { border-color: var(--cyan); }

/* ---- F-PLN ---- */

.fpln-head {
  border-bottom: 1px solid var(--edge);
  padding-bottom: 0.15em;
  align-items: center;
}

.fpln-head__sel {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--btn-face);
  border: 1px solid var(--edge);
  padding: 0 0.3em;
}

.fpln-list { margin-top: 0.25em; }

/* Row heights are set so nine waypoint/leg pairs fill the page area, matching
   the spacing in the snapshots.

   The leg row must keep the page font-size: its grid columns are in em, so
   shrinking the row shrank its whole grid and pulled TRK/DIST out from under
   their headers. Only the via label and the note are set smaller. */
/* Row pitch measured off FPLN REQUEST 7.png: nine slots span 340 of the
   MFD's 640px, one slot = 2.54em. The first cut of these values (1.5 + 1.4)
   was 7% taller, which fit until a pending TMPY grew the footer by the
   UNDO / INSERT TMPY row and pushed a full nine-waypoint page off the end. */
.fpln-leg, .fpln-wpt { align-items: center; line-height: 1.1; }
.fpln-wpt { min-height: 1.30em; }
.fpln-leg { min-height: 1.20em; }
.fpln-via, .fpln-note { font-size: 0.82em; }
.fpln-via { padding-left: 1.6em; }
.fpln-ident { white-space: nowrap; }

/* speed and altitude constraints */
.constraint { color: var(--magenta); }

/* The TO waypoint, the active leg and every row of a SEC F-PLN draw their data
   white (FCOM DSC-22-FMS-20-20-20, F-PLN page, COLORS). */
.fpln-white { color: var(--white); }

/* A pending revision draws the whole plan yellow (FPLN temporary page.png). */
.fpln-tmpy { color: var(--yellow); }
.fpln-wpt--tmpy .fpln-track::before,
.fpln-leg--tmpy .fpln-track::before,
.fpln-leg--tmpy .fpln-track--tick::after { background: var(--yellow); }
.fpln-wpt--tmpy .fpln-track--wpt::after { color: var(--yellow); }
.fpln-leg--tmpy .fpln-via, .fpln-leg--tmpy .fpln-note,
.fpln-leg--tmpy .fpln-hold__spd-label { color: var(--yellow); }

/* missed-approach legs, cyan rather than green (FPLN page 4.png, 5.png) */
.fpln-missed { color: var(--cyan); }
.fpln-wpt--missed .fpln-track::before,
.fpln-leg--missed .fpln-track::before,
.fpln-leg--missed .fpln-track--tick::after { background: var(--cyan); }
.fpln-wpt--missed .fpln-track--wpt::after { color: var(--cyan); }

/* Each waypoint cell is its own click target and shows a cyan box when the
   cursor is over it (FPLN hover MKG NAME/TIME/SPD/ALT.png). */
.fpln-cell {
  border: 1px solid transparent;
  padding: 0 0.15em;
}
.fpln-cell[data-focus="1"] { border-color: var(--cyan); }

/* Waypoint revisions menu, overlaid on the flight plan list. */
/* Sixteen entries have to fit the ~28em page area, so the rows run tight. */
.wpt-menu {
  position: absolute;
  left: 5.4em;
  top: 0.6em;
  z-index: 30;
  background: var(--btn-face);
  border: 1px solid var(--edge);
  padding: 0.15em 0;
  min-width: 13em;
  line-height: 1.15;

  /* Sixteen spaced rows fit a full-height display with room over, but not a
     375 px one. Rather than squeeze the spacing back out for every display to
     suit the shortest, the menu scrolls when it runs out of page - the same
     answer the long option lists use. */
  max-height: calc(100% - 0.6em);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wpt-menu__item {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  /* The rows are spaced, not packed: in the FCOM's waypoint-revisions figure
     the pitch runs about a quarter more than the text height. They used to be
     squeezed to 0.06em so all sixteen would fit the page area; at this line
     height they still do, with room over. */
  padding: 0.2em 0.7em;
  border: 1px solid transparent;
  white-space: nowrap;
}

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

/* The DISCONTINUITY rule stays white while the rest of a TMPY is yellow.

   It is a click target like any waypoint cell - it opens the revisions menu
   (FCOM DSC-22-FMS-20-20-20, SPECIAL FLIGHT PLAN LABELS) - so it takes the
   same cyan box under the cursor. The border is always there and transparent
   until then, so boxing it does not shift the row. */
.fpln-disc {
  color: var(--white);
  border: 1px solid transparent;
}

.fpln-disc[data-focus="1"] { border-color: var(--cyan); }

.fpln-end {
  text-align: center;
  letter-spacing: 0.2em;
  padding: 0.42em 0;
}

/* The vertical track down the right of the list, with a diamond at every
   waypoint and a tick where each leg joins it. */
.fpln-track { position: relative; align-self: stretch; min-height: 1em; }

.fpln-track::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--green);
}

/* the line starts at the first diamond and ends at the last */
.fpln-track--tick[data-first="1"]::before { top: 50%; }
.fpln-track--wpt[data-last="1"]::before { bottom: 50%; }

.fpln-track--tick::after {
  content: '';
  position: absolute;
  left: 50%;
  right: -0.5em;
  top: 50%;
  height: 1px;
  background: var(--green);
}

/* No background behind the diamond - the track line runs through it, which is
   what makes the chain continuous rather than dotted. */
.fpln-track--wpt::after {
  content: '◇';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--green);
  line-height: 1;
}

.fpln-note { white-space: nowrap; }

/* The hold line (FCOM DSC-22-FMS-10-40-20 HM figure): HOLD L(R) at waypoint
   size in the ident column, the SPD label white and small like a leg label,
   its speed in the row's colour on the line below. */
.fpln-hold__label { white-space: nowrap; }
.fpln-hold__spd-label { font-size: 0.82em; color: var(--white); }

/* IMMEDIATE EXIT / RESUME HOLD: amber legend and star on the ordinary grey
   face (the FCOM figure's button keeps a plain edge, not the amber outline
   of the TMPY controls), small enough to fit the SPD and ALT columns. */
.fpln-hold__exit {
  color: var(--amber);
  font-size: 0.78em;
  line-height: 1.05;
  align-self: center;
  justify-self: center;
  padding: 0.1em 0.5em;
}
.fpln-hold__exit .confirm-mark { color: var(--amber); }

.fpln-dest {
  display: flex;
  align-items: center;
  gap: 0.3em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

/* POSITION/TIME stacks five sections and needs every line it can save */
.time-page { line-height: 1.12; }
.time-page .page__rule { margin: 0.28em 0; }
.time-page .field { min-height: 1.25em; }

/* Tick box, as used by the PRINTER auto-print columns. A filled cyan square is
   ticked; an outlined one is not (DATA PRINTER page.png). */
.tickbox {
  width: 1.1em;
  height: 1.1em;
  border: 1px solid var(--edge);
}
.tickbox[data-checked="1"] { background: var(--cyan); border-color: var(--cyan); }

/* GNSS latitude/longitude strings are the widest text on their page */
.gnss-pos { font-size: 0.92em; white-space: nowrap; }

/* ---- misc helpers ---- */

.center { text-align: center; }
.row    { display: flex; align-items: center; }
.spread { display: flex; align-items: center; justify-content: space-between; }
.stack  { display: flex; flex-direction: column; }
.gap-s  { gap: 0.35em; }
.gap-m  { gap: 0.8em; }
.gap-l  { gap: 1.6em; }

/* A button showing the current selection - the AFS CP mode buttons and the
   IRS unit currently open. INFERRED: no snapshot shows one engaged, so this
   follows the app's convention of a white outline for an active control. */
.btn[data-active="1"] { border-color: var(--white); }

/* Amber-outlined button. Every TMPY accept/discard control uses it - ERASE
   TMPY / INSERT TMPY on F-PLN and ERASE DIR TO / INSERT DIR TO on the DIRECT
   TO page (FPLN MKG DELETE 2 confirm tmpy.png, FPLN MKG DIRECT TO.png). */
.btn--amber {
  color: var(--amber);
  border-color: var(--amber);
}
.btn--amber .confirm-mark { color: var(--amber); }

/* A dropdown that reads like a button: white legend on the grey face, as the
   SEC INDEX IMPORT selector does. */
.dropdown--btn { background: var(--btn-face); }
.dropdown--btn > span:first-child { color: var(--white); }

/* A two-line face, as D-ATIS's UPDATE OR PRINT selector has. */
.dropdown--multiline { position: relative; }

.dropdown--multiline > span:first-child {
  white-space: pre-line;
  line-height: 1.05;
  text-align: center;
  flex: 1;
}

/* The caret rides on the first line rather than taking a column of its own,
   which is what RECEIVED CPNY F-PLN needs: with the caret in flow the label
   loses about 1.2em and `CPNY F-PLN` wraps a second time. */
.dropdown--multiline > .caret {
  position: absolute;
  top: 0.05em;
  right: 0.35em;
}

/* A dropdown whose value comes from the nav database reads green, not cyan
   (DIRECT TO on FPLN MKG DIRECT TO.png). */
.dropdown--green > span:first-child { color: var(--green); }

/* A list whose value belongs to a pending edit reads yellow with the rest of
   it - the DIRECT TO target, once one is picked. */
.dropdown--tmpy > span:first-child { color: var(--yellow); }
.dropdown--tmpy { border-color: var(--yellow); }

/* Yellow-outlined button, the way back to a pending edit: TMPY F-PLN on the
   DEPARTURE, ARRIVAL and HOLD pages (FPLN DEPARTURE 3.png). */
.btn--tmpy {
  color: var(--yellow);
  border-color: var(--yellow);
}

/* dimmed label helper, used where a whole row goes inert */
.muted { color: var(--muted); }

/* ---- louvred push-button (FCU BKUP) ----

   Three horizontal bars in a grey box, green when engaged. Reference:
   fs2024 snapshot/FCU BACKUP - AFS CP ON.png and - EFIS CP ON.png. */

.bars {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  background: var(--btn-face);
  border: 1px solid var(--edge);
  padding: 0.16em 0.3em 0.1em;
  line-height: 1.1;
}

.bars__grille {
  display: flex;
  flex-direction: column;
  gap: 0.11em;
  width: 100%;
  min-width: 2.1em;
}

.bars__grille i {
  display: block;
  height: 0.11em;
  background: var(--muted);
}

.bars--on .bars__grille i { background: var(--green); }

.bars__label { color: var(--white); }

.bars[data-disabled="1"] { color: var(--muted); }
.bars[data-disabled="1"] .bars__grille i { background: #4a4a52; }
.bars[data-disabled="1"] .bars__label { color: var(--muted); }
.bars[data-focus="1"] { border-color: var(--cyan); }

/* A bare switch: no legend inside, so the grille sets the box height. */
.bars--switch { padding: 0.18em 0.34em; }

/* ---- FCU BKUP layout ---- */

.fcu-row { display: flex; align-items: flex-end; }
.fcu-col { display: flex; flex-direction: column; align-items: center; }

/* the thin leader lines that drop from the change-over buttons to the
   column they act on (FCU BACKUP - AFS CP ON.png) */
.fcu-leader { background: var(--edge); width: 1px; margin: 0 auto; }
.fcu-leader--h { height: 1px; width: 100%; }

/* ---- ATC COM ---- */

/* A submenu button: chevron on the left, legend centred in what is left. The
   chevron takes real space rather than being absolutely positioned, so a
   two-line legend can never spill out of the box. */
.btn--lead { justify-content: flex-start; gap: 0.3em; }
.btn--lead .btn__lead { flex: none; }
.btn--lead .btn__label { flex: 1; min-width: 0; text-align: center; }

/* small drawn glyphs: wastebasket, envelope, printer, refresh */
.glyph { line-height: 1; display: inline-flex; }
.glyph--boxed {
  background: var(--btn-face);
  border: 1px solid var(--edge);
  padding: 0.1em 0.25em;
}

.glyph__svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glyph--green .glyph__svg { stroke: var(--green); }
.glyph[data-disabled="1"] .glyph__svg { stroke: var(--muted); }
.glyph[data-focus="1"] { border-color: var(--cyan); }

/* check box with a legend */
.cbox { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }

.cbox__box {
  width: 0.95em;
  height: 0.95em;
  flex: none;
  position: relative;
  background: var(--scr-bg);
  border: 1px solid var(--white);
}

.cbox[data-checked="1"] .cbox__box::after {
  content: '';
  position: absolute;
  left: 0.12em;
  top: 0.02em;
  width: 0.5em;
  height: 0.26em;
  border-left: 1.5px solid var(--cyan);
  border-bottom: 1.5px solid var(--cyan);
  transform: rotate(-45deg);
}

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

/* A datalink answer, shown inverse-video green (FCOM-ATC COM RECORD.png). */
.atc-answer {
  background: var(--green);
  color: var(--scr-bg);
  padding: 0 0.4em;
}

/* One recorded message; the selected one is boxed in yellow. */
.atc-msg { border-bottom: 1px solid var(--edge); padding: 0.3em 0.2em; }
.atc-msg[data-selected="1"] { border: 1px solid var(--yellow); }
.atc-msg__body { color: var(--green); white-space: pre-wrap; }
.atc-msg__param { color: var(--magenta); }

/* The flight-number divider that closes the log. */
.atc-fltnbr {
  display: flex;
  justify-content: center;
  gap: 1.2em;
  border-bottom: 1px solid var(--edge);
  padding: 0.35em 0;
  white-space: pre;
}

/* A D-ATIS report body wraps across the slot. */
.atis-report { color: var(--white); white-space: normal; line-height: 1.02; }

/* The submenu a REQUEST button opens to its left. */
.atc-flyout {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 0.3em;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

/* A D-ATIS slot: airport and type on the left, its two buttons on the right. */
.datis-slot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6em;
}

/* ---- MESSAGES LIST ---- */

.msg-list { padding: 0.4em 0 0 2.2em; }

/* Each message sits on a rule that stops short of the right edge, as the
   snapshot draws it. */
.msg-list__item {
  border-bottom: 1px solid var(--edge);
  padding: 0.45em 0 0.3em;
  width: 26em;
  max-width: 100%;
}

.msg-list__item--warn { color: var(--amber); }

/* The SURV system in use is outlined green, the standby one grey
   (SURV - STATUS & SWITCHING.png). */
.panel--active { border-color: var(--green); }

/* Hovering a system boxes both its button and its status panel in cyan
   (SURV - STATUS & SWITCHING 2.png). */
.surv-sys[data-focus="1"] .bars,
.surv-sys[data-focus="1"] .surv-sys__box { border-color: var(--cyan); }

/* SEC INDEX route summary: the airway column is set a shade smaller than the
   fixes, which is what separates `M750` from `MUKEP` at a glance
   (fs2024 snapshot/FPLN REQUEST SEC 5.png). The summary itself is white - it
   is a stored route, not the flown plan, so it does not take the F-PLN green. */
.sec-rte-via { font-size: 0.88em; }

/* The F-PLN destination field reads like a button, not an entry field: grey
   face, white text (speed constraint 1 - when hover on fpln page.png shows
   RJAA34R that way). It is a way in to the ARRIVAL page, so it is boxed on
   hover like the buttons beside it. */
.fpln-dest > .field:first-child {
  background: var(--btn-face);
  color: var(--white);
}

/* The F-PLN INFO list opens upward out of its own button, which is what the ▲
   on the button means. It sits in a relative wrapper around that button (see
   js/pages/f-pln.js), so bottom:100% puts it directly above and left:0 lines
   its left edge up with the button's. */
.wpt-menu--info {
  top: auto;
  bottom: 100%;
  left: 0;
  right: auto;
  margin-bottom: 0.2em;
  /* The revisions menu's height cap is a share of the page area it sits in;
     this list sits in the button's own small wrapper instead, where the same
     cap cut it down to a sliver. Seven rows always fit above the button. */
  max-height: none;
  overflow: visible;
}

/* ---- PERF T.O speed / thrust rows ----

   V1 / VR / V2 on the left, F-S-O (or the proposed speeds) in the middle and
   TOGA / FLEX / DERATED on the right are three rows of the same height, so the
   columns line up and the panel is exactly three rows tall - which is what
   leaves no dead space under V2. The height is the entry field's own, so a row
   carrying one is no taller than a row that does not. */
.to-row {
  display: flex;
  align-items: center;
  min-height: 1.9em;
}

/* The DERATED level: an entry field and a caret in one control, the list
   hanging below it. `position: relative` lives on .dropdown already; what this
   adds is that the list must escape the panel rather than stretch it. */
.dropdown--combo {
  gap: 0.25em;
  padding: 0 0.2em 0 0.15em;
}

.dropdown--combo .field {
  min-height: 1.2em;
  padding: 0 0.2em;
}

/* The option rows sit above everything the panel draws under them. */
.to-thrust .dropdown__list { z-index: 40; }

/* The PERF T.O configuration row: FLAPS and THS FOR, a vertical rule, then
   PACKS with ANTI-ICE pushed out to the right edge (FCOM T.O panel). */
.to-config { align-items: flex-end; }

.to-config__rule {
  align-self: stretch;
  width: 1px;
  background: var(--edge);
  margin: 0 0.2em;
}

/* ACTIVE/INIT's shortcut block: five equal rows filling whatever height is
   left below the second rule, so the buttons spread down the page and T.O PERF
   finishes near the bottom edge (FCOM ACTIVE/INIT figure). */
.init-shortcuts {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  flex: 1;
  min-height: 0;
  align-items: start;
}

/* AIRWAYS: a row whose VIA and TO are both filled has gone into the temporary
   flight plan, so it reads yellow - the label, the box and its contents
   (FCOM ACTIVE/F-PLN/AIRWAYS figure, where the finished rows are yellow and
   the one being built is still cyan). */
.awy-row--tmpy,
.awy-row--tmpy .field,
.awy-row--tmpy .field > span { color: var(--yellow); }
.awy-row--tmpy .field { border-color: var(--yellow); }

/* ---- FIX INFO ----

   One grid for the whole lower half: controls, a vertical rule, the three
   F-PLN INTERCEPT columns and the INSERT AS WPT button. The rule is a real
   grid column rather than a border, so it runs the height of the block the way
   the FCOM's figure draws it. */
.fix-grid {
  display: grid;
  grid-template-columns: 7em 4.4em 4.4em 4.4em auto;
  align-items: center;
  row-gap: 0.3em;
  column-gap: 0.3em;
  padding: 0 0.5em 0 1em;
  border-left: none;
  position: relative;
}

/* The vertical rule, drawn behind the cells at the left edge of the data. */
.fix-grid::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8.15em;
  width: 1px;
  background: var(--edge);
}

.fix-col { text-align: center; }
.fix-rule { border-top: 1px solid var(--edge); margin: 0.15em 0; }

/* POSITION/IRS's IR table: ruled between columns and between rows, the way the
   FCOM's figure draws it. */
.irs-table { row-gap: 0; }

/* Vertical rules BETWEEN the columns and a full-width rule under each row,
   which is how the FCOM's IR table is drawn. The row rule is its own grid item
   spanning every column, so it runs unbroken rather than being assembled out
   of four cell borders that stop at each column's edge. */
.irs-cell {
  padding: 0.15em 0.6em;
  text-align: center;
  border-left: 1px solid var(--edge);
  /* ENTER HDG must not wrap - a two-line cell makes its row taller than the
     other two and the table stops reading as a table. */
  white-space: nowrap;
}

.irs-cell--first {
  border-left: none;
  text-align: left;
  padding-left: 0;
}

.irs-row-rule {
  grid-column: 1 / -1;
  border-top: 1px solid var(--edge);
}

/* ---- NOTE PAD (FCOM DSC-31-CDS-70) ----

   The pad stands in the footer's bottom row while it is open, in place of the
   MSG LIST button and the message area; closed, it is not drawn at all. The
   pop-up list of notes opens UPWARD out of the field, which is what the ▲ on
   its toggle means - there is nothing below the footer to open into. */
.notepad {
  display: flex;
  align-items: stretch;
  gap: 0.3em;
  width: 100%;

  /* The whole strip sits on a light grey ground, legend, field and buttons
     alike - the one band on the MFD that is lit rather than dark. The note box
     inside it stays dark, which is what makes the text on it read. Same grey
     as the title bar, which is the display's other light band. */
  background: var(--titlebar-bg);
  padding: 0.15em 0.25em;
}

/* Stands exactly where the MSG LIST button does, and reads as its twin. */
.notepad__legend {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: pre-line;
  color: var(--titlebar-fg);
  padding: 0.05em 0.3em;
  line-height: 1.2;
  min-width: 3.6em;
}

.notepad__box { position: relative; flex: 1; min-width: 0; }

/* The note box is dark on the light strip, the inverse of every other field on
   the display. */
.notepad__box .field {
  width: 100%;
  background: var(--scr-bg);
  border-color: var(--titlebar-fg);
}

.notepad__list {
  position: absolute;
  /* dark, like the note box it hangs over, not the light strip behind it */
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 0.15em;
  z-index: 40;
  background: var(--scr-bg);
  border: 1px solid var(--titlebar-fg);
  max-height: 10em;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Notes are CYAN, not green: a note is something the crew wrote and can write
   over, which is what cyan means on this display - green is for what the FMS
   computed. Both the list and the field carry the same colour. */
.notepad__item {
  color: var(--cyan);
  padding: 0.06em 0.4em;
  border: 1px solid transparent;
  white-space: pre-wrap;
}

.notepad__item[data-current="1"] { border-color: var(--cyan); }
.notepad__item[data-focus="1"] { border-color: var(--cyan); }
.notepad__empty { color: var(--muted); padding: 0.06em 0.4em; }

/* The list toggle and the close button read dark-on-light like the legend. */
.notepad .btn {
  background: transparent;
  border-color: var(--titlebar-fg);
  color: var(--titlebar-fg);
}

.notepad .btn[data-focus="1"] { border-color: var(--cyan); }

@media (hover: none) {
  .notepad__item[data-focus="1"] { border-color: transparent; }
  .notepad .btn[data-focus="1"] { border-color: var(--titlebar-fg); }
}

/* DEPARTURE / ARRIVAL: the caution for an airport the database holds runways
   for but no procedures. Amber for a caution, centred under the pickers. */
.proc-unavail {
  color: var(--amber);
  text-align: center;
  margin-top: 0.8em;
  white-space: nowrap;
}

/* A double chevron: two arrowheads stacked, overlapping by half, the way the
   AIRWAYS page's page-scroll buttons draw them. */
.chev2 { display: inline-flex; flex-direction: column; line-height: 0.55; font-size: 0.8em; }

/* DUPLICATE NAMES: each element is one clickable row, boxed in cyan under
   the cursor like any other selectable line. */
.dup-list { margin: 0.4em 0.6em 0; border-top: 1px solid var(--edge); padding-top: 0.3em; }
.dup-row { border: 1px solid transparent; padding: 0.2em 0; }
.dup-row[data-focus="1"] { border-color: var(--cyan); }

/* The SEC pages: "The system-computed values appear in white (they appear in
   green on the ACTIVE pages)" (FCOM DSC-22-FMS-10-40-60). Everything drawn in
   the green token takes white inside a SEC view. */
.sec-view { --green: var(--white); }

/* SEC/F-PLN goes further: every waypoint and leg is white - constraints, the
   missed approach and the alternate included - and so is the track that joins
   them (FCOM DSC-22-FMS-20-20-20, F-PLN page, COLORS). */
.sec-fpln { --magenta: var(--white); }
.sec-fpln .fpln-missed { color: var(--white); }
.sec-fpln .fpln-wpt--missed .fpln-track::before,
.sec-fpln .fpln-leg--missed .fpln-track::before,
.sec-fpln .fpln-leg--missed .fpln-track--tick::after { background: var(--white); }
.sec-fpln .fpln-wpt--missed .fpln-track--wpt::after { color: var(--white); }

/* SEC INDEX: the creation-source line under the city pair, and SWAP ACTIVE's
   amber legend on an ordinary button face (FCOM SEC INDEX figure). */
.sec-created { font-size: 0.8em; margin-bottom: 0.3em; white-space: nowrap; }
.btn--amber-legend { color: var(--amber); }
.btn--amber-legend .confirm-mark { color: var(--amber); }
.btn--amber-legend[data-disabled="1"] { color: var(--muted); }
.btn--amber-legend[data-disabled="1"] .confirm-mark { color: var(--muted); }

/* ---- bevel ----

   The simulator draws every MFD control as a raised key rather than a flat
   rectangle. Two edges are lit: the top fades from white at the top-left
   corner to mid grey at the right, the left fades the same way downwards. The
   other two are a flat dark grey, so the key reads as standing off the black
   screen with the light coming over the pilot's left shoulder. The face stays
   the flat button grey - the relief is all in the border, which is what the
   photo of the real ACTIVE / POSITION / SEC INDEX / DATA menu bar shows.

   A border side can only take one flat colour, so the lit edges cannot be
   painted through border-color - a gradient there would have to run ACROSS
   the box, not along one edge. They are background strips instead: two
   one-pixel gradients laid in the border box, showing through a top and left
   border left transparent. `background-origin: border-box` is what puts them
   over the border rather than inside the padding.

   That choice pays for itself on every coloured state. The cursor ring, the
   dimmed state and the TMPY outlines all set border-color, and an opaque
   border paints over the background - so each of them covers the strips and
   takes the whole box without needing to know the bevel exists.

   This sits at the end of the file so it re-edges every control declared
   above, in mfd.css as well as here, without each of those rules repeating
   it. */

.btn,
.dropdown,
.menu-bar__menu,
.sys-menu__button,
.fpln-head__sel,
.bars,
.glyph--boxed,
.fpln-dest > .field:first-child,
.dropdown__list,
.menu-bar__list,
.sys-menu__list,
.wpt-menu,
.modal {
  border-style: solid;
  border-width: 1px;
  border-color: transparent var(--bevel-dark) var(--bevel-dark) transparent;

  background-image: var(--bevel-top), var(--bevel-left);
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 100%;
  background-position: left top, left top;
  background-origin: border-box;
}

/* Re-asserted after the bevel. These three name a whole-box outline through a
   modifier class, which matches at the same specificity as the rule above and
   so would lose its colour to whichever came last. The stateful outlines -
   the cursor ring, the dimmed state, an engaged button - are attribute
   selectors and already outrank it. */
.btn--amber    { border-color: var(--amber); }
.btn--tmpy     { border-color: var(--yellow); }
.dropdown--tmpy { border-color: var(--yellow); }

/* Tabs are clip-path trapezoids - there are no border sides to light, so they
   keep their flat white outline.

   The NOTE PAD's own controls sit on the light title strip, drawn
   dark-on-light with a hairline edge, not as raised keys. */
.notepad .btn {
  background-image: none;
  border-color: var(--titlebar-fg);
}

/* A touch device has no cursor to follow, so mfd.css flattens the focus ring
   back to a plain --edge box. That rule outranks the bevel, so it has to hand
   the two dark sides back rather than ring every button in light grey; the
   lit strips are background, so they come back on their own. */
@media (hover: none) {
  .btn[data-focus="1"],
  .dropdown[data-focus="1"] {
    border-color: transparent var(--bevel-dark) var(--bevel-dark) transparent;
  }
}

/* ---- WHAT IF (SEC1(2)(3)/WHAT IF, SEC INDEX, SEC/F-PLN) ----

   The label beside SEC INDEX's city pair is boxed white on black
   (FCOM SEC INDEX figure: WHAT IF - DEPRESS). */
.whatif-label {
  border: 1px solid var(--white);
  padding: 0 0.3em;
  font-size: 0.8em;
  color: var(--white);
}

/* The message area: amber, the waypoint in the larger font
   (EXISTING WHAT IF AT NEKUL). One line tall whether or not it says anything,
   so the page does not jump. */
.whatif-msg {
  height: 1.5em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--amber);
  font-size: 0.85em;
}
.whatif-msg__ident { font-size: 1.25em; }

.whatif-options { padding: 0.5em 0.8em; margin-right: 0.4em; font-size: 0.9em; }

/* The scenario: a vertical line from under the AT list to the DEST line,
   broken by the steps laid over it. */
.whatif-scenario {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.8em 0 1.2em;
}
.whatif-line {
  position: absolute;
  top: 0;
  bottom: 1.9em;
  width: 1px;
  background: var(--white);
}
.whatif-online {
  align-self: flex-start;
  transform: translateX(-50%);
  background: var(--scr-bg);
  text-align: center;
  font-size: 0.85em;
  line-height: 1.15;
  padding: 0.2em 0;
  position: relative;
}
.whatif-from { position: relative; background: var(--scr-bg); width: fit-content; }
.whatif-efob { color: var(--white); }

/* SEC/F-PLN's `- WHAT IF - EO -` line under the revised waypoint. */
.fpln-whatif { text-align: center; color: var(--white); white-space: pre; }

/* The managed speed type under MANAGED on PERF CLB / CRZ in the EO mode
   (EO-GDOT, EO-LRC, EO-ECON). */
.perf-eo-type { font-size: 0.78em; color: var(--white); }