/* ==========================================================================
   Skydex — styles.css  (owner: DESIGNER)
   Sections:
     1. Design tokens
     2. Base & resets
     3. Required by SPEC §1 (mandatory rules — do not remove)
     4. App shell layout (header / roster / board)
     5. Components (badge, person-card, plane-col, gauge, unit-card,
        member-row, toast)
     6. Status states (warn / over / incomplete)
     7. Drag & drop states (kept LAST so they win the cascade)
     8. Scrollbars, focus, motion, responsive
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* palette */
  --navy-900: #123B57;            /* deep navy (reserved) */
  --navy-800: #1B4A68;            /* toast bg */
  --steel-600: #2673A5;           /* plane header band + app bar */
  --steel-700: #1E5E8A;
  --amber-600: #A9690F;           /* reserved */
  --bg: #E9EEF2;
  --surface: #FFFFFF;
  --ink-900: #1C2B36;
  --ink-600: #5A6B78;
  --ink-400: #8C9BA7;
  --line: #E3E9ED;
  --line-strong: #C7D2DA;

  /* unit pairs: fill / accent / badge-bg / badge-ink */
  --solo-fill: #EAF6FB;   --solo-accent: #2E9BC6;   --solo-badge-bg: #D2ECF7;   --solo-badge-ink: #14607F;
  --group-fill: #FCF8DE;  --group-accent: #E3C51D;  --group-badge-bg: #F6EC9F;  --group-badge-ink: #6B5A00;
  --tandem-fill: #E9F8E2; --tandem-accent: #57B93A; --tandem-badge-bg: #C9F0B8; --tandem-badge-ink: #2A6415;

  /* status */
  --danger: #C63A2F;
  --danger-bg: #FBE3E1;
  --warn: #B8790E;
  --warn-bg: #FCEFD6;
  --ok: #2F8F46;

  /* drag & drop */
  --drop-ok: #2E9BC6;
  --drop-ok-bg: #DFF1FA;
  --shadow-drag: 0 10px 24px rgba(16, 35, 50, .30);

  /* chrome */
  --chip-bg: rgba(255, 255, 255, .10);
  --chip-border: rgba(255, 255, 255, .25);
  --hairline: rgba(28, 43, 54, .10);
  --shadow-card: 0 1px 2px rgba(16, 35, 50, .08);
  --shadow-col: 0 1px 3px rgba(16, 35, 50, .14);
  --radius-badge: 4px;
  --radius-card: 6px;
  --radius-col: 10px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   2. Base & resets
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; }

body {
  height: 100vh;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "roster board";
}

h1, h2, p { margin: 0; }
ul { margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }

/* stable digit columns on every numeric readout */
.chip__value,
.plane-col__time,
.gauge__nums,
.person-card__meta,
.person-card__count,
.member-row__meta,
.unit-card__pax { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   3. Required by SPEC §1 — mandatory rules, do not remove
   ========================================================================== */
[data-drag]{touch-action:none; user-select:none}
.toast-region{pointer-events:none}

/* companions to the rules above (kept separate so the exact lines stay intact) */
[data-drag] { -webkit-user-select: none; cursor: grab; }
[data-drag]:active { cursor: grabbing; }

/* ==========================================================================
   4. App shell layout
   ========================================================================== */

/* --- app bar ----------------------------------------------------------- */
.app-header {
  grid-area: header;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 16px;
  background: var(--steel-600); /* v1.3 — same band color as the plane title bars */
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(16, 35, 50, .25);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* v1.6 — logo.png (white line-art badge, transparent bg, sized for the steel bar) */
.app-logo {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
}

.app-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* --- header stat chips -------------------------------------------------- */
.app-stats {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  min-width: 86px;
  padding: 5px 12px 6px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-col);
}

.chip__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.chip__value {
  display: block;
  min-height: 26px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

/* graceful placeholder until app.js writes the number */
.chip__value:empty::before { content: "–"; opacity: .45; }

/* --- roster sidebar ------------------------------------------------------ */
.roster {
  grid-area: roster;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line-strong);
  transition: background-color .12s ease, box-shadow .12s ease;
}

.roster__head {
  flex: none;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}

.roster__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.roster__hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-400);
}

/* v1.1 — roster search (filters on name + member id only) */
.roster__search {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink-900);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  transition: border-color .12s ease, background-color .12s ease;
}

