/* CRAFT Crew Pairing — same visual system as the ops wall (liquid glass, dark,
   IBM Plex Sans, validated tail colours). Since 2026-08-28 the Pairing Board IS
   the wall's four-quadrant stage at desk scale (operator-specified): schedule,
   pilot map, suggestions, duty & flight — the whole board fits the viewport and
   each quadrant scrolls itself. The Roster tab keeps normal page flow. */

:root {
  --page: #05070c;
  --surface: rgba(255, 255, 255, 0.045);
  --card: rgba(255, 255, 255, 0.05);
  --ink: #ffffff;
  --ink-2: #c9cdd7;
  --muted: #8b93a4;
  --grid: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.15);
  --hair: rgba(255, 255, 255, 0.10);
  --glass-edge: rgba(255, 255, 255, 0.10);
  --glass-glint: rgba(255, 255, 255, 0.16);

  --blue: #3987e5;      /* POD1 */
  --orange: #d95926;    /* POD2 */
  --aqua: #199e70;      /* POD3 */
  --yellow: #c98500;    /* POD5 */
  --magenta: #d55181;   /* POD6 */

  --good: #0ca30c;
  --warn: #fab219;
  --serious: #ec835a;
  --crit: #d03b3b;
  --violet: #9085e9;

  --cat-live: #8ede9b;
  --cat-repo: #4ecdc4;
  --cat-owner: #bda6f5;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--page); height: 100%; }
/* The page is a STAGE now: chrome row, the quadrant board filling what is
   left, a one-line footer. Nothing scrolls at page level — each quadrant
   (and the Roster tab) scrolls itself. */
body {
  font-family: var(--sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--page);
}

/* THE OPS WALL'S FRAME (operator, 2026-10-29: "fix the aspect ratio of the
   whole dashboard to match the dashboard and the fuel dashboard"): the wall
   and the fuel page scale a 16:9 stage into the window and centre it, so this
   board takes the same 16:9 box, centred, the rest of the window left as page.
   Margins, not a transform: the CRAFT switch and the overlays stay pinned to
   the window. Stacked (phone width) it scrolls as before. */
@media (min-width: 1021px) {
  body { position: absolute; inset: 0; margin: auto;
    width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); }
}

main { flex: 1; min-height: 0; width: 100%; padding: 8px 14px 0; }
.view { height: 100%; }
.view[hidden] { display: none; }
/* The roster keeps normal page flow inside its own scroller. */
#view-roster { overflow-y: auto; max-width: 1200px; margin: 0 auto; padding-bottom: 24px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }

/* ---- NO HEADER ROW (operator, 2026-09-27: "fill up the screen vertically
   like the dashboard does … no black bars on top"). The quadrants start at the
   top edge; the CRAFT switch floats over the top centre exactly as it does on
   the dashboard, and the tabs, feed status, SYNC and full screen sit on the
   bottom line with the roster note. The two top panels keep their headers
   out from under the switch — see "the switch's lane" below. ---- */

/* The CRAFT application switch: /css/app-switch.css, shared with the wall. */

.feedchip {
  margin-left: auto; font-family: var(--mono); font-size: 12px;
  padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line);
  color: var(--muted); background: var(--surface); white-space: nowrap;
}
.feedchip.is-live { color: #7fd18a; border-color: rgba(127, 209, 138, 0.4); }
.feedchip.is-err { color: var(--serious); border-color: rgba(236, 131, 90, 0.45); }

/* ---- sync: the dashboard's button and pull-to-sync, at desk scale
   (2026-09-25). Same glass, same states: the glyph turns while the feeds are
   in flight, then the word says what happened, because a button that looks
   the same before and after is a button people press twice. Its height is
   the feed chip's, so the two read as one strip. ---- */
.sync-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none;
  height: 28px; padding: 0 13px;
  font: 700 11px/1 var(--sans); letter-spacing: 0.14em; color: var(--ink-2);
  background: rgba(10, 15, 26, 0.48);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-edge); border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-glint);
  cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .sync-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--line); } }
.sync-btn:disabled { cursor: default; }
.sync-ico { font-size: 14px; line-height: 1; display: inline-block; }
.sync-btn.busy { color: var(--warn); }
.sync-btn.busy .sync-ico { animation: spin 0.9s linear infinite; }
.sync-btn.ok { color: var(--good); border-color: rgba(12, 163, 12, 0.5); }
.sync-btn.bad { color: var(--crit); border-color: rgba(208, 59, 59, 0.5); }
@keyframes spin { to { transform: rotate(360deg); } }
/* full screen: square, a glyph not a word; arrows out to enter, in to leave */
.fs-btn { width: 28px; padding: 0; }
.fs-ico { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fs-exit { display: none; }
.fs-btn.on { color: var(--good); border-color: rgba(12, 163, 12, 0.45); }
.fs-btn.on .fs-enter { display: none; }
.fs-btn.on .fs-exit { display: block; }
.pull {
  position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 70;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 13px/1 var(--sans); letter-spacing: 0.18em; color: var(--muted);
  background: linear-gradient(180deg, rgba(10, 15, 26, 0.95), rgba(10, 15, 26, 0));
  transform: translateY(-54px);
  pointer-events: none;
}
.pull-ico { font-size: 16px; display: inline-block; }
.pull.armed { color: var(--good); }
.pull.armed .pull-ico { transform: rotate(180deg); }
.pull.busy { color: var(--warn); }
.pull.busy .pull-ico { animation: spin 0.9s linear infinite; }

/* ---- tabs, on the bottom line: the schedule's own button look ---- */
.tabs { display: flex; gap: 4px; flex: none; }
.tab {
  font: 700 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--ink-2); background: rgba(255, 255, 255, 0.06); }
.tab.is-on { color: var(--ink); background: rgba(57, 135, 229, 0.30); border-color: rgba(57, 135, 229, 0.55); }

/* ================= the four quadrants ================= */
#view-board.quads {
  display: grid;
  /* the ambient light field sits inside this box, behind the four slabs */
  position: relative; overflow: hidden;
  grid-template-columns: 1fr 1fr;
  /* FOUR EQUAL QUADRANTS, as on the wall (operator, 2026-10-29: "make the
     quadrants identical in size"; the top row had run 8fr to 7fr since
     2026-08-29 to seat all five tails in week view). */
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-height: 0;
}
#view-board.quads[hidden] { display: none; }
/* The light field behind the glass — the wall's own (wall.css .ambient),
   verbatim. Dim on purpose; the slabs refract it through their backdrop blur,
   which is what makes them read as liquid glass rather than tinted panels
   (operator, 2026-09-10: "exactly like the dashboard"). */
#view-board .ambient {
  position: absolute; inset: -80px; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 58% at 11% 6%,  rgba(64, 104, 186, 0.17), transparent 62%),
    radial-gradient(40% 50% at 87% 10%, rgba(102, 76, 190, 0.13), transparent 60%),
    radial-gradient(52% 62% at 80% 94%, rgba(28, 118, 146, 0.11), transparent 64%),
    radial-gradient(44% 56% at 18% 90%, rgba(128, 82, 168, 0.09), transparent 62%),
    radial-gradient(30% 34% at 50% 46%, rgba(70, 90, 140, 0.07), transparent 70%);
  animation: drift 240s ease-in-out infinite alternate;   /* the wall's burn-in guard */
}
@keyframes drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(2px, 1px); }
}
/* The four glass slabs: the wall's .quad — gradient, blur, edge and glint
   verbatim — at desk scale (its padding and corner radius are the wall's
   halved, the wall being a 3840-wide stage shown at half size). */
