/* ============================================================
   COCKPIT.CSS — Two-screen layout (sahome.fr cockpit)
   FMS strip on top across both screens; below it, the PFD on the
   left and the screen of the selected tab on the right.
   Loaded last; never overrides the original portal outside .cockpit-dual,
   so the single-column rendering stays identical to claude.sbapps.net.
   ============================================================ */

/* ── Wrappers are layout-transparent: in single column (as on claude.sbapps.net)
      and in dual screen, where their children are placed on the grid of main ── */
.cockpit-left,
.cockpit-right {
  display: contents;
}

/* ============================================================
   DUAL SCREEN — set by tabs.js when the window is wide enough
   (min-width: 1500px). Grid areas:
     PFD shown    strip  strip      PFD hidden    strip   strip
                  pfd    screen                   screen  screen
   ============================================================ */
main.cockpit-dual {
  display: grid;
  grid-template-columns: var(--pfd-width) minmax(0, 980px);
  grid-template-areas:
    "strip strip"
    "pfd   screen";
  justify-content: center;
  align-content: start;   /* main fills the page height: do not stretch the rows */
  align-items: start;
  /* gap: 2rem inherited from main, same spacing as in single column */
}

main.cockpit-dual.cockpit-pfd-off {
  grid-template-areas:
    "strip  strip"
    "screen screen";
}

/* FMS strip: always on top, across both screens */
.cockpit-dual .fms-strip {
  grid-area: strip;
  max-width: none;
}

/* PFD: left column, aligned with the left edge of the strip */
.cockpit-dual .pfd-layout {
  grid-area: pfd;
}

/* The real F-PLN is displayed next to the PFD: no need for the waypoint sidebar */
.cockpit-dual .pfd-wpt-bar {
  display: none;
}

/* Screen of the selected tab: right column, or full width when the PFD is hidden */
.cockpit-dual .cockpit-right .tab-panel > * {
  grid-area: screen;
  max-width: none;
}