/* VCC base + компоненти (docs/design/design-system.md §3–7). Кольори — лише через tokens.css. Після змін — Ctrl+F5. */
@import url("tokens.css");
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{color-scheme:dark}
body{background:var(--bg);color:var(--fg);font:400 14px/1.5 var(--ui);padding:16px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px}
a{color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.app{max-width:1240px;margin:0 auto}
[hidden]{display:none!important}
.sr{position:absolute;left:-9999px}

/* геометрія */
.bevel{clip-path:polygon(0 0,calc(100% - var(--bevel)) 0,100% var(--bevel),100% 100%,0 100%)}
.bevel-l{clip-path:polygon(var(--bevel) 0,100% 0,100% 100%,0 100%,0 var(--bevel))}
.brackets{position:relative}
.brackets::before,.brackets::after{content:'';position:absolute;width:var(--bracket);height:var(--bracket);border:1px solid var(--edge);pointer-events:none}
.brackets::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.brackets::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* типографіка (ролі) */
.lbl{display:block;font:500 9px/1 var(--ui);color:var(--fg3);letter-spacing:.16em;text-transform:uppercase}
.h2{font:600 13px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase}
.mono{font-family:var(--mono)}
.mut{color:var(--fg2)} .dim{color:var(--fg3)}
.txt{font:400 13px/1.5 var(--ui);color:var(--fg2)}
u.unit{text-decoration:none;font-size:11px;font-weight:500;color:var(--fg3)}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}

/* шапка */
.bar{display:flex;align-items:stretch;gap:1px;background:var(--hair);margin-bottom:1px;flex-wrap:wrap}
.bar>*{background:var(--panel);padding:10px 16px;display:flex;align-items:center;min-height:var(--hit)}
.logo{gap:10px;padding-left:14px!important;text-decoration:none;color:var(--fg)}
.logo i{width:26px;height:26px;display:grid;place-items:center;font:700 14px/1 var(--disp);color:var(--bg);background:var(--amber);font-style:normal;
  clip-path:polygon(20% 0,80% 0,100% 50%,80% 100%,20% 100%,0 50%)}
