/* ============================================================
   АЭРОНАВ — Кокпит «Полёт» (светлая тема, раскладка 1:1 с референсом)
   Шапка · 3 колонки · футер. Границы окон тянутся мышью.
   ============================================================ */
:root { --ck-gap: 10px; }

/* при активном кокпите прячем глобальную шапку и нав-рейку — полноэкранная кабина */
[data-cockpit="1"] .topbar,
[data-cockpit="1"] .nav { display: none !important; }
[data-cockpit="1"] .work { grid-column: 1 / -1 !important; grid-row: 1 / -1 !important; padding: 0 !important; }
[data-cockpit="1"] .work-pad { padding: 0 !important; height: 100vh; }

.cockpit { display: grid; grid-template-rows: auto 1fr auto; height: 100vh;
  background: var(--surface-secondary); color: var(--text-primary);
  font-family: var(--font-ui, system-ui); }

/* ---------- шапка ---------- */
.ck-header { display: flex; align-items: center; gap: 18px; padding: 8px 16px;
  background: var(--surface-primary); border-bottom: 1px solid var(--border-default); }
.ck-brand { display: flex; align-items: center; gap: 10px; }
.ck-brand .mk { width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--blue); border-radius: 8px; color: #fff; }
.ck-brand .mk svg { width: 18px; height: 18px; }
.ck-brand .wm { line-height: 1.05; }
.ck-brand .wm b { font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--text-primary); }
.ck-brand .wm i { display: block; font-style: normal; font-size: 9px; letter-spacing: .16em; color: var(--text-tertiary); }
.ck-sep { width: 1px; height: 30px; background: var(--border-default); }
.ck-stat { display: flex; flex-direction: column; line-height: 1.15; }
.ck-stat .k { font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); }
.ck-stat .v { font-size: 13px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); }
.ck-stat .v.blue { color: var(--blue); } .ck-stat .v.amber { color: var(--amber); } .ck-stat .v.green { color: var(--green); }
.ck-spacer { flex: 1; }
.ck-rec { display: flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 8px;
  background: var(--red-wash); border: 1px solid rgba(217,45,32,.28); }
.ck-rec .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(217,45,32,.18); animation: ckpulse 1.6s infinite; }
.ck-rec .lb { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--red-emergency); font-weight: 700; line-height: 1.1; }
.ck-rec .tm { font-family: var(--font-mono); font-weight: 800; font-size: 15px; color: var(--red-emergency); }
@keyframes ckpulse { 50% { opacity: .35; } }
.ck-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px;
  border: 1px solid var(--border-default); background: var(--surface-primary); color: var(--text-secondary); cursor: pointer; position: relative; }
.ck-ico:hover { border-color: var(--blue); color: var(--blue); }
.ck-ico .badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: 8px; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.ck-av { width: 34px; height: 34px; border-radius: 8px; background: var(--blue-wash); color: var(--blue);
  display: grid; place-items: center; font-weight: 800; font-size: 12px; }

/* ---------- тело: 3 колонки с ресайзом ---------- */
.ck-body { display: grid; grid-template-columns: var(--ck-lw, 300px) 6px minmax(0,1fr) 6px var(--ck-rw, 340px);
  gap: 0; padding: var(--ck-gap); overflow: hidden; min-height: 0; }
.ck-col { display: flex; flex-direction: column; gap: var(--ck-gap); overflow-y: auto; min-height: 0; padding-right: 2px; }
.ck-col.center { padding: 0 var(--ck-gap); overflow: hidden; }

/* вертикальный разделитель (тянется) */
.ck-vsplit { cursor: col-resize; display: grid; place-items: center; }
.ck-vsplit::before { content: ""; width: 3px; height: 40px; border-radius: 3px; background: var(--border-strong); transition: background .15s; }
.ck-vsplit:hover::before { background: var(--blue); }

/* ---------- карточка ---------- */
.ck-card { background: var(--surface-primary); border: 1px solid var(--border-default);
  border-radius: 10px; box-shadow: 0 1px 2px rgba(20,40,70,.04); display: flex; flex-direction: column; }
