/* =====================================================================
   XP12 · GLASS COCKPIT
   Premium dark-mode glass-cockpit dashboard
   ===================================================================== */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-deep:     #04070c;
  --bg-base:     #05080d;
  --bg-elev-1:   #0a0f17;
  --bg-elev-2:   #0e1622;
  --bg-elev-3:   #131d2c;

  /* HUD chrome */
  --line:        rgba(120, 180, 220, 0.12);
  --line-strong: rgba(120, 180, 220, 0.24);
  --line-glow:   rgba(95, 215, 255, 0.36);

  /* Aviation semantic palette */
  --c-cyan:      #5fd7ff;       /* HUD primary */
  --c-cyan-soft: rgba(95, 215, 255, 0.18);
  --c-green:     #4ade80;       /* active / healthy */
  --c-green-soft:rgba(74, 222, 128, 0.18);
  --c-amber:     #fbbf24;       /* caution / target */
  --c-amber-soft:rgba(251, 191, 36, 0.18);
  --c-red:       #f87171;       /* warning / disconnect */
  --c-red-soft:  rgba(248, 113, 113, 0.18);
  --c-magenta:   #f0abfc;       /* AP / selected target */
  --c-magenta-soft: rgba(240, 171, 252, 0.18);
  --c-white:     #e6edf3;
  --c-mute:      #7a8a9b;
  --c-dim:       #4b5a6c;

  /* Type */
  --ff-ui:    'Inter', system-ui, sans-serif;
  --ff-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ff-mark:  'Orbitron', 'JetBrains Mono', monospace;

  /* Shapes */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 20px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-glide:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:      120ms;
  --t-base:      220ms;
  --t-slow:      420ms;

  /* Geometry */
  --topbar-h:  72px;
  --tabbar-h:  64px;
  --gap:       14px;
}

/* ─── RESET & BASE ──────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  /* Clip any rogue horizontal overflow at the document root.
     `clip` is stronger than `hidden` and never creates a scroll container. */
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: var(--ff-ui);
  background: var(--bg-base);
  color: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  /* subtle starfield + radial glow for depth */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(95,215,255,0.06), transparent 60%),
    radial-gradient(900px 700px at 95% 95%, rgba(74,222,128,0.04), transparent 65%),
    linear-gradient(180deg, #050810 0%, #03060c 100%);
}

body::after {
  /* noise / grain overlay so glass cards feel real */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.025;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.6) 0 1px, transparent 1px 3px);
}

button { font: inherit; color: inherit; }

.mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

::selection { background: var(--c-cyan-soft); color: #fff; }

/* ─── COCKPIT FRAME ─────────────────────────────────────────────── */
.cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) 1fr;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
}

@media (max-width: 720px) {
  .cockpit {
    grid-template-rows: var(--topbar-h) 1fr var(--tabbar-h);
  }
}

/* ─── TOP BAR ───────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  height: var(--topbar-h);
  background: linear-gradient(180deg, rgba(8,12,20,0.92), rgba(5,8,13,0.78));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}

.topbar::after {
  /* HUD chrome glow line */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-glow), transparent);
  opacity: 0.6;
}

.topbar__brand { min-width: 0; }
.topbar__sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--c-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ff-mark);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.brand__bracket {
  color: var(--c-cyan);
  font-family: var(--ff-mono);
  opacity: 0.6;
}
.brand__mark {
  font-size: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #c8d4e3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.brand__sep { color: var(--c-cyan); opacity: 0.5; }
.brand__sub {
  font-size: 12px;
  color: var(--c-cyan);
  letter-spacing: 0.18em;
}

.topbar__alerts {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border: 1px solid transparent;
  background: var(--bg-elev-1);
  color: var(--c-dim);
  transition: color var(--t-base), background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.alert-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.alert-pill[data-active="true"] {
  color: var(--c-red);
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.35);
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0);
  animation: alertPulseRed 1.6s ease-in-out infinite;
}
.alert-pill--caution[data-active="true"] {
  color: var(--c-amber);
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.35);
  animation: alertPulseAmber 2.2s ease-in-out infinite;
}

@keyframes alertPulseRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(248,113,113,0); }
}
@keyframes alertPulseAmber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
}

.topbar__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metric-pill,
.health-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 12px;
}
.metric-pill__label {
  color: var(--c-mute);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.metric-pill__value { color: var(--c-white); }

.health-pill {
  position: relative;
  padding: 6px 12px 6px 10px;
  overflow: hidden;
}
.health-pill__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(95,215,255,0.18), transparent);
  transform: translateX(-100%);
  animation: healthSweep 3.6s linear infinite;
}
@keyframes healthSweep { to { transform: translateX(100%); } }
.health-pill[data-state="offline"] .health-pill__sweep,
.health-pill[data-state="degraded"] .health-pill__sweep { animation-duration: 1.6s; }
.health-pill__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-mute);
  box-shadow: 0 0 0 0 currentColor;
  transition: background var(--t-base);
}
.health-pill[data-state="ok"]       .health-pill__dot { background: var(--c-green); animation: dotPulse 2s ease-in-out infinite; }
.health-pill[data-state="degraded"] .health-pill__dot { background: var(--c-amber); animation: dotPulse 1.4s ease-in-out infinite; }
.health-pill[data-state="offline"]  .health-pill__dot { background: var(--c-red); animation: dotPulse 1.0s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0.0); filter: drop-shadow(0 0 6px currentColor); }
}
.health-pill__body { display: flex; flex-direction: column; line-height: 1.05; }
.health-pill__label { font-size: 10px; color: var(--c-mute); letter-spacing: 0.14em; font-weight: 700; }
.health-pill__value { font-size: 12px; color: var(--c-white); }

.topbar__tools { display: flex; gap: 6px; }
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  color: var(--c-white);
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.tool-btn:hover { background: var(--bg-elev-2); border-color: var(--line-strong); color: var(--c-cyan); }
.tool-btn:active { transform: translateY(1px); }
.tool-btn[aria-pressed="true"] {
  background: rgba(95,215,255,0.10);
  border-color: rgba(95,215,255,0.45);
  color: var(--c-cyan);
  box-shadow: 0 0 18px rgba(95,215,255,0.18) inset;
}
.tool-btn__icon { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .tool-btn__label { display: none; }
  .topbar__alerts .alert-pill__label { display: none; }
}
@media (max-width: 720px) {
  .topbar { grid-template-columns: 1fr auto auto; padding: 0 12px; gap: 8px; }
  .topbar__brand { display: none; }
  .topbar__sub { display: none; }
  .metric-pill[title="Flight time"] { display: none; }
}

/* ─── WORKSPACE GRID ────────────────────────────────────────────── */
.workspace {
  position: relative;
  padding: var(--gap);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: var(--gap);
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h));
  min-width: 0;
  overflow-x: clip;
}

@media (max-width: 1280px) {
  .workspace { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .workspace { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    padding: 12px 12px calc(var(--tabbar-h) + 12px);
    gap: 12px;
  }
}

/* ─── CARDS ─────────────────────────────────────────────────────── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(20,28,42,0.55), rgba(8,12,18,0.72));
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 48px rgba(0,0,0,0.45);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  animation: cardIn 320ms var(--ease-out) both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.card::before,
.card::after {
  /* corner brackets */
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-glow);
  pointer-events: none;
  opacity: 0.55;
}
.card::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.card::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }

.card[data-attention="caution"] {
  border-color: rgba(251,191,36,0.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 0 0 1px rgba(251,191,36,0.25),
    0 0 26px rgba(251,191,36,0.20);
  animation: cardIn 320ms var(--ease-out) both, cardCaution 2.4s ease-in-out infinite;
}
.card[data-attention="warning"] {
  border-color: rgba(248,113,113,0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 0 0 1px rgba(248,113,113,0.32),
    0 0 32px rgba(248,113,113,0.30);
  animation: cardIn 320ms var(--ease-out) both, cardWarning 1.6s ease-in-out infinite;
}

@keyframes cardCaution {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(251,191,36,0.25), 0 0 18px rgba(251,191,36,0.15); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(251,191,36,0.45), 0 0 36px rgba(251,191,36,0.32); }
}
@keyframes cardWarning {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(248,113,113,0.32), 0 0 22px rgba(248,113,113,0.20); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(248,113,113,0.55), 0 0 42px rgba(248,113,113,0.40); }
}