.roster__search::placeholder { color: var(--ink-400); }

.roster__search:focus,
.roster__search:hover { border-color: var(--steel-600); }

.roster__search:focus { background: var(--surface); }

.roster__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* v1.1 — empty search result */
.roster__none {
  padding: 18px 12px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-card);
  color: var(--ink-400);
  font-size: 13px;
  text-align: center;
}

/* --- board --------------------------------------------------------------- */
.board {
  grid-area: board;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- badge (roles: newbie / exp / monitor) ------------------------------- */
.badge {
  flex: none;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  border-radius: var(--radius-badge);
  background: var(--line);
  color: var(--ink-600);
}

.badge--newbie      { background: var(--warn-bg);        color: var(--warn); }
.badge--experienced { background: var(--solo-badge-bg);  color: var(--solo-badge-ink); }
.badge--monitor     { background: var(--tandem-badge-bg); color: var(--tandem-badge-ink); }

/* --- person card (roster) ------------------------------------------------ */
.person-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-400);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow .12s ease, opacity .12s ease;
}

.person-card:hover { box-shadow: 0 2px 6px rgba(16, 35, 50, .16); }

.person-card--newbie      { border-left-color: var(--warn); }
.person-card--experienced { border-left-color: var(--solo-accent); }
.person-card--monitor     { border-left-color: var(--tandem-accent); }

.person-card__name {
  grid-row: 1;
  grid-column: 1;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-card .badge {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
}

.person-card__meta {
  grid-row: 2;
  grid-column: 1 / -1; /* v1.8 — the meta line (incl. plane count) uses the full card width */
  font-size: 12px;
  color: var(--ink-600);
}

/* v1.1 — club member number, roster-only (nested in the meta cell) */
.person-card__id {
  font-weight: 600;
  color: var(--ink-400);
}

/* v1.8 — plane count lives inside the meta line and inherits its exact format
   (the class is kept as a hook; no pill styling anymore) */
.person-card__count { color: inherit; }

/* --- plane column ---------------------------------------------------------
   Column is a non-scrolling flex shell capped at board height; only
   .plane-col__body scrolls, so the two-band header stays pinned. */
.plane-col {
  flex: 0 0 340px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-col);
  box-shadow: var(--shadow-col);
  overflow: hidden;
  transition: box-shadow .12s ease;
}

/* two-band header: steel band (name + time) over white gauge sub-band */
.plane-col__header {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: background-color .12s ease;
}

.plane-col__name {
  min-width: 0;
  height: 42px;
  line-height: 42px;
  padding: 0 8px 0 12px;
  background: var(--steel-600);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plane-col__time {
  height: 42px;
  line-height: 42px;
  padding: 0 12px 0 4px;
  background: var(--steel-600);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

/* v1.2 — crew & fuel line between the title and the status, part of the steel band */
.plane-col__crew {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin-top: -6px;
  padding: 0 12px 6px;
  background: var(--steel-600);
}

.plane-col__crew-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.plane-col__crew-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.plane-col__crew-value {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  font-variant-numeric: tabular-nums;
}

/* v1.3 — status pill inline next to the plane name (was a full-width band row) */
.plane-col__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  margin-left: 8px;
  margin-bottom: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .92);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.plane-col__status::before {
  content: "●";
  font-size: 8px;
  line-height: 1;
  color: rgba(255, 255, 255, .55);
}

.plane-col--status-onboarding .plane-col__status::before { color: #7FE08F; }

.plane-col--status-pending .plane-col__status { color: rgba(255, 255, 255, .62); }

/* airborne: the whole title band turns amber (ui.jpg language), plane glyph dot;
   the status pill keeps its translucent white fill on top of the amber band */
.plane-col--status-airborne .plane-col__name,
.plane-col--status-airborne .plane-col__time,
.plane-col--status-airborne .plane-col__crew { background: var(--amber-600); }

.plane-col--status-airborne .plane-col__status::before {
  content: "✈";
  font-size: 11px;
  color: #FFFFFF;
}

.plane-col__body {
  flex: 1 1 auto;
  min-height: 132px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  transition: background-color .12s ease;
}

.plane-col__empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-card);
  color: var(--ink-400);
  font-size: 13px;
  text-align: center;
  transition: border-color .12s ease, color .12s ease;
}