.ck-card > .h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); }
.ck-card > .h .t { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.ck-card > .h .meta { margin-left: auto; font-size: 11px; font-family: var(--font-mono); color: var(--text-tertiary); }
.ck-card > .b { padding: 11px 12px; }
.ck-card.flush > .b { padding: 0; }

/* строка метрики (светлая) */
.ck-m { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.ck-m + .ck-m { border-top: 1px solid var(--border-subtle); }
.ck-m .k { font-size: 11.5px; color: var(--text-secondary); }
.ck-m .v { font-size: 13px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); }
.ck-m .v.green { color: var(--green); } .ck-m .v.amber { color: var(--amber); } .ck-m .v.red { color: var(--red); }
.ck-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }

/* доверие-бар */
.ck-bar { height: 6px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; margin: 6px 0 3px; }
.ck-bar i { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.ck-scale { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-tertiary); font-family: var(--font-mono); }

/* ---------- центр ---------- */
.ck-center { display: grid; grid-template-rows: minmax(0,var(--ck-vh, 1fr)) 6px minmax(120px, var(--ck-lh, 250px)); height: 100%; }
.ck-hsplit { cursor: row-resize; display: grid; place-items: center; }
.ck-hsplit::before { content: ""; height: 3px; width: 40px; border-radius: 3px; background: var(--border-strong); transition: background .15s; }
.ck-hsplit:hover::before { background: var(--blue); }