.quad {
  background: linear-gradient(158deg,
    rgba(255, 255, 255, 0.065) 0%,
    rgba(255, 255, 255, 0.022) 42%,
    rgba(255, 255, 255, 0.045) 100%);
  backdrop-filter: blur(26px) saturate(1.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 var(--glass-glint),               /* specular top edge */
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 0 12px 10px;
  display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
  position: relative;
  z-index: 1;           /* above the ambient field */
}
.qhead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 2px 6px;
  border-bottom: 1px solid var(--grid);
  flex: none;
}
.qhead h2 {
  font: 700 12.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
.qhead-note { font-size: 11px; color: var(--muted); margin-left: auto; }
/* A quadrant's scrolling body. */
.q-scroll {
  flex: 1; min-height: 0; overflow-y: auto; padding: 6px 2px 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
/* Below a desk-sized window the grid stacks and the page scrolls again —
   quadrants keep a working height instead of becoming letterbox slits. */
@media (max-width: 1020px) {
  body { overflow: auto; height: auto; }
  #view-board.quads { display: flex; flex-direction: column; }
  .quad { min-height: 430px; }
  /* stacked, the page scrolls: it starts below the switch instead */
  main { padding-top: 60px; }
  .foot-note { display: none; }
}

/* ---- schedule rail (ported from the ops wall's schedule quadrant; same
   classes, same geometry, same tones — the svg viewBox is the wall's 1810×920,
   scaled to its quadrant, so it reads identically at any width) ---- */
.sched-head .dateline { white-space: nowrap; font: 700 11.5px var(--sans); letter-spacing: 0.1em; color: var(--ink-2); }
.rail-range { font: 12px var(--sans); color: var(--muted); white-space: nowrap; flex: none; }
.rail-group { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.rail-btn {
  font: 700 11px var(--sans); letter-spacing: 0.08em;
  color: var(--ink-2); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 9px; cursor: pointer; white-space: nowrap; flex: none;
}
.rail-live { min-width: 64px; }
.rail-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.rail-live.on { color: #0d1117; background: var(--good); border-color: var(--good); }
.rail-btn.on:not(.rail-live) { color: var(--ink); background: rgba(57, 135, 229, 0.30); border-color: rgba(57, 135, 229, 0.55); }
.hint-sug { color: var(--warn); font-weight: 700; }
/* The schedule fills its quadrant: the SVG keeps the wall's aspect and
   letterboxes; the week grid scrolls inside the same box. */
.sched-wrap { position: relative; flex: 1; min-height: 0; }
#schedsvg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
#schedsvg.dragging { cursor: grabbing; }
/* The AIRCRAFT menu (2026-09-27): one button, a drop-down of ticks. */
.ac-menu { position: relative; display: inline-flex; flex: none; }
.ac-btn { display: inline-flex; align-items: center; gap: 6px; }
.ac-n { color: var(--warn); letter-spacing: 0.02em; }
.ac-car { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.ac-btn[aria-expanded="true"] { color: var(--ink); background: rgba(57, 135, 229, 0.30); border-color: rgba(57, 135, 229, 0.55); }
.ac-btn[aria-expanded="true"] .ac-car { transform: rotate(180deg); }
.ac-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 200px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: rgba(12, 17, 27, 0.96); border: 1px solid var(--glass-edge); border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--glass-glint), 0 16px 40px rgba(0, 0, 0, 0.5);
}
.ac-pop[hidden] { display: none; }
.ac-row {
  display: grid; grid-template-columns: 14px 8px auto 1fr; align-items: center; gap: 9px;
  padding: 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  font: 600 12px var(--sans); color: var(--ink-2);
}
.ac-row:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.ac-row:disabled { cursor: default; }
.ac-row i { width: 8px; height: 8px; border-radius: 50%; }
.ac-row b { font-weight: 700; letter-spacing: 0.05em; color: var(--ink); }
.ac-tail { justify-self: end; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ac-box { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line); box-sizing: border-box; }
.ac-row.on .ac-box {
  background: var(--blue) no-repeat center / 10px 10px; border-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.8 5.2l2.2 2.2 4.2-4.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ac-row:not(.on) b, .ac-row:not(.on) .ac-tail { opacity: 0.55; }
.ac-row:not(.on) i { background: var(--muted) !important; }
.ac-all {
  margin-top: 4px; padding: 6px 8px; border: 0; border-top: 1px solid var(--hair); border-radius: 0 0 8px 8px;
  background: none; cursor: pointer; text-align: left; font: 700 10.5px var(--sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue);
}
.ac-all:disabled { color: var(--muted); opacity: 0.6; cursor: default; }
.ac-all:hover:not(:disabled) { color: var(--ink); }
.gut-card { fill: url(#gut-card); stroke: var(--hair); stroke-width: 1; }
.gut-sheen { fill: rgba(255, 255, 255, 0.10); }
.ax-line { stroke: rgba(255, 255, 255, 0.055); stroke-width: 1; }
.ax-label { fill: var(--muted); font: 600 19px var(--sans); }
.lane-sep { stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.g-pod { font: 700 28px var(--sans); fill: var(--ink); }
.g-reg { font: 22px var(--sans); fill: var(--ink-2); }
.g-crew { font: 600 21px var(--sans); fill: var(--ink); }
.g-crew .g-sep { fill: var(--muted); }
.g-nocrew { font: 600 19px var(--sans); fill: var(--muted); letter-spacing: 0.04em; }
.bar-label { font: 600 24px var(--sans); fill: var(--ink); }
.bar-cat { font: 700 15px var(--sans); letter-spacing: 0.1em; }
.bar-trip { font: 600 13px var(--sans); letter-spacing: 0.06em; }
.bar-crew { font: 600 15px var(--sans); }
.day-line { stroke: rgba(255, 255, 255, 0.30); stroke-width: 2; stroke-dasharray: 2 7; }
.day-lbl { font: 700 17px var(--sans); fill: var(--muted); letter-spacing: 0.12em; }
.day-crew { font: 600 15px var(--sans); fill: var(--muted); }
.day-crew.short { fill: #ff9a9a; font-weight: 700; }
.mx-band { stroke-width: 1.5; }
.mx-text { font: 600 21px var(--sans); fill: var(--ink-2); }
.mx-text .mx-aog { fill: var(--ink); font-weight: 700; }
.swap-label { font-weight: 700; fill: #cbd3e0; letter-spacing: 0.12em; }
.now-line { stroke: #ffffff; stroke-width: 2; opacity: 0.55; }
.day-today { fill: rgba(57, 135, 229, 0.05); stroke: var(--blue); stroke-width: 2; pointer-events: none; }
.now-pill { fill: rgba(16, 22, 36, 0.85); stroke: var(--glass-edge); stroke-width: 1.5; }
.now-text { font: 600 20px var(--sans); fill: var(--ink); }
.bar-hit { fill: transparent; cursor: pointer; }
/* legs picked with shift-click */
.bar-hit.is-picked { fill: rgba(57, 135, 229, 0.18); stroke: #9cc4ff; stroke-width: 3; }
.wk-pill { -webkit-user-select: none; user-select: none; }
.wk-pill.is-picked { outline: 2px solid #9cc4ff; outline-offset: 1px; background-color: rgba(57, 135, 229, 0.22); }
.sel-pop {
  position: absolute; z-index: 41; width: 250px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow-y: auto;
  padding: 7px 10px 8px; border-radius: 12px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.055) 100%), rgba(12, 17, 27, 0.92);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(57, 135, 229, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 40px rgba(0, 0, 0, 0.5);
}
.sel-pop[hidden] { display: none; }
.sel-pop.is-over { border-color: rgba(255, 122, 100, 0.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 122, 100, 0.35), 0 16px 40px rgba(0, 0, 0, 0.5); }
/* over 10h of flying in 24 hours: said first, in red */
.sel-warn { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: -1px -2px 7px; padding: 6px 8px; border-radius: 9px; text-align: center;
  background: rgba(255, 106, 84, 0.24); border: 1px solid rgba(255, 143, 125, 0.9); }
.sel-warn b { font: 800 13px var(--sans); letter-spacing: 0.02em; color: #ffd6cf; }
.sel-warn span { font: 500 10.5px/1.35 var(--sans); color: #ffb3a6; }
.sel-warn.is-note { background: rgba(250, 178, 25, 0.16); border-color: rgba(250, 178, 25, 0.7); }
.sel-warn.is-note b { color: #ffe3a8; } .sel-warn.is-note span { color: #f5c76a; }
.sel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sel-h b { font: 700 10px var(--sans); letter-spacing: 0.14em; color: #9cc4ff; }
.sel-x { width: 22px; height: 22px; font: 400 18px/1 var(--sans); color: var(--ink-2); background: none; border: none; border-radius: 6px; cursor: pointer; }
.sel-x:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.sel-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sel-tot div { display: flex; flex-direction: column; align-items: center; padding: 4px 4px 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); }
.sel-tot i { font: 700 9px var(--sans); letter-spacing: 0.12em; color: var(--muted); font-style: normal; }
.sel-tot b { font: 700 17px var(--mono); color: var(--ink); margin-top: 1px; }
.sel-tot div.is-bad { border-color: rgba(255, 143, 125, 0.8); background: rgba(255, 106, 84, 0.14); }
.sel-tot div.is-bad b { color: #ffb3a6; }
.sel-warn + .sel-warn { margin-top: -3px; }
.sel-sub { margin: 4px 0 2px; text-align: center; font: 500 10.5px var(--sans); color: var(--muted); }
.sel-per { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 4px; font: 500 10.5px var(--mono); color: var(--ink-2); }
.sel-per b { color: var(--ink); margin-left: 4px; }
.sel-legs { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; border-top: 1px solid var(--grid); padding-top: 4px; }
.sel-leg { display: flex; align-items: center; gap: 7px; font: 500 11.5px var(--sans); color: var(--ink-2); }
.sel-pod { flex: none; font: 700 9.5px var(--mono); color: #fff; background: var(--pod); padding: 1px 5px; border-radius: 5px; }
.sel-rt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 11px; }
.sel-rt i { font: 600 9.5px var(--sans); color: var(--muted); font-style: normal; }
.sel-leg b { font: 700 11.5px var(--mono); color: var(--ink); }
.trip.is-flash { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- week grid: Jet Insight's weekly layout — day columns, trips stacked
   vertically per tail per day. Category colours the chip; a dashed amber
   border marks a suggested pairing, same convention as the day strips. ---- */
.week-grid {
  border: 1px solid var(--hair); border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  overflow-x: auto; overscroll-behavior-x: contain;
  height: 100%; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.week-grid[hidden] { display: none; }
.wk-inner { display: grid; width: max-content; min-width: 100%; height: 100%; position: relative; }
/* If the grid does scroll vertically (short window), the day headers hold
   still. Sticky needs OPAQUE paint — same lesson as the tail column. */
.wk-head { position: sticky; top: 0; z-index: 2; background: #141822; }
.wk-corner { top: 0; z-index: 4; }
/* The tail column holds still while the days scroll under it. Sticky needs an
   OPAQUE ground — the translucent surface let columns show through it — so
   these two carry the page/card colours pre-composited. */
.wk-corner, .wk-gut { position: sticky; left: 0; z-index: 3; }
.wk-corner, .wk-head { padding: 5px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
/* Opaque grounds, and they must WIN the cascade: the shared rules above and
   below paint the translucent surface, which let scrolled columns ghost
   through the pinned tail cards. */
.wk-corner { background: #141822; }
.wk-head { border-left: 1px solid var(--hair); }
.wk-head .wk-day { font: 700 11px var(--sans); letter-spacing: 0.06em; color: var(--ink); }
/* today as Crew Duty has it (2026-10-05): the blue tint, and one blue ring
   round the column (.wk-ring), its date and every aeroplane's flying */
.wk-head.wk-today { background: #1c3454; }
.wk-head.wk-today .wk-day { color: var(--ink); }
.wk-ring { position: absolute; inset: 0 -1px; z-index: 2; pointer-events: none; border: 2px solid var(--blue); border-radius: 8px; }
/* THE GENERAL ROW (2026-10-05): Jet Insight's General events over the aircraft, a bar across their days;
   the title holds still beside the tail column while the days scroll */
.wk-gen-gut { display: flex; align-items: center; font: 700 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wk-gen { position: relative; border-top: 1px solid var(--hair);
  background-image: linear-gradient(90deg, var(--hair) 0 1px, transparent 1px); background-repeat: repeat-x; }
.wk-gen-bar { position: absolute; height: 18px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; overflow: clip;
  border: 1px solid rgba(174, 182, 196, 0.45); background: rgba(174, 182, 196, 0.18);
  color: var(--ink); font: 600 10.5px/16px var(--sans); white-space: nowrap; }
.wk-gen-bar span { position: sticky; }
/* Jet Insight's crew swap events beside the date (2026-10-05), amber like a crew change */
.wk-jisw { margin-left: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(245, 199, 106, 0.7);
  background: rgba(250, 178, 25, 0.22); color: #ffe7b3; font: 800 9.5px var(--sans); letter-spacing: 0.08em; white-space: nowrap; vertical-align: 1px; }
.day-jisw { font: 800 15px var(--sans); fill: #f5c76a; letter-spacing: 0.08em; }
/* the day view's General band (2026-10-05): under the days' names, over the aeroplanes */
.gen-bar { fill: rgba(174, 182, 196, 0.18); stroke: rgba(174, 182, 196, 0.55); stroke-width: 1.5; }
.gen-bar-t { font: 600 15px var(--sans); fill: var(--ink); }
.gen-gut { font: 700 14px var(--sans); letter-spacing: 0.14em; fill: var(--muted); }
.wk-head .wk-counts { display: block; font: 600 9.5px var(--sans); color: var(--muted); margin-top: 1px; }
.wk-head .wk-counts.short { color: #ff9a9a; }
.wk-gut { padding: 6px 8px; border-top: 1px solid var(--hair); background: #141822; border-right: 1px solid var(--line); }
.wk-gut .wk-pod { font: 700 12.5px var(--sans); }
.wk-gut .wk-pod .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.wk-gut .wk-reg { font-size: 10px; color: var(--ink-2); margin: 1px 0 3px; }
.wk-gut .wk-gcrew { font: 600 10.5px var(--sans); color: var(--ink); }
.wk-gut .wk-gnone { font-size: 10px; color: var(--muted); }
/* DENSE cells — all five tails and three days share the quadrant (operator-
   specified 2026-08-29): one-line leg pills, the crew once per day under them. */
.wk-cell {
  border-left: 1px solid var(--hair); border-top: 1px solid var(--hair);
  padding: 3px 4px; display: flex; flex-direction: column; gap: 2px;
  /* the row's share of the quadrant is the ceiling; a stacked day scrolls
     inside its own cell rather than stretching every tail's row. Contained
     up and down only: a sideways swipe over a stacked day still moves the
     week (the SFO-BRO day on Sep 30 held the trackpad, 2026-09-28). */
  min-height: 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior-x: auto; overscroll-behavior-y: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.wk-sub, .wk-mx, .wk-clean, .wk-stby, .wk-idle { flex: none; }
.wk-gut { min-height: 0; overflow: hidden; }
/* One crew segment: legs stacked on the left, the crew BOX on the right — the
   two halves split the cell width, and the box runs the exact height of the
   strip stack it crews (operator-specified 2026-08-29). A mid-day crew swap
   is simply a second segment below. Pressing the crew box edits the DAY crew. */
.wk-seg { display: flex; gap: 4px; align-items: stretch; }
.wk-seg + .wk-seg { margin-top: 2px; }
/* strips take 3/4 of the cell, the crew box 1/4 (operator-specified
   2026-08-29) — the extra strip width carries the broker name */
.wk-seg-legs { flex: 3 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* departure–arrival, then the route (2026-09-29) */
.wk-pill .wk-pill-t { font-weight: 600; flex: none; margin-right: 4px; }
.wk-pill .wk-pill-t sup { font-size: 7px; vertical-align: 4px; margin-left: 1px; color: var(--ink-2); }
.wk-pill .wk-pill-bk {
  margin-left: auto; padding-left: 6px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  font: 600 9px var(--sans); font-style: normal; color: var(--ink-2); opacity: 0.85;
}
.wk-seg-crew {
  flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0 5px; cursor: pointer;
  font: 600 10px/1.2 var(--sans); color: var(--ink-2); white-space: nowrap;
}
.wk-seg-crew span, .wk-seg-crew i { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wk-seg-crew:hover { background: rgba(255, 255, 255, 0.11); }
.wk-seg-crew.sug { color: var(--warn); border: 1.5px dashed rgba(250, 178, 25, 0.6); }
.wk-seg-crew.accw { color: #7fd18a; border: 1.5px dashed rgba(127, 209, 138, 0.55); }
.wk-seg-crew i { color: var(--muted); font-style: normal; }
.wk-cell.wk-today-c { background: rgba(57, 135, 229, 0.07); }
/* Strips GROW with their segment: 2–3 trips fill the cell height, more legs
   split the same space into thinner strips (min 13px, never fatter than 30). */
.wk-pill {
  flex: 1 1 auto; min-height: 13px; max-height: 30px; min-width: 0;
  display: flex; align-items: center; overflow: hidden;
  font: 600 9.5px var(--mono); letter-spacing: -0.01em; white-space: nowrap;
  border-radius: 5px; padding: 0 5px; cursor: pointer;
  border: 1px solid; color: var(--ink);
}
.wk-pill:hover { filter: brightness(1.3); }
.wk-pill.cat-live { background: rgba(147, 212, 126, 0.13); border-color: rgba(147, 212, 126, 0.5); }
.wk-pill.cat-repo { background: rgba(78, 205, 196, 0.13); border-color: rgba(78, 205, 196, 0.5); }
.wk-pill.cat-owner { background: rgba(165, 170, 240, 0.13); border-color: rgba(165, 170, 240, 0.5); }
.wk-pill.is-sug { border: 1.5px dashed var(--warn); }
.wk-pill.is-acc { border: 1.5px dashed #7fd18a; }
/* A repo sold with the trip that will NOT be flown: hollow, dashed, faint —
   on the board because Jet Insight carries it, never mistakable for a flight
   somebody is crewing (operator rule, 2026-08-29). */
.wk-pill.is-ghost {
  background: none; border-style: dashed; border-color: var(--line);
  color: var(--muted); opacity: 0.7;
}
/* crew and flags on one wrapping line */
.wk-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin-bottom: 3px;
  font: 600 10.5px var(--sans); color: var(--ink-2); }
.wk-sub i { font-style: normal; color: var(--muted); }
/* a crew change between two legs, or after the day's last (2026-10-05): its tag on a line across the cell */
.wk-sub-chg { flex-wrap: nowrap; margin: 1px 0; }
.wk-sub-chg::after { content: ''; flex: 1 1 auto; min-width: 8px; border-top: 1px dashed rgba(174, 182, 196, 0.4); }
.wk-sub .sug { color: var(--warn); }
.wk-sub .accw { color: #7fd18a; }
.wk-bk { font: 600 9.5px var(--sans); letter-spacing: 0.05em; color: #f5c76a; margin-top: 1px; }
.wk-mx {
  border-radius: 6px; padding: 2px 6px; font-size: 10px; color: var(--ink-2);
  background: rgba(232, 131, 126, 0.12); border: 1px dashed rgba(232, 131, 126, 0.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-mx b { color: var(--ink); }
.week-grid { cursor: grab; touch-action: pan-y; user-select: none; }
.week-grid:active { cursor: grabbing; }
.wk-head[data-day] { cursor: pointer; }
.wk-head[data-day]:hover .wk-day { color: var(--blue); }
.wk-caret { color: var(--muted); font-size: 10px; }
.day-hit { fill: transparent; cursor: pointer; }

/* day roster popup rows */
.dp-list { margin-top: 10px; }
.dp-sec {
  font: 700 11px var(--sans); letter-spacing: 0.12em; color: var(--muted);
  margin: 10px 0 4px; border-bottom: 1px solid var(--hair); padding-bottom: 3px;
}
.dp-row { display: flex; align-items: baseline; gap: 8px; padding: 2.5px 0; font-size: 13px; }
.dp-name { flex: none; width: 86px; font-weight: 600; color: var(--ink); }
.dp-loc { flex: 1; color: var(--ink-2); }
.dp-pod { font-weight: 700; }
.dp-sug { color: var(--warn); font-size: 11px; font-weight: 600; }
.dp-st { flex: none; font: 700 10.5px var(--sans); letter-spacing: 0.06em; color: var(--muted); }
.dp-st.dp-on, .dp-st.dp-sby { color: #7fd18a; }
.dp-st.dp-onh { color: #7fd18a; opacity: 0.75; }
.dp-st.dp-off, .dp-st.dp-ovt { color: var(--warn); }
.dp-st.dp-tvl, .dp-st.dp-trntvl { color: #4ecdc4; }
.dp-st.dp-vac, .dp-st.dp-trn { color: var(--serious); }
.dp-st.dp-onhabroad { color: var(--serious); opacity: 0.8; }

.hint-acc { color: #7fd18a; font-weight: 700; }
.wk-stby {
  border-radius: 6px; padding: 2px 6px; font-size: 10px; font-weight: 600;
  color: var(--ink-2); background: rgba(139, 147, 164, 0.12);
  border: 1px solid rgba(139, 147, 164, 0.45);
}
.wk-stby span { font-size: 9.5px; font-weight: 500; color: var(--muted); }

/* one-line suggestion rows */
.suglist { display: flex; flex-direction: column; gap: 4px; }
#suglist .sug {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--hair); border-radius: 10px; background: var(--surface);
  padding: 6px 12px; cursor: pointer; font-size: 13px;
}
#suglist .sug:hover { background: var(--hair); }
#suglist .sug.is-acc { border-color: rgba(127, 209, 138, 0.45); }
.sug-when { font-weight: 600; color: var(--muted); width: 48px; flex: none; }
.sug-route { color: var(--ink); font-weight: 600; }
/* ---- morning briefing: today's crews at a glance ---- */
.briefing { max-width: 1080px; margin: 18px auto; padding: 0 10px; }
.bf-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.bf-date { font: 700 16px var(--sans); letter-spacing: 0.06em; color: var(--ink); }
.bf-ct { font: 600 12.5px var(--sans); color: var(--ink-2); }
.bf-ct b { color: var(--ink); font-size: 14px; }
/* One vertical card per aeroplane, the whole fleet side by side. */
.bf-cards { display: grid; grid-template-columns: repeat(var(--bf-n, 5), minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1150px) { .bf-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
.bf-card {
  border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
}
.bf-seg { border-top: 1px solid var(--hair); margin-top: 10px; padding-top: 9px; }
.bf-crew2 { font: 600 13px var(--sans); color: var(--ink); }
.bf-crew2.sug { color: var(--warn); }
.bf-crew2.acc { color: #7fd18a; }
/* The numbers the card exists for — big and bright (operator, 2026-08-28). */
.bf-k {
  font: 700 9.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-right: 2px; flex: none;
}
.bf-duty {
  margin-top: 7px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-2);
}
.bf-duty b { font: 700 15px "IBM Plex Mono", var(--sans); color: var(--ink); letter-spacing: 0.01em; }
.bf-len {
  font: 700 14px var(--sans); color: var(--ink);
  background: rgba(255, 255, 255, 0.10); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 9px;
}
.bf-len.is-amber { color: #0d1117; background: #f5c76a; border-color: #f5c76a; }
.bf-len.is-red { color: #0d1117; background: #ff8f7d; border-color: #ff8f7d; }
.bf-sub { margin-top: 3px; font-size: 12px; color: var(--ink-2); }
.bf-lim {
  margin-top: 6px; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-2);
}
.bf-lim b { font: 700 14.5px "IBM Plex Mono", var(--sans); color: var(--ink); }
.bf-lim.is-amber, .bf-lim.is-amber b { color: #f5c76a; }
.bf-lim.is-red, .bf-lim.is-red b { color: #ff8f7d; font-weight: 700; }
.bf-card.is-idle { opacity: 0.75; }
.bf-head { display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.bf-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; }
.bf-reg { color: var(--muted); font-size: 12px; }
.bf-crew { margin-left: auto; font: 600 13px var(--sans); color: var(--ink); }
.bf-crew.sug { color: var(--warn); }
.bf-crew.acc { color: #7fd18a; }
.bf-idle { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.bf-route { margin-top: 6px; font: 600 13px var(--mono, monospace); color: var(--ink-2); }
.bf-duty, .bf-flt { margin-top: 5px; font-size: 12.5px; color: var(--ink-2); }
.bf-duty b, .bf-flt b { color: var(--ink); }
.bf-live { color: #7fd18a; }
.bf-alert { margin-top: 6px; font: 600 12.5px var(--sans); border-radius: 7px; padding: 4px 9px; }
.bf-alert.is-amber { color: #f5c76a; background: rgba(250, 178, 25, 0.10); border: 1px solid rgba(250, 178, 25, 0.35); }
.bf-alert.is-red { color: #ff8f7d; background: rgba(255, 122, 100, 0.10); border: 1px solid rgba(255, 122, 100, 0.45); }
.bf-note { margin-top: 14px; font-size: 11.5px; color: var(--muted); opacity: 0.8; }

.sug-bk {
  flex: none; font: 600 10.5px var(--sans); letter-spacing: 0.03em;
  color: var(--ink-2); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line); border-radius: 5px; padding: 1.5px 7px;
}
.sug-bk.has-min { color: #f5c76a; border-color: rgba(250, 178, 25, 0.45); }
.sug-bk.is-fail { color: #ff8f7d; border-color: rgba(255, 122, 100, 0.6); }
/* the gantt's fictional repo: faint label, tagged NOT FLOWN */
.bar-ghost { opacity: 0.42; }
.bar-ghost-tag { font: 700 15px var(--sans); letter-spacing: 0.14em; fill: var(--ink-2); }
.tr-ghost {
  margin: 0 0 12px; padding: 7px 10px; font-size: 12.5px; line-height: 1.45;
  color: var(--ink-2); border-radius: 8px;
  background: rgba(139, 147, 164, 0.10); border: 1px dashed rgba(139, 147, 164, 0.5);
}
.tr-ghost b { color: var(--ink); letter-spacing: 0.08em; }
.bar-swap, .bar-chsw { font: 800 13px var(--sans); letter-spacing: 0.07em; pointer-events: none; }
.bar-badge { stroke-width: 1.5; pointer-events: none; }
.bar-badge.is-need { fill: rgba(255, 106, 84, 0.34); stroke: #ff8f7d; }
.bar-swap.is-need { fill: #ffe1db; }
.bar-badge.is-pend { fill: rgba(250, 178, 25, 0.26); stroke: #f5c76a; stroke-dasharray: 5 4; }
.bar-swap.is-pend { fill: #ffe7b3; }
.bar-badge.is-ok { fill: rgba(127, 209, 138, 0.24); stroke: #7fd18a; }
.bar-swap.is-ok { fill: #dcf7e0; }
.bar-badge.is-change { fill: rgba(250, 178, 25, 0.26); stroke: #f5c76a; }
.bar-chsw.is-change { fill: #ffe7b3; }
.bar-badge.is-info { fill: rgba(174, 182, 196, 0.16); stroke: rgba(174, 182, 196, 0.6); }
.bar-chsw.is-info { fill: #d2d7df; }
/* the crew swap tags are filled badges (operator, 2026-09-25): red to plan,
   amber for a crew change or a plan still to enter in Jet Insight, green planned */
.wk-swap, .wk-booked { font-style: normal; margin-left: 5px; padding-left: 5px; border-left: 1px solid currentColor; color: #7fd18a; }
.wk-chsw {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 999px; border: 1px solid;
  font: 800 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.wk-swap { color: #ffd6cf; background: rgba(255, 106, 84, 0.30); border-color: rgba(255, 143, 125, 0.95); box-shadow: 0 0 10px rgba(255, 106, 84, 0.35); }
.wk-swap.ok { color: #d4f5d9; background: rgba(127, 209, 138, 0.22); border-color: rgba(127, 209, 138, 0.8); box-shadow: none; }
.wk-chsw { color: #c6ccd6; background: rgba(174, 182, 196, 0.12); border-color: rgba(174, 182, 196, 0.45); }
/* a swap whose crew in Jet Insight cannot fly it: the tag goes red and says so (2026-09-29) */
.wk-swap.is-jibad, .wk-chsw.is-jibad, .wk-chsw.is-change.is-jibad { color: #ffd6cf; background: rgba(255, 106, 84, 0.30); border-color: rgba(255, 143, 125, 0.95); box-shadow: 0 0 10px rgba(255, 106, 84, 0.35); }
/* a positioning leg that can fly the day before instead of a swap (2026-10-05) */
.wk-move { font-style: normal; margin-left: 5px; padding-left: 5px; border-left: 1px solid currentColor; color: #d4f5d9; }
.cs-move { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; padding: 6px 8px; border-radius: 10px;
  border: 1px solid rgba(127, 209, 138, 0.55); background: rgba(127, 209, 138, 0.10); }
.cs-move > .cs-b { flex: 1 1 260px; }
.cs-move-n { font: 600 11px var(--sans); color: var(--muted); }
.wk-jibad { font-style: normal; margin-left: 5px; padding-left: 5px; border-left: 1px solid currentColor; color: #ffe1db; }
.bar-chsw.is-need { fill: #ffe1db; }
.cs-navlbl .is-jibad { color: #ff8f7d; }
.sug-chsw {
  flex: none; font: 700 10px var(--sans); letter-spacing: 0.05em;
  color: #aeb6c4; background: rgba(174, 182, 196, 0.10);
  border: 1px solid rgba(174, 182, 196, 0.35);
  border-radius: 5px; padding: 1.5px 7px; white-space: nowrap;
}
.sug-swap {
  flex: none; font: 700 10px var(--sans); letter-spacing: 0.05em;
  color: #ff8f7d; background: rgba(255, 122, 100, 0.10);
  border: 1px solid rgba(255, 122, 100, 0.45);
  border-radius: 5px; padding: 1.5px 7px; white-space: nowrap;
}
.sug-swap.ok { color: #7fd18a; background: rgba(127, 209, 138, 0.10); border-color: rgba(127, 209, 138, 0.4); }
.sug-x {
  flex: none; font: 700 10.5px var(--sans); letter-spacing: 0.04em;
  color: var(--ink-2); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 8px; cursor: pointer; white-space: nowrap;
}
.sug-x:hover { background: rgba(255, 255, 255, 0.12); }
.sug-x.open { color: var(--ink); border-color: rgba(57, 135, 229, 0.55); background: rgba(57, 135, 229, 0.25); }
.sug-ov { color: var(--muted); font-weight: 500; font-size: 11px; }
/* legs sold with the trip that will not be flown */
.sug-ghost {
  flex: none; font: 600 10px var(--sans); letter-spacing: 0.04em;
  color: var(--muted); background: rgba(139, 147, 164, 0.10);
  border: 1px dashed rgba(139, 147, 164, 0.45);
  border-radius: 5px; padding: 1.5px 7px; white-space: nowrap;
}
.sug-leg.is-ghost { opacity: 0.55; }
.lg-ghost { color: var(--muted); font-size: 10.5px; font-style: normal; letter-spacing: 0.04em; }
/* GRID, not wrapping flex: the two seats must sit level on one line, and the
   selects share what is left over so they line up column-wise down the trip
   (operator-specified 2026-08-27 — in the narrow split panel the SIC pair was
   dropping onto a second row). */
.sug-leg {
  display: grid;
  grid-template-columns: auto minmax(84px, auto) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 4px 8px;
  margin: 0 0 3px 26px; padding: 5px 10px;
  border-left: 2px solid var(--line); background: rgba(255, 255, 255, 0.02);
  border-radius: 0 8px 8px 0; font-size: 12.5px;
}
.lg-route { font: 600 12.5px var(--sans); color: var(--ink); }
.lg-lab { font: 700 10px var(--sans); letter-spacing: 0.08em; color: var(--muted); }
.lg-sel {
  font: 600 12px var(--sans); color: var(--ink);
  width: 100%; min-width: 0; max-width: 210px; justify-self: start;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  border-radius: 6px; padding: 2.5px 6px;
}
.lg-fixed { font: 600 12px var(--sans); color: var(--ink-2); min-width: 0; }
.lg-fixed i { color: var(--muted); font-size: 10.5px; }
/* Too narrow for six columns (small windows): FOUR columns — time and route
   share the first line, and the second line places label, select, label,
   select into exactly those four cells, level and separate. (A fifth phantom
   column here once dropped the PIC select into an auto column and ran the SIC
   label into it.) */
@media (max-width: 900px) {
  .sug-leg { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
  .sug-leg > .lg-route { grid-column: 2 / -1; }
}
.sug-crew { color: var(--warn); font-weight: 600; margin-left: auto; }
.sug-crew.acc { color: #7fd18a; }
.sug-warn { color: var(--warn); }
.sug-st { font: 700 10.5px var(--sans); letter-spacing: 0.06em; color: var(--warn); flex: none; }
.sug-st.acc { color: #7fd18a; }
.btn-appr { border-color: rgba(127, 209, 138, 0.5); color: #7fd18a; }
.btn-appr:hover { background: rgba(127, 209, 138, 0.15); color: #fff; }

/* popup pairing controls */
.pp { margin-top: 12px; border-top: 1px solid var(--hair); padding-top: 10px; }
.pp-head { font: 700 11px var(--sans); letter-spacing: 0.12em; color: var(--muted); margin-bottom: 6px; }
.pp-st { color: var(--warn); }
.pp-st.acc { color: #7fd18a; }
.pp-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.pp-row .pp-sel { flex: 1; font-size: 13px; padding: 4px 6px; }
.pp-row .jc-sel { flex: 1; font-size: 13px; padding: 4px 6px; }   /* the crew-in-JI pickers, same look */
.pp-warn { margin-top: 6px; font-size: 12px; color: var(--warn); }

/* tell the board — the input rides the bottom of the suggestions quadrant;
   the log renders under the suggestion rows in the same scroller */
.talk-row { flex: none; display: flex; gap: 8px; padding: 8px 2px 2px; border-top: 1px solid var(--grid); }
.talk-row input { flex: 1; font-size: 13px; padding: 6px 10px; }
.talk-log { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.tk {
  display: flex; align-items: baseline; gap: 10px; font-size: 12.5px;
  border: 1px solid var(--hair); border-radius: 8px; padding: 5px 10px;
}
.tk-text { color: var(--ink); }
.tk-label { color: #7fd18a; font-size: 12px; }
.tk-held .tk-label { color: var(--muted); font-style: italic; }
.tk-x { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; }
.tk-x:hover { color: var(--crit); }

.wk-idle {
  border-radius: 6px; padding: 2px 6px; font-size: 10px; font-weight: 600;
  color: var(--warn); background: rgba(250, 178, 25, 0.07);
  border: 1px dashed rgba(250, 178, 25, 0.45);
}
.wk-clean {
  border-radius: 6px; padding: 2px 6px; font-size: 10px; color: var(--ink-2);
  background: rgba(111, 176, 212, 0.12); border: 1px dashed rgba(111, 176, 212, 0.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Trip details popup — the wall's trip-pop, sized for this page. Anchored to
   .sched-wrap and positioned against the strip that was pressed. */
.trip-pop {
  position: absolute; z-index: 40;
  width: 340px; max-width: calc(100% - 24px);
  max-height: calc(100% - 24px); overflow-y: auto;
  padding: 14px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(158deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.035) 45%,
    rgba(255, 255, 255, 0.055) 100%), rgba(12, 17, 27, 0.90);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 20px 55px rgba(0, 0, 0, 0.55);
}
.trip-pop[hidden] { display: none; }
.trip-x {
  position: absolute; top: 8px; right: 10px;
  width: 32px; height: 32px; font: 400 24px/1 var(--sans);
  color: var(--ink-2); background: none; border: none; border-radius: 8px; cursor: pointer;
}
.trip-x:hover { color: var(--ink); background: rgba(255, 255, 255, 0.10); }
.tr-head { display: flex; align-items: baseline; gap: 9px; padding-right: 32px; }
.tr-dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; flex: none; }
.tr-pod { font: 700 20px var(--sans); color: var(--ink); letter-spacing: 0.04em; }
.tr-tail { font: 15px var(--sans); color: var(--ink-2); }
.tr-cat { margin-left: auto; font: 700 11px var(--sans); letter-spacing: 0.12em; }
.tr-cat.cat-live { color: var(--cat-live); }
.tr-cat.cat-repo { color: var(--cat-repo); }
.tr-cat.cat-owner { color: var(--cat-owner); }
.tr-route { font: 600 23px var(--sans); color: var(--ink); margin: 10px 0 12px; }
.tr-route span { color: var(--muted); }
.tr-rows { display: flex; flex-direction: column; gap: 1px; }
.tr-row { display: flex; align-items: baseline; gap: 10px; padding: 4.5px 0; }
.tr-k { flex: none; width: 96px; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.tr-v { flex: 1; font: 14.5px var(--sans); color: var(--ink); min-width: 0; }
.tr-note { color: var(--muted); font-size: 12.5px; }
.tr-seat { font: 700 10.5px var(--sans); color: var(--muted); letter-spacing: 0.1em; }
.tr-crew { display: block; }
.tr-crew + .tr-crew { margin-top: 2px; }
.tr-loc { font-weight: 600; letter-spacing: 0.06em; color: var(--blue); }
.tr-foot { margin-top: 12px; }
/* every crew swap the trip needs, summed (2026-10-04) */
.tr-cs-sum { font: 600 11.5px var(--sans); color: var(--ink-2); margin-bottom: 7px; }
.tr-cs-sum b { font: 700 13px var(--mono); color: var(--ink); margin-left: 4px; }
@media (max-width: 760px) {
  .sched-head { grid-template-columns: 1fr auto; }
  .sched-meta { display: none; }
}

/* ---- toolbar / stats ---- */
.toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 16px 0 14px;
}
.stats { display: flex; gap: 10px; flex-wrap: wrap; }
.stat {
  border: 1px solid var(--hair); background: var(--surface);
  border-radius: 10px; padding: 6px 12px; font-size: 13px; color: var(--ink-2);
}
.stat b { color: var(--ink); font-size: 15px; margin-right: 4px; }
.stat.warn b { color: var(--warn); }
.tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.daysel { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
select, input, textarea {
  font: 500 14px var(--sans); color: var(--ink);
  background: #0d1220; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px;
}
/* the OVT divider in crew pickers: a muted heading over the off-but-callable
   names, never mistakable for the on-duty list above it */
optgroup { font: 700 11px var(--sans); font-style: normal; letter-spacing: 0.06em;
  color: var(--warn); background: #0d1220; }
optgroup option { font: 500 13px var(--sans); color: var(--ink-2); }
select:focus, input:focus, textarea:focus { outline: 1px solid var(--blue); }

.btn {
  font: 600 14px var(--sans); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 14px; cursor: pointer;
}
.btn:hover:not(:disabled) { color: var(--ink); background: var(--hair); }
.btn:disabled { opacity: 0.35; cursor: default; }
.foot .is-stale { color: #f5c76a; font-weight: 700; }
#duty-note.is-stale { color: #f5c76a; }
.btn-primary { background: rgba(57, 135, 229, 0.30); color: var(--ink); border-color: rgba(57, 135, 229, 0.55); }
.btn-primary:hover { background: rgba(57, 135, 229, 0.45); }
.btn-danger { border-color: rgba(208, 59, 59, 0.5); color: #f0a0a0; }
.btn-danger:hover { background: rgba(208, 59, 59, 0.18); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 13px; }

.msg { font-size: 13px; color: var(--muted); }
.msg.err { color: var(--serious); }
.msg.ok { color: #7fd18a; }

/* ---- trip cards ---- */
.trips { display: flex; flex-direction: column; gap: 14px; }
.day-head {
  font: 600 13px var(--sans); color: var(--muted); letter-spacing: 0.08em;
  text-transform: uppercase; margin: 14px 0 0; padding-bottom: 4px;
  border-bottom: 1px solid var(--hair);
}
.day-head2 {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 7px 12px;
  border: 1px solid var(--hair); border-radius: 10px; background: var(--surface);
}
.day-head2 .dh-date {
  font: 600 13px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
}
.day-head2 .dh-demand { font-size: 12.5px; color: var(--ink-2); }
.day-head2 .dh-crew { font-size: 12.5px; color: var(--muted); }
.day-head2 .dh-crew b { color: var(--ink-2); }
.day-head2 .dh-short {
  margin-left: auto; font: 700 12px var(--sans); letter-spacing: 0.05em;
  color: #ff9a9a;
}
.day-head2.day-short {
  border-color: rgba(208, 59, 59, 0.65); background: rgba(208, 59, 59, 0.10);
}
.day-head2.day-short .dh-date { color: #ffb3b3; }
.day-head2.day-quiet { opacity: 0.55; padding: 4px 12px; }
.flag-broker { color: var(--blue); border-color: rgba(57, 135, 229, 0.45); font-weight: 700; }
.trip {
  border: 1px solid var(--glass-edge); border-radius: 14px;
  background: var(--card); padding: 14px 16px;
}
.trip.is-accepted { border-color: rgba(12, 163, 12, 0.55); }
.trip.is-crewed { opacity: 0.62; }

.trip-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pod {
  font: 700 12px var(--mono); padding: 3px 8px; border-radius: 7px;
  color: #05070c;
}
.pod-POD1 { background: var(--blue); color: #fff; }
.pod-POD2 { background: var(--orange); color: #fff; }
.pod-POD3 { background: var(--aqua); color: #fff; }
.pod-POD5 { background: var(--yellow); color: #fff; }
.pod-POD6 { background: var(--magenta); color: #fff; }
.cat {
  font: 600 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 7px; border: 1px solid var(--hair);
}
.cat-live { color: var(--cat-live); }
.cat-repo { color: var(--cat-repo); }
.cat-owner { color: var(--cat-owner); }
.trip-code { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.trip-when { font-size: 14px; color: var(--ink-2); }
.trip-flags { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.flag {
  font: 600 11px var(--sans); padding: 3px 8px; border-radius: 7px;
  border: 1px solid var(--hair); color: var(--muted);
}
.flag-warn { color: var(--warn); border-color: rgba(250, 178, 25, 0.4); }
.broker-sel { font-size: 12.5px; padding: 4px 6px; }
.req-line {
  margin-top: 8px; font-size: 12px; color: var(--ink-2); line-height: 1.5;
  border-left: 2px solid var(--line); padding-left: 8px;
}
.req-line b { color: var(--ink); }
.req-note { color: var(--muted); }
.flag-ok { color: #7fd18a; border-color: rgba(127, 209, 138, 0.35); }
.flag-crewed { color: var(--violet); border-color: rgba(144, 133, 233, 0.4); }

.route { margin: 8px 0 4px; font-family: var(--mono); font-size: 14px; color: var(--ink); }
.route .arr { color: var(--muted); padding: 0 3px; }
.legs { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.seat {
  border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px;
  background: var(--surface);
}
.seat-label { font: 700 11px var(--sans); letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; }
.seat select { width: 100%; }
.seat-why { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.why {
  font-size: 11.5px; color: var(--ink-2); background: var(--hair);
  border-radius: 6px; padding: 2px 7px;
}
.why.neg { color: #f2b8a2; }
.why.pos { color: #a9e2b0; }
.score { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 6px; }

.trip-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.trip-status { font: 600 12px var(--sans); letter-spacing: 0.05em; }
.st-open { color: var(--warn); }
.st-proposed { color: var(--blue); }
.st-accepted { color: #7fd18a; }

.empty {
  text-align: center; color: var(--muted); padding: 40px 20px;
  border: 1px dashed var(--line); border-radius: 14px; font-size: 14px;
}

/* ---- banner / importer ---- */
.banner {
  border: 1px solid rgba(250, 178, 25, 0.4); background: rgba(250, 178, 25, 0.07);
  color: var(--ink-2); border-radius: 12px; padding: 12px 14px; font-size: 13.5px;
  margin-bottom: 14px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
/* display:flex above would defeat the hidden attribute — never show a hidden banner */
.banner[hidden] { display: none; }
.importer {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 14px; margin-bottom: 14px; font-size: 13.5px; color: var(--ink-2);
}
.importer code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.importer textarea { width: 100%; margin: 10px 0; font-family: var(--mono); font-size: 12.5px; }

/* ---- roster ---- */
.roster { overflow-x: auto; border: 1px solid var(--glass-edge); border-radius: 14px; background: var(--card); }
.roster table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 980px; }
.roster th {
  text-align: left; font: 600 11px var(--sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); padding: 10px 10px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.roster td { padding: 8px 10px; border-bottom: 1px solid var(--hair); color: var(--ink-2); white-space: nowrap; }
.roster tr:last-child td { border-bottom: none; }
.roster td.name { color: var(--ink); font-weight: 600; }
.tag {
  font: 600 10.5px var(--sans); letter-spacing: 0.05em; padding: 2px 7px;
  border-radius: 6px; border: 1px solid var(--hair); color: var(--muted); margin-left: 6px;
}
.tag-sample { color: var(--warn); border-color: rgba(250, 178, 25, 0.4); }
.tag-ca { color: var(--violet); border-color: rgba(144, 133, 233, 0.45); }
.tag-pri { color: var(--serious); border-color: rgba(236, 131, 90, 0.45); }
.pill-yes { color: #7fd18a; }
.pill-no { color: var(--muted); }
.rot-now { color: #7fd18a; }
.rot-off { color: var(--muted); }
.home-unknown { color: var(--warn); }

/* ---- pilot editor ---- */
.editor {
  border: 1px solid var(--line); border-radius: 12px; background: #0b101c;
  padding: 14px; margin-bottom: 14px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.editor label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.editor .full { grid-column: 1 / -1; }
.editor .checks { display: flex; gap: 16px; align-items: center; grid-column: 1 / -1; }
.editor .checks label { flex-direction: row; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.editor .actions { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }

.foot {
  flex: none; padding: 5px 14px 6px;
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 11px; border-top: 1px solid var(--hair);
  white-space: nowrap;
}
.foot-note { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.foot .feedchip { margin-left: 0; }

/* THE SWITCH'S LANE. The CRAFT switch (/css/app-switch.css) is a 140px pill
   pinned over the top centre (2026-10-29; it was a 455px bar), so it covers
   the inner 64px of both top panels past their 6px half of the gap. Their
   first header rows stop 10px short of it: the schedule's readouts end before
   it, the map's title and filters start after it. Below 1600px the schedule's
   centred controls would come within a few pixels of it too, so they centre
   in the room left of it instead. Stacked (1020px and under) the page starts
   below the switch: none of this applies. */
/* Since 2026-11-11 the lane is 30px wider on the schedule's side: the Back to CRAFT button (.app-back) rides the
   pill's left, 24px and a 6px gap. */
@media (min-width: 1021px) {
  .quad.q-sched .sched-read { margin-right: 91px; }
  .quad-map.q-map .qhead { padding-left: 78px; }
}
@media (min-width: 1021px) and (max-width: 1600px) {
  .quad.q-sched .sched-head { padding-right: 93px; }
  .quad.q-sched .sched-read { margin-right: 0; }
}
/* The roster tab's page starts below the switch. */
#view-roster { padding-top: 58px; }

/* ================= DESKTOP VIEW (operator, 2026-10-29) =================
   Picked under VIEW in the CRAFT switch (/js/app-switch.js, which sets
   data-viewmode on the root and works out --dv-*, the box every board draws
   a panel in). Each quadrant gets the window to itself, one under the other
   a window apart, and the page scrolls from one to the next, coming to rest
   on each: schedule, map, crew duty, then duty & flight (the operator's
   order, which is the board's own). The bottom line moves onto the band at
   the top, its note on the left, its buttons on the right, as on the wall.
   Stacked (1020px and under) the board scrolls on its own terms. */
@media (min-width: 1021px) {
  :root[data-viewmode="desktop"] {
    height: auto; overflow-x: hidden; overflow-y: auto;
    scroll-snap-type: y mandatory; scroll-padding-top: var(--dv-top);
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }
  :root[data-viewmode="desktop"] body {
    position: static; inset: auto; margin: 0; width: auto; height: auto;
    overflow: visible; display: block;
  }
  :root[data-viewmode="desktop"] main { padding: 0; }
  :root[data-viewmode="desktop"] #view-board.quads {
    /* clip, not hidden: a hidden box is a scroller of its own, and the
       panels' resting points would belong to it instead of to the page */
    overflow: clip;
    height: auto; display: flex; flex-direction: column; align-items: center;
    gap: var(--dv-gap);
    padding: var(--dv-top) 0 calc(var(--dv-page) - var(--dv-top) - var(--dv-h));
  }
  :root[data-viewmode="desktop"] #view-board > .quad {
    flex: none; width: var(--dv-w); height: var(--dv-h); scroll-snap-align: start;
  }
  /* The switch is on the band, clear of every panel: no lane to keep. */
  :root[data-viewmode="desktop"] .quad.q-sched .sched-read { margin-right: 0; }
  :root[data-viewmode="desktop"] .quad.q-sched .sched-head { padding-right: 2px; }
  :root[data-viewmode="desktop"] .quad-map.q-map .qhead { padding-left: 12px; }
  /* The panels' own scrollers hand the wheel on to the page at their ends,
     up and down; sideways they still hold it, so a swipe is never "back". */
  :root[data-viewmode="desktop"] :is(.duty-wrap, .q-brief .bf-card, .wk-cell) { overscroll-behavior-y: auto; }
  /* Every panel is a window high already: EXPAND has nothing to take over. */
  :root[data-viewmode="desktop"] .sched-size { display: none; }
  :root[data-viewmode="desktop"] .foot {
    position: fixed; top: 0; left: 0; right: 0; z-index: 55;
    height: 48px; padding: 0 16px; border-top: 0;
  }
  :root[data-viewmode="desktop"] .foot-note { flex: 0 1 auto; max-width: calc(50% - 106px); }
  :root[data-viewmode="desktop"] .foot .feedchip { margin-left: auto; }
}
/* A phone's schedule header stacks: name and AIRCRAFT, then the date, then
   the controls, wrapping rather than running off both edges. */
@media (max-width: 600px) {
  .quad.q-sched .sched-head { grid-template-columns: minmax(0, 1fr); }
  .quad.q-sched .sched-read { grid-row: 2; grid-column: 1; justify-self: start; }
  .quad.q-sched .rail-group { grid-row: 3; justify-self: stretch; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 760px) {
  .seats { grid-template-columns: 1fr; }
  .editor { grid-template-columns: 1fr 1fr; }
  .tools { margin-left: 0; }
  .feedchip { display: none; }
}

/* ================= quadrant specifics ================= */

/* TL · schedule: the DAY/WEEK/‹/LIVE/›/RE-PAIR cluster sits on the panel's
   CENTRE LINE (operator-specified 2026-08-29). Title and tail pills plus the
   date readouts measure ~1030px together, which does not share a row with the
   controls until the quadrant is very wide — so the controls take a centred
   line of their own, and only claim the middle column of row one on a screen
   with the width to hold all three. Padding is trimmed to pay for the row. */
.q-sched .qhead { padding: 4px 2px 5px; }
.q-sched .sched-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 2px 10px;
}
/* Row one names the panel and says what is on screen; the tail pills are
   controls, so this cell sizes to its content and is never clipped. */
.sched-title {
  grid-row: 1; grid-column: 1;
  display: flex; align-items: center; gap: 8px;
}
.sched-read {
  grid-row: 1; grid-column: 2; justify-self: end;
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0; overflow: hidden; white-space: nowrap;
}
/* Row two is the controls, centred on the panel across its whole width. */
.q-sched .rail-group { grid-row: 2; grid-column: 1 / -1; justify-self: center; margin-left: 0; }

/* EXPAND / MINIMIZE (operator-specified 2026-09-25). The schedule runs the
   whole left column, drawn over the Crew Duty quadrant, which stays laid out
   underneath (hidden) so its scroll position and search survive the trip.
   The right column is untouched. The stacked phone layout has no column to
   take over, and there the page's width limits the drawing, so height would
   only add empty space: no button, and the stored choice waits for a desk. */
.sched-size { display: inline-flex; align-items: center; gap: 5px; }
.size-ico { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.size-ico .ico-shrink { display: none; }
.sched-size.on .size-ico .ico-grow { display: none; }
.sched-size.on .size-ico .ico-shrink { display: inline; }
@media (min-width: 1021px) {
  #view-board.sched-tall .q-sched { grid-column: 1; grid-row: 1 / span 2; z-index: 2; }
  #view-board.sched-tall .q-sug { grid-column: 1; grid-row: 2; visibility: hidden; }
}
@media (max-width: 1020px) {
  .sched-size { display: none; }
}
/* The panel unrolls downward from its old edge, and rolls back up. */
.q-sched.is-growing { animation: sched-grow 0.26s cubic-bezier(0.2, 0.7, 0.2, 1); }
.q-sched.is-shrinking { animation: sched-shrink 0.22s cubic-bezier(0.4, 0, 0.8, 0.4) forwards; }
@keyframes sched-grow {
  from { clip-path: inset(0 0 var(--sched-grow, 0px) 0 round 16px); }
  to   { clip-path: inset(0 0 0 0 round 16px); }
}
@keyframes sched-shrink {
  from { clip-path: inset(0 0 0 0 round 16px); }
  to   { clip-path: inset(0 0 var(--sched-grow, 0px) 0 round 16px); }
}
/* The week view's rows take the height on their own; the pills and names
   are allowed to grow into it. */
@media (min-width: 1021px) {
  #view-board.sched-tall .wk-pill { max-height: 46px; font-size: 11.5px; }
  #view-board.sched-tall .wk-pill .wk-pill-bk { font-size: 10.5px; }
  #view-board.sched-tall .wk-seg-crew { font-size: 12px; }
  #view-board.sched-tall .wk-sub { font-size: 12px; }
  #view-board.sched-tall .wk-gut .wk-pod { font-size: 14.5px; }
  #view-board.sched-tall .wk-gut .wk-reg { font-size: 11.5px; }
  #view-board.sched-tall .wk-gut .wk-gcrew { font-size: 12.5px; }
}

/* BL · suggestions */
.q-sug .rail-group { margin-left: 0; }
.q-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.q-tools .btn { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.q-tools .daysel { font-size: 11.5px; }
.q-tools select { padding: 2.5px 6px; font-size: 12px; }
.q-sug .stats { flex: none; padding: 6px 0 2px; gap: 6px; }
.q-sug .stat { padding: 2.5px 9px; font-size: 11.5px; border-radius: 8px; }
.q-sug .stat b { font-size: 13px; }

/* BR · duty & flight: the briefing's five vertical cards, quadrant-sized */
.q-brief .briefing { max-width: none; margin: 0; padding: 0 0 6px; }
.q-brief .bf-top { margin: 2px 0 8px; gap: 10px; }
.q-brief .bf-cards { grid-template-columns: repeat(var(--bf-n, 5), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; }
/* the whole fleet stays on one row down to laptop width; only a small window wraps */
@media (max-width: 1150px) {
  .q-brief .bf-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(250px, auto); }
}
.q-brief .bf-card { padding: 9px 10px; }
.q-brief .bf-duty b { font-size: 13px; }
.q-brief .bf-len { font-size: 12.5px; padding: 1px 7px; }
.q-brief .bf-lim b { font-size: 12.5px; }
.q-brief .bf-note { margin-top: 8px; }

/* ================= TR · pilot & fleet map ================= */
/* Darker pane so the chart reads through it — the wall's map quadrant. */
.quad-map {
  padding: 0;
  /* the wall's map slab, verbatim */
  background: linear-gradient(158deg,
    rgba(10, 15, 26, 0.62) 0%, rgba(7, 11, 19, 0.48) 50%, rgba(10, 15, 26, 0.58) 100%);
}
.q-map .qhead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  padding: 8px 12px 6px; border-bottom: none;
  pointer-events: none;               /* never blocks a map drag… */
}
.q-map .qhead .rail-btn { pointer-events: auto; }   /* …but its buttons do work */
.map-note { font-size: 10.5px; color: var(--muted); margin-left: auto; }
/* the header keeps PLACE CREW and PIC / SIC; its middle is the clocks' (2026-10-01).
   The title is read by screen readers only: PILOTS labels the filter at the bottom. */
.q-map .qhead .rail-group { margin-left: 4px; }
.q-map .qhead .pm-h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.map-wrap { position: absolute; inset: 0; cursor: grab; overflow: hidden; }
.map-wrap.grabbing { cursor: grabbing; }
#pilotmap { width: 100%; height: 100%; display: block; }
#pm-view { will-change: transform; }
.gratic { stroke: rgba(255, 255, 255, 0.04); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.land { fill: #121927; stroke: rgba(160, 180, 215, 0.22); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.states { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* The 1:10m coast only once zoomed in past FINE_K (app.js applyView). */
.land-fine { display: none; }
.map-fine .land-fine { display: inline; }
.map-fine .land-coarse { display: none; }
.map-ctl {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
}
.map-btn {
  width: 30px; height: 30px; border-radius: 9px;
  font: 600 16px/1 var(--sans); color: var(--ink-2);
  background: rgba(16, 22, 36, 0.8); border: 1px solid var(--line); cursor: pointer;
}
.map-btn:hover { background: rgba(255, 255, 255, 0.14); color: var(--ink); }
.map-btn.on { color: var(--blue); border-color: rgba(57, 135, 229, 0.55); }
/* routes: the airborne leg solid in the tail colour, the rest of today faint */
.pm-route { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: 0.85; }
.pm-route.later { opacity: 0.28; stroke-dasharray: 6 7; }
/* in the air, the dashboard's way (2026-10-05): solid where it has flown (ADS-B), dashed on to where it is going */
.pm-route-flown { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; opacity: 0.9; vector-effect: non-scaling-stroke; }
.pm-route-ahead { fill: none; stroke-width: 2.5; stroke-dasharray: 9 8; opacity: 0.75; vector-effect: non-scaling-stroke; }
/* an aeroplane's tag on a line to it, wherever the layout puts the tag (2026-10-05) */
.pm-plane-lead { stroke-width: 2; stroke-linecap: round; opacity: 0.85; }
/* a crew member's own travel from AmTrav (2026-09-29): the airline flight or the drive, faint and
   dashed, a small grey airliner (or car) on it, and a dashed line in the aeroplane's colour to the trip they are going to.
   The dashboard's airline layer (2026-10-01): a flight in the air bolder, every one still to go today faint,
   in the wall's pale steel; the airliner its own silhouette, dashed where its place is an estimate. */
.pm-aroute { fill: none; stroke: #d4dbe7; stroke-width: 2; stroke-dasharray: 7 7; opacity: 0.75; vector-effect: non-scaling-stroke; }
.pm-aroute.is-soon { stroke-width: 1.6; opacity: 0.4; }
.pm-aroute.is-car { stroke: rgba(207, 214, 228, 0.55); stroke-width: 1.6; stroke-dasharray: 1 4; opacity: 1; }
/* where an airline flight in the air has flown, solid, as on the dashboard (2026-10-05) */
.pm-aroute-flown { fill: none; stroke: #d4dbe7; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; vector-effect: non-scaling-stroke; }
.pm-al-end { fill: rgba(10, 15, 26, 0.6); stroke: #d4dbe7; stroke-width: 2; }
.pm-al-end.is-soon { stroke-width: 1.5; opacity: 0.6; }
.pm-al-end-t { fill: #d4dbe7; font: 600 18px var(--sans); }
.pm-name.pm-al-other { cursor: default; }
.pm-name.pm-al-other:hover { text-decoration: none; }
.pm-xfer { fill: none; stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0.8; vector-effect: non-scaling-stroke; }
.pm-trav-plane { fill: #d4dbe7; stroke: #0a0f1a; stroke-width: 2; }
.pm-trav-plane.is-est { fill: rgba(10, 15, 26, 0.5); stroke: #d4dbe7; stroke-width: 2.2; stroke-dasharray: 4 3; }
.pm-trav-car { fill: #cfd6e4; stroke: #0a0f1a; stroke-width: 1.5; }
/* the crew swap window: the crew Jet Insight already has, shown first with its rank (2026-09-29) */
.cs-navlbl .is-ji { color: #9cc4ff; letter-spacing: 0.06em; }
/* symbols counter-scale on zoom (data-x/data-y + scale(1/k), the wall's way) */
.pm-apt-dot { fill: #8b93a4; stroke: #0a0f1a; stroke-width: 2; }
.pm-apt { fill: var(--muted); font: 600 19px var(--sans); letter-spacing: 0.04em; }
.pm-name { font: 600 23px var(--sans); }
.pm-fld { font: 600 19px var(--sans); fill: var(--muted); }   /* field code beside a merged-list name */
.pm-more { font: 600 20px var(--sans); fill: var(--muted); }
.pm-plane-label { font: 700 24px var(--sans); fill: var(--ink); }
.pm-plane-crew { font: 600 21px var(--sans); fill: var(--ink-2); }
/* a pilot's aeroplane, as an outline in its colour (2026-09-29) */
.pm-att { fill: rgba(10, 15, 26, 0.55); stroke-width: 2; }
.pm-plane-mx { fill: var(--serious); font-weight: 700; }
/* duty-state tints, shared by map names and the abroad box */
.st-on, .st-sby { fill: #7fd18a; color: #7fd18a; }
.st-onh, .st-onhabroad { fill: #5fae6c; color: #5fae6c; }
.st-tvl, .st-trntvl { fill: #4ecdc4; color: #4ecdc4; }
.st-trn { fill: #ec835a; color: #ec835a; }
.st-off { fill: #9aa2b4; color: #9aa2b4; }
.st-vac { fill: #9085e9; color: #9085e9; }
.st-ovt { fill: #fab219; color: #fab219; }
.st-x { fill: #6b7383; color: #6b7383; }
/* Pilots whose spot is outside the chart (based abroad — LLBG and friends):
   a pinned list so nobody silently falls off the edge of the projection. */
.pm-abroad {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; max-width: 250px;
  background: rgba(12, 17, 27, 0.87); border: 1px solid var(--glass-edge);
  border-radius: 10px; padding: 7px 10px; font-size: 11.5px; color: var(--ink-2);
}
.pm-abroad[hidden] { display: none; }
/* The name colours (operator, 2026-09-27): a LEGEND button beside the zoom
   buttons, level with the reset; pressed, the key opens above it, with the
   map's one hint under the colours. Closed it costs one small button. */
.pm-legend {
  position: absolute; left: 50px; bottom: 10px; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.pm-lg-btn { pointer-events: auto; width: auto; padding: 0 11px; font: 700 10.5px var(--sans); letter-spacing: 0.12em; }
/* the bottom row: LEGEND, then which pilots the map shows (moved down from the header, 2026-10-01) */
.pm-lg-row { display: flex; align-items: center; gap: 8px; }
.pm-filter-bar {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 10px;
  border-radius: 9px; background: rgba(16, 22, 36, 0.8); border: 1px solid var(--line); cursor: default;
}
.pm-fb-l { font: 700 10.5px var(--sans); letter-spacing: 0.14em; color: var(--ink-2); }
/* PILOTS is a button: All / PIC / SIC open above it, the map's bottom being below (2026-10-03) */
.pm-seat-menu { position: relative; display: inline-flex; }
.pm-seat-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; margin-left: -6px; padding: 0 6px;
  border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer;
}
.pm-seat-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.pm-seat-btn[aria-expanded="true"] { color: var(--ink); background: rgba(57, 135, 229, 0.30); border-color: rgba(57, 135, 229, 0.55); }
.pm-seat-btn[aria-expanded="true"] .ac-car { transform: rotate(180deg); }
.pm-seat-v { color: var(--blue); letter-spacing: 0.06em; }
.ac-pop.pm-seat-pop { top: auto; bottom: calc(100% + 8px); left: -6px; min-width: 176px; }
.pm-seat-row {
  display: grid; grid-template-columns: 14px 30px 1fr; align-items: center; gap: 9px;
  padding: 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  font: 500 11.5px var(--sans); color: var(--muted);
}
.pm-seat-row:hover { background: rgba(255, 255, 255, 0.08); }
.pm-seat-row b { font: 700 11.5px var(--sans); letter-spacing: 0.06em; color: var(--ink-2); }
.pm-seat-row.on b { color: var(--ink); }
.pm-seat-row.on .ac-box {
  background: var(--blue) no-repeat center / 10px 10px; border-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.8 5.2l2.2 2.2 4.2-4.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pm-filter-bar .rail-group { margin-left: 0; gap: 4px; }
.pm-filter-bar .rail-btn { padding: 2px 8px; font-size: 10.5px; }
.pm-lg-btn[aria-expanded="true"] { color: var(--ink); background: rgba(57, 135, 229, 0.30); border-color: rgba(57, 135, 229, 0.55); }
.pm-lg-body {
  display: grid; grid-template-columns: auto auto auto auto; align-items: baseline; gap: 2px 7px;
  padding: 6px 10px 5px; border-radius: 10px;
  background: rgba(12, 17, 27, 0.87); border: 1px solid var(--glass-edge);
}
.pm-lg-body[hidden] { display: none; }
.pm-lg { font: 700 10px var(--sans); letter-spacing: 0.06em; }
.pm-lg-t { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.pm-lg-t:nth-child(4n + 2) { margin-right: 6px; }
.pm-lg-hint { grid-column: 1 / -1; width: 0; min-width: 100%; margin-top: 3px; padding-top: 4px;
  border-top: 1px solid var(--hair); font-size: 10px; line-height: 1.35; color: var(--muted); }
/* A phone's map has no room for the words beside OFF THE CHART: the coloured
   codes alone, two columns, which are the words ops already use. */
@media (max-width: 600px) {
  .pm-lg-body { grid-template-columns: auto auto; gap: 1px 10px; padding: 5px 8px; }
  .pm-lg-t, .pm-lg-hint { display: none; }
}
.pm-abroad h4 { font: 700 9.5px var(--sans); letter-spacing: 0.12em; color: var(--muted); margin-bottom: 3px; }
.pm-ab-row { display: flex; gap: 8px; align-items: baseline; padding: 1px 0; }
.pm-ab-row b { color: var(--ink); font-weight: 600; }
.pm-ab-loc { color: var(--muted); }
.pm-ab-st { margin-left: auto; font: 700 9.5px var(--sans); letter-spacing: 0.06em; }
.pm-lead { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; stroke-dasharray: 3 3; }
/* the dashboard's clock trio over the top of the map: PT | UTC | ET, the day below */
.pm-clocks {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: grid; grid-template-columns: auto auto auto; align-items: end; column-gap: 16px; row-gap: 1px;
  padding: 5px 16px 5px; border-radius: 12px;
  background: rgba(10, 15, 26, 0.55); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-glint);
}
.pm-ck { text-align: center; }
.pm-ck-l { font: 700 9px var(--sans); letter-spacing: 0.14em; color: var(--muted); }
.pm-ck-t { font: 500 15px/1.15 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pm-ck-utc .pm-ck-t { font-size: 22px; font-weight: 600; color: var(--ink); }
.pm-ck-date { grid-column: 1 / -1; text-align: center; font: 700 9.5px var(--sans); letter-spacing: 0.12em; color: var(--ink-2); margin-top: 1px; }
/* names open the location editor */
.pm-name { cursor: pointer; }
.pm-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.pm-ab-row { cursor: pointer; border-radius: 5px; }
.pm-ab-row:hover { background: rgba(255, 255, 255, 0.07); }
/* CREW LOCATIONS: every pilot's position and a field to set it by hand */
.pm-place {
  position: absolute; top: 44px; right: 10px; bottom: 10px; z-index: 5; width: 360px; max-width: calc(100% - 20px);
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.055) 100%), rgba(12, 17, 27, 0.93);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 40px rgba(0, 0, 0, 0.5);
}
.pm-place[hidden] { display: none; }
.pm-place-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px 12px; border-bottom: 1px solid var(--grid); }
.pm-place-h b { font: 700 10px var(--sans); letter-spacing: 0.14em; color: var(--ink-2); white-space: nowrap; }
.pm-place-q { flex: 1; min-width: 0; font: 500 12px var(--sans); color: var(--ink); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; color-scheme: dark; }
.pm-place-x { flex: none; width: 26px; height: 26px; font: 400 19px/1 var(--sans); color: var(--ink-2); background: none; border: none; border-radius: 7px; cursor: pointer; }
.pm-place-x:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.pm-place-note { flex: none; padding: 6px 12px; font: 500 10.5px/1.4 var(--sans); color: var(--muted); border-bottom: 1px solid var(--grid); }
.pm-place-note b { color: var(--ink-2); }
.pm-place-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.pm-pl-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px 40px; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 5px 6px; border-radius: 8px; }
.pm-pl-row:hover { background: rgba(255, 255, 255, 0.05); }
.pm-pl-row.is-focus { background: rgba(57, 135, 229, 0.14); }
.pm-pl-row.is-manual .pm-pl-in { border-color: rgba(57, 135, 229, 0.7); color: #9cc4ff; }
.pm-pl-name { grid-column: 1; font: 700 12.5px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-pl-name i { font: 700 9px var(--sans); letter-spacing: 0.06em; font-style: normal; margin-left: 6px; }
.pm-pl-src { grid-column: 1; grid-row: 2; font: 500 10.5px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-pl-row.is-manual .pm-pl-src { color: #9cc4ff; }
.pm-pl-in { grid-column: 2; grid-row: 1 / span 2; width: 100%; font: 700 12.5px var(--mono); text-transform: uppercase; text-align: center; color: var(--ink);
  background: rgba(12, 17, 27, 0.7); border: 1px solid var(--line); border-radius: 7px; padding: 5px 4px; }
.pm-pl-in:focus { outline: 2px solid rgba(57, 135, 229, 0.6); outline-offset: 0; }
.pm-pl-in:disabled { opacity: 0.5; }
.pm-pl-auto { grid-column: 3; grid-row: 1 / span 2; font: 700 9.5px var(--sans); letter-spacing: 0.06em; color: #9cc4ff; background: rgba(57, 135, 229, 0.12);
  border: 1px solid rgba(57, 135, 229, 0.45); border-radius: 999px; padding: 3px 0; cursor: pointer; }
.pm-pl-auto:hover { background: rgba(57, 135, 229, 0.25); color: #fff; }
.pm-pl-none { padding: 10px; font: 500 12px var(--sans); color: var(--muted); }

/* A sold-but-not-flown leg keeps its place in the week cell; the space where
   its crew would go says plainly that nobody is on it. */
.wk-seg-crew.is-ghost {
  cursor: default; border-style: dashed; border-color: rgba(139, 147, 164, 0.4);
  background: none; color: var(--muted); opacity: 0.75;
}
.wk-seg-crew.is-ghost:hover { background: none; }
/* the struck-through hop in an approval row's route */
.rt-ghost { font-style: normal; color: var(--muted); }

/* Standby: the crew the engine put with an aeroplane that is not flying.
   An idle serviceable tail is for sale (ASAP trips appear with no notice), so
   it carries a crew like any other — amber dashed while it is a suggestion,
   green once approved, plain when the crew is simply still with the aircraft. */
.wk-stby.is-sug { border: 1px dashed var(--warn); color: var(--warn); background: rgba(250, 178, 25, 0.07); }
.wk-stby.is-sug span { color: var(--warn); opacity: 0.8; }
.wk-stby.is-acc { border: 1px dashed rgba(127, 209, 138, 0.6); color: #7fd18a; background: rgba(127, 209, 138, 0.07); }
.wk-stby.is-acc span { color: #7fd18a; opacity: 0.8; }
.wk-stby[data-sby], .wk-idle[data-sby] { cursor: pointer; }

/* Crew boxes are DRAGGABLE: pick one up and drop it on another to swap the
   two crews (operator-specified 2026-09-02). A standby box presses open just
   like a flying day's crew box. */
.week-grid.is-crewdrag, .week-grid.is-crewdrag [data-cb] { cursor: grabbing; }
[data-cb].is-dragging { opacity: 0.35; }
[data-cb].is-drop {
  outline: 2px solid var(--blue); outline-offset: 1px;
  background: rgba(57, 135, 229, 0.2) !important;
}
.wk-drag-ghost {
  position: fixed; z-index: 60; pointer-events: none; white-space: nowrap;
  padding: 5px 9px; border-radius: 7px;
  background: rgba(12, 17, 27, 0.95); border: 1px solid var(--blue);
  color: var(--ink); font: 600 11px var(--sans);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
/* a seat the scheduler set by hand reads solid where a suggestion is dashed */
.wk-seg-crew.is-hand, .wk-stby.is-hand { border-style: solid; }
.sched-toast {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 45;
  padding: 7px 14px; border-radius: 9px; white-space: nowrap;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
  background: rgba(12, 17, 27, 0.95); border: 1px solid var(--line);
  color: var(--ink); font: 600 12px var(--sans);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.sched-toast[hidden] { display: none; }

/* ---------- the gate ----------
   Ops and admin only (operator's, 2026-09-09). The server refuses everybody
   else; this is what stops the tool painting first and disappearing after, and
   what turns the refusal into a sentence. */
html[data-access="pending"] body > *:not(.cp-gate),
html[data-access="denied"] body > *:not(.cp-gate) { visibility: hidden; }
.cp-gate {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: #0b0d11;
}
/* Load-bearing, exactly as on the dashboard: `display: flex` on a class beats
   the browser's `[hidden] {display:none}`, so without this the gate would stay
   over the tool for the ops users it had just let in. */
.cp-gate[hidden] { display: none; }
.cp-gate-card {
  width: min(420px, 88vw); padding: 34px 32px; text-align: center;
  background: #12151b; border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.cp-gate-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cp-gate-brand { font: 700 21px var(--sans, system-ui); letter-spacing: 0.34em; color: #e9edf3; }
.cp-gate-sign {
  padding: 2px 7px; border-radius: 5px; background: rgba(250, 178, 25, 0.16);
  font: 700 12px var(--sans, system-ui); letter-spacing: 0.16em; color: #fab219;
}
.cp-gate-card h2 {
  margin: 16px 0 10px; font: 600 17px var(--sans, system-ui);
  letter-spacing: 0.14em; text-transform: uppercase; color: #aab3c0;
}
.cp-gate-sub { margin: 0 0 20px; font: 400 14px var(--sans, system-ui); line-height: 1.55; color: #8b93a4; }
.cp-gate-sub b { color: #e9edf3; font-weight: 600; }
#cp-gsi { display: flex; justify-content: center; min-height: 44px; }
.cp-gate-err { margin: 14px 0 0; font: 500 13px var(--sans, system-ui); color: #fab219; }
.cp-gate-err.err { color: #d64545; }
/* Says what the rule is, so a refusal never reads as a fault. */
.cp-gate-fine {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.07);
  font: 400 12px var(--sans, system-ui); color: #6b7280;
}


/* BL · CREW DUTY — CrewBench's month on the board (operator-specified
   2026-09-10). The quadrant has two faces, chosen by data-bl on the section:
   the duty calendar (default) and the pairing list. */
.q-sug[data-bl="duty"] .bl-pair { display: none !important; }
.q-sug[data-bl="pairings"] .bl-duty { display: none !important; }
.q-sug .bl-switch { margin-left: 0; }
.duty-nav { gap: 4px; margin-left: 0; }
.duty-nav .rail-live { min-width: 0; margin-left: 2px; }
.duty-month { font: 700 11px var(--sans); letter-spacing: 0.1em; color: var(--ink); min-width: 112px; text-align: center; cursor: pointer; }
.duty-month:hover { color: var(--blue); }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
/* No padding above or below: the pinned date header and availability rows sit
   flush with the scroller's edges, so no row slides by in a strip beside them. */
.duty-wrap { overflow: auto; padding: 0 2px; margin-top: 4px; overscroll-behavior: contain; }   /* a sideways swipe at the end is not "back" */
/* After a slide the strip settles on whole days, the first one just right of the
   pinned Pilot and Duty columns (2 + 140 + 2 + 30 + 2 px). Proximity: a slide
   that stops between days eases to the nearer one, and never fights the trackpad. */
.duty-wrap { scroll-snap-type: x proximity; scroll-padding-left: 176px; }
.dg-h.dg-day { scroll-snap-align: start; }
.dg { display: grid; gap: 2px; align-items: stretch; min-width: max-content; }
.dg > * { min-height: 20px; }   /* 28px days, 20px rows: a size up from 22 x 17 (operator, 2026-09-29: "a bit too zoomed out") */
/* the day header pins to the top, the pilot column to the left, the
   availability rows to the bottom — the way CrewBench's own table reads */
.dg-h {
  position: sticky; top: 0; z-index: 3; background: #10141c;
  color: var(--muted); font: 700 9.5px var(--sans); letter-spacing: 0.06em;
  padding: 2px 0 3px; text-align: center; border-bottom: 1px solid var(--hair);
}
.dg-h.dg-name, .dg-h.dg-duty { text-align: left; z-index: 5; }
.dg-day { cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }   /* square: rounded corners let the rows scrolled under show */
.dg-day b { color: var(--ink-2); font-size: 11.5px; }
.dg-day i { font-style: normal; font-size: 8.5px; color: var(--muted); }
.dg-day:hover b { color: var(--blue); }
.dg-day.is-today { background: #1c3454; }             /* the blue tint on #10141c, opaque: the header pins over the rows */
.dg-day.is-today b { color: var(--ink); }
.dg-name {
  position: sticky; left: 0; z-index: 2; background: #10141c;
  display: flex; align-items: center; gap: 5px; padding: 0 6px 0 2px;
  white-space: nowrap; overflow: hidden;
}
.dg-nm { color: var(--ink); font: 600 11.5px var(--sans); overflow: hidden; text-overflow: ellipsis; }
.dg-seat, .dg-tag { font: 700 7.5px var(--sans); letter-spacing: 0.06em; padding: 1px 4px; border-radius: 4px; flex: none; }
.dg-seat.pic { background: rgba(57, 135, 229, 0.22); color: #9cc4ff; }
.dg-seat.sic { background: rgba(25, 158, 112, 0.22); color: #7fd18a; }
.dg-tag.chk { background: rgba(144, 133, 233, 0.25); color: #c9c2ff; }
.dg-tag.ioe { background: rgba(250, 178, 25, 0.22); color: var(--warn); }
.dg-duty {
  position: sticky; left: 142px; z-index: 2; background: #10141c;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); font: 600 10px var(--mono);
}
.dg-c { display: flex; align-items: stretch; }
.dg-c.is-today { background: rgba(57, 135, 229, 0.10); }
/* Today's column outlined top to bottom (operator, 2026-09-29: "make sure the
   current day is outlined, so you can easily see what day it is and who is on
   rotation"). Each cell draws its own two sides, reaching 1px into the 2px row
   gap above and below so the lines join; the day header adds the top, the last
   pinned row the bottom. */
.dg-c.is-today:not(.dg-s) { position: relative; }   /* the pinned rows stay sticky, which positions them too */
.dg-h.is-today::after, .dg-c.is-today::after {
  content: ''; position: absolute; pointer-events: none; z-index: 1;
  left: -2px; right: -2px; top: -1px; bottom: -1px;
  border-left: 2px solid var(--blue); border-right: 2px solid var(--blue);
}
.dg-h.is-today::after { top: 0; bottom: -2px; border-top: 2px solid var(--blue); border-radius: 6px 6px 0 0; }
.dg-s.is-today.is-last::after { bottom: 0; border-bottom: 2px solid var(--blue); border-radius: 0 0 6px 6px; }
/* the pinned rows are opaque, gap included, so the rows scrolling under them never show through */
.dg-s { box-shadow: 0 -2px 0 #10141c; }
.dg-s.dg-c.is-today { background: #141f30; box-shadow: 0 -2px 0 #141f30; }
.dg-s.dg-c.is-today::after { top: -2px; }
/* Where each month begins on the strip: a line down the gap before its 1st, and
   the month's name in place of the weekday on the 1st (2026-09-29). */
.dg-c.is-m1:not(.dg-s) { position: relative; }
.dg-h.is-m1::before, .dg-c.is-m1::before {
  content: ''; position: absolute; pointer-events: none; z-index: 1;
  left: -2px; width: 2px; top: -1px; bottom: -1px; background: rgba(157, 196, 255, 0.45);
}
.dg-s.dg-c.is-m1::before { top: -2px; }
/* The pinned Pilot and Duty columns cover the 2px gaps beside them and the
   scroller's edge, so the days sliding under them never show through. */
/* The pinned Pilot and Duty cells cover the 2px gaps on every side, the rows'
   as well as the columns', so nothing sliding under them shows between two
   names: today's outline and a request's amber tab came through as dots
   (operator, 2026-09-29: "make sure the pilot name layer is firmly above the
   schedule"). */
.dg-name { box-shadow: 0 0 0 2px #10141c; }
.dg-duty { box-shadow: 0 0 0 2px #10141c; }
.dg-s.dg-name { box-shadow: 0 -2px 0 #10141c, -2px 0 0 #10141c, 2px 0 0 #10141c, -2px -2px 0 #10141c, 2px -2px 0 #10141c; }
.dg-s.dg-duty { box-shadow: 0 -2px 0 #10141c, 2px 0 0 #10141c, 2px -2px 0 #10141c; }
.dg-day.is-m1 i { color: #9cc4ff; font-weight: 800; letter-spacing: 0.04em; }
/* Highlighted pilots (2026-09-29): their rows lit across the strip, everyone
   else's chips dimmed while any are picked. The name toggles it. */
.dg-name[data-hlpid] { cursor: pointer; }
.dg-name[data-hlpid]:hover .dg-nm { color: #9cc4ff; }
.dg-name.is-hl { background: #17253d; box-shadow: 0 0 0 2px #10141c, inset 3px 0 0 var(--blue); }
.dg-name.is-hl .dg-nm { color: #d6e6ff; }
.dg-duty.is-hl { background: #17253d; color: var(--ink); }
.dg-c.is-hl { background: rgba(57, 135, 229, 0.2); border-radius: 4px; }
.dg.has-hl .dg-c:not(.is-hl):not(.dg-s) .dch { opacity: 0.35; }
.dg-hlx { margin-left: 6px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); background: none;
  color: #9cc4ff; font: 700 8.5px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.dg-hlx:hover { color: var(--ink); border-color: rgba(57, 135, 229, 0.7); }
/* LOG BOOK (2026-09-29): the pilots down the side as on the strip, then the
   four Jet Insight logbook numbers; a header press sorts by it */
/* the fifth figure (2026-10-28): months in type, from the first CL-30 check in Jet Insight */
.dg.lb { grid-template-columns: minmax(170px, 1.7fr) repeat(4, minmax(64px, 1fr)) minmax(74px, 1fr); min-width: 0; }
.lb-h { cursor: pointer; border: 0; border-bottom: 1px solid var(--hair); text-align: right; padding: 2px 8px 3px; font: 700 9.5px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.lb-h:hover, .lb-h.on { color: #9cc4ff; }
.lb-n { display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.035); color: var(--ink); font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.lb-n.is-hl { background: rgba(57, 135, 229, 0.2); }
.dg.lb.has-hl .lb-n:not(.is-hl) { opacity: 0.35; }
/* CREW REQUESTS (2026-09-29): a day a crew member asked to change carries a
   small amber tab with what they asked for; REQUESTS lists them */
.dg-c.has-req { position: relative; cursor: pointer; }
.dg-req { position: absolute; top: -3px; right: -3px; z-index: 1; padding: 0 2px; border-radius: 3px;
  font: 800 6.5px/9px var(--sans); letter-spacing: 0.02em; font-style: normal; color: #1a1200; background: var(--warn);
  box-shadow: 0 0 0 1.5px #10141c; pointer-events: none; }
.rq-btn.has-req:not(.on) { color: var(--warn); border-color: rgba(250, 178, 25, 0.55); }
.rq-n { margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: #1a1200; font-size: 10px; }
.dg.cq { grid-template-columns: minmax(140px, 1.3fr) minmax(128px, 1fr) minmax(118px, 1fr) minmax(90px, 1.3fr) auto; min-width: 0; }
.rq-h { text-align: left; padding: 2px 8px 3px; text-transform: uppercase; }
.rq-c { display: flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 4px; min-width: 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.035); color: var(--ink); font: 600 11.5px var(--sans); white-space: nowrap; }
.rq-c i { font-style: normal; color: var(--muted); font-weight: 500; font-size: 10.5px; }
.rq-c.is-soon { color: var(--warn); }
.rq-now { color: var(--ink-2); font: 700 10px var(--sans); letter-spacing: 0.04em; }
.rq-want { flex: none; padding: 2px 6px; min-width: 30px; }
.rq-note { overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-weight: 500; }
.rq-note > * { overflow: hidden; text-overflow: ellipsis; }
.rq-act { justify-content: flex-end; gap: 6px; }
.rq-go { font: 700 9.5px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: #9cc4ff; text-decoration: none; white-space: nowrap; }
.rq-go:hover { color: var(--ink); }
.rq-c.is-past { color: #ff8f7d; }
.rq-wait { font: 600 10.5px var(--sans); color: var(--muted); white-space: nowrap; }
.rq-b { flex: none; font: 700 9.5px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--ink-2); }
.rq-b.is-ok { color: #7fd18a; border-color: rgba(127, 209, 138, 0.5); }
.rq-b.is-no { color: #ff8f7d; border-color: rgba(255, 122, 100, 0.5); }
.rq-b.is-arm.is-ok { color: #0b1a10; background: #7fd18a; }
.rq-b.is-arm.is-no { color: #fff; background: #d9534f; border-color: #d9534f; }
.rq-b.is-send { color: #0b1a10; background: #7fd18a; border-color: #7fd18a; }
.rq-arm.is-decline .rq-b.is-send { color: #fff; background: #d9534f; border-color: #d9534f; }
/* the second press: a full-width row under the request */
.rq-arm { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 8px;
  background: rgba(127, 209, 138, 0.08); border: 1px solid rgba(127, 209, 138, 0.35); font: 500 11.5px var(--sans); color: var(--ink-2); }
.rq-arm.is-decline { background: rgba(255, 122, 100, 0.08); border-color: rgba(255, 122, 100, 0.4); }
.rq-arm > span { flex: 1 1 260px; min-width: 0; }
.rq-arm b { color: var(--ink); }
/* SOME DAYS (2026-10-05, CrewBench's API "modify"): approve only the days lit */
.rq-b.is-some { color: #9cc4ff; border-color: rgba(57, 135, 229, 0.55); }
.rq-b.is-arm.is-some { color: #fff; background: rgba(57, 135, 229, 0.55); }
.rq-arm.is-modify { background: rgba(57, 135, 229, 0.08); border-color: rgba(57, 135, 229, 0.45); }
.rq-days { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; }
.rq-day { font: 700 10.5px var(--mono); color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 1px dashed var(--line); border-radius: 6px; padding: 2px 7px; cursor: pointer;
  text-decoration: line-through; text-decoration-color: rgba(255, 122, 100, 0.7); }
.rq-day.on { color: #0b1a10; background: #7fd18a; border: 1px solid #7fd18a; text-decoration: none; }
.rq-b.is-send:disabled { opacity: 0.45; cursor: default; }
.rq-msg { flex: 2 1 220px; min-width: 0; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25);
  color: var(--ink); font: 500 11.5px var(--sans); }
/* on the Log Book the months and their arrows have nothing to say; LIVE stays, unlit, and brings the strip back */
.dch {
  flex: 1; min-width: 0; overflow: hidden; padding: 0 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; font: 700 9px var(--sans); letter-spacing: 0.02em; color: #fff;
}
.dch-on  { background: #1f8f5f; }
.dch-onh { background: rgba(31, 143, 95, 0.26); color: #8fe0b5; box-shadow: inset 0 0 0 1px rgba(31, 143, 95, 0.6); }
.dch-sby { background: #1d7f8c; }
.dch-tvl { background: #e0901c; color: #1a1200; }
.dch-off { background: #3a4150; color: #c9cdd7; }
.dch-vac { background: #c8323f; }
.dch-loa { background: #8c1f33; }
.dch-trn { background: #6d4ff0; }
.dch-ovt { background: #b36b00; }
.dch-unk { background: repeating-linear-gradient(45deg, #3a4150 0 4px, #2a2f3a 4px 8px); color: var(--muted); }
.dch-none { background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
/* how many PICs / SICs are available each day — pinned under the scroll */
.dg-s { position: sticky; z-index: 3; background: #10141c; border-top: 1px solid var(--hair); min-height: 22px; }
.dg-s { bottom: 0; }                      /* each row's own offset is set inline */
.dg-s.dg-planes.dg-c b { color: #9cc4ff; }
.dg-s.dg-planes.dg-c b.short { color: var(--crit); }
.dg-s.dg-name, .dg-s.dg-duty { z-index: 4; }
.dg-s.dg-name { color: var(--muted); font: 700 8.5px var(--sans); letter-spacing: 0.08em; }
.dg-s.dg-c { justify-content: center; align-items: center; }
.dg-s.dg-c b { color: var(--ink); font: 700 11.5px var(--mono); }
.dg-s.dg-c b.short { color: var(--crit); }
.dp-st.dp-loa { color: var(--serious); }
.dg-none {
  grid-column: 1 / -1; position: sticky; left: 0; justify-self: start;
  padding: 10px 4px; color: var(--muted); font: 500 11.5px var(--sans);
}
/* FIND PILOTS — a box in the header, its option list under it, and over the
   grid the pilots the calendar is narrowed to (operator-specified 2026-09-21).
   The list sits above the grid's pinned cells (z 5) and ends inside the
   quadrant, whose glass clips anything that leaves it. */
.duty-find { position: relative; z-index: 20; flex: 1 1 130px; min-width: 120px; max-width: 190px; }
.duty-find input {
  display: block; width: 100%; box-sizing: border-box; height: 23px;
  font: 600 11px var(--sans); letter-spacing: 0.02em; color: var(--ink);
  background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b93a7' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E") 7px 50% / 11px 11px no-repeat;
  border: 1px solid var(--line); border-radius: 8px; padding: 0 6px 0 24px;
  -webkit-appearance: none; appearance: none;
}
.duty-find input::placeholder { color: var(--muted); font-weight: 500; }
.duty-find input:focus { outline: none; border-color: rgba(57, 135, 229, 0.7); background-color: rgba(57, 135, 229, 0.10); }
.duty-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.duty-opts {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: 260px;
  overflow-y: auto; overscroll-behavior: contain; padding: 4px;
  background: #121826; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.duty-opts[hidden] { display: none; }
.do-row {
  display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 7px;
  padding: 4px 8px 4px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.do-row.hot { background: rgba(255, 255, 255, 0.09); }
.do-row.on .do-nm { color: var(--ink); }
.do-ck { color: var(--blue); font: 700 10.5px var(--sans); text-align: center; }
.do-nm { color: var(--ink-2); font: 600 11.5px var(--sans); }
.do-none { padding: 7px 8px; color: var(--muted); font: 500 11.5px var(--sans); white-space: nowrap; }
.q-sug #duty-filter.is-over { opacity: 0.45; }
.duty-picks {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  padding: 6px 2px 2px;
}
.duty-picks[hidden] { display: none; }
.dp-lbl { font: 700 9px var(--sans); letter-spacing: 0.1em; color: var(--muted); margin-right: 3px; white-space: nowrap; }
.dp-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 5px 0 5px;
  font: 600 11px var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap;
  background: rgba(57, 135, 229, 0.18); border: 1px solid rgba(57, 135, 229, 0.5); border-radius: 7px;
}
.dp-chip i { font-style: normal; font-size: 13px; line-height: 1; color: var(--ink-2); margin-left: 1px; }
.dp-chip:hover { background: rgba(57, 135, 229, 0.30); }
.dp-chip:hover i { color: var(--ink); }
.dp-clear {
  height: 21px; padding: 0 8px; margin-left: 2px; cursor: pointer; white-space: nowrap;
  font: 700 9.5px var(--sans); letter-spacing: 0.08em; color: var(--ink-2);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 7px;
}
.dp-clear:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink); }


/* BR · DUTY & FLIGHT — the cards fill the quadrant, and the two limits lead
   (operator redesign 2026-09-10): DUTY and FLIGHT 24H as titled tiles with a
   meter each, above the crew and the route. */
.q-brief .q-scroll { display: flex; flex-direction: column; }
.q-brief .briefing { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.q-brief .bf-top { flex: none; margin: 2px 0 6px; gap: 6px 10px; }
.q-brief .bf-cards { flex: 1; min-height: 0; align-items: stretch; gap: 8px; }
.q-brief .bf-card {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 9px 9px;
  border-radius: 12px; border: 1px solid var(--hair); border-left: 3px solid var(--pod, var(--line));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
}
.q-brief .bf-card.is-idle { opacity: 1; background: rgba(255, 255, 255, 0.015); }
.bf-head2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bf-head2 .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 9px var(--pod); }
.bf-pod { font: 800 16px var(--sans); letter-spacing: 0.04em; color: var(--ink); }
.bf-reg2 { font: 500 10.5px var(--mono); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf-st {
  margin-left: auto; flex: none; white-space: nowrap;
  font: 700 9px var(--sans); letter-spacing: 0.1em;
  padding: 2px 7px; border-radius: 999px;
  color: var(--ink-2); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.bf-st.is-air { color: #0d1117; background: #7fd18a; border-color: #7fd18a; }
.bf-st.is-duty { color: #7fd18a; background: rgba(127, 209, 138, 0.12); border-color: rgba(127, 209, 138, 0.5); }
.bf-st.is-rep { color: #9cc4ff; background: rgba(57, 135, 229, 0.15); border-color: rgba(57, 135, 229, 0.5); }
.bf-st.is-mx { color: #ff8f7d; background: rgba(255, 122, 100, 0.12); border-color: rgba(255, 122, 100, 0.5); }
.bf-st.is-sby { color: var(--warn); background: rgba(250, 178, 25, 0.12); border-color: rgba(250, 178, 25, 0.5); }
/* the two limits, each a tile: TITLE and cap on the first line, the numbers
   underneath, the meter fills with the alert colour */
.bf-tile {
  display: flex; flex-direction: column; gap: 4px;
  border-radius: 9px; padding: 6px 8px 7px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair);
}
.bf-tile.is-ok { border-color: rgba(127, 209, 138, 0.28); }
.bf-tile.is-amber { border-color: rgba(250, 178, 25, 0.5); background: rgba(250, 178, 25, 0.08); }
.bf-tile.is-red { border-color: rgba(255, 122, 100, 0.6); background: rgba(255, 122, 100, 0.10); }
.bf-th { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.bf-th b { font: 800 11.5px var(--sans); letter-spacing: 0.08em; color: var(--ink); white-space: nowrap; }
.bf-th i { font: 700 9px var(--sans); font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bf-times { font: 700 15px var(--mono); color: var(--ink); white-space: nowrap; letter-spacing: 0.01em; }
.bf-times span { color: var(--muted); font-weight: 400; padding: 0 4px; }
/* the duty a post-flight log recorded, not one assumed from the schedule (2026-10-03) */
.bf-times.is-log { color: #7fd18a; }
.bf-meter { display: flex; align-items: center; gap: 8px; }
.bf-big { font: 800 22px var(--mono); line-height: 1; color: var(--ink); flex: none; letter-spacing: -0.01em; }
.bf-bar { flex: 1; min-width: 28px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.bf-bar span { display: block; height: 100%; border-radius: 4px; background: #7fd18a; }
.bf-tile.is-amber .bf-bar span, .bf-tile.is-amber .bf-big { background-color: #f5c76a; }
.bf-tile.is-amber .bf-big { background: none; color: #f5c76a; }
.bf-tile.is-red .bf-bar span { background: #ff8f7d; }
.bf-tile.is-red .bf-big { color: #ff8f7d; }
.bf-tile .bf-sub { margin-top: 0; font: 500 11px var(--sans); color: var(--ink-2); line-height: 1.3; }
.bf-tile .bf-sub b { color: var(--ink); font-weight: 700; }
.bf-tile.is-red .bf-sub b { color: #ff8f7d; }
.bf-none { font: 500 11px var(--sans); color: var(--muted); line-height: 1.3; padding: 2px 0; }
.bf-none b { color: var(--ink-2); }
.q-brief .bf-seg { border-top: 0; margin-top: 0; padding-top: 0; display: flex; flex-direction: column; gap: 6px; }
.q-brief .bf-seg + .bf-seg { border-top: 1px dashed var(--hair); padding-top: 6px; margin-top: 2px; }
.q-brief .bf-crew2 { font: 700 14px var(--sans); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-brief .bf-crew2 i { color: var(--muted); font-style: normal; font-weight: 500; }
.q-brief .bf-route { margin-top: 0; font: 600 11.5px var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The card uses its whole height — the two tiles share what the crew lines
   leave — and EVERY size inside it follows the CARD'S WIDTH (container query
   units), so a narrow quadrant shrinks the figures instead of letting them
   run out of their boxes (operator, 2026-09-10: "make sure the text doesn't
   get out of the box"). Nothing here may paint outside its tile. */
.q-brief .bf-card { min-height: 0; container-type: inline-size; padding: 8px 8px 9px; gap: 6px; }
.q-brief .bf-card > *, .q-brief .bf-seg > * { min-width: 0; }
.q-brief .bf-seg { flex: 1; min-height: 0; gap: 6px; }
.q-brief .bf-head2 {
  /* the POD name never gives way — the chip is what shrinks */
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 6px; row-gap: 0; align-items: center;
}
.q-brief .bf-head2 .dot { grid-row: 1 / span 2; width: clamp(8px, 7cqw, 11px); height: clamp(8px, 7cqw, 11px); }
.q-brief .bf-pod { grid-column: 2; grid-row: 1; font-size: clamp(14px, 12cqw, 19px); line-height: 1.1; white-space: nowrap; }
.q-brief .bf-reg2 { grid-column: 2; grid-row: 2; font-size: clamp(9px, 7.5cqw, 11px); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-brief .bf-st { grid-column: 3; grid-row: 1 / span 2; justify-self: end; min-width: 0; max-width: 100%; margin-left: 0; font-size: clamp(7.5px, 6.2cqw, 9.5px); padding: 2px clamp(4px, 4cqw, 7px); overflow: hidden; text-overflow: ellipsis; }
.q-brief .bf-tile { flex: 1; justify-content: safe center; min-height: 0; overflow: hidden; gap: clamp(2px, 2.5cqw, 5px); padding: clamp(5px, 4cqw, 9px) clamp(6px, 5cqw, 10px); }
/* no line gives way to make room: too much to fit clips at the BOTTOM
   (safe center), where a squeezed row was the DUTY title (2026-09-29) */
.q-brief .bf-tile > * { min-width: 0; flex: none; }
.q-brief .bf-tile .bf-sub2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-brief .bf-th { overflow: hidden; }
.q-brief .bf-th b { flex: none; font-size: clamp(10px, 8.5cqw, 13px); letter-spacing: 0.06em; }
.q-brief .bf-th i { flex: none; margin-left: auto; font-size: clamp(7.5px, 6.3cqw, 10px); }
.q-brief .bf-times { font-size: clamp(12px, 11cqw, 19px); overflow: hidden; text-overflow: ellipsis; }
.q-brief .bf-times span { padding: 0 clamp(1px, 2cqw, 4px); }
/* report → release on the DUTY title line, where the cap sits on FLIGHT 24H */
.q-brief .bf-th i.bf-times { flex: 0 1 auto; min-width: 0; font: 700 clamp(8.5px, 7.4cqw, 12.5px) var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.q-brief .bf-th i.bf-times span { color: var(--muted); font-weight: 400; padding: 0 clamp(0px, 1cqw, 3px); }
.q-brief .bf-meter { gap: clamp(4px, 4cqw, 8px); }
.q-brief .bf-big { font-size: clamp(18px, 17cqw, 30px); }
.q-brief .bf-bar { height: clamp(6px, 5cqw, 10px); min-width: 22px; }
.q-brief .bf-tile .bf-sub, .q-brief .bf-none { font-size: clamp(9.5px, 8cqw, 12.5px); line-height: 1.3; overflow-wrap: anywhere; }
.q-brief .bf-sub2 { color: var(--muted); }
.q-brief .bf-sub2 .bf-live { color: #7fd18a; }
/* one seat per line, labelled */
.q-brief .bf-crew3 { flex: none; display: flex; flex-direction: column; gap: 1px; margin: 0 1px; }
.q-brief .bf-crew3 span { display: flex; align-items: baseline; gap: 5px; min-width: 0; font: 700 clamp(12px, 9.5cqw, 16px)/1.25 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-brief .bf-crew3 span i { flex: none; font: 700 clamp(7.5px, 6cqw, 9px) var(--sans); letter-spacing: 0.1em; color: var(--muted); font-style: normal; width: 2.2em; }
.q-brief .bf-crew3 span em { font-style: normal; color: var(--muted); }
.q-brief .bf-crew3.sug span { color: var(--warn); }
.q-brief .bf-crew3.acc span { color: #7fd18a; }
.q-brief .bf-crew3.is-none span { color: var(--muted); font-weight: 500; }
/* the route may take two lines rather than losing its destination */
.q-brief .bf-route {
  flex: none; font-size: clamp(9.5px, 8cqw, 13px); line-height: 1.3;
  white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.q-brief .bf-alert { flex: none; font-size: clamp(10px, 8cqw, 12.5px); overflow-wrap: anywhere; }
.q-brief .bf-th i .cap-s { display: none; }
@container (max-width: 190px) {
  .q-brief .bf-wide { display: none; }
}
@container (max-width: 150px) {
  .q-brief .bf-st { letter-spacing: 0.03em; padding: 2px 4px; font-size: clamp(7px, 6cqw, 9px); }
  .q-brief .bf-th b { letter-spacing: 0.03em; }
  .q-brief .bf-th i .cap-l { display: none; }
  .q-brief .bf-th i .cap-s { display: inline; }
}

/* DUTY & FLIGHT | TASKS (2026-09-29): the quadrant's title is a two-way switch */
.br-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.br-tab { font: 700 12px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  background: none; border: 0; border-radius: 7px; padding: 3px 10px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.br-tab:hover { color: var(--ink-2); }
.br-tab.on { color: var(--ink); background: rgba(57, 135, 229, 0.30); }
.br-n { min-width: 18px; padding: 0 5px; border-radius: 999px; font: 800 10px/16px var(--sans); letter-spacing: 0; text-align: center; color: #1a1200; background: var(--warn); }
.br-n.is-red { color: #fff; background: #d9534f; }
/* one face at a time: the briefing's own display rule would otherwise beat `hidden` */
.q-brief .briefing[hidden], .q-brief .tasks[hidden] { display: none; }
.q-brief .tk-note { display: none; }
.q-brief.is-tasks .bf-rail, .q-brief.is-tasks .bf-note { display: none; }
.q-brief.is-tasks .tk-note { display: inline; grid-column: 2; grid-row: 1; margin-left: auto; }
/* the list (2026-09-29, "make better use of the space"): filter chips, then a
   row per day, the day in a narrow column and its tasks as compact cards,
   as many across as the quadrant is wide */
.tasks { display: flex; flex-direction: column; gap: 6px; padding: 0 2px 10px; container: tasks / inline-size; }
.tk-bar { position: sticky; top: -6px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin: -6px -2px 0; padding: 6px 2px 6px; background: #10141c; border-bottom: 1px solid var(--hair); }
.tk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: 999px; cursor: pointer;
  font: 700 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.tk-chip b { min-width: 18px; padding: 0 5px; border-radius: 999px; font: 800 10px/16px var(--sans); letter-spacing: 0; text-align: center;
  color: var(--ink); background: rgba(255, 255, 255, 0.10); }
.tk-chip.has-red b { color: #fff; background: #d9534f; }
.tk-chip:hover { color: var(--ink); }
.tk-chip.on { color: var(--ink); background: rgba(57, 135, 229, 0.30); border-color: rgba(57, 135, 229, 0.55); }
.tk-more { margin-left: auto; background: none; border: 0; color: #9cc4ff; font: 700 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.tk-cols { columns: 300px; column-gap: 10px; padding-top: 2px; }
.tk-grp { break-inside: avoid; display: flex; flex-direction: column; gap: 5px; padding-bottom: 8px; }
.tk-when { display: flex; align-items: baseline; gap: 6px; padding: 4px 2px 3px; }
.tk-when b { font: 800 10.5px var(--sans); letter-spacing: 0.1em; color: var(--ink-2); }
.tk-when span { font: 600 10.5px var(--sans); color: var(--muted); }
.tk-when i { margin-left: auto; font: 700 9.5px var(--sans); font-style: normal; color: var(--muted); }
.tk-when.is-today b { color: #9cc4ff; }
.tk-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 38px;
  padding: 4px 6px 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hair); border-left: 3px solid var(--line); }
.tk-card.is-red { border-left-color: #ff8f7d; background: rgba(255, 122, 100, 0.07); }
.tk-card.is-amber { border-left-color: var(--warn); }
.tk-card.is-note { border-left-color: rgba(156, 196, 255, 0.5); }
.tk-card.is-done { opacity: 0.45; }
.tk-pod { flex: none; font: 800 9.5px var(--sans); letter-spacing: 0.06em; color: #fff; background: var(--pod); padding: 3px 6px; border-radius: 5px; }
.tk-want { flex: none; padding: 3px 5px; min-width: 32px; font-size: 9px; }
.tk-dot { width: 7px; height: 7px; margin: 0 4px; border-radius: 50%; flex: none; background: var(--muted); }
.tk-card.is-red .tk-dot { background: #ff8f7d; }
.tk-card.is-amber .tk-dot { background: var(--warn); }
.tk-card.is-note .tk-dot { background: #9cc4ff; }
.tk-t { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.tk-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-t b { font: 700 12px/15px var(--sans); color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tk-t span i { font: 600 10px var(--mono); font-style: normal; color: var(--muted); }
.tk-t span { font: 500 10.5px/14px var(--sans); color: var(--ink-2); }
.tk-acts { display: flex; align-items: center; gap: 4px; }
.tk-go { flex: none; font: 700 9px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  background: rgba(57, 135, 229, 0.25); border: 1px solid rgba(57, 135, 229, 0.55); border-radius: 999px; padding: 2px 8px; cursor: pointer; }
.tk-go:hover { background: rgba(57, 135, 229, 0.4); }
.tk-done { flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; font-size: 10.5px; }
.tk-done:hover { color: #7fd18a; border-color: rgba(127, 209, 138, 0.6); }
.tk-empty { padding: 30px 10px; text-align: center; color: var(--muted); font: 600 12.5px var(--sans); }

/* Duty & Flight header: title left, the day rail centred on a second line,
   the note right — as the schedule's header does it. */
.q-brief .bf-head { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 5px; padding: 6px 2px 6px; }
.q-brief .bf-head h2 { grid-column: 1; grid-row: 1; }
.q-brief .bf-head .br-tabs { grid-column: 1; grid-row: 1; justify-self: start; }
.q-brief .bf-head .qhead-note { grid-column: 2; grid-row: 1; margin-left: auto; }
.q-brief .bf-rail { grid-row: 2; grid-column: 1 / -1; justify-self: center; margin-left: 0; gap: 6px; }
.q-brief .bf-date { font: 700 12.5px var(--sans); letter-spacing: 0.1em; color: var(--ink); min-width: 118px; text-align: center; }
/* every card opens with the same two crew lines under its head, so the tiles
   below them sit level across the fleet */
.q-brief .bf-crew3 { min-height: calc(2 * 1.25em + 3px); }

/* A crew swap: each crew's block keeps the full card height and the card
   scrolls down to the second crew — the tiles are never squeezed to fit two
   crews in one card (operator, 2026-09-10). */
.q-brief .bf-card { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.q-brief .bf-card.has-swap .bf-seg { flex: none; box-sizing: border-box; }
.q-brief .bf-card.has-swap .bf-seg + .bf-seg { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 2px; }
.bf-swapnote { flex: none; font: 700 clamp(8px, 6.5cqw, 10px) var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); }

/* ================= CREW SWAP (operator-specified 2026-09-25) =================
   The red outline and tag on a trip one crew cannot fly; the amber tag where a
   crew changes; and the window that plans the swap. The window is a direct
   child of #view-board (every quadrant clips its children), sits above the
   trip popup (40) and the toast (45), below the fixed app switch (60), and
   uses the popup's opaque-based glass so it stays legible over the map. */
.bar-swapline { pointer-events: none; }
.cs-hit { fill: transparent; cursor: pointer; }
.bar-swap, .bar-chsw { cursor: pointer; }
.wk-swap, .sug-swap, .wk-chsw, .sug-chsw { cursor: pointer; }
.wk-swap:hover, .sug-swap:hover, .wk-chsw:hover, .sug-chsw:hover { filter: brightness(1.25); }
.wk-chsw.is-change { color: #ffe3a8; background: rgba(250, 178, 25, 0.24); border-color: rgba(250, 178, 25, 0.9); }
.sug-chsw.is-change { color: var(--warn); }
.sug-chsw.is-change { background: rgba(250, 178, 25, 0.10); border-color: rgba(250, 178, 25, 0.4); }
/* the trip's pills and crew box carry the red outline too */
.wk-pill.is-swapneed { border: 2px solid rgba(255, 122, 100, 0.85); }
.wk-seg-crew.is-swapneed { border: 2px solid rgba(255, 122, 100, 0.85); }
.btn-cs { border-color: rgba(255, 122, 100, 0.55); color: #ff8f7d; }
.btn-cs:hover { background: rgba(255, 122, 100, 0.14); color: #fff; }
.btn-cs.is-ok { border-color: rgba(127, 209, 138, 0.5); color: #7fd18a; }
.btn-cs.is-change { border-color: rgba(250, 178, 25, 0.5); color: var(--warn); }
.bf-swapnote[data-cs] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.q-map.is-cs-drop, .q-brief.is-cs-drop, .q-sug.is-cs-drop, .q-sched.is-cs-drop { outline: 2px solid var(--blue); outline-offset: -2px; }
/* THE CREW REQUESTS WINDOW (2026-09-29): the crew swap window's glass, an
   amber edge, docked over whichever quadrant it was put on */
.rq-win { border-color: rgba(250, 178, 25, 0.45); }
.rqw-head { flex: none; display: flex; align-items: center; gap: 9px; padding: 9px 12px 8px; border-bottom: 1px solid var(--grid);
  cursor: grab; user-select: none; -webkit-user-select: none; }
.rq-win.is-dragging .rqw-head { cursor: grabbing; }
/* clear of the CRAFT switch when docked at the top of the board (training.js winLane) */
.rqw-head { padding-left: calc(12px + var(--win-lane-l, 0px)); padding-right: calc(12px + var(--win-lane-r, 0px)); }
.rqw-title { font: 700 12.5px var(--sans); letter-spacing: 0.14em; color: var(--warn); white-space: nowrap; }
.rqw-n { min-width: 20px; padding: 0 6px; border-radius: 999px; font: 800 10.5px/18px var(--sans); text-align: center; color: #1a1200; background: var(--warn); }
.rqw-src { font: 600 10.5px var(--sans); letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.rqw-docks { margin-left: auto; display: grid; grid-template-columns: repeat(2, 13px); grid-auto-rows: 9px; gap: 2px; padding: 3px; border-radius: 6px; border: 1px solid var(--line); }
.rqw-dk { padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.rqw-dk i { display: block; width: 100%; height: 100%; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.rqw-dk:hover i { background: rgba(156, 196, 255, 0.55); }
.rqw-dk.on i { background: var(--warn); }
/* the columns, Pilot and Date pressable to sort */
.rqw-cols, .rqw-row { display: grid; grid-template-columns: minmax(130px, 1.3fr) minmax(118px, 1fr) minmax(112px, 1fr) minmax(80px, 1.3fr) auto; gap: 2px 6px; align-items: stretch; }
.rqw-cols { flex: none; padding: 6px 12px 4px; border-bottom: 1px solid var(--hair); }
.rqw-cols > * { font: 700 9.5px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 8px; align-self: center; }
.rqw-cols > :first-child { padding-left: 2px; }
.rqw-sort { background: none; border: 0; cursor: pointer; white-space: nowrap; }
.rqw-sort:hover { color: var(--ink-2); }
.rqw-sort.on { color: #9cc4ff; }
.rqw-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 3px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.rqw-row { min-height: 26px; border-radius: 6px; }
.rqw-row.is-focus { outline: 2px solid var(--warn); outline-offset: 1px; }
.rqw-p { display: flex; align-items: center; gap: 5px; min-width: 0; padding-left: 2px; white-space: nowrap; overflow: hidden; }
.rqw-empty { padding: 30px 10px; text-align: center; color: var(--muted); font: 600 12.5px var(--sans); }
.rqw-body .rq-arm { grid-column: auto; }

.cs-win {
  position: absolute; z-index: 50;
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.055) 100%),
    rgba(12, 17, 27, 0.92);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid rgba(255, 122, 100, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 20px 55px rgba(0, 0, 0, 0.55);
}
.cs-win[hidden] { display: none; }
.cs-win.is-dragging { opacity: 0.92; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65); }
.cs-win.is-sheet { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; height: 56vh; width: auto; }
/* EXPAND / MINIMIZE (2026-10-04): the window slides to its new height, as the schedule unrolls */
.cs-win.is-sizing { transition: top 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.26s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cs-win { container: cswin / inline-size; }
/* the head in three: what and when on the left, cost and score in the middle, close on the right */
.cs-head {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 9px 12px 8px; border-bottom: 1px solid var(--grid);
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.cs-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs-head-c { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cs-head-r { display: flex; justify-content: flex-end; padding-right: var(--cs-lane-r, 0px); }
/* clear of the CRAFT switch when the window sits at the top of a column (swap-ui.js switchLane) */
.cs-head-l { padding-left: var(--cs-lane-l, 0px); }
@container cswin (max-width: 700px) {
  .cs-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l r" "c c"; row-gap: 4px; }
  .cs-head-l { grid-area: l; } .cs-head-r { grid-area: r; } .cs-head-c { grid-area: c; }
}
.cs-win.is-dragging .cs-head { cursor: grabbing; }
/* the same two rows whenever the three parts would touch (swap-ui.js fitHead) */
.cs-head.is-tight { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l r" "c c"; row-gap: 4px; }
.cs-head.is-tight .cs-head-l { grid-area: l; flex-wrap: wrap; row-gap: 4px; }
.cs-head.is-tight .cs-head-r { grid-area: r; }
.cs-head.is-tight .cs-head-c { grid-area: c; }
.cs-title { font: 700 12.5px var(--sans); letter-spacing: 0.14em; color: #ff8f7d; white-space: nowrap; }
.cs-pod { font: 700 11.5px var(--mono); color: #fff; background: var(--pod); padding: 2px 7px; border-radius: 6px; }
.cs-day { font: 700 11px var(--sans); letter-spacing: 0.1em; color: var(--ink-2); white-space: nowrap; }
.cs-total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; white-space: nowrap; }
.cs-total b { font: 700 22px var(--mono); color: var(--ink); letter-spacing: -0.01em; }
.cs-total i { font: 600 9.5px var(--sans); letter-spacing: 0.1em; color: var(--muted); font-style: normal; text-transform: uppercase; }
/* the efficiency score: a ring filled to the number */
.cs-score {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--ring) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.10) 0);
  position: relative;
}
.cs-score::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #131a28; }
.cs-score b { position: relative; font: 700 13px var(--mono); color: var(--ink); }
.cs-score.is-good { --ring: #7fd18a; } .cs-score.is-warn { --ring: var(--warn); } .cs-score.is-bad { --ring: #ff8f7d; }
.cs-x {
  flex: none; width: 30px; height: 30px; font: 400 22px/1 var(--sans); color: var(--ink-2);
  background: none; border: none; border-radius: 8px; cursor: pointer;
}
.cs-x:hover { color: var(--ink); background: rgba(255, 255, 255, 0.10); }
.cs-head-r { gap: 8px; align-items: center; }
.cs-rerun { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: #9cc4ff; background: rgba(57, 135, 229, 0.12); border: 1px solid rgba(57, 135, 229, 0.5); border-radius: 999px; padding: 4px 11px 4px 9px; cursor: pointer; white-space: nowrap; }
.cs-rerun:hover:not(:disabled) { background: rgba(57, 135, 229, 0.26); color: #fff; }
.cs-rerun:disabled { cursor: default; opacity: 0.85; }
.cs-rerun-i { font-size: 13px; line-height: 1; display: inline-block; }
.cs-rerun.is-busy .cs-rerun-i { animation: cs-spin 0.9s linear infinite; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cs-rerun.is-busy .cs-rerun-i { animation: none; } }
.cs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; container-type: inline-size; }
/* every line is a bullet: a dot, the line, and a chevron when there is more behind a press */
.cs-b { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) 16px; align-items: start; column-gap: 4px; padding: 3px 2px; font: 500 11.5px/1.4 var(--sans); color: var(--ink-2); border-radius: 6px; }
.cs-b.has-more { cursor: pointer; }
.cs-b.has-more:hover { background: rgba(255, 255, 255, 0.05); }
.cs-b-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); margin: 6px 0 0 2px; }
.cs-b.is-warn .cs-b-dot { background: var(--warn); } .cs-b.is-bad .cs-b-dot { background: #ff8f7d; } .cs-b.is-good .cs-b-dot { background: #7fd18a; }
.cs-b.is-warn .cs-b-t { color: #f5c76a; } .cs-b.is-bad .cs-b-t { color: #ff8f7d; } .cs-b.is-good .cs-b-t { color: #7fd18a; }
.cs-b-t { min-width: 0; overflow-wrap: break-word; }
.cs-b-chev { width: 12px; height: 12px; margin-top: 2px; justify-self: end; opacity: 0.55; transition: transform 0.15s; color: var(--ink-2); }
.cs-b-chev::before { content: ''; display: block; width: 5px; height: 5px; margin: 3px 0 0 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.cs-b.is-open .cs-b-chev { transform: rotate(90deg); opacity: 0.9; }
.cs-b-why { grid-column: 2 / -1; display: none; margin: 3px 0 2px; padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); font: 400 11px/1.5 var(--sans); color: var(--ink-2); }
.cs-b.is-open .cs-b-why { display: block; }
.cs-b.is-alt { cursor: pointer; }
/* the other way to travel, a button (2026-10-05): fly instead of the rental car, or back */
.cs-alt-b { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 5px; padding: 4px 9px; text-align: left; cursor: pointer;
  font: 600 11px var(--sans); color: var(--ink-2); background: rgba(57, 135, 229, 0.10); border: 1px solid rgba(57, 135, 229, 0.5); border-radius: 8px; }
.cs-alt-b:hover { background: rgba(57, 135, 229, 0.22); color: var(--ink); }
.cs-alt-b b { font: 700 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #9cc4ff; white-space: nowrap; }
.cs-alt-g { font-size: 13px; line-height: 1; }
.cs-alt-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-b.is-alt .cs-b-t { color: var(--blue); text-decoration: underline dotted; text-underline-offset: 2px; }
.cs-b.is-alt:hover .cs-b-t { color: #9cc4ff; }
.cs-why-h { font: 700 9.5px var(--sans); letter-spacing: 0.12em; color: var(--muted); margin: 4px 0 2px; text-transform: uppercase; }
.cs-why-h:first-child { margin-top: 0; }
.cs-why-row { display: flex; gap: 8px; align-items: baseline; padding: 1px 0; }
.cs-why-row b { flex: none; min-width: 46px; text-align: right; font: 700 11px var(--mono); color: var(--ink); }
.cs-why-row.is-good b { color: #7fd18a; } .cs-why-row.is-warn b { color: #f5c76a; } .cs-why-row.is-bad b { color: #ff8f7d; }
/* the issue, red or amber, is the first bullet */
.cs-issue { padding: 5px 8px; border-radius: 9px; margin-bottom: 8px; }
.cs-issue .cs-b { padding: 2px 0; }
.cs-issue .cs-b-t { font-weight: 600; font-size: 12.5px; }
.cs-issue.is-red { background: rgba(255, 122, 100, 0.10); border: 1px solid rgba(255, 122, 100, 0.45); }
.cs-issue.is-amber { background: rgba(250, 178, 25, 0.10); border: 1px solid rgba(250, 178, 25, 0.35); }
.cs-empty { padding: 2px 4px; }
.cs-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 4px; }
.cs-navlbl { font: 700 11px var(--sans); letter-spacing: 0.12em; color: var(--ink-2); min-width: 150px; text-align: center; }
.cs-navlbl b { color: #7fd18a; margin-left: 6px; }
/* the plan in one line, the score behind it */
.cs-sum { margin: 0 0 8px; }
.cs-b.is-head, .cs-b.is-center { grid-template-columns: 16px minmax(0, 1fr) 16px; column-gap: 0; }
.cs-b.is-center .cs-b-dot { display: none; }
.cs-b.is-center .cs-b-t { grid-column: 2; text-align: center; }
.cs-b.is-center .cs-b-chev { grid-column: 3; }
.cs-b.is-center .cs-b-why { grid-column: 1 / -1; text-align: left; }
.cs-reason-lbl { font-weight: 500; opacity: 0.8; margin-right: 3px; }
.cs-b.is-head .cs-b-dot { display: none; }
.cs-b.is-head .cs-b-t { grid-column: 2; }
.cs-b.is-head .cs-b-chev { grid-column: 3; }
.cs-b.is-head .cs-b-t { font: 600 14px/1.35 var(--sans); color: var(--ink); text-align: center; }
.cs-b.is-head .cs-b-chev { margin-top: 4px; }
.cs-b.is-head .cs-b-why { justify-self: stretch; text-align: left; }
/* OUT on the left, IN on the right */
.cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.cs-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid var(--hair); }
.cs-col.is-out { background: rgba(57, 135, 229, 0.06); border-color: rgba(57, 135, 229, 0.28); }
.cs-col.is-in { background: rgba(127, 209, 138, 0.05); border-color: rgba(127, 209, 138, 0.28); }
.cs-col-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 0 2px 3px; font: 700 12px var(--sans); color: var(--ink); min-width: 0; }
.cs-col-h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-col-h i { font: 500 10.5px var(--sans); color: var(--muted); font-style: normal; margin-left: auto; white-space: nowrap; }
.cs-role { flex: none; font: 700 9.5px var(--sans); letter-spacing: 0.1em; text-align: center; padding: 2px 6px; border-radius: 5px; }
.cs-role.is-in { color: #7fd18a; background: rgba(127, 209, 138, 0.14); }
.cs-role.is-out { color: #9cc4ff; background: rgba(57, 135, 229, 0.16); }
.cs-card { border-radius: 10px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.04); padding: 7px 9px 6px; cursor: pointer; min-width: 0; }
.cs-card:hover { background: rgba(255, 255, 255, 0.07); }
.cs-card.is-sel { border-color: rgba(57, 135, 229, 0.6); background: rgba(57, 135, 229, 0.10); }
.cs-card.is-empty { cursor: default; border-style: dashed; background: none; }
.cs-card.is-empty:hover { background: none; }
.cs-card-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-name { flex: 1; font: 700 12.5px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-name i { font: 700 9px var(--sans); letter-spacing: 0.08em; color: var(--muted); margin-left: 5px; font-style: normal; }
.cs-cost { flex: none; font: 700 12px var(--mono); color: var(--ink); white-space: nowrap; }
.cs-cost i { font: 600 8.5px var(--sans); color: var(--muted); font-style: normal; margin-left: 3px; letter-spacing: 0.06em; }
/* where they go, drawn: from, how, to */
.cs-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin: 7px 0 4px; }
.cs-route.is-here { grid-template-columns: 1fr; justify-items: center; }
.cs-rt-end { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.cs-rt-end.is-to { align-items: flex-end; text-align: right; }
.cs-rt-end b { font: 700 16px var(--mono); color: var(--ink); letter-spacing: 0.02em; }
.cs-rt-end i { font: 500 10px var(--sans); color: var(--muted); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 2px; }
.cs-rt-mid { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cs-rt-line { flex: 1; min-width: 10px; height: 0; border-top: 1.5px dashed rgba(255, 255, 255, 0.28); position: relative; }
.cs-rt-line.is-arrow::after { content: ''; position: absolute; right: -2px; top: -5px; border: 4px solid transparent; border-left: 6px solid rgba(255, 255, 255, 0.55); }
.cs-rt-how { display: flex; flex-direction: column; align-items: center; line-height: 1.1; flex: none; }
.cs-rt-how b { font: 400 14px/1 var(--sans); color: var(--ink); }
.cs-rt-how i { font: 600 9.5px var(--mono); color: var(--ink-2); font-style: normal; white-space: nowrap; margin-top: 2px; }
.cs-bl { display: flex; flex-direction: column; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cs-cost.is-real i { color: #7fd18a; }
.cs-cost.is-wait i { color: var(--warn); }
.cs-cost.is-wait { animation: cs-wait 1.6s ease-in-out infinite; }
@keyframes cs-wait { 50% { opacity: 0.55; } }
.cs-cost.is-booked { color: #7fd18a; letter-spacing: 0.06em; }
.cs-cost.is-booked i { color: var(--ink-2); }
/* a Tel Aviv pilot's New York gateway: assumed until the checker confirms or changes it */
.cs-gw { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; padding: 5px 7px; border-radius: 8px;
  border: 1px dashed rgba(250, 178, 25, 0.55); background: rgba(250, 178, 25, 0.07); cursor: default; }
.cs-gw.is-ok { border: 1px solid rgba(127, 209, 138, 0.45); background: rgba(127, 209, 138, 0.07); }
.cs-gw-l { font: 700 9.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-right: 2px; }
.cs-gw > b { font: 700 12px var(--mono); color: var(--ink); }
.cs-gw-b { font: 700 11px var(--mono); color: var(--ink-2); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.cs-gw-b:hover { color: var(--ink); background: rgba(255, 255, 255, 0.10); }
.cs-gw-b.on { color: #fff; background: rgba(57, 135, 229, 0.35); border-color: rgba(57, 135, 229, 0.7); }
.cs-gw-in { width: 54px; font: 700 11px var(--mono); text-transform: uppercase; text-align: center; color: var(--ink); background: rgba(12, 17, 27, 0.7);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; }
.cs-gw-in.on { border-color: rgba(57, 135, 229, 0.7); color: #9cc4ff; }
/* the outgoing crew's next aeroplane (2026-10-03): a select sized like the field box beside it */
.cs-out-ac { font: 700 11px var(--mono); color: var(--ink); background: rgba(12, 17, 27, 0.7); border: 1px solid rgba(57, 135, 229, 0.7);
  border-radius: 6px; padding: 2px 4px; height: 22px; }
.cs-gw-ok { margin-left: auto; font: 700 10px var(--sans); letter-spacing: 0.04em; color: #f5c76a; background: rgba(250, 178, 25, 0.12);
  border: 1px solid rgba(250, 178, 25, 0.5); border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.cs-gw-ok:hover { background: rgba(250, 178, 25, 0.25); color: #fff; }
.cs-gw-st { margin-left: auto; font: 700 10px var(--sans); letter-spacing: 0.04em; color: #7fd18a; }
.cs-gw:not(.is-ok) .cs-gw-st { color: #f5c76a; }
.cs-gw-auto { font: 600 10px var(--sans); color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.cs-gw-auto:hover { color: var(--ink); }
/* TRIP TOTAL (2026-10-04): every crew swap one trip needs, an overtime crew in and home again, and their sum */
.cs-trip { margin: 6px 0 4px; padding: 6px 8px 7px; border-radius: 10px; border: 1px solid rgba(57, 135, 229, 0.45); background: rgba(57, 135, 229, 0.07); }
.cs-trip-h { display: flex; align-items: baseline; gap: 10px; padding: 0 2px 5px; }
.cs-trip-l { font: 700 9.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #9cc4ff; white-space: nowrap; }
.cs-trip-t { font: 600 11px var(--sans); color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trip-sum { margin-left: auto; font: 700 17px var(--mono); color: var(--ink); white-space: nowrap; }
.cs-trip-sum i, .cs-trip-c i { font: 600 9px var(--sans); font-style: normal; letter-spacing: 0.08em; color: var(--muted); margin-left: 4px; text-transform: uppercase; }
.cs-trip-r { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 64px; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: 500 11.5px var(--sans); color: var(--ink-2); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 8px; margin-top: 3px; cursor: pointer; }
.cs-trip-r:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.cs-trip-r:disabled { cursor: default; border-color: rgba(57, 135, 229, 0.55); background: rgba(57, 135, 229, 0.12); color: var(--ink); }
.cs-trip-n { font: 700 11px var(--mono); color: #9cc4ff; text-align: center; }
.cs-trip-w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trip-w b { font: 700 11px var(--mono); color: var(--ink); margin-right: 8px; }
.cs-trip-w i { font-style: normal; color: var(--muted); margin-left: 8px; }
.cs-trip-c { font: 700 12px var(--mono); color: var(--ink); white-space: nowrap; text-align: right; }
.cs-trip-here, .cs-trip-go { font: 700 9px var(--sans); letter-spacing: 0.08em; color: #9cc4ff; text-align: right; }
.cs-trip-go { font-size: 15px; line-height: 11px; color: var(--muted); }
/* where the swap is (2026-10-04): the fields the aeroplane stops at, the planner's lit until one is picked */
.cs-gw.cs-at { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); margin: 6px 0 2px; }
.cs-gw.cs-at .cs-at-st { color: var(--muted); font-weight: 600; letter-spacing: 0.02em; margin-left: 0; }
.cs-at-r { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.cs-gw.cs-at .cs-gw-b { display: inline-flex; align-items: baseline; }
.cs-at-nm { font: 600 10px var(--sans); color: var(--muted); margin-left: 5px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-gw-b.on .cs-at-nm { color: #cfe0ff; }
.cs-at-intl { font: 700 8px var(--sans); font-style: normal; letter-spacing: 0.06em; color: #f5c76a; margin-left: 4px; vertical-align: 1px; }
.cs-amtrav { display: inline-block; margin-top: 5px; font: 700 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #7fd18a; text-decoration: none;
  border: 1px solid rgba(127, 209, 138, 0.4); border-radius: 999px; padding: 2px 8px; }
.cs-amtrav:hover { background: rgba(127, 209, 138, 0.14); color: #fff; }
.cs-chips:empty { display: none; }
.cs-chip { font: 700 9px var(--sans); letter-spacing: 0.08em; padding: 2px 6px; border-radius: 5px; border: 1px solid; white-space: nowrap; }
.cs-chip.is-warn { color: #f5c76a; border-color: rgba(250, 178, 25, 0.45); background: rgba(250, 178, 25, 0.10); }
.cs-chip.is-bad { color: #ff8f7d; border-color: rgba(255, 122, 100, 0.5); background: rgba(255, 122, 100, 0.10); }
.cs-chip.is-good { color: #7fd18a; border-color: rgba(127, 209, 138, 0.4); background: rgba(127, 209, 138, 0.10); }
.cs-chip.is-note { color: var(--ink-2); border-color: var(--line); background: rgba(255, 255, 255, 0.05); }
.cs-more { margin-top: 5px; font: 700 9.5px var(--sans); letter-spacing: 0.12em; color: var(--blue); }
.cs-card.is-sel .cs-more { color: #9cc4ff; }
/* the member's day, step by step */
.cs-tl { margin: 6px 0 2px; padding: 6px 8px 8px; border-left: 2px solid rgba(57, 135, 229, 0.5); }
.cs-tl-day { font: 700 9.5px var(--sans); letter-spacing: 0.12em; color: var(--muted); margin: 4px 0 3px; }
.cs-tl-row { display: flex; gap: 8px; align-items: baseline; padding: 2.5px 0; font: 500 11.5px var(--sans); color: var(--ink-2); }
.cs-tl-t { flex: none; width: 112px; font: 600 11px var(--mono); color: var(--ink); white-space: nowrap; }
.cs-tl-t i { font: 500 9px var(--sans); color: var(--muted); font-style: normal; }
.cs-tl-t b { font-weight: 500; color: var(--muted); margin-left: 4px; }
.cs-tl-l { min-width: 0; }
.cs-tl-row.is-fly .cs-tl-l, .cs-tl-row.is-leg .cs-tl-l { color: var(--ink); font-weight: 600; }
.cs-tl-row.is-report .cs-tl-l, .cs-tl-row.is-release .cs-tl-l { color: #9cc4ff; font-weight: 600; }
.cs-tl-row.is-pre .cs-tl-l, .cs-tl-row.is-pre .cs-tl-t { color: var(--muted); }
.cs-tl-row.is-duty .cs-tl-l { color: #f5c76a; font-weight: 700; letter-spacing: 0.06em; }
.cs-tl-row.is-rest .cs-tl-l { color: var(--muted); font-style: italic; }
.cs-tl-none { font: 500 11.5px var(--sans); color: var(--muted); }
.cs-keep { padding: 4px 6px; border-radius: 10px; border: 1px dashed var(--hair); }
/* the crew picked by hand */
.cs-pickbtn {
  flex: none; font: 700 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #9cc4ff;
  background: rgba(57, 135, 229, 0.12); border: 1px solid rgba(57, 135, 229, 0.45); border-radius: 999px; padding: 3px 9px; cursor: pointer;
}
.cs-pickbtn:hover { background: rgba(57, 135, 229, 0.24); color: #fff; }
.cs-keep .cs-pickbtn { margin: 4px 0 2px 16px; }
.cs-pick { padding: 8px 9px 9px; border-radius: 10px; border: 1px solid rgba(57, 135, 229, 0.55); background: rgba(57, 135, 229, 0.10); display: flex; flex-direction: column; gap: 6px; }
.cs-pick-h { font: 700 9.5px var(--sans); letter-spacing: 0.14em; color: #9cc4ff; }
.cs-pick-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; }
.cs-pick-seat { font: 700 10px var(--sans); letter-spacing: 0.08em; color: var(--muted); }
.cs-pick select {
  width: 100%; min-width: 0; color-scheme: dark; font: 600 12px var(--sans); color: var(--ink);
  background: rgba(12, 17, 27, 0.75); border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; cursor: pointer;
}
.cs-pick select:focus { outline: 2px solid rgba(57, 135, 229, 0.6); outline-offset: 0; }
.cs-pick-foot { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
.cs-navlbl b.is-pick { color: #9cc4ff; margin-left: 0; }
/* a hand pick next to what the planner had */
.cs-cmp { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: -2px 0 6px; font: 500 11.5px var(--sans); color: var(--ink-2); }
.cs-cmp b { font: 700 12px var(--mono); color: var(--ink); }
.cs-cmp .is-pick { color: #9cc4ff; } .cs-cmp .is-pick b { color: #9cc4ff; }
.cs-cmp-to { color: var(--muted); }
.cs-unpick { font: 600 10.5px var(--sans); color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; padding: 0 2px; }
.cs-unpick:hover { color: var(--ink); }
/* what to address, one box per pilot, OUT left and IN right like the columns above */
.cs-hl { margin-top: 10px; padding: 8px 10px 9px; border-radius: 12px; background: rgba(250, 178, 25, 0.06); border: 1px solid rgba(250, 178, 25, 0.28); }
.cs-hl-h { font: 700 9.5px var(--sans); letter-spacing: 0.14em; color: #f5c76a; margin-bottom: 6px; }
.cs-hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.cs-hl-grid.is-lone { grid-template-columns: 1fr; }
.cs-hl-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; min-width: 0; align-items: start; }
.cs-hl-box { min-width: 0; padding: 6px 8px 5px; border-radius: 9px; border: 1px solid var(--hair); background: rgba(12, 17, 27, 0.35); }
.cs-hl-box.is-plan { margin-top: 8px; }
.cs-hl-who { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font: 700 12px var(--sans); color: var(--ink); }
.cs-hl-who .cs-role { font-size: 8.5px; padding: 1px 5px; }
.cs-hl-who i { font: 700 9px var(--sans); letter-spacing: 0.08em; color: var(--muted); font-style: normal; }
.cs-hl-none { font: 500 11px var(--sans); color: var(--muted); padding: 2px 0; }
.cs-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.cs-foot-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cs-foot .btn-appr { padding: 7px 18px; }
.cs-est { width: 100%; max-width: 520px; }
.cs-est .cs-b { padding: 2px 0; font-size: 10.5px; color: var(--muted); }
.cs-appr { font: 700 11px var(--sans); letter-spacing: 0.1em; color: #7fd18a; }
/* a narrow dock (or the phone sheet): one column, boxes stacked */
@container (max-width: 640px) { .cs-rt-end b { font-size: 14px; } .cs-rt-how i { font-size: 9px; } .cs-card { padding: 6px 7px 5px; } }
@container (max-width: 460px) { .cs-cols, .cs-hl-grid { grid-template-columns: 1fr; } }
.wk-swap.pend { color: #ffe3a8; background: rgba(250, 178, 25, 0.22); border-color: rgba(250, 178, 25, 0.85); border-style: dashed; box-shadow: none; }
.bf-swapnote.is-need { color: #ff8f7d; }

/* ---- NEW TRIP (operator, 2026-09-26): the schedule's "+", its form, and the
   trips it adds, which wear a white dotted edge until Jet Insight has them. */
.sched-read > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* beside EXPAND (2026-10-05): the height of the buttons beside it, its "+" centred in it */
.sched-add {
  flex: none; align-self: stretch; display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 0 9px 2px;
  font: 700 17px/1 var(--sans); color: var(--ink);
  background: rgba(57, 135, 229, 0.28); border-color: rgba(57, 135, 229, 0.6);
}
.sched-add:hover:not(:disabled) { background: rgba(57, 135, 229, 0.45); }
.bar-badge.is-req { fill: rgba(12, 17, 27, 0.82); stroke: var(--warn); stroke-dasharray: 2 3; }
.bar-req-tag { font: 800 13px var(--sans); letter-spacing: 0.07em; fill: var(--warn); pointer-events: none; }
.wk-pill.is-req { border: 1.5px dotted #e8f1ff; }
/* Each board-added leg says where it stands in Jet Insight, on its own pill
   (operator, 2026-10-03): striped while it is not there, by colour: amber not
   posted, blue on its way, red refused; in Jet Insight but not booked, solid
   amber. The tag at the right end says it in words. */
.wk-pill.is-req { border-style: dashed; border-width: 1.5px; }
.wk-pill.req-new { border-color: var(--warn);
  background: repeating-linear-gradient(135deg, rgba(250, 178, 25, 0.24) 0 5px, rgba(250, 178, 25, 0.07) 5px 10px); }
.wk-pill.req-queued { border-color: rgba(57, 135, 229, 0.95);
  background: repeating-linear-gradient(135deg, rgba(57, 135, 229, 0.28) 0 5px, rgba(57, 135, 229, 0.08) 5px 10px); }
.wk-pill.req-failed { border-color: rgba(255, 122, 100, 0.95);
  background: repeating-linear-gradient(135deg, rgba(255, 106, 84, 0.28) 0 5px, rgba(255, 106, 84, 0.08) 5px 10px); }
.wk-pill.req-unbooked { border-style: solid; border-color: var(--warn); background: rgba(250, 178, 25, 0.10); }
.wk-pill.is-req.is-swapneed { border: 2px solid rgba(255, 122, 100, 0.85); }
.wk-pill .wk-pill-ji {
  margin-left: auto; flex: none; padding: 1px 4px; border-radius: 3px;
  font: 800 8px var(--sans); font-style: normal; letter-spacing: 0.06em; line-height: 1.1;
  color: #1c1405; background: var(--warn);
}
.wk-pill.req-queued .wk-pill-ji { color: #06152a; background: #9cc4ff; }
.wk-pill.req-failed .wk-pill-ji { color: #2a0b06; background: #ff8f7d; }
.wk-pill.req-unbooked .wk-pill-ji { color: var(--warn); background: none; box-shadow: inset 0 0 0 1px var(--warn); }
/* posted, in Jet Insight, but not booked there (a charter awaiting its quote) */
.wk-req.is-unbooked { color: var(--warn); border-color: rgba(250, 178, 25, 0.7); }
.rq-post.is-warn { color: var(--ink-2); border-left: 3px solid var(--warn); padding-left: 8px; }
.rq-post.is-warn b { color: var(--warn); }
.rq-ji { display: inline-block; margin-top: 4px; color: #9cc4ff; font-weight: 700; text-decoration: none; }
.wk-req {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn);
  font: 800 10px var(--sans); letter-spacing: 0.08em; color: var(--warn); background: rgba(250, 178, 25, 0.12); white-space: nowrap;
}
.rq {
  margin: 0 0 10px; padding: 8px 10px 6px; border-radius: 10px;
  background: rgba(232, 241, 255, 0.05); border: 1px dotted rgba(232, 241, 255, 0.55);
}
.rq-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline;
  font-size: 12.5px; color: var(--ink); margin-top: 6px; }
.rq-rows b { font-weight: 600; }
.rq-note { white-space: pre-wrap; }
.rq-by { margin-top: 6px; }
.rq-post { margin-top: 8px; padding: 6px 9px; border-radius: 8px; font-size: 12px; line-height: 1.4; color: var(--ink-2);
  background: rgba(57, 135, 229, 0.14); border: 1px solid rgba(57, 135, 229, 0.5); }
.rq-post b { color: var(--ink); }
.rq .tr-foot { display: flex; gap: 8px; justify-content: flex-end; }
.wk-req.is-post { border-style: solid; border-color: rgba(57, 135, 229, 0.8); background: rgba(57, 135, 229, 0.18); }

.tn-win {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(4, 7, 12, 0.55);
}
.tn-win[hidden] { display: none; }
.tn-card {
  width: min(760px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.055) 100%),
    rgba(12, 17, 27, 0.95);
  backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid rgba(57, 135, 229, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 20px 55px rgba(0, 0, 0, 0.55);
}
.tn-head { flex: none; display: flex; align-items: baseline; gap: 12px; padding: 12px 14px 10px; border-bottom: 1px solid var(--grid); }
.tn-head b { font: 800 13px var(--sans); letter-spacing: 0.14em; color: var(--ink); }
.tn-sub { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); }
.tn-x { background: none; border: none; color: var(--ink-2); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.tn-x:hover { color: var(--ink); }
.tn-body { flex: 1; overflow: auto; padding: 12px 14px 4px; display: grid; gap: 12px; align-content: start; }
.tn-grid { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.tn-grid > label { font: 700 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tn-card input:not([type="checkbox"]), .tn-card select, .tn-card textarea {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--ink);
  font: 13px var(--sans); color-scheme: dark;
}
.tn-card textarea { resize: vertical; min-height: 44px; }
.tn-card input:focus, .tn-card select:focus, .tn-card textarea:focus { outline: none; border-color: rgba(57, 135, 229, 0.8); }
.tn-card input[readonly] { opacity: 0.6; }
.tn-inline { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tn-inline > select, .tn-inline > input { flex: 0 0 auto; width: auto; min-width: 150px; }
.tn-inline > #tn-pos { min-width: 0; width: 80px; text-transform: uppercase; }
.tn-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.tn-note { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
/* The customer, picked from Jet Insight's own list (2026-09-28) */
.tn-cust { position: relative; min-width: 0; }
.tn-cust > input { width: 100%; }
.tn-cust-list { position: absolute; z-index: 5; left: 0; right: 0; top: 32px; max-height: 260px; overflow-y: auto;
  background: rgba(12, 17, 27, 0.98); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); padding: 4px; }
.tn-cust-o { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 12.5px; min-width: 0; }
.tn-cust-o b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tn-cust-o i { font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.tn-cust-o.on, .tn-cust-o:hover { background: rgba(255, 255, 255, 0.08); }
.tn-cust-tag { flex: none; font: 700 9px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px;
  color: #7fd18a; border: 1px solid rgba(127, 209, 138, 0.4); }
.tn-cust-tag.is-bad { color: #ff8f7d; border-color: rgba(255, 122, 100, 0.5); }
.tn-cust-st { margin-top: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.35; min-height: 14px; }
.tn-cust-st .is-ok { color: #7fd18a; }
.tn-cust-st .is-warn { color: #f5c76a; }
.tn-cust-st .is-bad { color: #ff8f7d; }
.tn-link { background: none; border: 0; padding: 0; font: inherit; color: #8fb8ff; text-decoration: underline; cursor: pointer; }
.tn-link:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.tn-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; justify-self: start; }
.tn-seg button { background: none; border: none; color: var(--ink-2); font: 700 11.5px var(--sans); padding: 5px 14px; cursor: pointer; }
.tn-seg button + button { border-left: 1px solid var(--line); }
.tn-seg button.on { background: rgba(57, 135, 229, 0.4); color: var(--ink); }
.tn-legs { display: grid; gap: 8px; }
.tn-leg {
  display: grid; align-items: center; gap: 6px 8px;
  grid-template-columns: 18px 78px 14px 78px 110px minmax(120px, 1fr) 104px 92px auto 22px;
  padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--grid);
}
.tn-n { font: 800 12px var(--sans); color: var(--muted); text-align: center; }
.tn-arr { color: var(--muted); text-align: center; }
.tn-ap { text-transform: uppercase; font-weight: 600 !important; letter-spacing: 0.04em; }
.tn-rm { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0; }
.tn-rm:hover { color: #f0a0a0; }
.tn-hint { grid-column: 2 / -1; font-size: 11.5px; color: var(--muted); min-height: 14px; }
.tn-warn { color: #f5c76a; }
.tn-add { justify-self: start; background: none; border: 1px dashed var(--line); color: var(--ink-2); border-radius: 8px; padding: 4px 12px; font: 700 11.5px var(--sans); cursor: pointer; }
.tn-add:hover { color: var(--ink); border-color: rgba(57, 135, 229, 0.7); }
.tn-err { padding: 7px 10px; border-radius: 8px; font-size: 12.5px; color: #ffd6cf; background: rgba(255, 106, 84, 0.18); border: 1px solid rgba(255, 143, 125, 0.7); }
.tn-err[hidden] { display: none; }
.tn-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--grid); }
.tn-foot .tn-note { flex: 1; }
@media (max-width: 720px) {
  .tn-grid { grid-template-columns: 1fr; }
  .tn-leg { grid-template-columns: 18px 1fr 14px 1fr; }
  .tn-leg > select, .tn-leg > input[type="date"], .tn-leg > input[type="time"] { grid-column: span 2; }
  .tn-leg > .tn-chk { grid-column: 2 / span 2; }
  .tn-hint { grid-column: 1 / -1; }
  .tn-inline { flex-wrap: wrap; }
}
/* Change in JI (2026-09-28): the same form on a Jet Insight trip. A leg gets its
   passengers; what was changed shows amber, a new leg green, a leg coming off struck. */
.tn-leg.tn-eleg { grid-template-columns: 18px 70px 14px 70px 100px minmax(112px, 1fr) 100px 88px auto 76px 22px; }
/* the zone a leg's time is typed in (2026-10-05) */
.tn-tzn { color: #9cc4ff; }
.tn-leg.is-flown, .tn-leg.is-gone { grid-template-columns: 18px minmax(0, 1fr) auto; }
.tn-leg.is-flown { opacity: 0.6; }
.tn-leg.is-gone { border-style: dashed; }
.tn-leg.is-gone .tn-fixed { color: var(--muted); }
.tn-leg.is-new { border-color: rgba(127, 209, 138, 0.5); }
.tn-fixed { font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.tn-card input.is-chg:not([type="checkbox"]), .tn-card select.is-chg { border-color: rgba(245, 199, 106, 0.85); background: rgba(245, 199, 106, 0.12); }
.tn-chk.is-chg { color: #f5c76a; }
.tn-review { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); background: rgba(57, 135, 229, 0.1); border: 1px solid rgba(57, 135, 229, 0.5); }
.tn-review b { color: var(--ink); }
.tn-review ul { margin: 4px 0 6px; padding-left: 18px; }
.tn-review li { margin: 2px 0; }
@media (max-width: 720px) {
  .tn-leg.tn-eleg { grid-template-columns: 18px 1fr 14px 1fr; }
  .tn-leg.tn-eleg > .tn-lpax { grid-column: span 2; }
  .tn-leg.tn-eleg > .tn-rm { grid-column: 4; justify-self: end; }
}

/* Post to JI that did not go through: Jet Insight refused it, or no answer */
.rq-post.is-bad { color: #ffd6cf; background: rgba(255, 106, 84, 0.16); border-color: rgba(255, 143, 125, 0.7); }
.rq-post.is-bad b { color: #ffe1db; }
.wk-req.is-post.is-bad { border-color: rgba(255, 143, 125, 0.9); background: rgba(255, 106, 84, 0.2); color: #ffd6cf; }

/* Cancel / Delete in JI (2026-09-26): the popup's Jet Insight part, and the
   maintenance and cleaning blocks, clickable now to reach their events. */
.ground-hit { fill: transparent; cursor: pointer; }
.ja { margin-top: 12px; border-top: 1px solid var(--hair); padding-top: 10px; }
/* a Jet Insight trip's Change / Cancel, right under the route where the popup opens */
.tr-route + .ja { margin: 8px 0 10px; border-top: 0; padding: 0 0 10px; border-bottom: 1px solid var(--hair); }
.ja .tr-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
/* The trip popup's buttons sit centred under what they act on (operator, 2026-09-28) */
#trip-modal .tr-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ga-row { padding: 8px 0; }
.ga-row + .ga-row { border-top: 1px solid var(--hair); }
.ga-what { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink); }
.ga-what b { font-weight: 600; }

/* The crew-in-JI editor's leg list (2026-09-27): every leg it could change,
   ticked or not, with the crew Jet Insight has on it now. */
.jc-legs { margin: 4px 0 6px; }
.jc-legs .tr-k { display: block; margin-bottom: 3px; }
.jc-trip { font: 700 10.5px var(--sans); letter-spacing: 0.1em; color: var(--muted); margin: 4px 0 2px; }
.jc-leg { display: grid; grid-template-columns: 16px 88px auto minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 3px 4px; border-radius: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.jc-leg:hover { background: rgba(255, 255, 255, 0.05); }
.jc-leg b { color: var(--ink); font-weight: 600; }
.jc-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.jc-now { color: var(--muted); justify-self: end; white-space: nowrap; }

/* AmTrav: what is already booked for a crew swap card's pilot (2026-09-27). */
.cs-booked { margin-top: 6px; padding: 5px 8px; border-radius: 8px; font-size: 11.5px; color: var(--ink-2);
  background: rgba(127, 209, 138, 0.10); border: 1px solid rgba(127, 209, 138, 0.35); display: flex; flex-direction: column; gap: 1px; }
.cs-booked b { font: 700 10px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #7fd18a; }
.cs-booked.is-here { margin: 8px 0 0; }
.cs-booked span b { font: 700 11.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.cs-booked.is-here > i { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; color: var(--muted); }
/* Book in AmTrav (2026-09-28): the button, its confirm, and where the booking stands */
.cs-bk-btn { display: inline-block; margin: 5px 0 0 6px; font: 700 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: #0b1a10; background: #7fd18a; border: 1px solid #7fd18a; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.cs-bk-btn:hover { background: #9be0a4; }
.cs-bk { margin-top: 6px; padding: 5px 8px; border-radius: 8px; font-size: 11.5px; line-height: 1.35; color: var(--ink-2);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.cs-bk b { font: 700 10px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 4px; }
.cs-bk i { font-style: normal; color: var(--ink-2); opacity: 0.8; }
.cs-bk.is-busy { border-color: rgba(250, 178, 25, 0.45); background: rgba(250, 178, 25, 0.08); }
.cs-bk.is-busy b { color: #f5c76a; }
.cs-bk.is-ok { border-color: rgba(127, 209, 138, 0.4); background: rgba(127, 209, 138, 0.10); }
.cs-bk.is-ok b { color: #7fd18a; }
.cs-bk.is-bad { border-color: rgba(255, 122, 100, 0.5); background: rgba(255, 122, 100, 0.10); }
.cs-bk.is-bad b { color: #ff8f7d; }
.cs-bk.is-arm { border-color: rgba(127, 209, 138, 0.55); background: rgba(127, 209, 138, 0.08); display: flex; flex-direction: column; gap: 3px; }
.cs-bk-h { font: 700 10px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #7fd18a; }
.cs-bk-l b { font: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
.cs-bk-b { display: flex; gap: 6px; margin-top: 3px; }
.cs-bk-go, .cs-bk-x { font: 700 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.cs-bk-go { color: #0b1a10; background: #7fd18a; border: 1px solid #7fd18a; }
.cs-bk-go:disabled { opacity: 0.5; cursor: default; }
.cs-bk-x { color: var(--ink-2); background: transparent; border: 1px solid var(--line); }
.cs-bk-why { margin-top: 6px; font-size: 11px; color: #ff8f7d; }
/* Over the company's $500 limit: the booker ticks the price before Buy works (2026-09-28) */
.cs-bk.is-arm.is-dear { border-color: rgba(245, 199, 106, 0.6); background: rgba(245, 199, 106, 0.08); }
.cs-bk.is-arm.is-dear .cs-bk-h { color: #f5c76a; }
.cs-bk-over { margin-top: 2px; padding: 5px 7px; border-radius: 6px; font-size: 11.5px; line-height: 1.35; color: #f5dca0;
  background: rgba(245, 199, 106, 0.12); border: 1px solid rgba(245, 199, 106, 0.5); }
.cs-bk-over b { color: #f5c76a; font: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; margin: 0; }
.cs-bk-over label { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; color: var(--ink); cursor: pointer; }
.cs-bk-btn.is-dear { background: #f5c76a; border-color: #f5c76a; }
.cs-bk-btn.is-dear:hover { background: #f8d68c; }

/* ---- AIRLINE on the pilot map (operator, 2026-10-01): the dashboard's button and
   list at desk scale. The button at the map's top right, only there on a day
   somebody flies; the list drops under it, one pane per flight. ---- */
.map-btn.pm-airline {
  position: absolute; right: 10px; top: 8px; z-index: 4;         /* the top right, PIC / SIC having gone down to PILOTS */
  width: auto; height: 30px; padding: 0 6px 0 9px;
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 10.5px var(--sans); letter-spacing: 0.14em; color: var(--ink-2);
}
.map-btn.pm-airline[hidden] { display: none; }
.pm-airline svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.pm-al-n {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12); font: 700 11px var(--sans); letter-spacing: 0; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pm-airline.is-flying { color: var(--ink); border-color: rgba(212, 219, 231, 0.55); }
.pm-airline.is-flying svg { color: #d4dbe7; }
.pm-airline[aria-expanded="true"] { color: var(--ink); background: rgba(57, 135, 229, 0.30); border-color: rgba(57, 135, 229, 0.55); }
.pm-al-pop {
  position: absolute; top: 80px; right: 10px; z-index: 6; width: 340px; max-width: calc(100% - 20px); max-height: calc(100% - 90px);
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.055) 100%), rgba(12, 17, 27, 0.93);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.pm-al-pop[hidden] { display: none; }
.pm-al-pop .pm-place-h { justify-content: space-between; }
.pm-al-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.pm-al-f {
  padding: 8px 11px 6px; border-radius: 10px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pm-al-f + .pm-al-f { margin-top: 6px; }
.pm-al-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pm-al-ident { font: 700 16px var(--sans); color: var(--ink); letter-spacing: 0.02em; }
.pm-al-airline { font: 500 11.5px var(--sans); color: var(--ink-2); }
.pm-al-st { margin-left: auto; font: 700 9.5px var(--sans); letter-spacing: 0.12em; }
.pm-al-st.st-good { color: var(--good); }
.pm-al-st.st-warn { color: var(--warn); }
.pm-al-st.st-serious { color: var(--serious); }
.pm-al-st.st-crit { color: var(--crit); }
.pm-al-st.st-muted { color: var(--muted); }
.pm-al-route { font: 600 15px var(--sans); color: var(--ink); margin: 3px 0 5px; }
.pm-al-route span { color: var(--muted); }
.pm-al-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.pm-al-k { flex: none; width: 62px; font: 600 9.5px var(--sans); letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.pm-al-v { flex: 1; min-width: 0; font: 500 12px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.pm-al-crew { display: block; }
.pm-al-late { color: var(--serious); }
.pm-al-f.is-airline_cancelled .pm-al-ident, .pm-al-f.is-airline_cancelled .pm-al-route { text-decoration: line-through; color: var(--muted); }
/* PLACE CREW beside the PILOTS filter, a hairline between (operator, 2026-10-01) */
.pm-fb-sep { width: 1px; height: 16px; background: var(--line); }
.pm-filter-bar #pm-place-btn { padding: 2px 8px; font-size: 10.5px; }

/* THE TRAINING WINDOW (2026-10-05): the requests window's head and docks, a blue edge */
.tr-win { border-color: rgba(110, 168, 255, 0.45); }
.tr-win.is-dragging .rqw-head { cursor: grabbing; }
.tr-win .rqw-title { color: #9cc4ff; }
.tr-win .rqw-n.is-red { color: #fff; background: #d9534f; }
.tr-win .rqw-dk.on i { background: #6ea8ff; }
.tr-win .rqw-src { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trw-body { padding: 8px 10px 12px; }
/* THE LOG BOOK WINDOW (2026-10-05): Training's glass; the table scrolls under its pinned header and names */
.lbw-body { display: block; padding: 6px 10px 10px; overflow: auto; }
/* BROKER MINIMUMS in the Log Book (2026-10-28): a menu in the head; the pilots by seat, the floors under each heading */
.lbw-bk { flex: none; max-width: 190px; padding: 2px 6px; border-radius: 7px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06); color: var(--ink); font: 600 11px var(--sans); cursor: pointer; }
.lb-grp { grid-column: 1 / -1; padding: 9px 2px 2px; border-top: 1px solid var(--hair);
  font: 700 10px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #9cc4ff; }
.lb-grp i { font-style: normal; color: var(--muted); margin-left: 4px; }
.lb-grp.is-below { color: var(--muted); }
.lb-floor { display: flex; align-items: center; padding: 0 8px 0 2px; font: 600 9.5px var(--sans); color: var(--muted); }
.lb-floor-n { justify-content: flex-end; padding: 0 8px; font-family: var(--mono); }
.lb-none, .lb-note { grid-column: 1 / -1; padding: 2px 2px 4px; font: 500 11px var(--sans); color: var(--muted); }
.lb-note { color: #f5c76a; }
.lb-n.is-low { color: #ff8f7d; }
.dg-name.lb-below, .lb-n.lb-below { opacity: 0.55; }
.dg-tag.lb-down { background: rgba(250, 178, 25, 0.22); color: var(--warn); }
/* exempt from a broker's minimums for good (2026-10-28) */
.dg-tag.lb-ex { background: rgba(127, 209, 138, 0.2); color: #7fd18a; }
.trn-open .rq-n.is-red { background: #d9534f; color: #fff; }
.trn-empty { padding: 18px 8px; font-size: 12.5px; color: var(--muted); }
.trn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; align-items: start; }
/* one pilot: a pane with its edge in the colour of what is most pressing */
.trn-box {
  padding: 8px 10px 8px 11px; border-radius: 10px; border: 1px solid var(--glass-edge); border-left: 3px solid var(--muted);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.04) 100%);
}
.trn-box.is-red { border-left-color: #e35d57; }
.trn-box.is-amber { border-left-color: var(--warn); }
.trn-box.is-blue { border-left-color: #6ea8ff; }
.trn-box.is-green { border-left-color: #4fb36c; }
.trn-h { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.trn-name { font: 700 14px var(--sans); color: var(--ink); }
.trn-seat { font: 700 10px var(--sans); letter-spacing: 0.1em; color: var(--muted); }
.trn-ca { font: 700 9px var(--sans); letter-spacing: 0.1em; color: #9cc4ff; border: 1px solid rgba(110, 168, 255, 0.45); border-radius: 5px; padding: 0 4px; }
.trn-item { padding: 5px 0 4px; border-top: 1px solid var(--hair); }
.trn-item:first-of-type { border-top: 0; }
.trn-row { display: flex; align-items: baseline; gap: 8px; }
.trn-k { flex: 1; min-width: 0; font: 600 11.5px var(--sans); color: var(--ink-2); }
.trn-st { flex: none; font: 800 9.5px var(--sans); letter-spacing: 0.1em; padding: 1px 6px; border-radius: 5px; }
.trn-item.is-red .trn-st { color: #fff; background: #c94a45; }
.trn-item.is-amber .trn-st { color: #1a1200; background: var(--warn); }
.trn-item.is-blue .trn-st { color: #0b1626; background: #8fbaff; }
.trn-item.is-green .trn-st { color: #06210f; background: #6fcf8a; }
.trn-when { font: 500 11px var(--sans); color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.trn-item.is-red .trn-when { color: #f19a92; }
.trn-note { font: 500 11.5px var(--sans); color: var(--ink); margin-top: 2px; }
.trn-act { font: 500 11px var(--sans); color: var(--ink-2); margin-top: 4px; }
.trn-act.is-bad { color: #f19a92; }
.trn-btn { margin-top: 5px; }
/* the schedule's note on a trip where a 299 line check is planned (week view) */
.wk-lc { display: inline-flex; align-items: center; gap: 4px; font: 700 10px var(--sans); letter-spacing: 0.06em; color: #d9c8ff;
  background: rgba(144, 133, 233, 0.20); border: 1px solid rgba(144, 133, 233, 0.55); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.wk-lc.is-ji { color: #e9e0ff; background: rgba(144, 133, 233, 0.38); }