/* Default placements (row 1 = PFD, etc.) */
.card[data-card="pfd"]       { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.card[data-card="systems"]   { grid-column: 7 / span 6; grid-row: 1 / span 1; }
.card[data-card="bridge"]    { grid-column: 7 / span 6; grid-row: 2 / span 1; }
.card[data-card="nav"]       { grid-column: 1 / span 4; grid-row: 3 / span 2; }
.card[data-card="env"]       { grid-column: 5 / span 4; grid-row: 3 / span 2; }
.card[data-card="traffic"]   { grid-column: 9 / span 4; grid-row: 3 / span 2; }
.card[data-card="sectional"] { grid-column: 1 / span 12; grid-row: 5 / span 3; }
.card[data-card="copilot"]   { grid-column: 1 / span 12; grid-row: 8 / span 2; }
.card[data-card="glassdeck"] { grid-column: 1 / span 12; grid-row: 10 / span 2; }

@media (max-width: 1280px) {
  .card[data-card="pfd"]       { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  .card[data-card="systems"]   { grid-column: 6 / span 3; grid-row: 1 / span 1; }
  .card[data-card="bridge"]    { grid-column: 6 / span 3; grid-row: 2 / span 1; }
  .card[data-card="nav"]       { grid-column: 1 / span 4; grid-row: 3 / span 2; }
  .card[data-card="traffic"]   { grid-column: 5 / span 4; grid-row: 3 / span 2; }
  .card[data-card="env"]       { grid-column: 1 / span 8; grid-row: 5 / span 1; }
  .card[data-card="sectional"] { grid-column: 1 / span 8; grid-row: 6 / span 3; }
  .card[data-card="copilot"]   { grid-column: 1 / span 8; grid-row: 9 / span 2; }
  .card[data-card="glassdeck"] { grid-column: 1 / span 8; grid-row: 11 / span 2; }
}
@media (max-width: 980px) {
  .card[data-card="pfd"]       { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .card[data-card="systems"]   { grid-column: 1 / span 6; grid-row: 3 / span 1; }
  .card[data-card="bridge"]    { grid-column: 1 / span 6; grid-row: 4 / span 1; }
  .card[data-card="nav"]       { grid-column: 1 / span 3; grid-row: 5 / span 2; }
  .card[data-card="traffic"]   { grid-column: 4 / span 3; grid-row: 5 / span 2; }
  .card[data-card="env"]       { grid-column: 1 / span 6; grid-row: 7 / span 1; }
  .card[data-card="sectional"] { grid-column: 1 / span 6; grid-row: 8 / span 3; }
  .card[data-card="copilot"]   { grid-column: 1 / span 6; grid-row: 11 / span 2; }
  .card[data-card="glassdeck"] { grid-column: 1 / span 6; grid-row: 13 / span 2; }
}
@media (max-width: 720px) {
  .card { grid-column: 1 / -1 !important; grid-row: auto !important; }
  body[data-tab="cockpit"]   .card:not([data-card="pfd"]) { display: none; }
  body[data-tab="systems"]   .card:not([data-card="systems"]):not([data-card="bridge"]) { display: none; }
  body[data-tab="nav"]       .card:not([data-card="nav"]) { display: none; }
  body[data-tab="sectional"] .card:not([data-card="sectional"]) { display: none; }
  body[data-tab="traffic"]   .card:not([data-card="traffic"]) { display: none; }
  body[data-tab="env"]       .card:not([data-card="env"]) { display: none; }
  body[data-tab="glassdeck"] .card:not([data-card="glassdeck"]) { display: none; }
  body[data-tab="copilot"]   .card:not([data-card="copilot"]) { display: none; }
}

/* ─── CARD HEADER ───────────────────────────────────────────────── */
.card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  flex: 0 0 auto;
}
.card__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card__title h2 {
  margin: 0;
  font-family: var(--ff-mark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-white);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__bracket {
  color: var(--c-cyan);
  font-family: var(--ff-mono);
  opacity: 0.6;
  font-size: 14px;
}
.card__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-mute);
  box-shadow: 0 0 6px transparent;
  transition: background var(--t-base), box-shadow var(--t-base);
}
.card__live[data-state="ok"]       { background: var(--c-green); box-shadow: 0 0 8px rgba(74,222,128,0.6); }
.card__live[data-state="degraded"] { background: var(--c-amber); box-shadow: 0 0 8px rgba(251,191,36,0.6); }
.card__live[data-state="offline"]  { background: var(--c-red);   box-shadow: 0 0 8px rgba(248,113,113,0.6); }
.card__live[data-state="standby"]  { background: var(--c-cyan);  box-shadow: 0 0 7px rgba(34,211,238,0.42); opacity: .72; }

.card__actions { display: flex; align-items: center; gap: 8px; }
.card__ts {
  font-size: 10.5px;
  color: var(--c-mute);
  letter-spacing: 0.06em;
}
.card__count {
  font-size: 11px;
  color: var(--c-cyan);
  background: var(--c-cyan-soft);
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(95,215,255,0.30);
}
.card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--c-mute);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.card-btn:hover { background: var(--bg-elev-1); color: var(--c-cyan); border-color: var(--line-strong); }
.card-btn svg { width: 14px; height: 14px; }
.card-grip {
  display: none;
  width: 18px;
  height: 18px;
  cursor: grab;
  background:
    radial-gradient(circle at 4px 4px, var(--c-mute) 1px, transparent 1.4px),
    radial-gradient(circle at 4px 9px, var(--c-mute) 1px, transparent 1.4px),
    radial-gradient(circle at 4px 14px, var(--c-mute) 1px, transparent 1.4px),
    radial-gradient(circle at 9px 4px, var(--c-mute) 1px, transparent 1.4px),
    radial-gradient(circle at 9px 9px, var(--c-mute) 1px, transparent 1.4px),
    radial-gradient(circle at 9px 14px, var(--c-mute) 1px, transparent 1.4px);
}
body[data-edit-mode="on"] .card-grip { display: inline-block; }
body[data-edit-mode="on"] .card { cursor: grab; }
body[data-edit-mode="on"] .card.is-dragging { cursor: grabbing; opacity: 0.85; transform: scale(0.98); }
body[data-edit-mode="on"] .card.drop-target { outline: 2px dashed var(--c-cyan); outline-offset: -4px; }

/* Resize handle (south-east corner) */
.card__resize {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  display: none;
  z-index: 5;
  background: linear-gradient(135deg, transparent 0 50%, var(--c-cyan-soft) 50% 100%);
  border-bottom-right-radius: var(--r-3);
}
body[data-edit-mode="on"] .card__resize { display: block; }

.card__body {
  flex: 1 1 auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.card__state { margin: 0; color: var(--c-mute); font-size: 13px; }

/* ─── PFD INSTRUMENT GROUP ──────────────────────────────────────── */
.card__body--pfd {
  padding: 12px 14px 14px;
}
.pfd {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 70px 60px;
  grid-template-rows: minmax(220px, 1fr) auto auto;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.pfd__horizon-wrap {
  position: relative;
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.ah {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  display: block;
  /* Override the SVG's intrinsic min-content so it never forces the column. */
  min-width: 0;
}
[data-ah-pitch],
[data-ah-roll]  { transition: transform 240ms var(--ease-glide); }

.pfd__att-readout {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(2,8,18,0.78);
  border: 1px solid rgba(95,215,255,0.25);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-cyan);
}
.att-chip__l {
  font-size: 9px;
  color: var(--c-mute);
  letter-spacing: 0.12em;
}

/* Tapes */
.tape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: rgba(2,8,18,0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.tape--ias { grid-column: 1; grid-row: 1; }
.tape--alt { grid-column: 3; grid-row: 1; }
.tape__label {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--c-cyan);
  background: rgba(95,215,255,0.10);
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.tape__strip {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  font-family: var(--ff-mono);
}
.tape__strip-inner {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  transition: transform 480ms var(--ease-glide);
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}
.tape__tick {
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0;
  position: relative;
}
.tape__tick--major { color: var(--c-white); }
.tape__tick::before {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--c-mute);
}
.tape__tick--major::before { width: 10px; background: var(--c-white); }
.tape__cursor {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.95));
  color: var(--c-green);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  padding: 6px 4px;
  border: 1px solid rgba(74,222,128,0.55);
  border-radius: 4px;
  font-family: var(--ff-mono);
  letter-spacing: 0.04em;
  box-shadow: 0 0 14px rgba(74,222,128,0.18) inset, 0 0 16px rgba(0,0,0,0.5);
  z-index: 2;
  pointer-events: none;
}
.tape__trend {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-mono);
  color: var(--c-cyan);
  font-size: 16px;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(95,215,255,0.6);
}
.tape__trend[data-dir="up"]  { color: var(--c-green); text-shadow: 0 0 6px rgba(74,222,128,0.7); }
.tape__trend[data-dir="dn"]  { color: var(--c-amber); text-shadow: 0 0 6px rgba(251,191,36,0.7); }

/* VSI */
.vsi {
  grid-column: 4;
  grid-row: 1;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 4px;
  padding: 6px 4px;
  background: rgba(2,8,18,0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  text-align: center;
  font-family: var(--ff-mono);
}
.vsi__label  { font-size: 10px; color: var(--c-cyan); letter-spacing: 0.14em; }
.vsi__bar {
  position: relative;
  width: 8px;
  margin: 0 auto;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(74,222,128,0.10) 0%, rgba(74,222,128,0.10) 48%,
      rgba(255,255,255,0.18) 48%, rgba(255,255,255,0.18) 52%,
      rgba(248,113,113,0.10) 52%, rgba(248,113,113,0.10) 100%);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.vsi__fill {
  position: absolute;
  left: 0; right: 0;
  background: linear-gradient(180deg, rgba(74,222,128,0.0), rgba(74,222,128,0.85));
  transition: top 320ms var(--ease-glide), height 320ms var(--ease-glide), background 220ms;
  border-radius: 4px;
  top: 50%;
  height: 0;
}
.vsi__fill[data-dir="dn"] {
  background: linear-gradient(180deg, rgba(251,191,36,0.85), rgba(248,113,113,0.85));
}
.vsi__value { font-size: 13px; color: var(--c-white); }
.vsi__unit  { font-size: 9px; color: var(--c-mute); letter-spacing: 0.16em; }

/* Compass ribbon */
.compass {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  height: 56px;
  background: rgba(2,8,18,0.78);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.compass__strip {
  position: absolute;
  inset: 0;
  font-family: var(--ff-mono);
  color: rgba(255,255,255,0.7);
}
.compass__strip-inner {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  transition: transform 320ms var(--ease-glide);
  will-change: transform;
}
.compass__seg {
  flex: 0 0 16px;
  text-align: center;
  font-size: 11px;
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 8px;
  justify-content: center;
}
.compass__seg::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 1px;
  height: 8px;
  background: var(--c-mute);
}
.compass__seg--maj::before { height: 12px; background: var(--c-white); }
.compass__seg--maj { color: var(--c-white); }
.compass__pointer {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--c-amber);
  filter: drop-shadow(0 0 6px rgba(251,191,36,0.6));
  z-index: 3;
}
.compass__bug {
  position: absolute;
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--c-magenta);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
  opacity: 0.85;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(240,171,252,0.55));
  display: none;
  transition: left 320ms var(--ease-glide);
}
.compass__bug[data-shown="true"] { display: block; }
.compass__readout {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 4px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(74,222,128,0.45);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 12px;
  color: var(--c-green);
  font-family: var(--ff-mono);
  z-index: 4;
}
.compass__sub { font-size: 9px; color: var(--c-mute); letter-spacing: 0.14em; }

/* Sparklines */
.pfd__sparks {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.spark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: rgba(2,8,18,0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--c-cyan);
}
.spark__l {
  font-size: 9px;
  color: var(--c-mute);
  letter-spacing: 0.14em;
  font-family: var(--ff-mono);
}
.spark__svg { width: 100%; height: 24px; display: block; }