.ck-video { position: relative; background: #05070a; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border-default); min-height: 0; }
.ck-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-video .hud-layer { position: absolute; inset: 0; width: 100%; height: 100%; }

/* фрост-оверлеи поверх видео (светлые) */
.vov { position: absolute; background: rgba(248,250,252,.82); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.6); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.25); color: #17324a; }
.vov .k { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #5b7488; }
.vov .v { font-family: var(--font-mono); font-weight: 800; color: #0f2436; }
.v-live { top: 12px; left: 12px; padding: 5px 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 7px; letter-spacing: .05em; }
.v-live .d { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.v-cam { top: 12px; right: 12px; padding: 7px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 10px; }
.v-cam b { color: #0f2436; }
.v-hdgtape { top: 12px; left: 50%; transform: translateX(-50%); padding: 5px 12px; display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: #5b7488; }
.v-hdgtape .cur { background: #0f2436; color: #fff; padding: 2px 9px; border-radius: 5px; font-weight: 800; font-size: 13px; }
.v-tape { top: 50%; transform: translateY(-50%); padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; color: #5b7488; min-width: 54px; }
.v-tape.l { left: 12px; } .v-tape.r { right: 12px; }
.v-tape .cur { background: #0f2436; color: #fff; padding: 3px 7px; border-radius: 5px; font-weight: 800; font-size: 14px; }
.v-tape .u { font-size: 8px; letter-spacing: .1em; }
.v-wind { bottom: 58px; left: 12px; padding: 8px 11px; text-align: center; }
.v-wind .v { font-size: 15px; } .v-wind .ar { font-size: 16px; color: #0f2436; }
.v-wp { bottom: 58px; right: 12px; padding: 9px 12px; min-width: 150px; }
.v-wp .ttl { font-weight: 800; color: #0f2436; margin-bottom: 5px; font-family: var(--font-mono); }
.v-wp .r { display: flex; justify-content: space-between; font-size: 11px; padding: 1px 0; }
.v-wp .r span:first-child { color: #5b7488; } .v-wp .r span:last-child { font-family: var(--font-mono); font-weight: 700; color: #0f2436; }
.v-metrics { position: absolute; left: 12px; right: 12px; bottom: 10px; display: grid; grid-template-columns: repeat(4,1fr);
  background: rgba(248,250,252,.85); backdrop-filter: blur(6px); border-radius: 8px; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.v-metrics > div { padding: 7px 12px; border-right: 1px solid rgba(120,150,175,.22); }
.v-metrics > div:last-child { border-right: 0; }
.v-metrics .k { font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: #5b7488; }
.v-metrics .v { font-family: var(--font-mono); font-weight: 800; font-size: 15px; color: #0f2436; }
.v-toggles { position: absolute; left: 12px; bottom: 74px; display: flex; gap: 6px; }
.ck-pill { background: rgba(248,250,252,.9); border: 1px solid rgba(120,150,175,.3); color: #34506a; border-radius: 7px;
  padding: 4px 10px; font-size: 11px; cursor: pointer; user-select: none; }
.ck-pill:hover { border-color: var(--blue); color: var(--blue); }
.ck-pill.on { background: var(--blue); color: #fff; border-color: var(--blue); }

/* нижний ряд центра: карта · профиль · журнал */
.ck-lower { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--ck-gap); min-height: 0; }
.ck-lower .ck-card { min-height: 0; overflow: hidden; }
.ck-lower .ck-card > .b { overflow: auto; flex: 1; }
.ck-map { position: relative; height: 100%; min-height: 120px; }
.ck-map .mlmap, .ck-map .leafletmap { position: absolute; inset: 0; border-radius: 0 0 10px 10px; }
.ck-baseswitch { position: absolute; top: 8px; left: 8px; z-index: 5; display: flex; gap: 3px;
  background: rgba(248,250,252,.9); backdrop-filter: blur(6px); border: 1px solid var(--border-default);
  border-radius: 8px; padding: 3px; box-shadow: 0 2px 8px rgba(20,40,70,.12); }
.ck-baseswitch button { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; font-family: var(--font-ui); }
.ck-baseswitch button:hover { color: var(--text-primary); background: var(--surface-secondary); }
.ck-baseswitch button.on { background: var(--blue); color: #fff; }

/* профиль высоты (svg) */
.ck-prof { width: 100%; height: auto; }
.ck-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 12px 10px; font-size: 10px; color: var(--text-secondary); }
.ck-legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid; margin-right: 4px; vertical-align: middle; }

/* журнал событий */
.ck-log { display: flex; flex-direction: column; }
.ck-log .e { display: flex; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 11.5px; align-items: baseline; }
.ck-log .e .tm { font-family: var(--font-mono); color: var(--text-tertiary); font-size: 10.5px; white-space: nowrap; }
.ck-log .e .tx { color: var(--text-primary); }
.ck-log .e .dt { width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; flex: none; }
.ck-log .e.info .dt { background: var(--blue); } .ck-log .e.warn .dt { background: var(--amber); } .ck-log .e.crit .dt { background: var(--red); } .ck-log .e.ok .dt { background: var(--green); }

/* ---------- маршрут (таблица) ---------- */
.ck-rt { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ck-rt th { text-align: left; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border-default); }
.ck-rt td { padding: 7px 8px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); }
.ck-rt td.mono { font-family: var(--font-mono); }
.ck-rt tr.active td { background: var(--blue-wash); }
.ck-rt .st-ok { color: var(--green); } .ck-rt .st-cur { color: var(--blue); } .ck-rt .st-next { color: var(--text-tertiary); }

/* визуальные ориентиры (плитки) */
.ck-lms { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.ck-lm { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); cursor: pointer; background: var(--surface-secondary); }
.ck-lm:hover { border-color: var(--blue); }
.ck-lm .thumb { height: 46px; display: grid; place-items: center; color: #fff; }
.ck-lm .cap { padding: 4px 6px; font-size: 9.5px; line-height: 1.2; color: var(--text-secondary); }
.ck-lm .cap b { display: block; color: var(--text-primary); font-size: 10.5px; font-weight: 600; }

/* состояние систем */
.ck-sys { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }
.ck-sys .s { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 2px 0; }
.ck-sys .s .n { color: var(--text-secondary); }
.ck-sys .s .st { font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--green); }
.ck-allsys { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; }
.ck-allsys b { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.ck-chip-ok { background: var(--green-wash); color: var(--green); border-radius: 6px; padding: 3px 10px; font-size: 11px; font-weight: 700; }

/* чёрный ящик */
.ck-bb .c { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); }
.ck-bb .c .ic { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-sunken); display: grid; place-items: center; color: var(--text-secondary); flex: none; }
.ck-bb .c .ic svg { width: 15px; height: 15px; }
.ck-bb .c .nm { flex: 1; } .ck-bb .c .nm b { display: block; font-size: 12px; color: var(--text-primary); }
.ck-bb .c .nm i { font-style: normal; font-size: 10px; color: var(--text-tertiary); }
.ck-bb .c .rec { font-size: 10px; font-weight: 700; color: var(--green); letter-spacing: .04em; }
.ck-mem { margin-top: 9px; }
.ck-mem .row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.ck-mem .row b { font-family: var(--font-mono); color: var(--text-primary); }

/* ---------- футер ---------- */
.ck-footer { display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--surface-primary); border-top: 1px solid var(--border-default); }
.ck-fbtn { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border-default); background: var(--surface-primary); color: var(--text-secondary);
  font-size: 12px; font-weight: 600; cursor: pointer; }
.ck-fbtn svg { width: 15px; height: 15px; color: var(--blue); }
.ck-fbtn:hover { border-color: var(--blue); color: var(--text-primary); background: var(--blue-wash); }
.ck-fbtn.emg { margin-left: auto; border-color: rgba(217,45,32,.4); color: var(--red-emergency); background: var(--red-wash); }
.ck-fbtn.emg svg { color: var(--red); }
.ck-fbtn.emg:hover { background: #fbdcd9; }

/* инструментальные боксы (стеклянные) остаются тёмными — как на референсе */
.cockpit .ah-box { background: #0c1a2b; border-radius: 8px; overflow: hidden; }

/* автопилот-строка в светлой теме */
.cockpit .ap-strip { display: flex; flex-wrap: wrap; gap: 5px; }
.cockpit .ap-mode { background: var(--surface-sunken); color: var(--text-secondary); border: 1px solid var(--border-default);
  border-radius: 6px; padding: 3px 8px; font-size: 10.5px; font-family: var(--font-mono); }
.cockpit .ap-mode b { color: var(--text-primary); }
.cockpit .ap-mode.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.cockpit .ap-mode.grn { background: var(--green-wash); color: var(--green); border-color: rgba(34,164,71,.3); }

/* навигация по ориентирам — светлые цвета поверх тёмных дефолтов */
.cockpit .vision-nav { border-top: 1px dashed var(--border-default); }
.cockpit .vn-head { color: var(--text-primary); } .cockpit .vn-head b { color: var(--text-primary); }
.cockpit .vn-head.alert { color: var(--amber); }
.cockpit .vn-sub { color: var(--text-tertiary); } .cockpit .vn-sub b { color: var(--text-primary); }
.cockpit .vn-bar { background: var(--surface-sunken); }
.cockpit .vn-conf.grn, .cockpit .vn-bar i.grn { color: var(--green); }
.cockpit .vn-bar i.grn { background: var(--green); }
.cockpit .wp-chip { color: var(--text-secondary); border-color: var(--border-strong); }
.cockpit .wp-chip.on { background: var(--blue-wash); border-color: var(--blue); color: var(--blue); }
.cockpit .lm-row { background: var(--surface-secondary); border-color: var(--border-default); }
.cockpit .lm-row.locked { background: var(--green-wash); border-color: rgba(34,164,71,.4); }
.cockpit .lm-name { color: var(--text-primary); } .cockpit .lm-name i { color: var(--text-tertiary); }
.cockpit .lm-dist { color: var(--text-primary); } .cockpit .lm-badge { color: var(--text-tertiary); }
.cockpit .lm-row.locked .lm-badge { color: var(--green); }
.cockpit .vn-hint { color: var(--text-tertiary); } .cockpit .vn-hint b { color: var(--text-secondary); }
.cockpit .lm-row .lm-ic svg { color: var(--text-tertiary); } .cockpit .lm-row.locked .lm-ic svg { color: var(--green); }