/* --- gauges (weight / canopy) in the white sub-band ----------------------- */
.gauge { grid-column: 1 / -1; padding: 6px 12px; }
.gauge--weight { padding-top: 8px; padding-bottom: 5px; }
.gauge--canopy { padding-top: 5px; padding-bottom: 9px; }

.gauge__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.gauge__name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.gauge__nums {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
}

.gauge__track {
  height: 6px;
  border-radius: var(--radius-badge);
  background: rgba(16, 35, 50, .12);
  overflow: hidden;
}

.gauge__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--steel-600);
  transition: width .18s ease;
}

/* --- unit card ------------------------------------------------------------ */
.unit-card {
  flex: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-400);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

.unit-card--solo   { background: var(--solo-fill);   border-left-color: var(--solo-accent); }
.unit-card--group  { background: var(--group-fill);  border-left-color: var(--group-accent); }
.unit-card--tandem { background: var(--tandem-fill); border-left-color: var(--tandem-accent); }

.unit-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 6px;
  border-bottom: 1px solid var(--hairline);
}

.unit-card__type {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--ink-600);
}

.unit-card--solo   .unit-card__type { color: var(--solo-badge-ink); }
.unit-card--group  .unit-card__type { color: var(--group-badge-ink); }
.unit-card--tandem .unit-card__type { color: var(--tandem-badge-ink); }

/* editable group label — dotted underline signals click-to-edit */
.unit-card__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  text-decoration: underline dotted rgba(90, 107, 120, .55);
  text-underline-offset: 2px;
}

.unit-card__label:hover {
  color: var(--steel-700);
  text-decoration-color: var(--steel-600);
}

.unit-card__label-input {
  flex: 1 1 60px;
  min-width: 0;
  max-width: 170px;
  margin: -3px 0;
  padding: 2px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--steel-600);
  border-radius: var(--radius-badge);
}

.unit-card__pax {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-600);
  white-space: nowrap;
}

.unit-card__members { list-style: none; }

.unit-card__flag {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--danger);
  background: var(--danger-bg);
  border-top: 1px solid rgba(198, 58, 47, .25);
}

/* --- member row ------------------------------------------------------------ */
.member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  transition: background-color .12s ease, opacity .12s ease;
}

.member-row + .member-row { border-top: 1px solid var(--hairline); }

.member-row:hover { background: rgba(16, 35, 50, .05); }

.member-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-row__meta {
  flex: none;
  font-size: 12px;
  color: var(--ink-600);
  white-space: nowrap;
}

.member-row__remove {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-badge);
  background: transparent;
  color: var(--ink-400);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.member-row__remove:hover  { background: var(--danger-bg); color: var(--danger); }
.member-row__remove:active { background: #F5CFCB; }

/* v1.11 — static padlock shown instead of ✕ on locked (airborne) planes */
.member-row__lock {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--ink-400);
}

/* --- toasts ----------------------------------------------------------------- */
.toast-region {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}

.toast {
  max-width: 100%;
  padding: 10px 14px;
  background: var(--navy-800);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  border-left: 4px solid var(--ok);
  border-radius: var(--radius-card);
  box-shadow: 0 6px 16px rgba(16, 35, 50, .30);
  animation: toast-in .18s ease-out;
}

.toast--error { border-left-color: var(--danger); }
.toast--info  { border-left-color: var(--ok); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   6. Status states (warn / over / incomplete)
   ========================================================================== */

/* gauge tiers — app.js sets gauge--warn (>=90%) / gauge--over (used>capacity) */
.gauge--warn .gauge__fill { background: var(--warn); }
.gauge--over .gauge__fill { background: var(--danger); }
.gauge--over .gauge__nums { color: var(--danger); font-weight: 700; }

/* over-capacity plane: red ring + tinted gauge sub-band */
.plane-col--over {
  box-shadow: 0 0 0 2px var(--danger), var(--shadow-col);
}

.plane-col--over .plane-col__header {
  background: var(--danger-bg);
  border-bottom-color: rgba(198, 58, 47, .25);
}

/* incomplete tandem (lone newbie): keep green fill, danger dashed outline */
.unit-card--incomplete {
  border: 1px dashed var(--danger);
  border-left: 4px solid var(--danger);
}

/* ==========================================================================
   7. Drag & drop states — kept last so they beat component modifiers
   ========================================================================== */

body.is-dragging,
body.is-dragging * { cursor: grabbing; }

/* calm the hover chrome while a drag is live */
body.is-dragging .person-card:hover { box-shadow: var(--shadow-card); }
body.is-dragging .member-row:hover { background: transparent; }
body.is-dragging .member-row__remove:hover { background: transparent; color: var(--ink-400); }

/* drag source: ghosted + dashed */
.person-card--dragging,
.member-row--dragging { opacity: .45; }

.person-card--dragging {
  border-top: 1px dashed var(--ink-400);
  border-right: 1px dashed var(--ink-400);
  border-bottom: 1px dashed var(--ink-400);
}

.member-row--dragging {
  outline: 1px dashed var(--ink-400);
  outline-offset: -1px;
  background: rgba(16, 35, 50, .04);
}

/* floating clone that follows the cursor (app.js pins width + position) */
.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 900;
  margin: 0;
  pointer-events: none;
  list-style: none;
  opacity: .97;
  transform: scale(1.03);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-drag);
  will-change: left, top, transform;
}