.logo b{font:700 15px/1 var(--disp);letter-spacing:.1em}
.logo b em{color:var(--amber);font-style:normal}
.unit{flex:1;gap:14px;flex-wrap:wrap}
.unit .nm{font:600 16px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.unit .meta{font:400 11px/1 var(--mono);color:var(--fg3);letter-spacing:.04em;text-transform:uppercase}
.who{gap:8px;font:500 12px/1 var(--ui);color:var(--fg2)}
.who i{width:6px;height:6px;background:var(--ok);font-style:normal;box-shadow:0 0 6px var(--ok)}
.who i.off{background:var(--off);box-shadow:none}

/* прилад: панелі, розділені волосяною лінією */
.deck{display:grid;gap:1px;background:var(--hair)}

.panel{background:var(--panel)}
.panel .hd{display:flex;align-items:baseline;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.panel .hd .cnt{font:500 10px/1 var(--mono);color:var(--fg3);letter-spacing:.1em;text-transform:uppercase}
.panel .bd{padding:12px 16px}
.stack{display:flex;flex-direction:column;gap:1px;background:var(--hair)}
.stack>.panel{background:var(--panel)}

/* StatusBlock */
.blk{background:var(--panel);padding:10px 13px 11px}
.blk .val{font:700 21px/1.15 var(--mono);margin-top:5px;letter-spacing:-.02em;color:var(--fg)}
.blk .val u{text-decoration:none;font-size:11px;font-weight:500;color:var(--fg3)}
.blk .gauge{height:3px;background:var(--track);margin-top:8px;position:relative}
.blk .gauge i{position:absolute;top:0;bottom:0;left:0;font-style:normal;width:0}
.blk .gauge i.ok{background:var(--ok);box-shadow:0 0 7px var(--ok)}
.blk .gauge i.warn{background:var(--warn);box-shadow:0 0 7px var(--warn)}
.blk .gauge i.bad{background:var(--bad);box-shadow:0 0 7px var(--bad)}
.blk .gauge i.off{background:var(--off)}
.blk .note{display:block;margin-top:6px;font:500 10px/1.3 var(--mono);color:var(--fg2);letter-spacing:.03em;text-transform:uppercase}
.blk.warn{background:linear-gradient(180deg,var(--warn-tint),transparent 60%),var(--panel)}
.blk.warn .val{color:var(--warn)}
.blk.bad{background:linear-gradient(180deg,var(--bad-tint),transparent 60%),var(--panel)}
.blk.bad .val{color:var(--bad)}
.blk.off .val{color:var(--fg3)}

/* StateBadge — вертикальна смуга зі свіченням + слово */
.st{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 var(--ui)}
.st i{width:5px;height:12px;font-style:normal;flex:none}
.st.ok i{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.st.warn i{background:var(--warn);box-shadow:0 0 6px var(--warn)}
.st.bad i{background:var(--bad);box-shadow:0 0 6px var(--bad)}
.st.off i{background:var(--off)}
.st.ok{color:var(--fg)}.st.warn{color:var(--warn)}.st.bad{color:var(--bad)}.st.off{color:var(--fg3)}

/* Іконки VCC HUD Icons 1.0 (design-system §6.9, T-270): спрайт нашого origin, mono — колір через currentColor.
   Стан — колір стану + слово поруч; «невідомо»/вимкнено — --fg2. Без тіней і фільтрів на SVG. */
.ico{display:inline-block;flex:none;vertical-align:middle;color:inherit;overflow:visible}
.st .ico{margin:-6px 0}  /* 32 px у рядку таблиці: не роздуває висоту рядка більше, ніж треба */
.st.ok .ico{color:var(--ok)}.st.warn .ico{color:var(--warn)}.st.bad .ico{color:var(--bad)}.st.off .ico{color:var(--fg2)}
.lbl-ico{display:flex;align-items:center;gap:8px}
.blk.ok .lbl-ico .ico{color:var(--ok)}.blk.warn .lbl-ico .ico{color:var(--warn)}.blk.bad .lbl-ico .ico{color:var(--bad)}.blk.off .lbl-ico .ico{color:var(--fg2)}
.kind-ico{display:inline-flex;align-items:center;gap:8px}
.kind-ico .ico{color:var(--fg2)}
/* Відступ над рядком дій класом, а не style= (CSP без 'unsafe-inline', T-270) */
.mt10{margin-top:10px}

/* Button: hot | default | kill. Статусними кольорами не фарбуються. */
button,.btn{font:600 12px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;min-height:var(--hit);padding:0 14px;
  border:1px solid var(--edge);background:var(--btn);color:var(--fg);transition:.12s;
  clip-path:polygon(0 0,calc(100% - var(--bevel-btn)) 0,100% var(--bevel-btn),100% 100%,0 100%);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
button:hover,.btn:hover{background:var(--btn-hover);border-color:var(--edge-hover)}
button:disabled{opacity:.45;cursor:not-allowed}
button.hot{background:var(--amber);border-color:var(--amber);color:var(--on-amber);box-shadow:0 0 18px var(--amber-hot-shadow)}
button.hot:hover{background:var(--amber-hot);border-color:var(--amber-hot)}
button.kill{color:var(--bad);border-color:var(--bad-edge);background:var(--bad-tint)}
button.kill:hover{background:var(--bad-tint-hover);border-color:var(--bad)}
button.pending{opacity:.7;cursor:progress}  /* до підтвердження з борту */
button.active{border-color:var(--amber);box-shadow:inset 0 -2px 0 var(--amber)}
.cabin button{min-height:var(--hit-cabin)}
.acts{background:var(--panel);padding:11px 13px;display:grid;gap:7px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* DangerZone */
.arm{background:var(--panel);padding:11px 13px;border-top:1px solid var(--bad-line)}
.arm p{font:500 10px/1.45 var(--ui);color:var(--fg3);margin-bottom:8px}
.arm button.kill{width:100%}

/* форми */
/* Верстка 2026-10-09: поле не ширше за свою комірку — довгий пункт селекта («420000 (CRSF, фіксовано прошивкою)»)
   розтягував select поверх сусіднього поля в сітці grid4; min-width:0 знімає авто-мінімум grid-елемента. */
label.f{display:grid;gap:5px;min-width:0}
label.f>input,label.f>select,label.f>textarea{width:100%;min-width:0}
input,select,textarea{font:400 13px/1.4 var(--mono);color:var(--fg);background:var(--void);border:1px solid var(--hair);padding:0 10px;min-height:var(--hit)}
textarea{padding:8px 10px;min-height:96px;resize:vertical;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:2px;border-color:var(--amber)}
.err{font:400 12px/1.4 var(--ui);color:var(--bad)}
.msg{min-height:1.4em;font:500 12px/1.4 var(--mono);padding:6px 0}
input[type=checkbox]{min-height:0;width:18px;height:18px;accent-color:var(--amber)}
code,pre{font-family:var(--mono);font-size:12px}
pre{white-space:pre-wrap;color:var(--fg2);max-height:18em;overflow:auto;padding:8px 10px;background:var(--void)}

/* таблиці */
table{width:100%;border-collapse:collapse}
th{font:500 9px/1 var(--ui);color:var(--fg3);letter-spacing:.16em;text-transform:uppercase;text-align:left;padding:9px 16px;border-bottom:1px solid var(--hair)}
td{padding:10px 16px;border-bottom:1px solid var(--row-hair);font-size:13px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel-2)}
tbody tr.live{box-shadow:inset 3px 0 0 var(--amber)}
td.nm{font:600 13px/1.3 var(--disp);letter-spacing:.04em;text-transform:uppercase}
td.nm small{display:block;font:400 10px/1.4 var(--mono);color:var(--fg3);letter-spacing:.04em;text-transform:uppercase}
td.n{font:500 12px/1 var(--mono);color:var(--fg2)}
td .row{gap:6px}

/* модалка підтвердження */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;z-index:50;padding:16px}
.modal .box{background:var(--panel);padding:18px 18px 16px;max-width:440px;width:100%;border-top:1px solid var(--bad-line)}
.modal .box p{font:400 13px/1.5 var(--ui);color:var(--fg2);margin:8px 0 12px}
.modal .box .row{justify-content:flex-end;margin-top:12px}
/* ADR-0057 (зразок Р8): «що відомо» рядками, дрібна примітка, смуга за станом */
.modal .box.tone-ok{border-top-color:var(--ok)} .modal .box.tone-warn{border-top-color:var(--warn)} .modal .box.tone-bad{border-top-color:var(--bad)}
.modal .cm-why{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:10px 0 4px;font:500 12px/1.4 var(--mono);color:var(--fg)}
.modal .cm-why dt{color:var(--fg2);font:600 10px/1.6 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.modal .cm-why dd{margin:0;min-width:0;overflow-wrap:anywhere} .modal .cm-why dd.c-ok{color:var(--ok)} .modal .cm-why dd.c-warn{color:var(--warn)} .modal .cm-why dd.c-bad{color:var(--bad)}
.modal .box p.cm-note{font-size:12px;margin-top:-6px}

/* кабіна: кадр, OSD, домінанта (Р4-1, T-377: бокової панелі немає — кадр на всю ширину) */
.cabin .deck{grid-template-columns:minmax(0,1fr)}
.stage{display:grid;gap:1px;background:var(--hair)}
.stage.two{grid-template-rows:1fr 1fr}
.view{position:relative;aspect-ratio:16/9;background:var(--void);overflow:hidden}
.view video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--void);display:block}
.view.frozen video{filter:brightness(.6)}
.view .scan{position:absolute;left:0;right:0;height:90px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--scan),transparent);animation:scan 7s linear infinite}
@keyframes scan{from{top:-90px}to{top:100%}}
.reticle{position:absolute;inset:var(--reticle-inset);pointer-events:none}
.reticle i{position:absolute;width:22px;height:22px;border:1px solid var(--reticle);font-style:normal}
.reticle i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.reticle i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.reticle i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.reticle i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.cross{position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);pointer-events:none}
.cross::before,.cross::after{content:'';position:absolute;background:var(--cross)}
.cross::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.cross::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.osd{position:absolute;inset:0;font-family:var(--mono);pointer-events:none;text-shadow:0 1px 4px var(--shadow),0 0 12px rgba(0,0,0,.7)}
.osd .cell{position:absolute;max-width:46%}
.osd .lbl{color:var(--osd-lbl);line-height:1.3}
.osd .val{font:700 22px/1.05 var(--mono);letter-spacing:-.01em;color:var(--fg)}
.osd .val u{text-decoration:none;font-size:12px;font-weight:500;color:var(--fg2)}
.osd .val.ok{color:var(--ok)}.osd .val.warn{color:var(--warn)}.osd .val.bad{color:var(--bad)}.osd .val.off{color:var(--fg3)}
.osd .tl{top:var(--osd-inset-y);left:var(--osd-inset-x)} .osd .tr{top:var(--osd-inset-y);right:var(--osd-inset-x);text-align:right}
.osd .bl{bottom:var(--osd-inset-y);left:var(--osd-inset-x)} .osd .br{bottom:var(--osd-inset-y);right:var(--osd-inset-x);text-align:right}
.osd .tag{position:absolute;top:12px;left:50%;transform:translateX(-50%);font:500 9px/1 var(--ui);color:var(--osd-lbl);letter-spacing:.16em;text-transform:uppercase}
.pulse{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);text-align:center}
.pulse .lbl{letter-spacing:.22em;color:var(--osd-lbl-dom)}
.pulse .val{font-size:46px;font-weight:800;color:var(--ok);text-shadow:0 0 22px var(--ok-glow),0 2px 6px var(--shadow)}
.pulse .val.warn{color:var(--warn);text-shadow:0 0 22px var(--warn),0 2px 6px var(--shadow)}
.pulse .val.bad{color:var(--bad);text-shadow:0 0 22px var(--bad),0 2px 6px var(--shadow)}
.pulse .val.off{color:var(--fg3);text-shadow:0 2px 6px var(--shadow)}
.pulse .bar-mini{width:150px;height:2px;background:var(--track-2);margin:7px auto 0;position:relative;overflow:hidden}
.pulse .bar-mini i{position:absolute;inset:0 62% 0 0;background:var(--ok);font-style:normal;box-shadow:0 0 8px var(--ok);animation:breathe 2.4s ease-in-out infinite}
.pulse .bar-mini i.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.pulse .bar-mini i.bad{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.pulse .bar-mini i.off{background:var(--off);box-shadow:none;animation:none}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
@media(max-width:600px){.osd .val{font-size:16px}.pulse .val{font-size:34px}.osd .tl,.osd .bl{left:16px}.osd .tr,.osd .br{right:16px}.osd .tl,.osd .tr{top:16px}.osd .bl,.osd .br{bottom:16px}}

/* VideoState — три окремі стани (§6.6) */
.vstate{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;font:700 15px/1.4 var(--disp);letter-spacing:.14em;text-transform:uppercase}
.vstate.camera_dead{background:var(--void);color:var(--fg2)}
.vstate.standby{background:var(--void);color:var(--fg3)}
.vstate.not_shown{background:var(--void);color:var(--fg3)}
.vstate.frozen{background:rgba(0,0,0,.4);color:var(--warn)}
.vstate.repeating{background:rgba(0,0,0,.55);color:var(--warn)}
.vstate.link_lost{color:var(--bad);box-shadow:inset 0 0 0 3px var(--bad)}
.vstate small{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--fg2);text-transform:none;margin-top:6px}
.cabin.link_lost{box-shadow:inset 0 0 0 3px var(--bad)}  /* червона межа всього екрана */

@media(prefers-reduced-motion:reduce){.view .scan,.pulse .bar-mini i{animation:none}}

/* ADR-0036 п. 4: збережене налаштування борту не діє — попередження (стан системи: --warn), кабінет і кабіна */
.setwarn{flex:none;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:6px 12px;border-left:2px solid var(--warn);background:var(--warn-tint);font:400 12px/1.45 var(--ui);color:var(--fg)}
.setwarn[hidden]{display:none}
.setwarn b{color:var(--warn);font:600 11px/1.45 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.setwarn .ln{flex:1 1 100%;overflow-wrap:anywhere}
.setwarn a{color:var(--fg2)}