/* A350 FMS colour + type tokens.
   Values sampled from FCOM-FMS/FMS color example/ (design intent).
   The "sim" values in comments are what the iniBuilds MFD renders after
   cockpit lighting; they are recorded so screenshot diffs aren't mistaken
   for bugs. Switch the palette by setting data-palette="sim" on <html>. */

:root {
  /* screen */
  --scr-bg:        #000000;   /* sim #05080A */
  --bezel:         #617381;

  /* data colours */
  --white:         #FFFFFF;   /* sim #B1C0BF - labels, titles, button text, borders */
  --green:         #00FF00;   /* sim #22D41A - computed / read-only valid data */
  --cyan:          #00FFFF;   /* sim #35BFD1 - pilot-modifiable values, focus ring */
  --blue:          #0066FF;   /* sim #3567CE - UNIT SUFFIXES ONLY (FL, degC, FT, NM, KT, T, %) */
  --amber:         #FF9E00;   /* sim #EA8F0D - mandatory-empty boxes, warnings */
  --yellow:        #FFFF00;   /* sim #D5C947 - temporary f-pln values, KCCU cursor */
  /* Constraints on the F-PLN page. The FCOM colour plates supplied do not
     include magenta, so this is the standard Airbus constraint magenta; the
     sim renders a much paler pink (~#FCA2F8, sampled from FPLN page 3.png). */
  --magenta:       #FF00FF;

  /* chrome */
  --btn-face:      #3D3D3D;
  --btn-face-hi:   #4E4E4E;
  /* Bevel. The MFD's controls are drawn as raised keys, not flat rectangles:
     the top and left edges are lit, each fading from white at the top-left
     corner to mid grey at its far end, while the right and bottom edges are a
     flat dark grey (sim photo, ACTIVE/F-PLN menu bar). The face stays flat -
     only the border carries the relief.

     The two lit edges are drawn as background strips rather than border
     colours: a border side takes ONE flat colour, so nothing painted through
     border-color can fade along its own length. */
  --bevel-hi:      #FFFFFF;
  --bevel-mid:     #7F7F7F;
  --bevel-dark:    #2E2E2E;
  --bevel-top:     linear-gradient(to right,  var(--bevel-hi), var(--bevel-mid));
  --bevel-left:    linear-gradient(to bottom, var(--bevel-hi), var(--bevel-mid));
  --edge:          #A5A5A5;
  --muted:         #9E9E9E;
  --titlebar-bg:   #B1C0BF;
  --titlebar-fg:   #0D1417;

  /* type */
  --fms-font: "Roboto Mono", "SF Mono", Menlo, "DejaVu Sans Mono", Consolas, monospace;
  --fms-tracking: 0.06em;

  /* KCCU panel */
  --kccu-panel:  #8F9AA4;
  --kccu-key:    #15181C;
  --kccu-legend: #F2E2C0;
  --kccu-edge:   #6D7883;
  --kccu-accent: #C8862A;
}

:root[data-palette="sim"] {
  --scr-bg:  #05080A;
  --white:   #B1C0BF;
  --green:   #22D41A;
  --cyan:    #35BFD1;
  --blue:    #3567CE;
  --amber:   #EA8F0D;
  --yellow:  #D5C947;
  --magenta: #FCA2F8;
  --btn-face:#373745;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #1b2027;
  color: var(--white);
  font-family: var(--fms-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The display, the KCCU and the phase strip are laid out as named grid areas so
   the phase strip can move from under the MFD (desktop) to the foot of the page
   (phone) without being nested inside either column. `justify-content: center`
   keeps the pair centred as a group however wide the window gets. */
/* Cross-link between the trainers, pinned to the top-right corner. Styled
   like the procedures trainer's own top-bar link so the pair reads as one
   site rather than two unrelated pages. */
.site-link {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 50;
  background: var(--btn-face);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.site-link:hover { background: var(--btn-face-hi); color: var(--white); }

#rig {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "mfd kccu"
    "phase phase"
    "navdb navdb";
  justify-content: center;
  align-content: start;
  gap: 12px 20px;
  padding: 18px;
  min-height: 100vh;
}

/* The display and the KCCU are the same width and sit side by side, centred as
   a pair however wide the window gets. The phase strip spans both columns and
   is given min-width:0 so its own content cannot widen the grid and push the
   pair off centre. */
#mfd-bezel  { grid-area: mfd; justify-self: end; }
#kccu       { grid-area: kccu; align-self: start; justify-self: start; }

#phase-strip {
  grid-area: phase;
  justify-self: stretch;
  min-width: 0;
  justify-content: center;
}

/* The nav database line spans both columns under the strip, centred with it. */
#navdb-note {
  grid-area: navdb;
  justify-self: stretch;
  min-width: 0;
  text-align: center;
}

/* ---- narrow screens: MFD full width, KCCU under it, phases at the foot ---- */

@media (max-width: 900px) {
  /* Cross-link between the trainers, pinned to the top-right corner. Styled
   like the procedures trainer's own top-bar link so the pair reads as one
   site rather than two unrelated pages. */
.site-link {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 50;
  background: var(--btn-face);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.site-link:hover { background: var(--btn-face-hi); color: var(--white); }

#rig {
    grid-template-columns: 1fr;
    /* The nav database line needs its own area here too: without one it was
       placed in an implicit zero-width column off the right edge, so phones
       never showed it. */
    grid-template-areas:
      "mfd"
      "kccu"
      "phase"
      "navdb";
    justify-items: center;
    gap: 12px;
    padding: 8px;
  }

  #mfd-bezel,
  #kccu,
  #phase-strip { justify-self: center; }

  /* The note keeps the full width on a phone so it wraps as prose rather than
     shrinking to fit its longest word. */
  #navdb-note { justify-self: stretch; }
}