/* ─── AUTOPILOT / SYSTEMS ───────────────────────────────────────── */
.ap-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(2,8,18,0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  flex-wrap: wrap;
}
.ap-mode {
  font-family: var(--ff-mark);
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-elev-2);
  color: var(--c-mute);
  border: 1px solid var(--line);
}
.ap-mode[data-ap-mode="active"] {
  background: rgba(74,222,128,0.10);
  color: var(--c-green);
  border-color: rgba(74,222,128,0.55);
  box-shadow: 0 0 14px rgba(74,222,128,0.18);
}
.ap-mode[data-ap-mode="standby"] {
  background: rgba(95,215,255,0.10);
  color: var(--c-cyan);
  border-color: rgba(95,215,255,0.45);
}
.ap-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-tag {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(95,215,255,0.10);
  color: var(--c-cyan);
  border: 1px solid rgba(95,215,255,0.30);
}
.ap-tag--armed {
  background: rgba(240,171,252,0.10);
  color: var(--c-magenta);
  border-color: rgba(240,171,252,0.30);
}

.ap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.ap-cell {
  padding: 8px 10px;
  background: rgba(2,8,18,0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-cell__l {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--c-mute);
  text-transform: uppercase;
  font-family: var(--ff-mono);
  font-weight: 600;
}
.ap-cell__v {
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--c-white);
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ap-cell__u { font-size: 10px; color: var(--c-mute); }
.ap-cell--target .ap-cell__v { color: var(--c-magenta); }
.ap-cell--active .ap-cell__v { color: var(--c-green); }
.ap-cell--caution .ap-cell__v { color: var(--c-amber); }

/* ─── BRIDGE FEED CARD ──────────────────────────────────────────── */
.bridge-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: stretch;
}
.bridge-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.bridge-graph {
  width: 100%;
  height: 80px;
  display: block;
  background: rgba(2,8,18,0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.bridge-feed {
  align-self: stretch;
  width: 130px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  background: rgba(2,8,18,0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-family: var(--ff-mono);
  text-align: center;
}
.bridge-feed__pulse {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bridge-feed__pulse::before,
.bridge-feed__pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: feedPulse 2s ease-out infinite;
}
.bridge-feed__pulse::after { animation-delay: 1s; }
@keyframes feedPulse {
  from { transform: scale(0.4); opacity: 0.8; }
  to   { transform: scale(1.4); opacity: 0; }
}
.bridge-feed__core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.bridge-feed[data-state="ok"]       { color: var(--c-green); }
.bridge-feed[data-state="degraded"] { color: var(--c-amber); }
.bridge-feed[data-state="offline"]  { color: var(--c-red); }
.bridge-feed__label { font-size: 10px; letter-spacing: 0.16em; color: var(--c-mute); }
.bridge-feed__value { font-size: 12px; color: var(--c-white); font-weight: 600; }

/* ─── RADAR (NAV / TRAFFIC) ─────────────────────────────────────── */
.card__body--radar {
  padding: 12px;
  gap: 10px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.radar {
  --radar-primary: #5fd7ff;
  --radar-line: rgba(95,215,255,0.10);
  --radar-ring: rgba(95,215,255,0.18);
  --radar-sweep: rgba(95,215,255,0.32);
  --radar-sweep-hot: rgba(95,215,255,0.55);
  --radar-glow: rgba(95,215,255,0.10);
  --radar-center: #fbbf24;
  --radar-center-glow: rgba(251,191,36,0.62);
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center, #021627 0%, #010812 70%, #000308 100%);
  border: 1px solid var(--radar-ring);
  box-shadow:
    0 0 0 1px var(--radar-line) inset,
    0 0 36px var(--radar-glow) inset,
    0 18px 42px rgba(0,0,0,0.28);
  overflow: hidden;
  margin: 0 auto;
  align-self: center;
}
.radar--weather {
  --radar-primary: #86efac;
  --radar-line: rgba(134,239,172,0.12);
  --radar-ring: rgba(134,239,172,0.30);
  --radar-sweep: rgba(34,197,94,0.28);
  --radar-sweep-hot: rgba(251,191,36,0.46);
  --radar-glow: rgba(34,197,94,0.16);
  --radar-center: #fbbf24;
  --radar-center-glow: rgba(251,191,36,0.68);
  background:
    radial-gradient(circle at 45% 40%, rgba(134,239,172,0.12) 0 18%, transparent 38%),
    radial-gradient(circle at center, #061c16 0%, #04110f 66%, #010806 100%);
}
.radar--traffic {
  --radar-primary: #67e8f9;
  --radar-line: rgba(103,232,249,0.12);
  --radar-ring: rgba(103,232,249,0.28);
  --radar-sweep: rgba(103,232,249,0.25);
  --radar-sweep-hot: rgba(255,255,255,0.42);
  --radar-glow: rgba(103,232,249,0.13);
  --radar-center: #f8fafc;
  --radar-center-glow: rgba(103,232,249,0.72);
  background:
    radial-gradient(circle at 50% 48%, rgba(103,232,249,0.10) 0 22%, transparent 48%),
    radial-gradient(circle at center, #041721 0%, #030d16 68%, #01050a 100%);
}
.radar__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 0 32%, var(--radar-line) 32% 33%, transparent 33% 65%, var(--radar-line) 65% 66%, transparent 66% 99%, var(--radar-ring) 99%);
}
.radar__rings::before,
.radar__rings::after {
  content: '';
  position: absolute;
  background: var(--radar-line);
}
.radar__rings::before { left: 50%; top: 6%; bottom: 6%; width: 1px; }
.radar__rings::after  { top: 50%; left: 6%; right: 6%; height: 1px; }
.radar__sweep {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(95,215,255,0) 0deg,
    rgba(95,215,255,0) 280deg,
    var(--radar-sweep) 348deg,
    var(--radar-sweep-hot) 358deg,
    rgba(95,215,255,0) 360deg);
  animation: radarSweep 3.6s linear infinite;
  mix-blend-mode: screen;
}
@keyframes radarSweep { to { transform: rotate(360deg); } }
.radar__img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.92;
  mix-blend-mode: screen;
}
.radar__crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--radar-center);
  background: color-mix(in srgb, var(--radar-center) 40%, transparent);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 4px var(--radar-center-glow));
}
.radar__hud-tl, .radar__hud-tr, .radar__hud-bl, .radar__hud-br {
  position: absolute;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--radar-primary);
  background: rgba(2,8,18,0.7);
  padding: 3px 6px;
  border: 1px solid var(--radar-ring);
  border-radius: 4px;
}
.radar__hud-tl { top: 8px; left: 8px; }
.radar__hud-tr { top: 8px; right: 8px; }
.radar__hud-bl { bottom: 8px; left: 8px; }
.radar__hud-br { bottom: 8px; right: 8px; }

.traffic-list {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 0.9fr 0.7fr 0.9fr;
  gap: 4px 8px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  align-content: start;
}
.traffic-list__head {
  font-size: 9.5px;
  color: var(--c-mute);
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.traffic-list__cell { padding: 3px 0; color: var(--c-white); }
.traffic-list__cell--alt   { color: var(--c-cyan); }
.traffic-list__cell--gear  { color: var(--c-mute); font-size: 10px; }
.traffic-list__more {
  grid-column: 1 / -1;
  padding: 7px 0 1px;
  border-top: 1px solid rgba(95,215,255,.14);
  color: var(--c-cyan);
  font-size: 9px;
  letter-spacing: .09em;
  text-align: right;
}
.traffic-list__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--c-mute);
  font-size: 12px;
  padding: 10px 0;
  font-family: var(--ff-ui);
}

/* ─── ENVIRONMENT ───────────────────────────────────────────────── */
.card__body--env {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.windrose {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(2,8,18,0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 8px;
}
.windrose__svg {
  width: 100%;
  max-width: 130px;
  height: auto;
  aspect-ratio: 1;
  display: block;
}
.windrose__cards text {
  fill: var(--c-mute);
  font-size: 12px;
  font-family: var(--ff-mono);
  font-weight: 600;
}
[data-wind-arrow] { transition: transform 480ms var(--ease-glide); transform-origin: center; }

.windrose__readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: -6px;
}
.windrose__big {
  font-size: 16px;
  color: var(--c-cyan);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.windrose__small {
  font-size: 11px;
  color: var(--c-mute);
}

.env-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  align-content: start;
}
.env-cell {
  padding: 8px 10px;
  background: rgba(2,8,18,0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.env-cell__l {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--c-mute);
  text-transform: uppercase;
  font-family: var(--ff-mono);
}
.env-cell__v {
  font-family: var(--ff-mono);
  font-size: 13.5px;
  color: var(--c-white);
}

/* ─── GLASS DECK MOSAIC ─────────────────────────────────────────── */
.card__body--glassdeck {
  padding: 12px;
  flex: 1 1 auto;
}
.glassdeck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.gd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: rgba(2,8,18,0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  text-align: left;
  appearance: none;
  color: inherit;
  font: inherit;
}
.gd-card:hover {
  border-color: rgba(95,215,255,0.45);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45), 0 0 0 1px rgba(95,215,255,0.15) inset;
}
.gd-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.gd-card__title { color: var(--c-cyan); font-weight: 600; }
.gd-card__dim { color: var(--c-mute); font-size: 9.5px; }
.gd-card__img {
  width: 100%;
  aspect-ratio: auto;
  height: auto;
  background: #02060c;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  display: block;
  object-fit: contain;
}
.gd-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  padding: 4px 6px;
  background: var(--c-cyan-soft);
  color: var(--c-cyan);
  border: 1px solid rgba(95,215,255,0.3);
  border-radius: var(--r-1);
  text-transform: uppercase;
}

/* ─── FOCUS MODE ────────────────────────────────────────────────── */
.focus {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base);
  padding: 16px;
}
.focus[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.focus__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,5,10,0.75);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
.focus__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1200px, 100%);
  max-height: calc(100vh - 32px);
  background:
    linear-gradient(180deg, rgba(20,28,42,0.85), rgba(8,12,18,0.92));
  border: 1px solid rgba(95,215,255,0.30);
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 64px rgba(0,0,0,0.6),
    0 0 32px rgba(95,215,255,0.08);
  transform: scale(0.96);
  transition: transform var(--t-base) var(--ease-out);
}
.focus[data-open="true"] .focus__panel { transform: scale(1); }