.member-row.drag-ghost {
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

/* unit card targets */
.unit-card--drop-ok {
  background: var(--drop-ok-bg);
  border: 1px solid var(--drop-ok);
  border-left: 4px solid var(--drop-ok);
  box-shadow: inset 0 0 0 2px var(--drop-ok), var(--shadow-card);
}

.unit-card--drop-bad {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-left: 4px solid var(--danger);
  box-shadow: inset 0 0 0 2px var(--danger), var(--shadow-card);
}

/* plane body targets (class lands on the column) */
.plane-col--drag-over {
  box-shadow: 0 0 0 2px var(--drop-ok), var(--shadow-col);
}
.plane-col--drag-over .plane-col__body { background: var(--drop-ok-bg); }
.plane-col--drag-over .plane-col__empty { border-color: var(--drop-ok); color: var(--steel-700); }

.plane-col--drop-bad {
  box-shadow: 0 0 0 2px var(--danger), var(--shadow-col);
}
.plane-col--drop-bad .plane-col__body { background: var(--danger-bg); }
.plane-col--drop-bad .plane-col__empty { border-color: var(--danger); color: var(--danger); }

/* roster as unassign target during member drags */
.roster--drop-ok {
  background: var(--drop-ok-bg);
  box-shadow: inset 0 0 0 2px var(--drop-ok);
}

/* v1.2 — planes already carrying the dragged person: red for the whole drag,
   applied at drag start (duplicate drops there would be rejected) */
.plane-col--duplicate {
  box-shadow: 0 0 0 2px var(--danger), var(--shadow-col);
}
.plane-col--duplicate .plane-col__body { background: var(--danger-bg); }
.plane-col--duplicate .plane-col__empty { border-color: var(--danger); color: var(--danger); }

/* invalid targets refuse the cursor */
body.is-dragging .unit-card--drop-bad,
body.is-dragging .unit-card--drop-bad *,
body.is-dragging .plane-col--drop-bad,
body.is-dragging .plane-col--drop-bad *,
body.is-dragging .plane-col--duplicate,
body.is-dragging .plane-col--duplicate * { cursor: not-allowed; }

/* ==========================================================================
   8. Scrollbars, focus, motion, responsive
   ========================================================================== */

.roster__list,
.plane-col__body,
.board {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.roster__list::-webkit-scrollbar,
.plane-col__body::-webkit-scrollbar,
.board::-webkit-scrollbar { width: 10px; height: 10px; }

.roster__list::-webkit-scrollbar-track,
.plane-col__body::-webkit-scrollbar-track,
.board::-webkit-scrollbar-track { background: transparent; }

.roster__list::-webkit-scrollbar-thumb,
.plane-col__body::-webkit-scrollbar-thumb,
.board::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.roster__list::-webkit-scrollbar-thumb:hover,
.plane-col__body::-webkit-scrollbar-thumb:hover,
.board::-webkit-scrollbar-thumb:hover { background-color: var(--ink-400); }

:focus-visible {
  outline: 2px solid var(--steel-600);
  outline-offset: 1px;
}

.member-row__remove:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
}

.unit-card__label-input:focus {
  outline: 2px solid rgba(38, 115, 165, .35);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 980px) {
  body { grid-template-columns: 248px minmax(0, 1fr); }
  .plane-col { flex-basis: 300px; }
}