/* ================= CRAFT application switch =================
   ONE FILE for every board: the ops wall and its Fuel page (css/wall.css) and
   Crew Pairing (crew/css/pairing.css) all load this one, so the control is the
   same thing in the same place wherever you are. It replaced two copies kept
   "verbatim" by hand.

   A DROP-DOWN since 2026-10-29 (operator: "we need to find a much cleaner way
   to display this menu without taking up so much real estate, i dont mind a
   drop down menu"): the board you are on, in a small pill; press it and the
   three boards drop down under it. It had been a 455px bar of three tabs.

   Pinned to the viewport, not to either page's layout: the wall scales a
   3840x2160 stage to fit, and anything inside that scaling would render at a
   different size on the other boards. Horizontally centred, which on the
   physical wall is the bezel between the two upper TVs. A fixed width, so
   the pill keeps its size and place from one board to the next; 12px from
   the top, centred on Crew Pairing's first header row. */
.app-switch { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; }
.app-cur {
  list-style: none; display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 140px; height: 24px; padding: 0 12px; border-radius: 999px;
  font: 700 10px/1 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 255, 255, 0.86); cursor: pointer; user-select: none; -webkit-user-select: none;
  background: linear-gradient(158deg,
    rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 45%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(26px) saturate(1.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 5px 14px rgba(0, 0, 0, 0.38);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.app-cur::-webkit-details-marker { display: none; }
.app-cur::marker { content: ''; }
.app-cur:focus-visible { outline: 2px solid rgba(57, 135, 229, 0.7); outline-offset: 2px; }
@media (hover: hover) { .app-cur:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); } }
.app-switch[open] .app-cur { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.app-car { width: 8px; height: 5px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; transition: transform 0.15s ease; }
.app-switch[open] .app-car { transform: rotate(180deg); }
/* Under the pill, its width; out of flow, so the switch's own box stays the
   pill's (the crew board's windows step aside from that box). */
.app-menu {
  position: absolute; top: calc(100% + 6px); left: 0; width: 100%;
  display: grid; gap: 2px; padding: 4px; border-radius: 12px;
  background: rgba(16, 21, 30, 0.92);
  backdrop-filter: blur(26px) saturate(1.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 30px rgba(0, 0, 0, 0.5);
}
.app-tab {
  display: block; padding: 8px 6px; border-radius: 8px; text-align: center;
  font: 700 10px/1 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 255, 255, 0.58); text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
@media (hover: hover) { .app-tab:not(.on):hover { color: #fff; background: rgba(255, 255, 255, 0.07); } }
/* The board you are on. */
.app-tab.on { color: #fff; cursor: default; background: rgba(255, 255, 255, 0.12); }

/* THE VIEWS (operator, 2026-10-29: "put the 2 viewing options button
   selection in the drop down menu as the bottom 2 options with a subject
   divider"). Added by js/app-switch.js under the boards: a hairline either
   side of the word VIEW, then DASHBOARD VIEW and DESKTOP VIEW, the one in use
   lit like the board you are on. */
.app-sub {
  display: flex; align-items: center; gap: 6px; margin: 6px 4px 3px;
  font: 700 8px/1 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4); user-select: none; -webkit-user-select: none;
}
.app-sub::before, .app-sub::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.14); }
button.app-tab { width: 100%; border: 0; background: none; cursor: pointer; }
/* Where a board stacks its panels down the page anyway (the wall's phone
   layout, the crew board under 1021px), there is nothing to choose. */
[data-layout="mobile"] .app-sub, [data-layout="mobile"] .app-view { display: none; }
@media (max-width: 1020px) { .app-sub, .app-view { display: none; } }

/* DESKTOP VIEW's band: the top 48px of the window, page-coloured, so the
   switch and each board's own buttons sit on it rather than over a panel,
   and the panels pass under it as the page scrolls. */
@media (min-width: 1021px) {
  :root[data-viewmode="desktop"]:not([data-layout="mobile"]) body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 50;
    background: var(--page, #05070c); pointer-events: none;
  }
}
/* Shown in full screen too (operator, 2026-10-29: "dont drop the upper drop
   down menu in full screen mode"). It had been hidden there, on the reasoning
   that a full-screen wall has nobody in front of it. */