.focus__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
}
.focus__title-wrap { display: flex; flex-direction: column; gap: 4px; }
.focus__eyebrow {
  font-size: 10px;
  color: var(--c-cyan);
  letter-spacing: 0.18em;
}
.focus__title {
  margin: 0;
  font-family: var(--ff-mark);
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--c-white);
  text-transform: uppercase;
}
.focus__close {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(95,215,255,0.10);
  border: 1px solid rgba(95,215,255,0.35);
  color: var(--c-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast);
}
.focus__close:hover { background: rgba(95,215,255,0.18); }
.focus__close svg { width: 16px; height: 16px; }
.focus__body { flex: 1; overflow: auto; padding: 16px 18px; }
.focus__body img:not(.focus-image__layer) { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border-radius: var(--r-2); }
.focus__body .focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.focus-cell {
  padding: 10px 12px;
  background: rgba(2,8,18,0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.focus-cell__l {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--c-mute);
  font-family: var(--ff-mono);
  text-transform: uppercase;
}
.focus-cell__v {
  font-family: var(--ff-mono);
  font-size: 16px;
  color: var(--c-white);
}

/* ─── BOTTOM TAB BAR (mobile only) ──────────────────────────────── */
.tabbar {
  display: none;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tabbar-h);
  z-index: 30;
  background: linear-gradient(180deg, rgba(8,12,20,0.85), rgba(2,5,10,0.96));
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 6px 8px env(safe-area-inset-bottom, 6px);
}
.tabbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-glow), transparent);
}
@media (max-width: 720px) {
  .tabbar {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 2px;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tab { flex: 1 0 62px; scroll-snap-align: center; }
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--c-mute);
  font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
  font-family: var(--ff-mono);
}
.tab svg { width: 20px; height: 20px; }
.tab[aria-selected="true"] {
  color: var(--c-cyan);
  background: rgba(95,215,255,0.08);
}
.tab:active { transform: scale(0.97); }

/* ─── SCROLLBAR ─────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(120,180,220,0.25) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120,180,220,0.20); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,180,220,0.35); }

/* ─── AI CO-PILOT CARD ──────────────────────────────────────────── */
.card--copilot {
  border-color: rgba(95,215,255,0.25);
}
.card--copilot::before,
.card--copilot::after { border-color: rgba(95,215,255,0.55); opacity: 0.7; }
.copilot-model {
  font-size: 10px;
  color: var(--c-cyan);
  background: rgba(95,215,255,0.08);
  border: 1px solid rgba(95,215,255,0.28);
  border-radius: 6px;
  padding: 2px 6px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.copilot-body {
  gap: 10px;
  padding: 12px;
}
.copilot-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .copilot-row { grid-template-columns: 1fr; }
}
.copilot-block {
  background: rgba(2,8,18,0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.copilot-block--actions {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.copilot-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--c-mute);
  text-transform: uppercase;
}
.copilot-tag[data-phase="ground"]   { color: var(--c-mute); }
.copilot-tag[data-phase="taxi"]     { color: var(--c-cyan); }
.copilot-tag[data-phase="takeoff"]  { color: var(--c-green); }
.copilot-tag[data-phase="climb"]    { color: var(--c-green); }
.copilot-tag[data-phase="cruise"]   { color: var(--c-cyan); }
.copilot-tag[data-phase="descent"]  { color: var(--c-amber); }
.copilot-tag[data-phase="approach"] { color: var(--c-amber); }
.copilot-tag[data-phase="landing"]  { color: var(--c-magenta); }
.copilot-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.35;
  min-width: 0;
}
.copilot-line__l {
  flex: 0 0 36px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--c-mute);
  text-transform: uppercase;
}
.copilot-line__v {
  flex: 1 1 auto;
  color: var(--c-white);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.copilot-line--now .copilot-line__l { color: var(--c-green); }
.copilot-line--next .copilot-line__l { color: var(--c-cyan); }

.copilot-block--coach.is-loading .copilot-line__v {
  color: var(--c-mute);
  font-style: italic;
}

.copilot-block--sentinel { border-color: var(--line); }
.copilot-block--sentinel[data-severity="info"] {
  border-color: rgba(95,215,255,0.35);
  background: rgba(95,215,255,0.06);
}
.copilot-block--sentinel[data-severity="info"] .copilot-tag { color: var(--c-cyan); }
.copilot-block--sentinel[data-severity="caution"] {
  border-color: rgba(251,191,36,0.45);
  background: rgba(251,191,36,0.06);
  animation: cardCaution 2.4s ease-in-out infinite;
}
.copilot-block--sentinel[data-severity="caution"] .copilot-tag { color: var(--c-amber); }
.copilot-block--sentinel[data-severity="warning"] {
  border-color: rgba(248,113,113,0.55);
  background: rgba(248,113,113,0.06);
  animation: cardWarning 1.6s ease-in-out infinite;
}
.copilot-block--sentinel[data-severity="warning"] .copilot-tag { color: var(--c-red); }

.copilot-action {
  appearance: none;
  border: 1px solid rgba(95,215,255,0.45);
  background: rgba(95,215,255,0.10);
  color: var(--c-cyan);
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--ff-mark);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.copilot-action:hover {
  background: rgba(95,215,255,0.18);
  color: #fff;
}
.copilot-action:active { transform: translateY(1px); }
.copilot-action__hint { color: inherit; }

.copilot-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-mute);
  user-select: none;
}
.copilot-toggle input { accent-color: var(--c-cyan); }
.copilot-toggle__l { letter-spacing: 0.06em; }
.copilot-toggle:hover .copilot-toggle__l { color: var(--c-white); }

.copilot-ask {
  display: flex;
  gap: 6px;
  align-items: center;
}
.copilot-ask__input {
  flex: 1 1 auto;
  background: rgba(2,8,18,0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--c-white);
  padding: 9px 12px;
  font-size: 12.5px;
  outline: none;
  transition: border-color var(--t-fast);
}
.copilot-ask__input::placeholder { color: var(--c-dim); }
.copilot-ask__input:focus { border-color: rgba(95,215,255,0.45); }
.copilot-ask__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-2);
  background: rgba(95,215,255,0.10);
  border: 1px solid rgba(95,215,255,0.30);
  color: var(--c-cyan);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.copilot-ask__send:hover { background: rgba(95,215,255,0.20); color: #fff; }
.copilot-ask__send svg { width: 16px; height: 16px; }

.copilot-ask-out {
  background: rgba(2,8,18,0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-white);
  white-space: pre-wrap;
}
.copilot-ask-out.is-loading { color: var(--c-mute); font-style: italic; }

/* ─── QUIET MODE  ·  dim non-critical UI when pilot is busy ─────── */
body.is-quiet .copilot-block--coach,
body.is-quiet .copilot-ask,
body.is-quiet .copilot-ask-out,
body.is-quiet .copilot-block--actions {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.4);
  transition: opacity var(--t-base), filter var(--t-base);
}
body.is-quiet .card--copilot::before,
body.is-quiet .card--copilot::after { opacity: 0.85; border-color: var(--c-amber); }

/* ─── COPILOT BUSY DOT ──────────────────────────────────────────── */
.card__live[data-state="thinking"] {
  background: var(--c-cyan);
  box-shadow: 0 0 8px rgba(95,215,255,0.6);
  animation: thinkingPulse 1.1s ease-in-out infinite;
}
@keyframes thinkingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95,215,255,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(95,215,255,0); }
}

/* ─── SETTINGS DRAWER ───────────────────────────────────────────── */
.settings {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base);
}
.settings[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.settings__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,5,10,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.settings__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: linear-gradient(180deg, rgba(20,28,42,0.92), rgba(8,12,18,0.96));
  border-left: 1px solid rgba(95,215,255,0.28);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-out);
  box-shadow: -32px 0 48px rgba(0,0,0,0.5);
}
.settings[data-open="true"] .settings__panel { transform: translateX(0); }

.settings__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.settings__eyebrow { font-size: 10px; color: var(--c-cyan); letter-spacing: 0.18em; margin: 0 0 4px; }
.settings__title {
  margin: 0;
  font-family: var(--ff-mark);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-white);
}
.settings__close {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(95,215,255,0.10);
  border: 1px solid rgba(95,215,255,0.35);
  color: var(--c-cyan);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast);
}
.settings__close:hover { background: rgba(95,215,255,0.20); }
.settings__close svg { width: 16px; height: 16px; }

.settings__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.settings__group h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-cyan);
  font-family: var(--ff-mark);
  text-transform: uppercase;
}
.settings__hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--c-mute);
  line-height: 1.5;
}
.settings__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--c-white);
}
.settings__row label { color: var(--c-mute); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; }
.settings__row select,
.settings__row input[type="checkbox"],
.settings__btn {
  background: rgba(2,8,18,0.7);
  border: 1px solid var(--line);
  color: var(--c-white);
  padding: 7px 10px;
  border-radius: var(--r-2);
  font-family: var(--ff-mono);
  font-size: 12px;
  outline: none;
  transition: border-color var(--t-fast);
}
.settings__row select:focus { border-color: rgba(95,215,255,0.5); }
.settings__row input[type="checkbox"] { width: 18px; height: 18px; padding: 0; accent-color: var(--c-cyan); }
.settings__btn {
  cursor: pointer;
  letter-spacing: 0.06em;
}
.settings__btn:hover { background: var(--bg-elev-2); color: var(--c-cyan); border-color: rgba(95,215,255,0.35); }

.settings__caption {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--c-mute);
  letter-spacing: 0.04em;
}

.settings__health {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 11px;
}
.settings__health li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--r-1);
  background: rgba(2,8,18,0.5);
}
.settings__health li[data-h="ok"]    { color: var(--c-green); }
.settings__health li[data-h="bad"]   { color: var(--c-red); }
.settings__health li[data-h="cold"]  { color: var(--c-mute); }
.settings__health__id   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-white); }
.settings__health__prov { color: var(--c-mute); font-size: 10px; }
.settings__health__lat  { color: inherit; }

/* ─── FOCUS MODE: AI panel for gauge focus ──────────────────────── */
.focus-ai {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(95,215,255,0.06);
  border: 1px solid rgba(95,215,255,0.30);
  border-radius: var(--r-2);
}
.focus-ai__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.focus-ai__title {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-cyan);
  text-transform: uppercase;
}
.focus-ai__btn {
  appearance: none;
  background: var(--c-cyan-soft);
  color: var(--c-cyan);
  border: 1px solid rgba(95,215,255,0.35);
  border-radius: var(--r-2);
  padding: 6px 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--t-fast);
}
.focus-ai__btn:hover { background: rgba(95,215,255,0.20); color: #fff; }
.focus-ai__btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.focus-ai__out {
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.focus-ai__row { display: flex; gap: 10px; align-items: baseline; }
.focus-ai__row span:first-child {
  flex: 0 0 70px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--c-mute);
  text-transform: uppercase;
}

/* =====================================================================
 *  PHASE-2 RESPONSIVE TUNING  ·  applied AFTER all base styles so the
 *  mobile-first overrides win cleanly.
 * ===================================================================== */

/* Make every grid item naturally shrinkable. Without this any descendant
   with intrinsic min-content (e.g. an SVG with a viewBox, a long word,
   a fixed-width gauge image) can force its grid column wider than the
   `1fr` track it sits in. */
.workspace > .card,
.card__body,
.card__body > *,
.copilot-row > *,
.pfd > *,
.bridge-body > *,
.card__body--env > * {
  min-width: 0;
}

/* ─── TOPBAR: tighten on tablets/phones ────────────────────────────── */
@media (max-width: 1280px) {
  .topbar { gap: 12px; padding: 0 14px; }
  .alert-pill { padding: 6px 9px; font-size: 10.5px; }
  .alert-pill__label { letter-spacing: 0.06em; }
  .metric-pill, .health-pill { padding: 5px 10px; font-size: 11.5px; }
  .health-pill__label { font-size: 9.5px; }
  .health-pill__value { font-size: 11px; }
  .metric-pill__label { font-size: 9.5px; }
  .metric-pill__value { font-size: 11px; }
  .tool-btn { padding: 6px 9px; font-size: 10.5px; }
}
@media (max-width: 1100px) {
  /* Hidden alert labels: collapse pill to just the dot to remove visual noise */
  .alert-pill { padding: 5px 7px; gap: 0; }
  .alert-pill__dot { width: 8px; height: 8px; }
}
@media (max-width: 720px) {
  .topbar { gap: 6px; padding: 0 10px; }
  .topbar__alerts { gap: 4px; }
  .alert-pill { padding: 4px 6px; }
  .topbar__meta { gap: 6px; }
  /* Drop the Z+FLT clocks on very narrow viewports to make room for tools */
  .metric-pill[title="Zulu time"]   .metric-pill__label { display: none; }
  .metric-pill[title="Flight time"] { display: none; }
  .health-pill { padding: 5px 8px; }
  .health-pill__label { display: none; }
  .health-pill__body { line-height: 1; }
  .health-pill__value { font-size: 10.5px; white-space: nowrap; }
  .tool-btn { padding: 6px; }
  .tool-btn__icon { width: 16px; height: 16px; }
}
@media (max-width: 420px) {
  .topbar { padding: 0 8px; }
  .metric-pill[title="Zulu time"] .metric-pill__value { font-size: 10.5px; }
  /* Brand pre-hidden by 720 already */
}
@media (max-width: 360px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px;
    padding: 0 6px;
  }
  .topbar__alerts { gap: 3px; }
  .alert-pill[data-active="false"] { display: none; }
  .metric-pill[title="Zulu time"] { display: none; }
  .topbar__meta { min-width: 0; gap: 3px; }
  .health-pill { min-width: 0; max-width: 86px; padding: 5px 6px; }
  .health-pill__value { overflow: hidden; text-overflow: ellipsis; }
  .topbar__tools { gap: 3px; }
  .tool-btn { width: 34px; min-width: 34px; justify-content: center; padding: 6px; }
}

/* ─── PFD: compact tapes / VSI on phones ──────────────────────────── */
@media (max-width: 720px) {
  .card__body--pfd { padding: 10px 10px 12px; }
  .pfd {
    grid-template-columns: 44px minmax(0, 1fr) 56px 36px;
    gap: 6px;
  }
  .tape__label { font-size: 9px; padding: 3px 0; letter-spacing: 0.06em; }
  .tape__cursor { font-size: 12px; padding: 4px 2px; letter-spacing: 0; }
  .tape__strip-inner { font-size: 11px; }
  .tape__trend { font-size: 14px; right: 2px; }
  .vsi__label { font-size: 9px; }
  .vsi__bar { width: 5px; }
  .vsi__value { font-size: 11px; }
  .vsi__unit { font-size: 8px; }
  .att-chip { font-size: 9px; padding: 2px 5px; gap: 4px; }
  .att-chip__l { font-size: 8px; letter-spacing: 0.08em; }
  .compass { height: 50px; }
  .compass__seg { font-size: 10px; }
  .pfd__sparks { gap: 6px; }
  .spark { padding: 5px 6px; }
  .spark__l { font-size: 8.5px; }
}
@media (max-width: 380px) {
  .pfd {
    grid-template-columns: 38px minmax(0, 1fr) 50px 30px;
    gap: 4px;
  }
  .tape__cursor { font-size: 11px; padding: 3px 1px; }
  .vsi__bar { width: 4px; }
  .vsi__value { font-size: 10px; }
  .att-chip { font-size: 8px; padding: 2px 4px; }
}

/* ─── CARDS: header actions + count chip on phones ────────────────── */
@media (max-width: 720px) {
  .card__head { padding: 9px 12px; gap: 6px; }
  .card__title h2 { font-size: 11.5px; letter-spacing: 0.14em; }
  .card__actions { gap: 6px; }
  .card__ts { font-size: 9.5px; }
  .card__count { font-size: 10px; padding: 1px 6px; }
  .card-btn { width: 26px; height: 26px; }
  .card-btn svg { width: 13px; height: 13px; }
}

/* ─── BRIDGE FEED: stack on tighter widths ────────────────────────── */
@media (max-width: 1100px) {
  .bridge-body { grid-template-columns: minmax(0, 1fr); }
  .bridge-feed {
    flex-direction: row;
    width: 100%;
    gap: 12px;
    align-self: auto;
    padding: 8px 10px;
  }
  .bridge-feed__pulse { width: 36px; height: 36px; flex: 0 0 auto; }
  .bridge-feed__core { width: 10px; height: 10px; }
  .bridge-feed__label { font-size: 9.5px; }
  .bridge-feed__value { font-size: 11px; }
}

/* ─── ENV: stack windrose above grid on tighter widths ────────────── */
@media (max-width: 1100px) {
  .card__body--env { grid-template-columns: minmax(0, 1fr); }
  .windrose__svg { max-width: 100px; }
}

/* ─── COPILOT: stack on phones; clamp model badge ─────────────────── */
@media (max-width: 720px) {
  .copilot-body { padding: 10px; gap: 8px; }
  .copilot-row { gap: 8px; }
  .copilot-block { padding: 8px 10px; }
  .copilot-line { font-size: 12px; }
  .copilot-line__l { flex-basis: 32px; font-size: 9.5px; letter-spacing: 0.12em; }
  .copilot-tag { font-size: 9.5px; letter-spacing: 0.12em; }
  .copilot-action { padding: 8px 12px; font-size: 11px; letter-spacing: 0.12em; }
  .copilot-toggle { font-size: 10.5px; }
  .copilot-toggle input { width: 14px; height: 14px; }
  .copilot-block--actions { flex-wrap: wrap; }
  .copilot-ask__input { font-size: 12px; padding: 8px 10px; }
  .copilot-ask__send { width: 34px; height: 34px; }
  .copilot-ask-out { font-size: 12.5px; padding: 9px 11px; max-height: 220px; overflow: auto; }
  .copilot-model { max-width: 130px; font-size: 9.5px; padding: 1px 5px; }
}
@media (max-width: 380px) {
  .copilot-model { max-width: 110px; }
}

/* Always cap model label to keep header tidy */
.copilot-model { max-width: 200px; }

/* ─── TRAFFIC LIST: shrink on phones ──────────────────────────────── */
@media (max-width: 720px) {
  .traffic-list { font-size: 10.5px; gap: 3px 6px; }
  .traffic-list__head { font-size: 9px; letter-spacing: 0.08em; }
}

/* ─── GLASS DECK on phones: smaller cards ─────────────────────────── */
@media (max-width: 720px) {
  .glassdeck { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .gd-card { padding: 6px; gap: 6px; }
  .gd-card__head { font-size: 9px; }
  .gd-card__cta { font-size: 8.5px; padding: 3px 5px; }
}

/* ─── MOBILE TAB BAR: 7-tab cramming ──────────────────────────────── */
@media (max-width: 720px) {
  .tabbar { padding: 4px 4px env(safe-area-inset-bottom, 4px); gap: 0; }
  .tab { padding: 4px 0; gap: 1px; font-size: 9.5px; letter-spacing: 0.02em; }
  .tab svg { width: 18px; height: 18px; }
}
@media (max-width: 420px) {
  .tab { font-size: 9px; }
  .tab svg { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .tab { font-size: 8.5px; }
}

/* ─── FOCUS MODE: tighter on phones ───────────────────────────────── */
@media (max-width: 720px) {
  .focus { padding: 8px; }
  .focus__panel { border-radius: 14px; }
  .focus__head { padding: 12px 14px; }
  .focus__title { font-size: 18px; }
  .focus__close { width: 32px; height: 32px; }
  .focus__body { padding: 12px 14px; }
  .focus-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .focus-cell { padding: 8px 10px; }
  .focus-cell__v { font-size: 14px; }
  .focus-ai { padding: 10px 12px; }
  .focus-ai__row span:first-child { flex: 0 0 60px; font-size: 9px; }
}

/* ─── SETTINGS DRAWER: tighter on small screens ───────────────────── */
@media (max-width: 480px) {
  .settings__panel { width: 100vw; border-left: 0; }
  .settings__row { grid-template-columns: 110px 1fr; }
  .settings__health li { grid-template-columns: minmax(0, 1fr) auto; }
  .settings__health__lat { display: none; }
}

/* ─── CARD HEADERS: avoid action overflow on narrow widths ────────── */
.card__title { flex: 1 1 auto; min-width: 0; }
.card__title h2 { min-width: 0; }
.card__actions { flex-shrink: 0; }

/* ─── CO-PILOT row safety: never overflow ─────────────────────────── */
.copilot-row > * { min-width: 0; overflow: hidden; }
.copilot-line { flex-wrap: wrap; }

/* =====================================================================
 *  LIVE FEED  ·  double-buffered <img> crossfade
 *  Two stacked image layers; the inactive one loads + decodes the next
 *  texture, then we swap the `is-active` flag to reveal it. 280 ms
 *  opacity tween makes the swap look like a single smooth update.
 * ===================================================================== */
.live-feed__layer {
  /* Crossfade is opacity-only so the existing positioning + sizing rules
     for the host class (.radar__img, .gd-card__img, .focus-image__layer)
     keep working without modification. */
  transition: opacity 280ms var(--ease-glide);
}
.live-feed__layer:not(.is-active) {
  opacity: 0 !important;
  pointer-events: none;
}

/* ─── GLASS DECK CARD: image wrapper for double-buffer ────────────── */
.gd-card__img-wrap {
  position: relative;
  width: 100%;
  background: #02060c;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
}
.gd-card__img-wrap > .gd-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.gd-card__img-wrap > .gd-card__img.is-active { opacity: 1; }

/* ─── RADAR CROSSFADE: keep natural opacity 0.92 when active ──────── */
.radar__img.live-feed__layer.is-active { opacity: 0.92; }

/* ─── FOCUS MODE LIVE IMAGE ───────────────────────────────────────── */
.focus-image {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: var(--r-2);
  background: #02060c;
  border: 1px solid var(--line);
  overflow: hidden;
}
.focus-image__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 280ms var(--ease-glide);
  display: block;
}
.focus-image__layer.is-active { opacity: 1; }
/* The first .focus-image__layer rendered by HTML starts visible until
   LiveFeed wires up; otherwise we'd see a blank placeholder for one tick. */
.focus-image > .focus-image__layer:first-child { opacity: 1; }
.focus-image > .focus-image__layer:first-child:not(.is-active) { opacity: 0 !important; }

/* ─── REDUCED MOTION ────────────────────────────────────────────── */
/* =====================================================================
 *  FAA SECTIONAL · official raster chart + live X-Plane overlays
 * ===================================================================== */
.card--sectional {
  border-color: rgba(95,215,255,0.28);
  background: linear-gradient(180deg, rgba(19,28,42,0.72), rgba(5,9,14,0.92));
}
.card--sectional::before,
.card--sectional::after { border-color: rgba(95,215,255,0.72); }
.sectional-head-badge {
  padding: 3px 7px;
  border: 1px solid rgba(95,215,255,0.32);
  border-radius: 5px;
  background: rgba(95,215,255,0.08);
  color: var(--c-cyan);
  font-size: 9px;
  letter-spacing: .11em;
}
.sectional-head-badge[data-state="limited"] {
  border-color: rgba(251,191,36,.42);
  background: rgba(251,191,36,.1);
  color: var(--c-amber);
}
.sectional-head-badge[data-state="global"] {
  border-color: rgba(95,215,255,.42);
  background: rgba(8,55,78,.7);
  color: #a8edff;
}
.card__body--sectional { padding: 0; min-height: 560px; }
.sectional-shell {
  --sectional-counter-rotation: 0deg;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(286px, .8fr);
  min-height: 560px;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  background: #071925;
}
.sectional-stage {
  position: relative;
  min-width: 0;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 52% 42%, rgba(32,100,126,.26), transparent 46%),
    linear-gradient(180deg, #0a3043, #071c2a);
}
.sectional-map__rotor {
  --sectional-rotation: 0deg;
  position: absolute;
  inset: -22%;
  z-index: 1;
  transform: rotate(var(--sectional-rotation));
  transform-origin: 50% 50%;
  transition: transform 680ms var(--ease-glide), filter 300ms ease, opacity 300ms ease;
  will-change: transform;
}
.sectional-map,
.sectional-map.leaflet-container { width: 100%; height: 100%; background: #09283a; }
.sectional-map.leaflet-container { cursor: crosshair; font-family: var(--ff-mono); }
.sectional-global-grid-tile { display: block; background: #09283a; }
.sectional-global-map,
.sectional-global-map .maplibregl-canvas-container,
.sectional-global-map .maplibregl-canvas { width: 100%; height: 100%; }
.sectional-global-map { background: transparent; pointer-events: none; }
.sectional-faa-tile.leaflet-tile-loaded { animation: sectionalTileIn 420ms var(--ease-out) both; }
@keyframes sectionalTileIn { from { opacity: 0; } to { opacity: 1; } }
.sectional-traffic-ring { transition: opacity 280ms ease; vector-effect: non-scaling-stroke; }
.sectional-shell[data-traffic-visible="false"] .sectional-traffic-ring { opacity: 0 !important; }
.sectional-stage__vignette {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(2,8,14,.52) inset,
    0 0 54px rgba(2,8,14,.52) inset,
    0 -90px 80px -68px rgba(2,8,14,.84) inset;
}
.sectional-stage__grid {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(3,18,26,.38) 50%, transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px), rgba(3,18,26,.38) 50%, transparent calc(50% + .5px));
  mask-image: radial-gradient(circle at center, #000 0 8%, transparent 28%);
}
.sectional-attribution {
  position: absolute;
  z-index: 11;
  right: 15px;
  bottom: 58px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  max-width: min(64%, 440px);
  padding: 4px 7px;
  border: 1px solid rgba(174,226,241,.18);
  border-radius: 4px;
  background: rgba(3,13,20,.78);
  color: rgba(220,239,245,.78);
  font-size: 7px;
  line-height: 1.25;
  letter-spacing: .035em;
  pointer-events: auto;
  backdrop-filter: blur(7px);
}
.sectional-attribution a { color: #b9efff; text-decoration: none; }
.sectional-attribution a:hover,
.sectional-attribution a:focus-visible { color: #fff; text-decoration: underline; outline: none; }
.sectional-stage__wait {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: #172c37;
  background: rgba(224,220,198,.78);
  backdrop-filter: blur(3px);
  transition: opacity 380ms ease, visibility 380ms;
}
.sectional-stage__wait strong { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .16em; }
.sectional-stage__wait small { max-width: 350px; color: #425560; line-height: 1.5; }
.sectional-stage__wait-mark {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(14,66,84,.38);
  border-radius: 50%;
  animation: chartAcquire 1.8s ease-in-out infinite;
}
.sectional-stage__wait-mark::before,
.sectional-stage__wait-mark::after { content: ''; position: absolute; background: #174f63; }
.sectional-stage__wait-mark::before { width: 1px; height: 64px; top: -8px; left: 23px; }
.sectional-stage__wait-mark::after { height: 1px; width: 64px; left: -8px; top: 23px; }
@keyframes chartAcquire { 50% { transform: scale(.86); opacity: .58; } }
.sectional-shell[data-chart-state="live"] .sectional-stage__wait,
.sectional-shell[data-chart-state="stale"] .sectional-stage__wait { opacity: 0; visibility: hidden; }
.sectional-shell[data-chart-state="waiting"] .sectional-map__rotor,
.sectional-shell[data-chart-state="invalid"] .sectional-map__rotor { filter: saturate(.4) blur(1px); opacity: .52; }
.sectional-shell[data-chart-state="stale"] .sectional-stage::after {
  content: '';
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(135deg, rgba(251,191,36,.6) 0 2px, transparent 2px 12px);
}
.sectional-toolbar {
  position: absolute;
  z-index: 12;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  max-width: calc(100% - 28px);
  padding: 5px;
  border: 1px solid rgba(164,221,238,.22);
  border-radius: 10px;
  background: rgba(4,12,18,.88);
  box-shadow: 0 12px 28px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter: blur(10px);
}
.sectional-source-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(54px, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(95,215,255,.2);
  border-radius: 7px;
  background: rgba(2,9,14,.72);
}
.sectional-source-option {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #8297a3;
  font-family: var(--ff-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.sectional-source-option:hover,
.sectional-source-option:focus-visible {
  color: #fff;
  border-color: rgba(95,215,255,.34);
  outline: none;
}
.sectional-source-option.is-active {
  color: #061117;
  border-color: #9deaff;
  background: var(--c-cyan);
  box-shadow: 0 0 17px rgba(95,215,255,.24);
}
.sectional-toolbar__tools { display: flex; flex-wrap: wrap; gap: 4px; }
.sectional-control {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #b9c9d1;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.sectional-control svg { width: 15px; height: 15px; }
.sectional-control:hover,
.sectional-control:focus-visible { color: #fff; background: rgba(95,215,255,.13); border-color: rgba(95,215,255,.32); outline: none; }
.sectional-control:active { transform: translateY(1px); }
.sectional-control--icon { width: 36px; padding: 0; font-size: 18px; font-weight: 500; }
.sectional-shell[data-follow="true"] .sectional-control--follow { color: var(--c-cyan); border-color: rgba(95,215,255,.34); background: rgba(95,215,255,.1); }
.sectional-shell[data-follow="false"] .sectional-control--follow { color: #071116; background: var(--c-amber); border-color: #ffe08a; box-shadow: 0 0 18px rgba(251,191,36,.22); }
.sectional-control--traffic[aria-pressed="true"] { color: var(--c-green); border-color: rgba(74,222,128,.32); background: rgba(74,222,128,.09); }
.sectional-control--traffic-range { color: #a8edff; border-color: rgba(95,215,255,.22); }
.sectional-control--traffic-labels { color: #c6d5dc; border-color: rgba(164,221,238,.14); }
.sectional-shell[data-traffic-labels="all"] .sectional-control--traffic-labels { color: var(--c-cyan); background: rgba(95,215,255,.08); }
.sectional-shell[data-waypoint-state="armed"] .sectional-control--waypoint,
.sectional-shell[data-waypoint-state="active"] .sectional-control--waypoint { color: #061117; border-color: #a7f3ff; background: var(--c-cyan); box-shadow: 0 0 18px rgba(95,215,255,.22); }
.sectional-shell[data-waypoint-state="armed"] .sectional-map.leaflet-container { cursor: cell; }
.sectional-scale {
  position: absolute;
  z-index: 12;
  left: 14px;
  bottom: 58px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(3,13,20,.76);
  color: #c3edf7;
  font-size: 7px;
  letter-spacing: .08em;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.sectional-scale__bar {
  display: block;
  width: 68px;
  height: 7px;
  border: solid #9deaff;
  border-width: 0 1px 1px;
  transition: width 180ms ease;
}
.sectional-statusbar {
  position: absolute;
  z-index: 12;
  left: 14px;
  right: 14px;
  bottom: 14px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 7px 11px;
  border: 1px solid rgba(164,221,238,.2);
  border-radius: 8px;
  background: rgba(4,12,18,.9);
  color: #9fb0ba;
  font-size: 9px;
  letter-spacing: .08em;
  backdrop-filter: blur(10px);
  box-shadow: 0 9px 24px rgba(0,0,0,.28);
}
.sectional-statusbar strong { color: #fff; font-weight: 600; }
.sectional-status { color: var(--c-green); font-weight: 700; margin-right: auto; }
.sectional-statusbar__mode { color: #9fe8fa; }
.sectional-shell[data-chart-state="stale"] .sectional-status { color: var(--c-amber); }
.sectional-shell[data-chart-state="invalid"] .sectional-status { color: var(--c-red); }
.sectional-statusbar__divider { width: 1px; align-self: stretch; background: rgba(160,206,220,.17); }
.sectional-ownship-shell,
.sectional-traffic-shell,
.sectional-range-label-shell { background: transparent; border: 0; }
.sectional-ownship-shell { transition: transform 900ms linear; }
.sectional-traffic-shell { transition: transform 900ms linear; }
.sectional-ownship { position: relative; width: 64px; height: 64px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.65)); }
.sectional-ownship__pulse { position: absolute; inset: 12px; border: 2px solid rgba(0,185,232,.84); border-radius: 50%; animation: ownshipPulse 2.1s ease-out infinite; }
@keyframes ownshipPulse { from { transform: scale(.38); opacity: .95; } to { transform: scale(1.45); opacity: 0; } }
.sectional-ownship__track { position: absolute; left: 31px; bottom: 32px; width: 2px; height: 48px; background: linear-gradient(to top, rgba(0,184,226,.68), transparent); transform-origin: 50% 100%; transform: rotate(var(--ownship-track, 0deg)); }
.sectional-ownship__airframe { position: absolute; inset: 16px; display: grid; place-items: center; transform: rotate(var(--ownship-heading, 0deg)); transition: transform 480ms var(--ease-glide); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #00a7d2); }
.sectional-ownship__airframe svg { width: 28px; height: 28px; fill: #003d52; stroke: #f7ffff; stroke-width: 1.3; }
.sectional-ownship__label { position: absolute; left: 50%; top: 51px; transform: translateX(-50%) rotate(var(--sectional-counter-rotation)); color: #fff; background: rgba(0,43,57,.92); border: 1px solid rgba(255,255,255,.7); border-radius: 3px; padding: 1px 4px; font-size: 8px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.sectional-range-label-shell { opacity: .88; transition: opacity 180ms ease; }
.sectional-shell[data-traffic-visible="false"] .sectional-range-label-shell,
.sectional-shell[data-chart-state="waiting"] .sectional-range-label-shell,
.sectional-shell[data-chart-state="invalid"] .sectional-range-label-shell { opacity: 0; }
.sectional-range-label { display: block; color: #c7f6ff; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-align: center; text-shadow: 0 1px 2px #00131b, 0 0 6px #00131b; transform: rotate(var(--sectional-counter-rotation)); }
.sectional-traffic-vector { animation: trafficVectorMarch 2.8s linear infinite; vector-effect: non-scaling-stroke; }
@keyframes trafficVectorMarch { to { stroke-dashoffset: -26; } }
.sectional-traffic { width: 118px; height: 46px; display: flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #003f56; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(255,255,255,.8)) drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.sectional-traffic__glyph { flex: 0 0 34px; font-size: 31px; line-height: 1; transform: rotate(var(--traffic-heading, 0deg)); transition: transform 420ms var(--ease-glide), color 180ms ease; -webkit-text-stroke: 1px #fff; }
.sectional-traffic__label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 3px 5px; border: 1px solid rgba(0,61,82,.66); border-radius: 3px; background: rgba(244,247,233,.94); opacity: 1; transform: rotate(var(--sectional-counter-rotation)) translateX(0); transform-origin: 0 50%; white-space: nowrap; font-family: var(--ff-mono); transition: opacity 160ms ease, transform 180ms ease; }
.sectional-traffic[data-label-visible="false"] .sectional-traffic__label { opacity: 0; pointer-events: none; transform: rotate(var(--sectional-counter-rotation)) translateX(-4px); }
.sectional-traffic__label strong { max-width: 78px; overflow: hidden; text-overflow: ellipsis; font-size: 8px; }
.sectional-traffic__label small { font-size: 7px; color: #314b54; }
.sectional-traffic:hover .sectional-traffic__label,
.sectional-traffic:focus-visible .sectional-traffic__label,
.sectional-traffic.is-selected .sectional-traffic__label { opacity: 1; transform: rotate(var(--sectional-counter-rotation)) translateX(0); }
.sectional-traffic:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; border-radius: 4px; }
.sectional-traffic.is-caution { color: #8a4300; }
.sectional-traffic.is-caution .sectional-traffic__label { border-color: #a85600; background: rgba(255,237,194,.97); }
.sectional-traffic.is-warning { color: #a40f25; animation: trafficProximityPulse 1.4s ease-in-out infinite; }
.sectional-traffic.is-warning .sectional-traffic__label { border-color: #c5263d; background: rgba(255,226,228,.98); }
.sectional-traffic.is-selected .sectional-traffic__label { box-shadow: 0 0 0 2px #5fd7ff, 0 5px 14px rgba(0,0,0,.3); }
@keyframes trafficProximityPulse { 50% { filter: drop-shadow(0 0 8px rgba(255,80,100,.82)); } }
.sectional-traffic-scope {
  position: absolute;
  z-index: 13;
  top: 14px;
  right: 14px;
  width: min(224px, calc(100% - 28px));
  overflow: hidden;
  border: 1px solid rgba(95,215,255,.32);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(2,14,22,.94), rgba(5,25,34,.88));
  color: #dff8ff;
  box-shadow: 0 12px 30px rgba(0,0,0,.36), 0 0 30px rgba(25,180,220,.08) inset;
  backdrop-filter: blur(11px);
  pointer-events: none;
}
.sectional-traffic-scope__head { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border-bottom: 1px solid rgba(95,215,255,.18); color: #a9edff; font-size: 8px; letter-spacing: .11em; }
.sectional-traffic-scope__head span { display: flex; align-items: center; gap: 6px; }
.sectional-traffic-scope__head i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 9px var(--c-green); }
.sectional-traffic-scope__head strong { color: var(--c-green); font-size: 8px; }
.sectional-traffic-scope[data-state="stale"] .sectional-traffic-scope__head strong,
.sectional-traffic-scope[data-state="off"] .sectional-traffic-scope__head strong { color: var(--c-amber); }
.sectional-traffic-scope__metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 8px 9px 6px; }
.sectional-traffic-scope__metrics > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: 7px; border-left: 1px solid rgba(159,216,231,.14); }
.sectional-traffic-scope__metrics > span:first-child { padding-left: 0; border-left: 0; }
.sectional-traffic-scope__metrics small { color: #748c98; font-size: 6px; letter-spacing: .14em; }
.sectional-traffic-scope__metrics strong { color: #f5fcff; font-size: 10px; letter-spacing: .04em; }
.sectional-traffic-scope[data-alert="caution"] [data-chart-scope-alerts] { color: var(--c-amber); }
.sectional-traffic-scope[data-alert="warning"] [data-chart-scope-alerts] { color: #ff7a8d; }
.sectional-traffic-scope__advisory { min-height: 29px; margin: 0 9px; padding: 7px 0; border-top: 1px solid rgba(159,216,231,.12); color: #d9f7ff; font-size: 7px; font-weight: 700; line-height: 1.35; letter-spacing: .035em; }
.sectional-traffic-scope[data-alert="caution"] .sectional-traffic-scope__advisory { color: #ffe29b; }
.sectional-traffic-scope[data-alert="warning"] .sectional-traffic-scope__advisory { color: #ff9aaa; }
.sectional-traffic-scope__legend { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; background: rgba(0,0,0,.2); color: #7895a0; font-size: 6px; letter-spacing: .06em; }
.sectional-traffic-scope__legend span { display: flex; align-items: center; gap: 4px; }
.sectional-traffic-scope__diamond { color: var(--c-cyan); font-size: 14px; font-style: normal; line-height: .5; }
.sectional-traffic-scope__vector { width: 18px; height: 1px; border-top: 1px dashed var(--c-cyan); }
.sectional-trail--active { animation: trailMarch 3.6s linear infinite; }
@keyframes trailMarch { to { stroke-dashoffset: -32; } }
.sectional-waypoint-line,
.sectional-projected-track { animation: trailMarch 3.6s linear infinite; }
.sectional-waypoint-shell,
.sectional-projection-shell { background: transparent; border: 0; }
.sectional-waypoint-marker {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #08212b;
  transform: rotate(var(--sectional-counter-rotation));
  transform-origin: 12px 42px;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.92)) drop-shadow(0 3px 4px rgba(0,0,0,.58));
}
.sectional-waypoint-marker > span { color: var(--c-cyan); font-size: 26px; -webkit-text-stroke: 1px #fff; }
.sectional-waypoint-marker strong { padding: 2px 4px; border: 1px solid #07536b; border-radius: 3px; background: rgba(232,251,255,.94); font-family: var(--ff-mono); font-size: 8px; letter-spacing: .1em; }
.sectional-projection-shell { opacity: 1; transition: opacity 180ms ease; }
.sectional-projection-shell span {
  display: block;
  padding: 2px 4px;
  border: 1px solid rgba(74,222,128,.7);
  border-radius: 3px;
  background: rgba(2,24,16,.84);
  color: #9dffc0;
  font-family: var(--ff-mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(var(--sectional-counter-rotation));
}
.sectional-shell[data-projection-state="hidden"] .sectional-projection-shell { opacity: 0; }
.sectional-intel { position: relative; z-index: 20; min-width: 0; display: flex; flex-direction: column; gap: 13px; padding: 18px; color: var(--c-white); background: radial-gradient(420px 260px at 50% 0, rgba(95,215,255,.08), transparent 62%), linear-gradient(180deg, #0c151f, #070c12); border-left: 1px solid rgba(95,215,255,.19); box-shadow: -20px 0 40px rgba(2,6,10,.24); }
.sectional-intel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sectional-intel__eyebrow { margin: 0 0 3px; color: var(--c-cyan); font-size: 9px; letter-spacing: .16em; }
.sectional-intel h3 { margin: 0; font-family: var(--ff-mark); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; }
.sectional-intel__count { padding: 5px 7px; border: 1px solid rgba(74,222,128,.28); border-radius: 6px; background: rgba(74,222,128,.08); color: var(--c-green); font-size: 9px; }
.sectional-readouts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin: 0; }
.sectional-readout { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; border: 1px solid rgba(120,180,220,.13); border-radius: 6px; background: rgba(1,7,12,.48); }
.sectional-readout--wide { grid-column: span 2; }
.sectional-readout dt { color: var(--c-mute); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.sectional-readout dd { margin: 0; color: #f6fbff; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.sectional-target { display: flex; flex-direction: column; gap: 4px; padding: 10px 11px; border-left: 2px solid var(--c-cyan); background: rgba(95,215,255,.065); }
.sectional-target span { color: var(--c-cyan); font-family: var(--ff-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.sectional-target small { color: #a7b6c1; line-height: 1.35; }
.sectional-waypoint-summary { display: flex; flex-direction: column; gap: 4px; padding: 10px 11px; border-left: 2px solid var(--c-green); background: rgba(74,222,128,.055); }
.sectional-waypoint-summary span { color: #8fffb8; font-family: var(--ff-mono); font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.sectional-waypoint-summary small { color: #a7b6c1; line-height: 1.4; }
.sectional-ai-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sectional-ai-action { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(120,180,220,.18); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--c-white); cursor: pointer; text-align: left; transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.sectional-ai-action:hover,
.sectional-ai-action:focus-visible { transform: translateY(-1px); border-color: rgba(95,215,255,.48); background: rgba(95,215,255,.08); outline: none; }
.sectional-ai-action--primary { border-color: rgba(95,215,255,.33); background: rgba(95,215,255,.07); }
.sectional-ai-action__mark { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--c-cyan); }
.sectional-ai-action > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sectional-ai-action strong { font-size: 10px; }
.sectional-ai-action small { color: var(--c-mute); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sectional-source { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.sectional-source span { color: var(--c-mute); font-size: 8px; letter-spacing: .08em; }
.sectional-source a { width: fit-content; color: var(--c-cyan); font-size: 10px; text-decoration: none; }
.sectional-source a:hover { text-decoration: underline; }
.sectional-advisory { margin: 0; color: #748696; font-size: 9px; line-height: 1.45; }
body[data-edit-mode="on"] .sectional-map__rotor { pointer-events: none; }
.sectional-shell--focus { min-height: min(720px, calc(100vh - 190px)); grid-template-columns: minmax(0, 2.4fr) minmax(280px, .7fr); }
.sectional-shell--focus .sectional-stage { min-height: min(720px, calc(100vh - 190px)); }
@media (max-width: 1100px) {
  .sectional-shell,
  .sectional-shell--focus { grid-template-columns: minmax(0,1fr); height: auto; }
  .sectional-stage,
  .sectional-shell--focus .sectional-stage { min-height: 500px; }
  .sectional-intel { border-left: 0; border-top: 1px solid rgba(95,215,255,.19); }
  .sectional-readouts { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .sectional-readout--wide { grid-column: span 2; }
}
@media (max-width: 720px) {
  .card__body--sectional { min-height: 0; }
  .sectional-shell { min-height: 0; }
  .sectional-stage,
  .sectional-shell--focus .sectional-stage { min-height: 430px; }
  .sectional-toolbar { top: 10px; left: 10px; right: 10px; max-width: none; }
  .sectional-source-option { min-height: 44px; }
  .sectional-toolbar__tools { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); }
  .sectional-control { min-width: 0; min-height: 44px; padding: 0 7px; }
  .sectional-control--follow { grid-column: span 2; }
  .sectional-control--traffic,
  .sectional-control--traffic-range,
  .sectional-control--traffic-labels,
  .sectional-control--waypoint { grid-column: span 2; }
  .sectional-control--trail { display: none; }
  .sectional-traffic-scope { top: 226px; right: 10px; width: 190px; }
  .sectional-traffic-scope__legend { display: none; }
  .sectional-statusbar { left: 10px; right: 10px; bottom: 10px; gap: 8px; flex-wrap: wrap; }
  .sectional-attribution { right: 11px; bottom: 82px; max-width: calc(100% - 22px); }
  .sectional-scale { left: 11px; bottom: 82px; }
  .sectional-status { flex: 1 0 100%; margin: 0; }
  .sectional-statusbar__divider { display: none; }
  .sectional-intel { padding: 14px; }
  .sectional-readouts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sectional-readout--wide { grid-column: span 1; }
  .sectional-head-badge { display: none; }
}
@media (max-width: 420px) {
  .sectional-toolbar { gap: 3px; padding: 4px; }
  .sectional-control { padding: 0 5px; font-size: 7px; }
  .sectional-control--icon { width: 100%; min-width: 44px; }
  .sectional-traffic-scope { top: 226px; width: 174px; }
  .sectional-traffic-scope__head { padding-inline: 7px; }
  .sectional-traffic-scope__metrics { padding-inline: 7px; }
  .sectional-traffic-scope__advisory { margin-inline: 7px; }
  .sectional-range-label-shell--1 { display: none; }
  .sectional-ai-actions { grid-template-columns: 1fr; }
}

/* COPILOT FLIGHT DESK · deterministic summary + Assist / Learn */
.copilot-context-frame { position: relative; overflow: hidden; padding: 11px; border: 1px solid rgba(95,215,255,.22); border-radius: 9px; background: linear-gradient(105deg, rgba(95,215,255,.075), transparent 36%), rgba(2,8,18,.66); }
.copilot-context-frame::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; left: -110px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(95,215,255,.08), transparent); animation: contextScan 8s linear infinite; }
@keyframes contextScan { 55%,100% { transform: translateX(calc(100vw + 220px)); } }
.copilot-context-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.copilot-context-head__states { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.copilot-context-head__vision { color: var(--c-mute); font-size: 8px; letter-spacing: .11em; white-space: nowrap; }
.copilot-context-head__vision[data-state="ready"],
.copilot-context-head__vision[data-state="attached"] { color: var(--c-cyan); text-shadow: 0 0 12px rgba(95,215,255,.35); }
.copilot-context-head__vision[data-state="capturing"] { color: var(--c-amber); }
.copilot-context-head__vision[data-state="unavailable"],
.copilot-context-head__vision[data-state="off"] { color: #748696; }
.copilot-context-head__state { color: var(--c-green); font-size: 8px; letter-spacing: .11em; }
.copilot-context { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; margin: 0; }
.copilot-context > div { min-width: 0; padding: 7px 8px; border: 1px solid rgba(120,180,220,.11); border-radius: 5px; background: rgba(2,8,15,.52); }
.copilot-context dt { color: var(--c-mute); font-family: var(--ff-mono); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }
.copilot-context dd { margin: 4px 0 0; color: var(--c-white); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copilot-watch { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 7px 9px; border-left: 2px solid var(--c-green); background: rgba(74,222,128,.055); }
.copilot-watch[data-level="caution"] { border-left-color: var(--c-amber); background: rgba(251,191,36,.075); }
.copilot-watch[data-level="warning"] { border-left-color: var(--c-red); background: rgba(248,113,113,.08); }
.copilot-watch__label { color: var(--c-green); font-size: 8px; letter-spacing: .14em; }
.copilot-watch[data-level="caution"] .copilot-watch__label { color: var(--c-amber); }
.copilot-watch[data-level="warning"] .copilot-watch__label { color: var(--c-red); }
.copilot-watch__text { color: #c9d4dc; font-size: 10px; }
.copilot-console { display: flex; flex-direction: column; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(2,8,18,.55); }
.copilot-console__bar { display: flex; align-items: center; gap: 9px; min-width: 0; }
.copilot-modes { flex: 0 0 auto; display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #030a12; }
.copilot-mode { padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--c-mute); font-family: var(--ff-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em; cursor: pointer; }
.copilot-mode.is-active { background: rgba(95,215,255,.13); color: var(--c-cyan); box-shadow: 0 0 12px rgba(95,215,255,.08) inset; }
.copilot-mode:focus-visible { outline: 1px solid var(--c-cyan); outline-offset: 2px; }
.copilot-vision-toggle { flex: 0 0 auto; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(95,215,255,.26); border-radius: 6px; background: rgba(95,215,255,.07); color: var(--c-cyan); font-family: var(--ff-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; cursor: pointer; }
.copilot-vision-toggle[aria-pressed="false"] { border-color: var(--line); background: transparent; color: var(--c-mute); }
.copilot-vision-toggle:hover,
.copilot-vision-toggle:focus-visible { border-color: rgba(95,215,255,.55); outline: none; }
.copilot-prompts { min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.copilot-prompts::-webkit-scrollbar { display: none; }
.copilot-prompts button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(120,180,220,.16); border-radius: 999px; background: rgba(255,255,255,.025); color: #aab8c4; font-size: 9px; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.copilot-prompts button:hover,
.copilot-prompts button:focus-visible { border-color: rgba(95,215,255,.44); color: var(--c-cyan); background: rgba(95,215,255,.08); outline: none; }
.copilot-body:not([data-ai-mode="learn"]) .copilot-prompts [data-ai-mode="learn"],
.copilot-body[data-ai-mode="learn"] .copilot-prompts [data-ai-mode="assist"] { display: none; }
.copilot-advisory { margin: 0; color: #68798a; font-size: 9px; line-height: 1.4; }
.copilot-ask-out:not([hidden]) { animation: copilotResponseIn 300ms var(--ease-out) both; }
@keyframes copilotResponseIn { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 1100px) { .copilot-context { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 720px) {
  .copilot-context { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .copilot-console__bar { align-items: stretch; flex-direction: column; }
  .copilot-modes,
  .copilot-vision-toggle { width: fit-content; min-height: 44px; }
  .copilot-prompts { width: 100%; }
}
@media (max-width: 380px) {
  .copilot-context { grid-template-columns: 1fr; }
  .copilot-context-head { align-items: flex-start; flex-direction: column; }
  .copilot-context-head__states { width: 100%; justify-content: space-between; }
}

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